Använda WordPress Block Editor (Gutenberg) med REST API

I min tidigare artikel pratade jag om hur man går igenom inlägg och anpassade inläggstyper inom Gutenberg. I det här inlägget pratar jag om att ta emot och använda anpassad data inom Gutenberg från WordPress REST API-slutpunkter.

I det här exemplet ska vi:

REST API är inte alltid rätt väg.

*Vi använder get_optionendast i REST API som ett exempel. Om du bara behöver tillgång till ett alternativ och du inte tänker ändra dess tillstånd, kan du istället använda wp_localize_scriptför att skicka alternativen till JavaScript.

Om du vill komma åt ett alternativ OCH ändra dess tillstånd rekommenderar jag att du läser min guide om hur du lagrar inställningar och data i alternativtabellen med Gutenberg med hjälp av Settings API .*

Skapa en REST API-slutpunkt

Vi kommer att skapa en enkel REST API-slutpunkt som returnerar värdet av ett WordPress-alternativ (med 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' );

Efter att du har skapat den här slutpunkten, se till att spara dina permalänkar på nytt så att de slår in. Observera att det finns bättre sätt att göra detta på (som att använda flush_rewrite_rules()på register_activation_hook), men för det här exemplet räcker det med en snabb återlagring.

Nu när vi skickar webbadressen /wp-json/wcltd/wholesome-plugin/v1/get/option/test/(efter din egen domän uppenbarligen) till vår webbläsare kommer den att returnera ett värde, som antingen är en tom sträng ''eller värdet på alternativet om det är inställt.

Vår slutpunkt, returnerar en tom sträng Vår slutpunkt, returnerar en tom sträng

Notera att jag målmedvetet har kommenterat raderna 12-14, vilket skulle säkerställa att endast någon som har edit_posträttigheter kan köra koden om den lämnas inne. Men med denna kommenterade kan vi inte testa koden i vår webbläsare.

Försök att lägga till kod för att ge ditt alternativ ett värde och se vad det ger. Till exempel om jag skulle köra följande kod före min funktion:

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

Om jag nu träffar slutpunkten /wp-json/wcltd/wholesome-plugin/v1/get/option/wcltd_example_option/får jag följande utdata:

Vår slutpunkt, returnerar en del data.

Registrera en databutik

Nu när vi har en REST API-slutpunkt kan vi skapa ett datalager med registerStore.

registerStoretillhandahåller ett Redux-liknande datalager som gör det möjligt för oss att hantera tillstånd i hela vår applikation. Den stöder också resolvers, som gör det möjligt för oss att fylla i staten från en extern källa (som vår REST API).

Du kan läsa mer om REACT-tillståndet i den officiella dokumentationen.

Så här kan vi skapa en butik (som store.jsi vårt projekt som gör att vi kan hämta data från vår REST API-slutpunkt.

Beroenden

Vi kommer att behöva extrahera apiFetchoch registerStorefrån våra WordPress-beroenden.

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

Väljare

Det första vi vill göra är att skapa en väljarfunktion, i ett objekt som kallas "selektorer".

Allt detta gör är att extrahera "alternativet" från staten och returnera det.

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

Upplösare

Resolvern är en bieffekt av väljaren och gör lite mer.

Här skapar vi vår funktion som tar vår optionKey och skickar en REST API-slutpunkt till våra åtgärder (som vi kommer att definiera härnäst).

Detta ställer sedan in alternativet, med ytterligare en uppmaning till våra handlingar.

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

Åtgärder

De två funktionerna i ett objekt med namn actionssom vi anropade tidigare definieras här.

De indikerar vilken kontroll eller reducering vi ska använda för att ställa in eller få värdet.

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

Kontroller

I våra kontroller har vi GET_OPTIONsom gör att API-anropet använder apiFetchoch den sökväg som vi definierade tidigare.

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

Reducerare

I vår reducerfunktion har vi SET_OPTIONsom tar vårt värde (i detta fall optionoch ställer in dess tillstånd.

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

Registrering av butiken

Slutligen registrerar vi en butik, ger den ett namnutrymme så att vi kan komma åt det och skickar in ett objekt med alla ovanstående objekt och funktioner.

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

export default store;

export standardbutik;

Använda data med ett block

Låt oss utöka blocket som skapats av @wordpress/create-blockskriptet som jag skrev om tidigare för att göra det möjligt för oss att ansluta till en REST API-slutpunkt.

Skapa en fil i /srcmappen som heter store.jsoch kopiera all ovanstående kod till den:

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;

Redigera nu vår /src/index.jsfil för att inkludera store.jsfilen:

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

Vi måste också se till att vi har inkluderat withSelectöverst i vår fil:

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

Låt oss sedan slå in vår redigeringsmodul withSelectför att göra REST API-anropet till vårt alternativ, så här:

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

Nu kan vi komma åt optionvåra rekvisita inom edit.js, så här:

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

Slutligen, låt oss titta på vårt block i editorn och se vad vi får:

Utdata i blockredigeraren. Utdata i blockredigeraren.