Hogyan lehet a plugin-ot kompatibilissé tenni a Gutenberggel: 2. rész (Sidebar API)

Ha a plugint kompatibilisnek szeretné tenni a Gutenberggel, akkor van néhány út, amelyet meg kell tenned / kell tenned – attól függően, hogy mit tesz a plugin, és hogyan szolgáltatja annak funkcióit a felhasználó számára.


Ennek a mini-sorozatnak a első részében felfedeztük a Gutenberg Block API-ját – erre van szüksége a legtöbb pluginnek a Gutenberg kompatibilitása szempontjából. Ezúttal a Gutenberg puzzle újabb darabját fedezzük fel – Gutenberg Sidebar API.

Gyors magyarázat: csak annak biztosítása érdekében, hogy ugyanazon az oldalon vagyunk,

  • A Gutenberg Block API nagyon kiterjedt, és lehetővé teszi szinte mindent blokkként építeni, de időnként nem elég.
  • Az Sidebar API viszont lehetővé teszi a pluginek számára az oldalsáv regisztrálását, ahol a funkcionalitást blokkokon túl is felhasználhatják. Az oldalsáv hasonló a Block Inspector-hez.

Kompatibilissé tegye pluginját a Gutenberg - Sidebar API-val

Például a használatban lévő Gutenberg Sidebar API, amelyet a Yoast SEO bemutatott:

Gutenberg Sidebar API

Hol használhatja az Sidebar API-t?

Nemrég dolgoztunk a plugin készítésén – WP termék áttekintés – készen áll a Gutenbergre. A WP Product Review metamezőket használt az áttekintési adatok hozzáadásához a bejegyzéshez, és különféle visszamenőleges kompatibilitási okokból nem tudtunk átblokkolni. Ezért az Sidebar API-t használtuk.

Így integráltuk a WP Termékértékelést a Gutenberg szerkesztőbe:WP Termékértékelés Gutenberg

Amikor a felhasználók azt jelzik, hogy a bejegyzés felülvizsgálat egy oldalsáv-váltással, akkor az oldalsáv beállításai közül mindent konfigurálhatnak az áttekintő dobozukkal kapcsolatban..

A WP Product Review az egyik példa, amelyben az Sidebar API hasznos lehet. További nagyszerű példa a Dobd el plugin, amely lehetővé teszi a felhasználók számára, hogy az Unsplash és a Giphy állomány képeit az oldalsáv segítségével illesszék be.

Ebben a bejegyzésben bemutatom valami hasonló megvalósításának folyamatát, és a Gutenberg-plugin kompatibilisvé tételét az Sidebar API-n keresztül..

A meta dobozok alapértelmezés szerint készen állnak Gutenbergre, de nem egészen

Kezdjük a meta mezőkkel. Vegyünk egy bővítményt, amely egy egyszerű meta dobozt használ, hogy bizonyos funkciókat biztosítson a felhasználónak a szerkesztő képernyőjén.

Ez a következőképpen néz ki a klasszikus szerkesztőben:

Meta Box a klasszikus szerkesztőben

Az alábbi kódot használhatja ilyen metamező létrehozásához – ez szintén elérhető a Hello Gutenberg adattár:

/ **
* Regisztráljon Hello Gutenbert Meta Box-ot
* /
funkció 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’);

/ **
* Hello Gutenberg Metabox visszahívás
* /
funkció hello_gutenberg_metabox_callback ($ post) {
$ érték = get_post_meta ($ post->Azonosító, ‘_hello_gutenberg_field’, igaz);
?>
<?php _e (‘Mi a neved?’, ‘hello-gutenberg’) ?>

<?php
}

/ **
* Mentsd Hello Gutenberg Metaboxot
* /
funkció 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’);

Tehát itt kell feltenni a kérdést:

Először is ezt a Gutenberg-kompatibilitást kell tennünk?

Ezen a ponton meg kell fontolnunk azt a kérdést, hogy mi a Gutenberg-kompatibilis. Például, ha ezt a nagyon meta mezőt használja a Gutenbergben anélkül, hogy bármiféle változtatást végrehajtana, akkor az továbbra is működni fog.

Amikor azonban a Gutenberg kompatibilitásáról beszélünk, akkor nem pusztán a Gutenberg környezetben működő pluginről beszélünk, hanem a plugin működéséről, mint a Gutenberg *.

