Com compatibilitzeu el vostre complement amb Gutenberg: Part 2 (API de la barra lateral)

Com compatibilitzeu el vostre complement amb Gutenberg: Part 2 (API de la barra lateral)

Com compatibilitzeu el vostre complement amb Gutenberg: Part 2 (API de la barra lateral)
СОДЕРЖАНИЕ
02 июня 2020

Si intenteu compatibilitzar el vostre connector amb Gutenberg, podeu tenir un parell de rutes que podeu seguir, depenent del que fa el vostre plugin i de com proporciona les seves funcions a l’usuari..


A la primera part d’aquesta mini-sèrie, hem explorat l’API Block de Gutenberg, que és el que necessita la majoria de plugins en termes de compatibilitat de Gutenberg. Aquesta vegada, anem a explorar una altra peça del trencaclosques de Gutenberg: API de la barra lateral de Gutenberg.

Només per assegurar-nos que estem a la mateixa pàgina, una explicació ràpida:

  • L’API de Block de Gutenberg és molt extensa i permet construir gairebé tot com blocs, però, de vegades, no és suficient.
  • L’API de la barra lateral, d’altra banda, permet als plugins registrar una barra lateral on poden portar la seva funcionalitat més enllà dels blocs. La barra lateral és similar a Block Inspector.

Compatibilitzeu el vostre connector amb l'API de Gutenberg - barra lateral

Per exemple, l’API de Gutenberg Sidebar s’utilitza com ho demostra Yoast SEO:

API de la barra lateral de Gutenberg

On podeu utilitzar l’API de barra lateral?

Recentment hem treballat en l’elaboració del nostre complement – WP Product Review – a punt per Gutenberg. WP Product Review ha utilitzat meta camps per afegir dades de revisió a la publicació i no hem pogut convertir-nos en bloc per diverses raons de compatibilitat endarrerida. Per tant, hem utilitzat l’API de barra lateral.

Aquí es mostra com vam integrar WP Product Review a l’editor de Gutenberg:WP Product Review de Gutenberg

Si els usuaris indiquen que la publicació és una revisió amb una barra lateral, podran configurar tot el que hi ha sobre el quadre de revisió a partir de les opcions de la barra lateral..

WP Product Review és un dels exemples en què l’API de barra lateral pot ser útil. Un altre gran exemple és el Deixar-lo anar plugin, que permet als usuaris inserir imatges de Unsplash i Giphy mitjançant la barra lateral.

En aquesta publicació, us dirigiré pel procés d’implementar una cosa similar i de fer compatible el vostre complement Gutenberg mitjançant l’API de barra lateral.

De manera predeterminada, els quadres Meta estan preparats per Gutenberg, però no bastant

Comencem amb meta-caixes. Prenem un complement que utilitza un quadre de meta senzill per oferir algunes funcionalitats a l’usuari a la pantalla de l’editor.

Això pot semblar a l’editor clàssic:

Meta Box a l'editor clàssic

Podeu utilitzar el següent codi per crear una caixa de meta. També està disponible a la secció Hola Gutenberg dipòsit:

/ **
* Registra’t Hello Gutenbert Meta Box
* /
function hello_gutenberg_add_meta_box () {
add_meta_box (‘hello_gutenberg_meta_box’, __ (‘Hello Gutenberg Meta Box’, ‘hello-gutenberg’), ‘hello_gutenberg_metabox_callback’, ‘post’);
}
add_action (‘add_meta_boxes’, ‘hello_gutenberg_add_meta_box’);

/ **
* Hola Gutenberg Metabox Callback
* /
function hello_gutenberg_metabox_callback ($ post) {
$ value = get_post_meta ($ post->ID, “_hello_gutenberg_field”, cert);
?>
<?php _e (‘Com es diu?’, ‘Hola-Gutenberg’) ?>

<?php
}

/ **
* Desa el Metabox Hello Gutenberg
* /
function hello_gutenberg_save_postdata ($ post_id) {
if (array_key_exists (“hello_gutenberg_field”, $ _POST)) {
update_post_meta ($ post_id, ‘_hello_gutenberg_field’, $ _POST [‘hola_gutenberg_field’]);
}
}
add_action (“guardar_post”, “hola_gutenberg_save_postdata”);

Llavors, la pregunta que cal fer aquí és:

Hem de fer compatible aquest Gutenberg en primer lloc?

En aquest moment, hauríem de plantejar-nos què és compatible amb Gutenberg. Per exemple, si utilitzeu aquest quadre de meta a Gutenberg sense fer cap canvi, encara funcionarà.

