WordPress Block Editorin (Gutenberg) käyttäminen REST API:n kanssa

Edellisessä artikkelissani puhuin viestien ja mukautettujen viestityyppien silmukasta Gutenbergissä. Tässä viestissä puhun mukautettujen tietojen vastaanottamisesta ja käyttämisestä Gutenbergissä WordPress REST API -päätepisteistä.

Tässä esimerkissä aiomme:

REST API ei ole aina oikea polku.

*Käytämme get_optionREST API:ssa vain esimerkkinä. Jos tarvitset vain vaihtoehdon pääsyn etkä aio muuttaa sen tilaa, voit sen sijaan wp_localize_scriptsiirtää asetukset JavaScriptiin.

Jos haluat käyttää vaihtoehtoa JA muuttaa sen tilaa, suosittelen lukemaan oppaani asetusten ja tietojen tallentamisesta vaihtoehtotaulukkoon Gutenbergin kanssa Asetukset-sovellusliittymän avulla .*

REST API -päätepisteen luominen

Aiomme luoda yksinkertaisen REST API -päätepisteen, joka palauttaa WordPress-vaihtoehdon arvon (käyttäen 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' );

Kun olet luonut tämän päätepisteen, muista tallentaa pysyvät linkit uudelleen, jotta se käynnistyy. Huomaa, että on olemassa parempia tapoja tehdä tämä (kuten käyttämällä painiketta flush_rewrite_rules()) register_activation_hook, mutta tässä esimerkissä nopea uudelleentallennus riittää.

Nyt kun välitämme URL-osoitteen /wp-json/wcltd/wholesome-plugin/v1/get/option/test/(ilmeisesti oman verkkotunnuksesi jälkeen) selaimeemme, se palauttaa arvon, joka on joko tyhjä merkkijono ''tai vaihtoehdon arvo, jos se on asetettu.

Päätepisteemme, tyhjän merkkijonon palauttaminen Päätepisteemme, tyhjän merkkijonon palauttaminen

Huomaa, että olen tarkoituksella kommentoinut rivit 12-14, mikä varmistaa, että vain joku, jolla on edit_postoikeudet, voi ajaa koodia, jos se jätetään sisään. Tällä kommentilla emme kuitenkaan voi testata koodia selaimessamme.

Kokeile lisätä koodia antaaksesi valinnallesi arvon ja katso, mitä se palauttaa. Jos esimerkiksi suorittaisin seuraavan koodin ennen toimintoani:

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

Nyt jos osun päätepisteeseen /wp-json/wcltd/wholesome-plugin/v1/get/option/wcltd_example_option/, saan seuraavan tulosteen:

Päätepisteemme, palauttaa joitain tietoja.

Tietosäilön rekisteröinti

Nyt kun meillä on REST API -päätepiste, voimme luoda tietovaraston registerStore.

registerStoretarjoaa Redux-tyyppisen tietovaraston, jonka avulla voimme hallita tilaa kaikkialla sovelluksessamme. Se tukee myös ratkaisejia, joiden avulla voimme täyttää tilan ulkoisesta lähteestä (kuten REST API:sta).

Voit lukea lisää REACT-tilasta virallisesta dokumentaatiosta.

Näin voimme luoda myymälän (kuten store.jsprojektissamme, jonka avulla voimme noutaa tietoja REST API -päätepisteestämme.

Riippuvuudet

Meidän on purettava WordPress-riippuvuudet apiFetchja niistä.registerStore

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

Valitsijat

Ensimmäinen asia, jonka haluamme tehdä, on luoda valitsinfunktio objektiin nimeltä "valitsijat".

Kaikki tämä on poimia "vaihtoehto" osavaltiosta ja palauttaa se.

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

Ratkaisijat

Resoluutio on valitsimen sivuvaikutus ja tekee hieman enemmän.

Täällä luomme funktiomme, joka ottaa optionKey-avaimen ja välittää REST API -päätepisteen toimillemme (jotka määritämme seuraavaksi).

Tämä asettaa sitten vaihtoehdon ja toinen kehotus toimiamme.

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

Toiminnot

Kaksi funktiota nimetyssä objektissa actions, joita kutsuimme aiemmin, määritellään tässä.

Ne osoittavat, mitä säädintä tai vähennintä aiomme käyttää arvon asettamiseen tai saamiseen.

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

Säätimet

Ohjauksissamme on GET_OPTIONmikä tekee API-kutsun käyttämällä apiFetchja polkua, jonka määritimme aiemmin.

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

Vähentäjä

Vähentäjäfunktiossamme on SET_OPTIONjoka ottaa arvomme (tässä tapauksessa optionja asettaa tilan.

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

Kaupan rekisteröinti

Lopuksi rekisteröimme myymälän, annamme sille nimitilan, jotta voimme käyttää sitä, ja välitämme kaikkien yllä olevien objektien ja funktioiden objektin.

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

export default store;

Vie oletusarvoinen myymälä;

Tietojen käyttäminen lohkon kanssa

Laajennamme komentosarjan luomaa lohkoa @wordpress/create-block, josta kirjoitin aiemmin, jotta voimme muodostaa yhteyden REST API -päätepisteeseen.

Luo tiedosto /srckansioon nimeltä store.jsja kopioi kaikki yllä oleva koodi siihen:

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;

Muokkaa nyt /src/index.jstiedostoamme niin, että se sisältää store.jstiedoston:

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

Meidän on myös varmistettava, että olemme lisänneet withSelecttiedostomme yläosaan:

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

Kääritään sitten muokkausmoduulimme withSelectREST API:n kutsumiseksi vaihtoehdollemme, kuten:

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

Nyt voimme käyttää optionrekvisiittaamme sisällä edit.js, kuten näin:

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

Katsotaan lopuksi lohkoamme editorissa ja katsotaan mitä saamme:

Tulos lohkoeditorissa. Tulos lohkoeditorissa.