Korzystanie z edytora bloków WordPress (Gutenberg) z interfejsem API REST

W moim poprzednim artykule mówiłem o tym, jak zapętlić posty i niestandardowe typy postów w Gutenbergu. W tym poście mówię o otrzymywaniu i używaniu niestandardowych danych w obrębie Gutenberga z punktów końcowych WordPress REST API.

W tym przykładzie zamierzamy:

REST API nie zawsze jest właściwą ścieżką.

*W REST API używamy get_optiontylko jako przykładu. Jeśli potrzebujesz tylko dostępu do opcji i nie zamierzasz zmieniać jej stanu, możesz zamiast tego wp_localize_scriptprzekazać opcje do JavaScript.

Jeśli chcesz uzyskać dostęp do opcji ORAZ zmienić jej stan, polecam przeczytanie mojego przewodnika na temat przechowywania ustawień i danych w tabeli opcji za pomocą Gutenberga za pomocą interfejsu API ustawień .*

Tworzenie punktu końcowego interfejsu API REST

Stworzymy prosty punkt końcowy REST API, który zwraca wartość opcji WordPress (za pomocą 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' );

Po utworzeniu tego punktu końcowego pamiętaj o ponownym zapisaniu permalinków, aby uruchomił się. Zauważ, że są lepsze sposoby na zrobienie tego (na przykład użycie flush_rewrite_rules()w register_activation_hook), ale w tym przykładzie wystarczy szybkie ponowne zapisanie.

Teraz, gdy przekażemy adres URL /wp-json/wcltd/wholesome-plugin/v1/get/option/test/(oczywiście po Twojej własnej domenie) do naszej przeglądarki, zwróci ona wartość, która może być albo pustym ciągiem, ''albo wartością opcji, jeśli jest ustawiona.

Nasz punkt końcowy, zwracający pusty ciąg Nasz punkt końcowy, zwracający pusty ciąg

Zwróć uwagę, że celowo wykomentowałem wiersze 12-14, co zapewniłoby, że tylko ktoś, kto ma edit_postuprawnienia, może uruchomić kod, jeśli zostanie pozostawiony. Jednak z tym zakomentowaniem nie możemy przetestować kodu w naszej przeglądarce.

Spróbuj dodać kod, aby nadać opcji wartość i zobacz, co zwraca. Na przykład, gdybym miał uruchomić następujący kod przed moją funkcją:

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

Teraz, jeśli trafię w punkt końcowy /wp-json/wcltd/wholesome-plugin/v1/get/option/wcltd_example_option/, otrzymam następujące dane wyjściowe:

Nasz punkt końcowy, zwracający trochę danych.

Rejestracja magazynu danych

Teraz, gdy mamy punkt końcowy REST API, możemy utworzyć magazyn danych za pomocą registerStore.

registerStorezapewnia magazyn danych podobny do Redux, który umożliwia nam zarządzanie stanem w całej naszej aplikacji. Obsługuje również przeliczniki, które umożliwiają nam wypełnienie stanu z zewnętrznego źródła (takiego jak nasz REST API).

Więcej o stanie REACT można przeczytać w oficjalnej dokumentacji.

Oto jak możemy stworzyć sklep (jak store.jsw naszym projekcie, który pozwoli nam pobierać dane z naszego endpointu REST API.

Zależności

Będziemy musieli wyodrębnić apiFetchi registerStorez naszych zależności od WordPressa.

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

Selektory

Pierwszą rzeczą, którą chcemy zrobić, jest utworzenie funkcji selektora w obiekcie zwanym selektorami.

Wszystko, co robi, to wyodrębnienie „opcji" ze stanu i zwrócenie jej.

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

Resolwery

Przelicznik jest efektem ubocznym selektora i robi trochę więcej.

Tutaj tworzymy naszą funkcję, która pobiera nasz optionKey i przekazuje punkt końcowy REST API do naszych akcji (które zdefiniujemy dalej).

To następnie ustawia opcję, z kolejnym wezwaniem do naszych działań.

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

działania

actionsW tym miejscu zdefiniowane są dwie funkcje w obiekcie o nazwie, który wywołaliśmy wcześniej.

Wskazują, którego regulatora lub reduktora będziemy używać do ustawienia lub uzyskania wartości.

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

Sterownica

W naszych kontrolkach mamy GET_OPTIONco sprawia, że ​​wywołanie API wykorzystuje apiFetchi ścieżkę, którą zdefiniowaliśmy wcześniej.

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

Reduktor

W naszej funkcji reduktora mamy funkcję, SET_OPTIONktóra przyjmuje naszą wartość (w tym przypadku option, i ustawia swój stan).

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

Rejestracja Sklepu

Na koniec rejestrujemy sklep, nadajemy mu przestrzeń nazw, aby mieć do niego dostęp, i przekazujemy obiekt wszystkich powyższych obiektów i funkcji.

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

export default store;

eksportuj domyślny sklep;

Używanie danych z blokiem

Rozwińmy blok stworzony przez @wordpress/create-blockskrypt, o którym pisałem wcześniej, aby umożliwić nam połączenie się z punktem końcowym REST API.

Utwórz plik w /srcfolderze o nazwie store.jsi skopiuj do niego cały powyższy kod:

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;

Teraz edytuj nasz /src/index.jsplik, aby dołączyć store.jsplik:

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

Musimy również upewnić się, że withSelectu góry naszego pliku umieściliśmy:

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

Następnie zapakujmy nasz moduł Edit, withSelectaby wywołać API REST do naszej opcji, tak jak poniżej:

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

Teraz możemy uzyskać dostęp optiondo naszych rekwizytów w edit.js, na przykład:

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

Na koniec przejrzyjmy nasz blok w edytorze i zobaczmy, co otrzymamy:

Dane wyjściowe w edytorze bloków. Dane wyjściowe w edytorze bloków.