Tanmateix, quan parlem de compatibilitat de Gutenberg, no parlem només del complement que funciona a l’entorn de Gutenberg, sinó del complement * com Gutenberg *.

"Per què?" – em demanaràs Simplement, els usuaris que començaran a utilitzar WordPress després que Gutenberg sigui l’editor predeterminat trobaran les antigues maneres de ser contra-intuïtives. A més, esperaran un estil més semblant a Gutenberg per a tot l’editor.

Si no proporcioneu als usuaris una sensació autòctona, segurament buscaran alternatives que funcionin millor amb Gutenberg.

Finalment, deixem-nos les mans brutes amb algun codi!

Com començar amb l’API de la barra lateral

Començarem a codificar la nostra barra lateral a Gutenberg per incloure el nostre camp meta. Podeu continuar utilitzant el botó Placa de calor de Gutenberg repositori com a punt de partida.

Prepareu la vostra caixa de meta per a Gutenberg

Abans de començar, primer hem de dir a Gutenberg que no utilitzarem la nostra caixa de meta a Gutenberg. Podeu fer-ho passant l’argument __back_compat_meta_box a la funció add_meta_box, així:

/ **
* Registra’t Hola Gutenberg Metabox
* /
function hello_gutenberg_add_meta_box () {
add_meta_box (‘hello_gutenberg_meta_box’, __ (‘Hello Gutenberg Meta Box’, ‘hello-gutenberg’), ‘hello_gutenberg_metabox_callback’, ‘post’, array (
‘__back_compat_meta_box’ => fals,
));
}
add_action (‘add_meta_boxes’, ‘hello_gutenberg_add_meta_box’);

El manual de Gutenberg té més detalls sobre com podeu gestionar l’enviament de caixes de meta PHP a Gutenbergaquí).

Això farà que les nostres antigues caselles de PHP ja no apareguin a Gutenberg. Ara també hem de preparar el nostre meta camp a punt per Gutenberg afegint-lo a l’API REST de WordPress. Podeu afegir el següent codi per registrar el camp meta en l’API REST:

/ **
* Registreu-me a l’API de Hello Gutenberg Meta Field
* /
function hello_gutenberg_register_meta () {
registre_meta (
‘post’, ‘_hello_gutenberg_field’, array (
‘tipus’ => ‘cadena’,
‘solitari’ => cert,
‘show_in_rest’ => cert,
)
);
}
add_action (‘init’, ‘hello_gutenberg_register_meta’);

Això afegirà el _hello_gutenberg_field al camp meta objecte a l’API REST.

Aquesta funció només farà la feina de mostrar el nostre valor a l’API REST. Ara també cal afegir un mètode per actualitzar el nostre camp meta mitjançant l’API REST.

El següent codi afegirà la nostra ruta personalitzada a l’API REST de WordPress, que serà / hola-gutenberg / v1 / actualització-meta /:

/ **
* Registre Hola Gutenberg Metabox a l’API Rest
* /
function hello_gutenberg_api_posts_meta_field () {
register_rest_route (
“hello-gutenberg / v1”, “/ update-meta”, matriu (
‘mètodes’ => “POST”,
‘callback’ => “hello_gutenberg_update_callback”,
‘args’ => matriu (
‘id’ => matriu (
‘sanitize_callback’ => ‘absent’,
),
),
)
);
}
add_action (‘rest_api_init’, ‘hola_gutenberg_api_posts_meta_field’);

/ **
* Hello Gutenberg REST Call Call API per Gutenberg
* /
function hello_gutenberg_update_callback ($ data) {
retornar actualització_post_meta ($ dades [‘id’], $ dades [‘clau’], $ dades [‘valor’]);
}

Aquesta ruta de l’API REST s’utilitzarà per modificar el nostre camp meta des de la barra lateral de Gutenberg. Podeu obtenir més informació sobre l’API REST de WordPress i sobre com fer-ho registra rutes personalitzades des d’aquí.

De la mateixa manera, si voleu saber què és l’API REST de WordPress i com començar, podeu llegir la nostra publicació al bloc: API REST de WordPress: què és i com començar a utilitzar-la.

Afegir un bloc de barres laterals a Gutenberg

Comencem amb el codi de la barra lateral a partir de Placa de calor de Gutenberg:

/ **
* Biblioteques de blocs interns
* /
const {__} = wp.i18n;

const {Fragment} = wp.element;

const {
PluginSidebar,
PluginSidebarMoreMenuItem,
} = wp.editPost;

const {registerPlugin} = wp.plugins;

const Component = () => (

{__ (“Placa de calor de Gutenberg”)}

{ __( ‘Hola món!’ ) }

);

