dev-resources.site

for different kinds of informations.

API Configuration & Data Fetching

Published at

2/21/2024

Essential Theme Files Overview

Organized as follows, the theme structure facilitates efficient management:

wp-content/themes/wp-rest
├── api/
│   ├── endpoints/
│   │   └── get_menu.php
│   └── endpoint-registration.php
├── blocks/
│   ├── textbox/
│   │   ├── acf.php
│   │   ├── block.json
│   │   └── preview.php
│   └── block-registration.php
├── config/
│   ├── block-access.php
│   ├── menus.php
│   └── setup.php
└── functions.php

`functions.php` Core Functionality

Central to theme operation, this file orchestrates the loading of various scripts.

// Include configuration files
require get_template_directory() . '/config/setup.php';
require get_template_directory() . '/config/block-access.php';
require get_template_directory() . '/config/menus.php';

// Include API endpoints and block methods
require get_template_directory() . '/api/endpoint-registration.php';
require get_template_directory() . '/blocks/block-registration.php';

Theme Setup in `setup.php`

Adjusts WordPress features to match project needs.

function wp_rest_setup() {
    remove_theme_support('core-block-patterns');
    add_theme_support('align-wide');
}
add_action('after_setup_theme', 'wp_rest_setup');

Block Access Management in `block-access.php`

Specifies block access based on user roles, enhancing content customization.

function wp_rest_define_block_groups() {
    $common_blocks = ['core/image', 'core/group', 'core/columns', 'acf/textbox'];
    $editor_blocks = array_merge($common_blocks, ['core/gallery']);
    $admin_blocks = array_merge($editor_blocks, ['core/code', 'core/html']);

    return ['administrator' => $admin_blocks, 'editor' => $editor_blocks, 'default' => $common_blocks];
}

function wp_rest_assign_block_groups($allowed_blocks, $post) {
    $block_groups = wp_rest_define_block_groups();
    $current_user = wp_get_current_user();

    return $block_groups[in_array('administrator', $current_user->roles) ? 'administrator' : (in_array('editor', $current_user->roles) ? 'editor' : 'default')];
}
add_filter('allowed_block_types_all', 'wp_rest_assign_block_groups', 10, 2);

Menu Configuration in `menus.php`

Registers menus within the theme for controlled navigation management.

function wp_rest_register_menus() {
    register_nav_menus([
        'overlay_menu' => esc_html__('Main Navigation', 'wp-rest'),
        'header_submenu' => esc_html__('Sub Navigation', 'wp-rest'),
        'footer_menu' => esc_html__('Footer Navigation', 'wp-rest'),
        'footer_submenu' => esc_html__('Footer Sub Navigation', 'wp-rest'),
    ]);
}
add_action('after_setup_theme', 'wp_rest_register_menus');

Block Registration Process in `block-registration.php`

Handles custom block registration, ensuring seamless integration.

require __DIR__ . '/textbox/acf.php';
require __DIR__ . '/textbox/preview.php';

function wp_rest_register_acf_blocks() {
    register_block_type(__DIR__ . '/textbox', [
        'render_callback' => 'textbox_block_render_callback',
    ]);
}
add_action('init', 'wp_rest_register_acf_blocks');

Advanced Custom Fields Setup in `acf.php`

Defines field groups programmatically for API visibility.
Dig into the ACF Documentation, or just export your ACF Field Groups via it's GUI to PHP and have a look at the generated code.
Alternatively you can stick with the GUI

Preview Functionality in `preview.php`

Offers a backend glimpse of custom blocks, aiding in layout decisions. Here's an example of a preview for a simple text box block:

Custom API Endpoint Creation in `endpoint-registration.php`

Explored further in Chapter 3, this script introduces tailored REST API endpoints.

Linking Astro to WordPress

This segment outlines the pivotal step of connecting Astro to WordPress, focusing on API interactions and data presentation.

Secure API Authentication

Ensure WordPress credentials are securely stored for API communication.

WORDPRESS_URL=https://your-wordpress-url.com
WORDPRESS_USER=your-username
WORDPRESS_SECRET=your-password

Axios Client Setup

Demonstrates configuring Axios for API requests, adaptable to alternative libraries.

import axios from 'axios';

const config = {
  baseURL: import.meta.env.WORDPRESS_STAGING_URL + '/wp-json/wp/v2/',
  headers: {
    'Content-Type': 'application/json',
  },
  auth: {
    username: import.meta.env.WORDPRESS_USER,
    password: import.meta.env.WORDPRESS_SECRET,
  },
};

export const fetchApi = axios.create(config);

fetchApi.interceptors.request.use(
  (config) => config,
  (error) => Promise.reject(error)
);