"Miért?" – kérdezted. Egyszerűen azok a felhasználók, akik a Gutenberg alapértelmezett szerkesztője után kezdik használni a WordPress programot, meg fogják találni a régi módszereket az ellentétes intuíció elérésére. Ezenkívül egy Gutenberg-szerűbb stílust várnak el mindent a szerkesztőben.

Ha nem ad natív érzést a felhasználók számára, akkor minden bizonnyal olyan alternatívákat fog keresni, amelyek jobban működnek együtt a Gutenberg-rel.

Végül piszkáljuk kezünket valamilyen kóddal!

Az Sidebar API használatának megkezdése

Megkezdjük a Gutenberg oldalsávunk kódolását, hogy belefoglaljuk a metamezőünket. Folytathatja a Gutenberg kazánlap tároló kiindulási pontként.

Készülj fel a meta dobozra Gutenberg számára

Mielőtt elkezdenénk, először meg kell mondanunk Gutenbergnek, hogy nem fogjuk használni a Gutenbergben található metamezőnket. Megteheti úgy, hogy átadja a __back_compat_meta_box argumentumot az add_meta_box függvénynek, például:

/ **
* Regisztráljon Hello Gutenberg Metabox-ot
* /
funkció 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’ => hamis,
));
}
add_action (‘add_meta_boxes’, ‘hello_gutenberg_add_meta_box’);

A Gutenberg Kézikönyv további részleteket tartalmaz arról, hogyan lehet kezelni a PHP meta mezők Gutenbergbe történő átvitelét (itt).

Ez biztosítja, hogy a régi PHP metamezőink már nem jelenjenek meg Gutenbergben. Most azt is el kell készítenünk a metamezőnket Gutenberg számára, hogy hozzáadjuk azt a WordPress REST API-hoz. A következő kódot hozzáadhatja a metamező REST API-n történő regisztrálásához:

/ **
* Regisztráljon Hello Gutenberg Meta Field pihenési API-t
* /
hello_gutenberg_register_meta () funkció
register_meta (
‘post’, ‘_hello_gutenberg_field’, array (
„Típus” => ‘húr’,
„Egységes” => igaz,
‘Show_in_rest’ => igaz,
)
);
}
add_action (‘init’, ‘hello_gutenberg_register_meta’);

Ez hozzáadja a _hello_gutenberg_field mezőt a meta objektum a REST API-ban.

Ez a funkció csak azért fogja elvégezni az értékünket a REST API-ban. Most hozzá kell adnunk egy módszert is a metamezőnk frissítéséhez a REST API használatával.

A következő kód hozzáadja az egyéni útvonalunkat a WordPress REST API-hoz, amely a következő lesz / Szia-Gutenberg / V1 / frissítés-meta /:

/ **
* Regisztráljon Hello Gutenberg Metabox-ot a többi API-hoz
* /
funkció hello_gutenberg_api_posts_meta_field () {
register_rest_route (
‘hello-gutenberg / v1’, ‘/ update-meta’, tömb (
‘módszerek’ => ‘POST’,
‘visszahívás’ => ‘Hello_gutenberg_update_callback’,
‘args’ => sor(
‘id’ => sor(
‘sanitize_callback’ => ‘Absint’,
),
),
)
);
}
add_action (‘rest_api_init’, ‘hello_gutenberg_api_posts_meta_field’);

/ **
* Hello Gutenberg REST API visszahívás a Gutenberg számára
* /
hello_gutenberg_update_callback funkció ($ adatok) {
return_post_meta visszatérés ($ data [‘id’], $ data [‘kulcs’], $ data [‘value’]);
}

Ezt a REST API útvonalat a Gutenberg oldalsáv metamezőjének módosítására használjuk. Tudjon meg többet a WordPress REST API-ról és hogyan itt regisztrálhat egyedi útvonalakat.

Hasonlóképpen, ha szeretné tudni, mi a WordPress REST API és hogyan kezdje el, olvassa el blogbejegyzésünket: WordPress REST API: Mi ez és hogyan kezdje el használni.

Oldalsáv blokk hozzáadása a Gutenberghez

Kezdjük az oldalsáv-kóddal Gutenberg kazánlap:

/ **
* Belső blokk könyvtárak
* /
const {__} = wp.i18n;

const {Fragment} = wp.element;

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

const {registerPlugin} = wp.plugins;

const Alkatrész = () => (

{__ (‘Gutenberg kazánlemez’)}

{ __( ‘Helló Világ!’ ) }

);

registerPlugin (‘gutenberg-boilerplate’, {
ikon: ‘admin-site’,
render: Alkatrész,
});

