Использование редактора блоков WordPress (Gutenberg) с REST API

В моей предыдущей статье я говорил о том, как перебирать сообщения и пользовательские типы сообщений в Гутенберге. В этом посте я рассказываю о получении и использовании пользовательских данных в Gutenberg из конечных точек WordPress REST API.

В этом примере мы собираемся:

REST API не всегда правильный путь.

* Мы используем get_optionв REST 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>
    );
}

Наконец, давайте просмотрим наш блок в редакторе и посмотрим, что у нас получится:

Вывод в редакторе блоков. Вывод в редакторе блоков.