Jak zajistit, aby byl váš plugin kompatibilní s Gutenberg: Část 2 (Sidebar API)

Pokud se snažíte, aby byl váš plugin kompatibilní s Gutenbergem, máte několik cest, které můžete / měli podniknout – v závislosti na tom, co váš plugin dělá a jak poskytuje uživateli jeho funkce.


V první části této mini-série jsme prozkoumali Gutenbergovo Block API – což je to, co většina pluginů potřebuje z hlediska kompatibility s Gutenbergem. Tentokrát prozkoumáme další kousek Gutenbergovy puzzle – Gutenberg’s Sidebar API.

Abychom se ujistili, že jsme na stejné stránce, rychlé vysvětlení:

  • Gutenbergovo blokové API je velmi rozsáhlé a umožňuje vám postavit téměř všechno jako bloky, ale občas to nestačí.
  • Na druhé straně API Sidebar API umožňuje zásuvným modulům zaregistrovat postranní panel, kde mohou přesunout své funkce za bloky. Boční panel je podobný jako Block Inspector.

Aby byl váš plugin kompatibilní s Gutenberg - Sidebar API

Například se používá API Gutenberg Sidebar API, jak dokazuje váš SEO:

Gutenberg Sidebar API

Kde můžete použít Sidebar API?

Nedávno jsme pracovali na vytvoření našeho pluginu – Recenze produktu WP – připraven na Gutenberg. Produkt WP Product Review použil meta pole pro přidání dat recenze k příspěvku a z různých důvodů zpětné kompatibility jsme se nemohli změnit na blok. Proto jsme použili Sidebar API.

Takto jsme integrovali recenzi produktu WP do editoru Gutenberg:Recenze produktu WP Gutenberg

Když uživatelé uvedou, že příspěvek představuje recenzi s přepínáním postranního panelu, budou moci nakonfigurovat vše o svém recenzním poli z možností postranního panelu.

Recenze produktu WP je jedním z příkladů, kde může být užitečné Sidebar API. Dalším skvělým příkladem je Zahoď to plugin, který umožňuje uživatelům vkládat obrázky z Unsplash a Giphy pomocí postranního panelu.

V tomto příspěvku vás provedu procesem implementace něčeho podobného a díky kompatibilitě pluginu Gutenberg pomocí rozhraní Sidebar API..

Meta boxy jsou standardně připravené pro Gutenberg, ale ne úplně

Začněme meta boxy. Vezměme si plugin, který používá jednoduchou meta-box, aby uživateli poskytl některé funkce na obrazovce editoru.

V klasickém editoru to může vypadat takto:

Meta Box v klasickém editoru

Následující kód můžete použít k vytvoření takového meta boxu – je také k dispozici v Ahoj Gutenberg úložiště:

/ **
* Zaregistrujte se 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’);

/ **
* Ahoj Gutenberg Metabox Callback
* /
funkce hello_gutenberg_metabox_callback ($ post) {
$ value = get_post_meta ($ post->ID, ‘_hello_gutenberg_field’, true);
?>
<?php _e (‘Jaké je vaše jméno?’, ‘hello-gutenberg’) ?>

<?php
}

/ **
* Uložit Hello Gutenberg Metabox
* /
function hello_gutenberg_save_postdata ($ post_id) {
if (array_key_exists (‘hello_gutenberg_field’, $ _POST)) {
update_post_meta ($ post_id, ‘_hello_gutenberg_field’, $ _POST [‘hello_gutenberg_field’]);
}
}
add_action (‘save_post’, ‘hello_gutenberg_save_postdata’);

Otázkou tedy je:

Potřebujeme, aby byl tento Gutenberg kompatibilní na prvním místě?

V této chvíli bychom se měli sami sebe zeptat, co je kompatibilní s Gutenbergem. Například pokud použijete toto velmi meta pole v Gutenbergu bez provedení jakýchkoli změn, bude to stále fungovat.

Když však hovoříme o kompatibilitě s Gutenbergem, nemluvíme pouze o zásuvném modulu pracujícím v prostředí Gutenberg, ale o zásuvném modulu pracujícím jako Gutenberg *.