Ez beilleszt egy nagyon egyszerű oldalsávot a Gutenberg szerkesztőbe. Ezt kiindulási pontnak fogjuk venni, és rá építjük a projektünket.

A példakód a Gutenberg Boilerplate lerakatból származik, és ennek eredményeként ki kell cserélnünk a "Gutenberg kazánlap" val vel "Hello Gutenberg".

Használt alkatrészek

Míg az oldalsávunk már számos összetevőt importál, többre lesz szükségünk. A kód felső részét a következőkkel helyettesítheti:

/ **
* Belső blokk könyvtárak
* /

const {__} = wp.i18n;

const {
PluginSidebar,
PluginSidebarMoreMenuItem
} = wp.editPost;

const {
PanelBody,
TextControl
} = wp.components;

const {
Összetevő,
Töredék
} = wp.element;

const {withSelect} = wp.data;

const {registerPlugin} = wp.plugins;

Gyorsan megismerjük az összes importált összetevőt.

  1. Amint az előző cikkben tárgyaltuk, a __ az összetevő a szöveg fordíthatóságának elősegítésére szolgál.
  2. Az PluginSidebar Az összetevő az oldalsáv hozzáadása a Gutenberghez.
  3. PluginSidebarMoreMenuItem egy gomb hozzáadására szolgál a Gutenberg menübe, amely váltja az oldalsáv láthatóságát.
  4. Az PanelBody Az összetevő hozzáteszi a panelt az oldalsávhoz.
  5. TextControl a beviteli mezőnkhöz használható.
  6. Ezt követően importáltuk a Összetevő és Töredék alkatrészek. Mindkettő React komponens, amelyet az oldalsávunkban használunk.
    • A Fragment összetevőt gyermekek listájának csoportosítására használják anélkül, hogy további csomópontokat adnának a DOM-hoz. A Fragment összetevőt kell használni a kódban, mivel a JSX nem teszi lehetővé, hogy egynél több szülőcsomó legyen.
  7. withSelect egy magasabb rendű összetevő. Javasoljuk, hogy olvassa el a magasabb rendű összetevők megismeréséhez ezt a dokumentációt.
  8. És végül importálunk registerPlugin, amely hasonló az registerBlockType-hez, amelyet az előző cikkben használtunk. Blokk regisztrálása helyett a registerPlugin regisztrálja a bővítményt.

Vezérlők hozzáadása

Eddig az oldalsávunk csak egy összetevő funkció, de mivel a React életciklus-módszereit fogjuk használni, átalakítjuk React összetevővé, például:

A Hello_Gutenberg osztály kibővíti a {
Vakol() {
Visszatérés (

{__ (‘Hello Gutenberg’)}

{ __( ‘Helló Világ!’ ) }

)
}
}

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

Ennek az oldalsávnak egyszerű szöveggel kell működnie.

Most tegyük fel a mezőt az oldalsávba. Ennek az összetevőnknek így kell néznie:

A Hello_Gutenberg osztály kibővíti a {
Vakol() {
Visszatérés (

{__ (‘Hello Gutenberg’)}

)
}
}

Először meghatároztuk a kezdeti állapotot, amely alapvetően a meta mezőnk kulcsa és értéke. Ezt követően az apiFetch-t használjuk az aktuális üzenetünk adatainak lekérésére.

A $ {this.props.postId} változóval átadjuk jelenlegi üzenetünk azonosítóját. Később visszatérünk erre a pontra.

Az adatok lekérése után frissítjük állapotunkat a REST API-ból származó értékkel.

Most térjünk vissza a postId változóhoz. Jelenleg nem tudjuk jelenlegi bejegyzésünk azonosítóját, ezért ehhez a következőket használjuk:

const HOC = withSelect ((Select) => {
const {getCurrentPostId} = select (‘core / editor’);
Visszatérés {
postId: getCurrentPostId (),
};
}) (Hello_Gutenberg);

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

Ez átadja jelenlegi üzenetünk azonosítóját postId változóként. Most már futhat egy régebbi üzenet, és a Gutenberg oldalsávunk megjeleníti a metamező értékét.

Frissítse a meta értéket

Most lehetővé kell tennünk az oldalsávunknak a metaérték frissítését is. A részletek lekéréséhez hasonlóan a wp.apiRequest hasznosság.

Minden alkalommal, amikor állapotunk értéke megváltozik, frissítjük a REST API-val. Ehhez először hozzá kell adnunk egy onChange eseményt a TextControl-hoz, így:

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