registerPlugin (‘gutenberg-boilerplate’, {
icona: “lloc d’administració”,
renderitzar: Component,
});

Inserirà una barra lateral molt senzilla a l’editor de Gutenberg. El prendrem com a punt de partida i construirem el nostre projecte sobre ell.

El codi d’exemple prové del nostre dipòsit de Gutenberg Boilerplate i, per tant, hem de substituir totes les coincidències de "Placa de calor de Gutenberg" amb "Hola Gutenberg".

Components utilitzats

Si bé la nostra barra lateral ja importa molts components, en necessitarem més. Podeu substituir la part superior del codi per la següent:

/ **
* Biblioteques de blocs interns
* /

const {__} = wp.i18n;

const {
PluginSidebar,
PluginSidebarMoreMenuItem
} = wp.editPost;

const {
PanelBody,
TextControl
} = wp.components;

const {
Component,
Fragment
} = wp.element;

const {withSelect} = wp.data;

const {registerPlugin} = wp.plugins;

Aprenguem ràpidament sobre tots els components que hem importat.

  1. Tal com hem comentat a l’article anterior, el document __ el component s’utilitza per traduir el nostre text.
  2. El PluginSidebar el component s’utilitza per afegir la nostra barra lateral a Gutenberg.
  3. PluginSidebarMoreMenuItem s’utilitza per afegir un botó al menú de Gutenberg, que commuta la visibilitat de la barra lateral.
  4. El PanelBody el component s’utilitza per afegir un panell a la nostra barra lateral.
  5. TextControl s’utilitza per al nostre camp d’entrada.
  6. Després d’això, varem importar el Component i Fragment components Tots dos són components de reacció que utilitzem a la nostra barra lateral.
    • El component Fragment s’utilitza per agrupar una llista de nens sense afegir nodes addicionals al DOM. Hem d’utilitzar el component Fragment del nostre codi ja que JSX no ens permet tenir més d’un node pare.
  7. ambSeleccionar és un component d’ordre superior. Per conèixer quins són els components d’ordre superior, us recomano que llegiu aquesta documentació.
  8. I finalment, importem registrePlugin, que és similar al registreBlockType que vam utilitzar a l’article anterior. En lloc de registrar un bloc, registerPlugin registra el vostre plugin.

Addició de controls

Fins ara, la nostra barra lateral només és una funció de component, però com que utilitzarem els mètodes del cicle de vida de React, la convertirem en un component Reactar, com ara:

classe Hello_Gutenberg estén Component {
renderitzar () {
tornar (

{__ (“Hola Gutenberg”)}

{ __( ‘Hola món!’ ) }

)
}
}

registerPlugin (“hola-gutenberg”, {
icona: “lloc d’administració”,
render: Hello_Gutenberg,
});

Això hauria de fer que la teva barra lateral funcioni amb un text senzill.

Ara afegim el nostre camp a la barra lateral. Hauria de fer que el nostre component quedi així:

classe Hello_Gutenberg estén Component {
renderitzar () {
tornar (

{__ (“Hola Gutenberg”)}

)
}
}

Primer, hem definit un estat inicial, que és bàsicament la clau i el valor del nostre meta camp. Després d’això, utilitzem apiFetch per cercar les dades de la publicació actual.

Passem l’identificació de la publicació actual amb la variable $ {this.props.postId}. Tornarem més endavant a aquest punt.

Un cop obtingudes les dades, actualitzem el nostre estat amb el valor de la nostra API REST.

Ara, tornem a la variable postId. Actualment no coneixem l’ID de la nostra publicació actual, per la qual cosa utilitzem el component de comanda superior ambSelect, com ara:

const HOC = ambSeleccionar ((seleccionar) => {
const {getCurrentPostId} = select (‘core / editor’);
tornar {
postId: getCurrentPostId (),
};
}) (Hola_Gutenberg);

registerPlugin (“hola-gutenberg”, {
icona: “lloc d’administració”,
renderitzar: HOC,
});

Això passarà la ID de la nostra publicació actual com a variable postId. Ara podeu executar una publicació més antiga i la nostra barra lateral de Gutenberg mostrarà el valor del vostre camp meta.

Actualitzeu el valor meta

Ara hem de permetre que la nostra barra lateral també actualitzi el valor meta. De manera similar a l’obtenció dels detalls, farem servir el wp.apiRequest utilitat.

Cada vegada que canviï el valor del nostre estat, l’actualitzarem amb l’API REST. Per això, primer hem d’afegir un esdeveniment onChange al nostre TextControl, així:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector