Використання редактора блоків WordPress (Gutenberg) з REST API

У моїй попередній статті я розповідав про те, як переглядати публікації та спеціальні типи публікацій у Gutenberg. У цій публікації я розповідаю про отримання та використання спеціальних даних у Gutenberg із кінцевих точок WordPress REST API.

У цьому прикладі ми збираємося:

REST API не завжди правильний шлях.

*Ми використовуємо get_optionREST API лише як приклад. Якщо вам потрібен лише доступ до параметра, і ви не маєте наміру змінювати його стан, натомість ви можете використовувати wp_localize_scriptдля передачі параметрів у JavaScript.

Якщо ви хочете отримати доступ до опції ТА змінити її стан, я рекомендую прочитати мій посібник із збереження налаштувань і даних у таблиці опцій за допомогою Gutenberg за допомогою API налаштувань .*

Створення кінцевої точки REST API

Ми збираємося створити просту кінцеву точку REST API, яка повертає значення опції WordPress (за допомогою get_option).

function wcltd_get_option() {
    register_rest_route(
        'wcltd/wholesome-plugin/v1',
        '/get/option/(?P<option>([A-Za-z0-9_])+)/',
        array(
            'callback'            => function ($request) {
                $option = isset( $request['option'] )? esc_attr( $request['option'] ): null;
                $value  = get_option( $option, '' );
                return $value;
            },
            'methods'             => 'GET',) );
}
add_action( 'rest_api_init', 'wcltd_get_option' );

Після того, як ви створите цю кінцеву точку, обов’язково повторно збережіть свої постійні посилання, щоб вона запрацювала. Зауважте, що є кращі способи зробити це (наприклад, використання flush_rewrite_rules()на register_activation_hook), але для цього прикладу буде достатньо швидкого повторного збереження.

Тепер, коли ми передаємо URL-адресу /wp-json/wcltd/wholesome-plugin/v1/get/option/test/(очевидно, після вашого власного домену) у наш браузер, він поверне значення, яке буде або порожнім рядком '', або значенням параметра, якщо встановлено.

Наша кінцева точка повертає порожній рядок Наша кінцева точка повертає порожній рядок

Зауважте, що я навмисно закоментував рядки 12-14, щоб гарантувати, що лише той, хто має edit_postправа, може запустити код, якщо його залишити. Однак із цим коментарем ми не можемо перевірити код у нашому браузері.

Спробуйте додати код, щоб надати параметру значення, і подивіться, що він повертає. Наприклад, якби я запустив наступний код перед моєю функцією:

update_option( 'wcltd_example_option', 'Hello World' );

Тепер, якщо я досягну кінцевої точки /wp-json/wcltd/wholesome-plugin/v1/get/option/wcltd_example_option/, я отримаю такий результат:

Наша кінцева точка повертає деякі дані.

Реєстрація сховища даних

Тепер, коли у нас є кінцева точка REST API, ми можемо створити сховище даних за допомогою registerStore.

registerStoreнадає Redux-подібне сховище даних, яке дозволяє нам керувати станом у нашій програмі. Він також підтримує резолвери, які дозволяють нам заповнювати стан із зовнішнього джерела (наприклад, нашого REST API).

Ви можете прочитати більше про стан REACT в офіційній документації.

