Usando o WordPress Block Editor (Gutenberg) com a API REST

No meu artigo anterior, falei sobre como percorrer as postagens e os tipos de postagem personalizados no Gutenberg. Neste post eu falo sobre como receber e usar dados personalizados dentro do Gutenberg dos endpoints da API REST do WordPress.

Neste exemplo vamos:

A API REST nem sempre é o caminho certo.

*Usamos get_optionna API REST apenas como exemplo. Se você só precisa de acesso a uma opção e não pretende alterar seu estado, pode usar wp_localize_scriptpara passar as opções para JavaScript.

Se você quiser acessar uma opção E alterar seu estado, recomendo ler meu guia sobre como armazenar configurações e dados na tabela de opções com o Gutenberg usando a API de configurações .*

Criando um endpoint da API REST

Vamos criar um endpoint de API REST simples que retorna o valor de uma opção do WordPress (usando 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' );

Depois de criar este ponto de extremidade, certifique-se de salvar novamente seus permalinks para que ele seja ativado. Observe que existem maneiras melhores de fazer isso (como usar flush_rewrite_rules()no register_activation_hook), mas para este exemplo, um novo salvamento rápido será suficiente.

Agora, quando passarmos a URL /wp-json/wcltd/wholesome-plugin/v1/get/option/test/(depois do seu próprio domínio, obviamente) para o nosso navegador, ela retornará um valor, que pode ser uma string vazia ''ou o valor da opção, se definida.

Nosso endpoint, retornando uma string vazia Nosso endpoint, retornando uma string vazia

Observe que eu comentei propositadamente as linhas 12-14, o que garantiria que apenas alguém que tenha edit_postdireitos possa executar o código se for deixado. No entanto, com isso comentado, não podemos testar o código em nosso navegador.

Tente adicionar algum código para dar um valor à sua opção e veja o que ela retorna. Por exemplo, se eu fosse executar o seguinte código antes da minha função:

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

Agora, se eu atingir o endpoint /wp-json/wcltd/wholesome-plugin/v1/get/option/wcltd_example_option/, obterei a seguinte saída:

Nosso endpoint, retornando alguns dados.

Registrando um repositório de dados

Agora que temos um endpoint da API REST, podemos criar um armazenamento de dados com registerStore.

registerStorefornece um armazenamento de dados semelhante ao Redux, que nos permite gerenciar o estado em nosso aplicativo. Ele também suporta resolvedores, que nos permitem preencher o estado de uma fonte externa (como nossa API REST).

Você pode ler mais sobre o estado REACT na documentação oficial.

Aqui está como podemos criar uma loja (como store.jsem nosso projeto que nos permitirá extrair dados do nosso endpoint da API REST.

Dependências

Precisaremos extrair apiFetche registerStorede nossas dependências do WordPress.

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

Seletores

A primeira coisa que queremos fazer é criar uma função seletora, em um objeto chamado ‘seletores’.

Tudo o que isso faz é extrair a ‘opção’ do estado e devolvê-la.

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

Resolvedores

O resolvedor é um efeito colateral do seletor e faz um pouco mais.

Aqui criamos nossa função que pega nossa optionKey e passa um endpoint da API REST para nossas ações (que definiremos a seguir).

Isso define a opção, com outra chamada para nossas ações.

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

Ações

As duas funções em um objeto chamado actionsque chamamos anteriormente são definidas aqui.

Eles indicam qual controle ou redutor vamos usar para definir ou obter o valor.

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

Controles

Em nossos controles temos o GET_OPTIONque faz a API chamar usando apiFetche o caminho que definimos anteriormente.

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

Redutor

Em nossa função redutor temos SET_OPTIONque pega nosso valor (neste caso option, e define seu estado.

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

Cadastrando a loja

Finalmente, registramos uma loja, damos a ela um namespace para que possamos acessá-la e passamos um objeto de todos os objetos e funções acima.

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

export default store;

exportar armazenamento padrão;

Usando os dados com um bloco

Vamos expandir o bloco criado pelo @wordpress/create-blockscript, sobre o qual escrevi anteriormente para nos conectar a um endpoint da API REST.

Crie um arquivo na /srcpasta chamada store.jse copie todo o código acima para ele:

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;

Agora edite nosso /src/index.jsarquivo para incluir o store.jsarquivo:

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

Também precisamos garantir que incluímos withSelectno topo do nosso arquivo:

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

Em seguida, vamos envolver nosso módulo Edit withSelectpara fazer a chamada da API REST para nossa opção, assim:

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

Agora podemos acessar optionem nossas props dentro de edit.js, assim:

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

Por fim, vamos visualizar nosso bloco no editor e ver o que obtemos:

A saída no editor de blocos. A saída no editor de blocos.