"Proč?" – zeptejte se. Jednoduše řečeno, uživatelé, kteří začnou používat WordPress po výchozím editoru Gutenberg, najdou staré způsoby, jak být kontraintuitivní. Kromě toho budou očekávat styl podobný Gutenbergovi pro všechno v editoru.

Pokud nedáte uživatelům nativní pocit, určitě budou hledat alternativy, které budou s Gutenbergem lépe fungovat.

Nakonec si zašpiníme ruce nějakým kódem!

Začínáme s Sidebar API

Začneme kódovat náš Sidebar v Gutenbergu tak, aby zahrnoval naše meta pole. Můžete pokračovat v používání Gutenberg Boilerplate úložiště jako výchozí bod.

Připravte si meta box na Gutenberga

Než začneme, musíme nejprve říct Gutenbergovi, že v Gutenbergu nebudeme používat meta box. Můžete to provést předáním argumentu __back_compat_meta_box do funkce add_meta_box, například:

/ **
* Zaregistrujte se Hello 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’ => Nepravdivé,
));
}
add_action (‘add_meta_boxes’, ‘hello_gutenberg_add_meta_box’);

Příručka Gutenberg obsahuje více podrobností o tom, jak zvládnout přenesení metadat PHP do Gutenbergu (tady).

Tím zajistíte, že se v Gutenbergu již nebudou objevovat naše stará meta pole PHP. Nyní musíme také připravit naše meta pole pro Gutenberg přidáním do WordPress REST API. Chcete-li zaregistrovat meta pole pomocí rozhraní REST API, můžete přidat následující kód:

/ **
* Zaregistrujte Hello Gutenberg Meta Field do Rest API
* /
function hello_gutenberg_register_meta () {
register_meta (
‘post’, ‘_hello_gutenberg_field’, pole (
‘type’ => ‘tětiva’,
‘single’ => skutečný,
‘show_in_rest’ => skutečný,
)
);
}
add_action (‘init’, ‘hello_gutenberg_register_meta’);

Tím přidáte _hello_gutenberg_field do meta objekt v REST API.

Tato funkce provede pouze zobrazení naší hodnoty v rozhraní REST API. Nyní musíme také přidat metodu aktualizace našeho meta pole pomocí REST API.

Následující kód přidá naši vlastní cestu k rozhraní WordPress REST API, které bude / hello-gutenberg / v1 / update-meta /:

/ **
* Zaregistrujte Hello Gutenberg Metabox do Rest API
* /
function hello_gutenberg_api_posts_meta_field () {
register_rest_route (
‘hello-gutenberg / v1’, ‘/ update-meta’, array (
‘metody’ => ‘POŠTA’,
‘zpětné volání’ => ‘hello_gutenberg_update_callback’,
‘args’ => pole (
‘id’ => pole (
‘sanitize_callback’ => ‘absint’,
),
),
)
);
}
add_action (‘rest_api_init’, ‘hello_gutenberg_api_posts_meta_field’);

/ **
* Ahoj Gutenberg REST API zpětné volání pro Gutenberg
* /
funkce hello_gutenberg_update_callback ($ data) {
return update_post_meta ($ data [‘id’], $ data [‘key’], $ data [‘value’]);
}

Tato cesta REST API bude použita k úpravě našeho meta pole z postranního panelu Gutenberg. Dozvíte se více o WordPress REST API a jak na to registrujte vlastní trasy odtud.

Podobně, pokud chcete vědět, co je WordPress REST API a jak začít, můžete si přečíst náš blogový příspěvek: WordPress REST API: Co to je a jak začít používat.

Přidání bloku postranního panelu do Gutenbergu

Začněme kódem postranního panelu od Gutenberg Boilerplate:

/ **
* Knihovny interních bloků
* /
const {__} = wp.i18n;

const {Fragment} = wp.element;

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

const {registerPlugin} = wp.plugins;

const Component = () => (

{__ (‘Gutenberg Boilerplate’)}

{ __( ‘Ahoj světe!’ ) }

);

registerPlugin (‘gutenberg-boilerplate’, {
icon: ‘admin-site’,
render: Komponenta,
});

Tím se do editoru Gutenberg vloží velmi jednoduchý postranní panel. Bereme to jako výchozí bod a stavíme na tom náš projekt.

Příklad kódu je z našeho úložiště Gutenberg Boilerplate a v důsledku toho musíme nahradit všechny výskyty "Gutenberg Boilerplate" s "Ahoj Gutenberg".