Ось як ми можемо створити сховище (як store.jsу нашому проекті, яке дозволить нам отримувати дані з нашої кінцевої точки REST API.

Залежності

Нам потрібно буде витягнути apiFetchі registerStoreз наших залежностей WordPress.

import apiFetch from '@wordpress/api-fetch';
import { registerStore } from '@wordpress/data';

Селектори

Перше, що ми хочемо зробити, це створити функцію-селектор в об’єкті під назвою «селектори».

Все, що це робить, це вилучення «опції» зі стану та повернення її.

const selectors = {
    getOption( state, optionKey) {
        const { option } = state;
        return option;
    },
};

Резолвери

Резолвер є побічним ефектом селектора і робить трохи більше.

Тут ми створюємо нашу функцію, яка приймає наш optionKey і передає кінцеву точку REST API нашим діям (які ми визначимо далі).

Потім це встановлює опцію з іншим викликом наших дій.

const resolvers = {
    *getOption( optionKey) {
        const option = yield actions.getOption(
            '/wcltd/wholesome-plugin/v1/get/option/' + optionKey + '/',
        );
        return actions.setOption( option );
    },
};

Дії

Тут визначено дві функції в об’єкті з іменем actions, який ми викликали раніше.

Вони вказують, який елемент керування чи редуктор ми збираємося використовувати для встановлення чи отримання значення.

const actions = {
    setOption( option) {
        return {
            type: 'SET_OPTION',
            option,
        };
    },
    getOption( path) {
        return {
            type: 'GET_OPTION',
            path,
        };
    },
};

Елементи керування

У наших елементах керування ми маємо те, GET_OPTIONщо робить виклик API за допомогою apiFetchта шляху, які ми визначили раніше.

const controls = {
    GET_OPTION( action) {
        return apiFetch( { path: action.path } );
    },
};

Редуктор

У нашій функції редуктора ми маємо значення, SET_OPTIONяке приймає наше значення (в даному випадку optionі встановлює його стан.

function reducer( state = { option: '' }, action) {
    switch (action.type) {
        case 'SET_OPTION':
            return {
                ...state,
                option: action.option,
            };
    }
    return state;
};

Реєстрація магазину

Нарешті, ми реєструємо магазин, надаємо йому простір імен, щоб ми могли отримати до нього доступ, і передаємо об’єкт усіх вищезазначених об’єктів і функцій.

const store = registerStore(
    'wcltd/wholesome-plugin/data',
    {
        actions,
        controls,
        reducer,
        resolvers,
        selectors,
    }
);

export default store;

експортувати сховище за замовчуванням;

Використання даних із блоком

Давайте розширимо блок, створений @wordpress/create-blockсценарієм, про який я писав раніше, щоб ми могли підключитися до кінцевої точки REST API.

Створіть файл у /srcпапці під назвою store.jsта скопіюйте туди весь наведений вище код:

import apiFetch from '@wordpress/api-fetch';
import { registerStore } from '@wordpress/data';

const selectors = {
    getOption( state, optionKey) {
        const { option } = state;
        return option;
    },
};

const resolvers = {
    *getOption( optionKey) {
        const option = yield actions.getOption(
            '/wcltd/wholesome-plugin/v1/get/option/' + optionKey + '/',
        );
        return actions.setOption( option );
    },
};

const actions = {
    setOption( option) {
        return {
            type: 'SET_OPTION',
            option,
        };
    },
    getOption( path) {
        return {
            type: 'GET_OPTION',
            path,
        };
    },
};

const controls = {
    GET_OPTION( action) {
        return apiFetch( { path: action.path } );
    },
};

function reducer( state = { option: '' }, action) {
    switch (action.type) {
        case 'SET_OPTION':
            return {
                ...state,
                option: action.option,
            };
    }
    return state;
};

const store = registerStore(
    'wcltd/wholesome-plugin/data',
    {
        actions,
        controls,
        reducer,
        resolvers,
        selectors,
    }
);

export default store;

Тепер відредагуйте наш /src/index.jsфайл, щоб включити store.jsфайл:

import store from './store';
import Edit from './edit';
import save from './save';

Нам також потрібно переконатися, що ми включили withSelectу верхній частині нашого файлу:

import { withSelect } from '@wordpress/data';

Тоді давайте обернемо наш модуль редагування, withSelectщоб зробити виклик REST API нашої опції, ось так:

edit: withSelect( (select) => {
    const option = select( 'wcltd/wholesome-plugin/data' ).getOption( 'wcltd_example_option' );
    return {
        option,
    };
} )( Edit ),

Тепер ми можемо отримати доступ optionдо наших пропсів у edit.jsось так:

export default function Edit( { className, option }) {
    return (<p className={ className }>
            { option }
        </p>
    );
}

Нарешті, давайте переглянемо наш блок у редакторі та побачимо, що ми отримаємо:

Виведення в редактор блоків. Виведення в редактор блоків.