WordPressi plokiredaktori (Gutenberg) kasutamine koos REST API-ga

Oma eelmises artiklis rääkisin sellest, kuidas Gutenbergis postitusi ja kohandatud postitustüüpe sirvida. Selles postituses räägin kohandatud andmete saamisest ja kasutamisest Gutenbergis WordPress REST API lõpp-punktidest.

Selles näites teeme järgmist:

REST API ei ole alati õige tee.

*Kasutame get_optionREST API-s ainult näitena. Kui vajate juurdepääsu ainult valikule ja te ei kavatse selle olekut muuta, saate selle asemel kasutada wp_localize_scriptsuvandite edastamiseks JavaScripti.

Kui soovite juurdepääsu valikule JA selle olekut muuta, soovitan lugeda minu juhendit seadete ja andmete salvestamise kohta suvandite tabelis Gutenbergiga, kasutades seadete API-t .*

REST API lõpp-punkti loomine

Loome lihtsa REST API lõpp-punkti, mis tagastab WordPressi valiku väärtuse (kasutades 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' );

Pärast selle lõpp-punkti loomist salvestage kindlasti oma püsilingid uuesti, et see tööle hakkaks. Pange tähele, et selleks on paremaid viise (näiteks kasutades flush_rewrite_rules()) register_activation_hook, kuid selle näite puhul piisab kiirest uuesti salvestamisest.

Nüüd, kui edastame URL-i /wp-json/wcltd/wholesome-plugin/v1/get/option/test/(ilmselt teie enda domeeni järel) oma brauserisse, tagastab see väärtuse, mis on kas tühi string ''või suvandi väärtus, kui see on määratud.

Meie lõpp-punkt, tagastab tühja stringi Meie lõpp-punkt, tagastab tühja stringi

Pange tähele, et olen sihipäraselt kommenteerinud ridu 12-14, mis tagaks, et edit_postkoodi sisse jätmise korral saaks käivitada ainult see, kellel on õigused. Kuid selle väljakommenteerimisega ei saa me koodi oma brauseris testida.

Proovige lisada koodi, et anda oma valikule väärtus, ja vaadake, mida see tagastab. Näiteks kui ma peaksin enne funktsiooni käivitama järgmise koodi:

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

Nüüd, kui ma taban lõpp-punkti /wp-json/wcltd/wholesome-plugin/v1/get/option/wcltd_example_option/, saan järgmise väljundi:

Meie lõpp-punkt, tagastab mõned andmed.

Andmesalve registreerimine

Nüüd, kui meil on REST API lõpp-punkt, saame luua andmesalve rakendusega registerStore.

registerStorepakub Reduxi-laadset andmesalve, mis võimaldab meil hallata olekut kogu meie rakenduses. See toetab ka lahendajaid, mis võimaldavad meil sisestada oleku välisest allikast (nt meie REST API).

REACT oleku kohta saate rohkem lugeda ametlikust dokumentatsioonist.

Siin on, kuidas saame poe luua (nagu store.jsmeie projektis, mis võimaldab meil tõmmata andmeid meie REST API lõpp-punktist.

Sõltuvused

Peame eraldama oma WordPressi sõltuvused apiFetchja nendest.registerStore

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

Valijad

Esimese asjana tahame luua valikufunktsiooni objektis nimega "selektorid".

Kõik see võtab osariigist välja valiku ja tagastab selle.

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

Lahendajad

Lahendaja on valija kõrvalmõju ja teeb natuke rohkem.

Siin loome oma funktsiooni, mis võtab meie optionKey ja edastab meie toimingutele REST API lõpp-punkti (mille määratleme järgmisena).

Seejärel seab see valiku koos uue kutsega meie tegevusele.

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

Tegevused

Siin on määratletud kaks funktsiooni nimega objektis actions, mida me varem kutsusime.

Need näitavad, millist juhtseadet või reduktorit me väärtuse määramiseks või saamiseks kasutame.

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

Juhtnupud

Meie juhtelementides on GET_OPTIONsee, mis teeb API-kõne kasutades apiFetchja varem määratletud teed.

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

Reduktor

Meie redutseerimisfunktsioonis on see, SET_OPTIONmis võtab meie väärtuse (antud juhul optionja määrab selle oleku.

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

Kaupluse registreerimine

Lõpuks registreerime poe, anname sellele nimeruumi, et saaksime sellele juurde pääseda, ja edastame kõigi ülaltoodud objektide ja funktsioonide objekti.

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

export default store;

ekspordi vaikepood;

Andmete kasutamine plokiga

Laiendame skripti loodud plokki @wordpress/create-block, millest ma varem kirjutasin, et saaksime luua ühenduse REST API lõpp-punktiga.

Looge /srckaustas nimega fail store.jsja kopeerige sinna kogu ülaltoodud kood:

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;

Nüüd muutke meie /src/index.jsfaili, et lisada store.jsfail:

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

Samuti peame tagama, et oleme withSelectfaili ülaossa lisanud:

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

Seejärel mähime oma redigeerimismooduli sisse, withSelectet teha REST API kõne meie valikule, näiteks järgmiselt:

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

Nüüd pääseme optionoma rekvisiitidele juurde domeenis edit.js, näiteks järgmiselt:

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

Lõpuks vaatame oma plokki redaktoris ja vaatame, mida me saame:

Väljund plokiredaktoris. Väljund plokiredaktoris.