Použité komponenty

Zatímco náš postranní panel již importuje mnoho komponent, budeme potřebovat více. Horní část kódu můžete nahradit následujícím textem:

/ **
* Knihovny interních bloků
* /

const {__} = wp.i18n;

const {
PluginSidebar,
PluginSidebarMoreMenuItem
} = wp.editPost;

const {
PanelBody,
TextControl
} = wp.components;

const {
Součástka,
Fragment
} = wp.element;

const {withSelect} = wp.data;

const {registerPlugin} = wp.plugins;

Podívejme se rychle na všechny komponenty, které jsme importovali.

  1. Jak je uvedeno v předchozím článku, __ komponenta se používá k tomu, aby byl náš text přeložitelný.
  2. PluginSidebar komponenta se používá k přidání našeho postranního panelu do Gutenbergu.
  3. PluginSidebarMoreMenuItem slouží k přidání tlačítka do nabídky Gutenberg, která přepíná viditelnost postranního panelu.
  4. PanelBody komponenta se používá k přidání panelu na náš postranní panel.
  5. TextControl se používá pro naše vstupní pole.
  6. Poté jsme importovali Součástka a Fragment komponenty. Oba jsou komponenty React, které používáme v našem postranním panelu.
    • Komponenta Fragment se používá k seskupení seznamu dětí bez přidání dalších uzlů do DOM. V našem kódu musíme použít komponentu Fragment, protože JSX nám neumožňuje mít více než jeden nadřazený uzel.
  7. withSelect je komponenta vyššího řádu. Chcete-li se dozvědět, jaké komponenty vyššího řádu jsou, doporučujeme si přečíst tuto dokumentaci.
  8. A nakonec importujeme registerPlugin, což je podobné jako registrBlockType, který jsme použili v předchozím článku. Místo registrace bloku registruje registrPlugin váš plugin.

Přidání ovládacích prvků

Náš postranní panel je zatím pouze funkcí komponenty, ale protože budeme používat metody životního cyklu React, proměníme jej na komponentu React, například:

třída Hello_Gutenberg rozšiřuje komponentu {
poskytnout() {
vrátit se (

{__ (‘Ahoj Gutenberg’)}

{ __( ‘Ahoj světe!’ ) }

)
}
}

registerPlugin (‘hello-gutenberg’, {
icon: ‘admin-site’,
render: Hello_Gutenberg,
});

Díky tomu by měl váš postranní panel pracovat s prostým textem.

Nyní přidáme naše pole do postranního panelu. Měla by naše komponenta vypadat takto:

třída Hello_Gutenberg rozšiřuje komponentu {
poskytnout() {
vrátit se (

{__ (‘Ahoj Gutenberg’)}

)
}
}

Nejprve jsme definovali počáteční stav, který je v podstatě klíčem a hodnotou našeho meta pole. Poté pomocí apiFetch načítáme data z našeho aktuálního příspěvku.

Předáváme ID aktuálního příspěvku s proměnnou $ {this.props.postId}. K tomuto bodu se vrátíme později.

Jakmile jsou data načtena, aktualizujeme náš stav hodnotou z našeho REST API.

Nyní se vraťme k proměnné postId. Momentálně neznáme ID našeho aktuálního příspěvku, proto k tomu používáme komponentu s výběrem vyššího řádu, například:

const HOC = withSelect ((select) => {
const {getCurrentPostId} = select (‘core / editor’);
vrátit se {
postId: getCurrentPostId (),
};
}) (Hello_Gutenberg);

registerPlugin (‘hello-gutenberg’, {
icon: ‘admin-site’,
render: HOC,
});

Toto předá ID našeho aktuálního příspěvku jako proměnnou postId. Nyní můžete spustit starší příspěvek a náš Gutenbergův postranní panel zobrazí hodnotu vašeho meta pole.

Aktualizujte meta hodnotu

Nyní musíme povolit, aby náš postranní panel také aktualizoval meta hodnotu. Podobně jako při načítání podrobností, použijeme wp.apiRequest nástroj.

Pokaždé, když se hodnota našeho stavu změní, budeme ji aktualizovat pomocí REST API. Nejprve proto musíme do naší TextControl přidat událost onChange, například:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map