A Gutenberg pluginjának adaptálása: 1. rész (Block API)

A Gutenberg pluginjának adaptálása: 1. rész (Block API)

A Gutenberg pluginjának adaptálása: 1. rész (Block API)
СОДЕРЖАНИЕ
02 июня 2020

"Van egy pluginom," mondja neked, "hogyan tehetem készen Gutenbergre?"


A történet egyértelmű; Gutenberg az új szerkesztő élmény a WordPress-ben, amelyet a következő jelentősebb kiadásban fognak egyesíteni. Sok olyan plugin, amely nem tartja fenn ezt elavulttá válik. Ez alapvető fontosságú, hogy mielőtt késő lenne, módosítsa a bővítményt a Gutenberg számára.

Ki érintett??

Szinte az összes plugin Gutenberg befolyásolja azokat, akiknek bármi köze van a postaszerkesztőhöz. Például, ha a plugin hozzáad egy gombot a TinyMCE-hez, hogy egy rövid kódot helyezze a szerkesztőbe, rossz hírek; ez lesz a vége.
A Gutenberg pluginjának adaptálása: 1. rész (Block API)

"Meg kell adaptálnom a pluginomat a Gutenberghez?"

Szóval mely plugineket kell frissíteni a Gutenberg számára? Minden plugin, amely működik együtt:

  • Egyéni metaboxok
  • shortcodes
  • TinyMCE gombok
  • vagy bármilyen szerkesztő funkciót

Noha néhány plugin továbbra is működni fog a Gutenberg-rel, mint például egy egyszerű metaboxot tartalmazó plugin, a felhasználók számára ez nem lesz olyan zökkenőmentes élmény..

Még a rövid kódok továbbra is működni fognak, mint korábban, de ez egyszerű szöveges csomópont lesz a szerkesztőben, míg a Gutenberg összes rövid kód-bővítése a blokk felhasználói felületét fogja követni, és a felhasználók számára könnyebben használható..

Tehát igen, a felhasználók inkább a Gutenberg élményére készített bővítményeket részesítik előnyben. És azokat, amelyek hátramaradnak, egy konkurens plugin helyettesíti.

Csak azért, hogy ötletet adjunk, itt van egy példa arra, hogy hogyan néz ki a felhasználó szokásos régi szerkesztőjének tapasztalata a mi pluginunkkal (A), és akkor hogyan néz ki Gutenbergben (B) – az ehhez optimalizált bővítménnyel.

(B)Feedzy RSS-hírcsatornák - egy Gutenberg-kész plugin

Ne félj! Azért vagyunk itt, hogy segítsünk a Gutenberg pluginjainak készítésében. A plugin Gutenberg felé történő integrálásának számos módja van, attól függően, hogy hogyan működik a plugin, amelyet ebben a cikkben fogunk megvitatni.

Amit előre érdemes tudniGutenberg a Reacton van írva. A Gutenberg pluginok pedig JavaScript-ben vannak kódolva, ami durva átmenet lehet azon fejlesztők számára is, akik csak a PHP-ben kódolnak. Noha nem kell, hogy rendelkezzen ismeretekkel a Reaktúráról, hogy Gutenberghez beépülő modulokat készítsen, a JavaScripten alapvető ismeretekre van szüksége. Ha korábban már dolgozott a React-on és a JSX-n, akkor ez hasonló ok lesz az ön számára.

Bár nincs elég a Gutenberg hivatalos dokumentációja, a Github adattárában sok értékes információ található a fejlesztők számára. Ha mélyen meg akarja tanulni a Gutenberg fejlesztését, nyitott szemmel kell nyitnia mindazt, ami a Gutenberg GitHub tárházában zajlik, mert a projekt nagyon gyorsan halad, és a dolgok minden nap változnak.

Hogyan kell adaptálni a plugin-t a Gutenberghez

A Gutenberg API számos lehetőséget kínál nekünk a szerkesztő kibővítésére, például a Block API, a Shortcode API és így tovább. A használni kívánt API-t attól függ, hogy milyen plugint építünk.

Ha a plugin egy egyszerű rövid kódú plugin, akkor a Block API felhasználható gyönyörű blokk készítésére a szerkesztő számára. De ha a bővítmény összetett metaboxokat használ, ahol a blokkok nem elégek, akkor használhatjuk az Sidebar API-t.

Emellett egy modern, a JavaScript fejlesztési eszközöket is használunk, mint például a NodeJS, az NPM, a webpack és az ESNext. Példafájlokat fogunk biztosítani Önnek, így nem kell aggódnia a fejlesztési környezet beállításáért.

Ebben a bejegyzésben megvizsgáljuk hogyan lehet a plugin Gutenberg-kompatibilisvé tenni a Block API használatával. Megvizsgáljuk a többi módszert (oldalsáv API, közzétételi panel, állapotsor & hasonló API-k) a második részben, ha szükséges.

Az összes említett példát megtalálhatja a ezt a GitHub lerakatot.

Gutenberg fejlesztési környezet

A Gutenberg számára történő fejlesztéshez sokféle eszközt kell beállítania, mint például az NPM, a webpack, a Babel és a JSX. Sok időt és erőfeszítést igényel, ezért felkészítettük a környezetet az Ön számára.

A Gutenberg Boilerplate egy plugin, minimális Gutenberg fejlesztési beállításokkal és példákkal. Egy blokkot és oldalsávot tartalmaz. Ezt felhasználhatja az egyéni blokk kiterjesztésére.

Gutenberg kazánlap

Villát vagy klónozhat Gutenberg kazánlemez tároló neked / Wp-content / plugins / és használja fejlesztési környezetként.

Ezt követően telepítenie kell a NodeJS-t a számítógépére az induláshoz. Keresse meg a Gutenberg Boilerplate mappát, és futtassa az npm installációt

Ettől kezdve három parancsot kell tudnia, amelyeket a fejlesztési folyamat során használ:

  • npm install – Projektfüggőségek telepítése a projekt klónozásakor.
  • npm run dev – Kód fordítása a fejlesztési folyamat során. Ezt egyszer kell futtatnia, és folyamatosan figyeli a változásokat.
  • npm run build – Összeállít egy kódot egy optimalizált buildhez, miután a fejlesztési folyamat befejeződött.

Block API

A blokkok a Gutenberg alapvető elemei, mivel blokk-alapú szerkesztő. A Blokk API lehetővé teszi blokkok készítését a Gutenberg számára. Készíthet olyan blokkokat, amelyek alapszintű HTML-t, rövid kódot jeleníthetnek meg, vagy akár dinamikus blokkokat is létrehozhatnak például a legújabb hozzászólások megjelenítéséhez.

A meglévő beépülő modulon alapuló folyamat

Példánkban a Click to Tweet rövidkódot fogjuk elfogadni egy Gutenberg blokkhoz. Ez a Click to Tweet rövid kód egy Tweet fiókot jelenít meg a szöveggel, és egy gombot a szöveg csipogásához. Mint ez:

Kattintson a Tweet elrendezés elemre

A rövid kódunk így néz ki:

[kattintásos tweet ="Megjelenítendő szöveg" tweetsent ="A tweetelt szöveg" gomb ="Csipog" theme ="click-to-tweet"]

A rövid kódunk négy paraméterrel rendelkezik:

  • tweet: a webhelyén megjelenő szöveg.
  • tweetsent: A Twitterre jutó szöveg.
  • gomb: Tweet gomb szövege.
  • téma: Kattintson a tweetre vagy a tweetre alt, mint doboz téma.

A Gutenberg pluginek adaptálása a Block API használatával

Kétféle módon lehet ezt megtenni a Gutenbergnél: vagy előállíthatjuk a HTML-t a kezelőfelületre, vagy felhasználhatjuk a Gutenberg-blokkunkat, hogy a rövid kódot előtérbe helyezzük. Ez a cikk az utóbbit fogja elvégezni.

Az összes kód angol nyelven érhető el Hello Gutenberg plugin lerakat a GitHubon. Klónozhatja a lerakatot, hogy láthassa a beépülő modult, vagy módosítsa a kódot.

Rajzolja be a Gutenberg szkripteit / stílusait

Először be kell szúrnunk a szkripteinket és stílusainkat a Gutenberg szerkesztőbe az enqueue_block_assets használatával:

/ **
* Enqueque front és szerkesztő JavaScript és CSS
* /
funkció hello_gutenberg_scripts () {
$ blockPath = ‘/dist/block.js’;
$ stylePath = ‘/dist/block.css’;

// Nyugtassa be a mellékelt blokk JS fájlt
wp_enqueue_script (
‘Szia-Gutenberg-block-js’,
plugins_url ($ blockPath, __FILE__),
[‘wp-i18n’, ‘wp-blokkok’, ‘wp-szerkesztő’, ‘wp-alkatrészek’],
filemtime (plugin_dir_path (__ FILE__). $ blockPath)
);

// Végezzen el előlapi és szerkesztő blokk stílusokat
wp_enqueue_style (
‘Szia-Gutenberg-block-css’,
plugins_url ($ stylePath, __FILE__),
„”,
filemtime (plugin_dir_path (__ FILE__). $ stylePath)
);

}

// A horgos szkriptek blokk-szerkesztő kampóvá válnak
add_action (‘enqueue_block_assets’, ‘hello_gutenberg_scripts’);

Négy függőséget adtunk hozzá a szkriptünkhöz, amelyeket a blokkunkban használunk. Tanuljuk először ezeket a függőségeket:

A wp-i18n a Gutenberg nemzetköziesítési funkcióinak változata, például __ (). A wp-blokkokat a registerBlockType funkcióhoz használja, amely regisztrálja a blokkot. A blokk különféle összetevőihez wp-editor és wp-components szkripteket használunk.

Most, hogy elkísértük az eszközöket, megkezdhetjük a blokkolás beírását /src/block.js fájl.

Függőségek importálása

Ha Gutenberg kazánlemezt használ, akkor az Ön block.js A fájlnak alapvető blokk-struktúrával kell rendelkeznie, amelyet felhasználhat a Gutenberg plug-inek készítéséhez:

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

const {registerBlockType} = wp.blocks;

/ **
* Regisztrációs blokk
* /
alapértelmezett registerBlockType exportálása (‘gutenberg-boilerplate / block’, {
// Cím blokkolása
cím: __ (‘Gutenberg kazánlemez’),
// Blokkleírás
leírás: __ (‘Példablokk.’),
// Blokk kategória
kategória: „közös”,
// Ikon blokkolása
ikon: ‘admin-site’,
// Kulcsszavak blokkolása
kulcsszavak: [
__ (‘kazánlemez’),
__( ‘Helló Világ’ ),
__( ‘Példa’ ),
],
attribútumok: {
},
// A szerkesztési felület meghatározása
szerkesztés: kellékek => {
Visszatérés (

{__ (‘Hello Backend’)}

);
},
// A kezelőfelület meghatározása
mentés: kellékek => {
Visszatérés (

{__ (‘Hello Frontend’)}

);
},
});

Az npm run dev paranccsal futtathatja a kód valós időben történő összeállítását.

Először az összes összetevőt és könyvtárat importáljuk, amelyekre szükségünk van a felső blokkhoz:

/ **
* A függőségek blokkolása
* /

osztálynevek importálása az „osztálynevekből”;

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

const {registerBlockType} = wp.blocks;

const {
Gazdag szöveg,
InspectorControls,
BlockControls,
} = wp.editor;

const {
PanelBody,
TextareaControl,
TextControl,
Dashicon,
eszköztár,
Gomb,
Tooltip,
} = wp.components;

Az első behozatal classnames amelyet az npm használatával telepítettünk, hogy több osztályt használjunk a kódban, mivel a JSX nem engedélyezi az osztályok több elemét.

Megtanulunk más összetevőkről, amelyeket importáltunk, amikor használjuk őket.

Adjon meg attribútumokat

Most négy attribútumot definiálunk a Gutenberg-blokkunkhoz, hasonlóan a rövid kódhoz:

attribútumok: {
tweet: {
típus: ‘karakterlánc’,
},
tweetsent: {
típus: ‘karakterlánc’,
},
gomb: {
típus: ‘karakterlánc’,
alapértelmezett: __ (‘Tweet’),
},
téma: {
típus: ‘logikai’,
alapértelmezett: hamis,
},
},

Mint láthatja, az összes attribútum megegyezik a rövid kódunkkal. Minden attribútumnak van egy típuskulcs, amely megmondja a Gutenbergnek az adattípust. Használhatja karakterláncot, számot, logikai értéket & objektum elfogadott típusként.

Néhány attribútum tartalmaz egy alapértelmezett értéket. Az attribútumoknak lehetnek más tulajdonságai is, például forrás és szelektorok, amelyeket nem használunk a példánkban, de Ön Tudjon meg többet róluk itt.

Szerkesztő felület

Most felépítjük a blokkunk szerkesztési felületét, amely a kijelző lesz – a felhasználók látni fogják, miközben a blokkot Gutenbergben szerkesztik..

Alapvető ötlet megszerzéséhez először keményen kódolhatjuk a blokkunkat, és építhetünk rá, ha kicseréljük a következő mezőt a kódban:

// A szerkesztési felület meghatározása
szerkesztés: kellékek => {
Visszatérés (

{__ (‘Hello Backend’)}

);
},

A következő kóddal:

// A szerkesztési felület meghatározása
szerkesztés: kellékek => {
Visszatérés [

Sütőtök és pingvinek

Csipog

];
},

Ez képet ad neked a végeredményről. Valami így néz ki:

Gutenberg plug-inek

A blokk első eleme a tweet szöveges terület. Kicseréljük egy szerkeszthető szövegmezőre, hasonlóan a Gutenberg fejlécéhez.

Használni fogjuk Gazdag szöveg olyan összetevő, amelyet korábban importáltunk a kódolt szöveg helyett.

RichText összetevőnk öt érvvel rendelkezik. A formátum egy karakterlánc, mivel a rövid kódot fogjuk használni az elemek megjelenítéséhez a kezelőfelületen. Ha kiválasztót akarunk használni az attribútumunkban, akkor a formátum tömb lett volna.

A RichTextnek alapértelmezés szerint van néhány formázási lehetősége, például a vastag és dőlt, amelyeket letiltottunk egy üres tömb átadásával a formatingControls argumentumban..

helyőrző a helyőrző szöveg, ha nincs szöveg a mezőben, és az onChange indítja az onChangeTweet funkciót, amikor egy változási esemény zajlik.

Végül, az érték a mi mezőnk értéke, amelyet a korábban meghatározott tweet attribútumból veszünk.

Miután meghatároztuk a RichText területet, ki kell építeni az onChangeTweet függvényt, amely akkor indul, amikor az érték megváltozik a szöveges mezőben.

// A szerkesztési felület meghatározása
szerkesztés: kellékek => {
const onChangeTweet = érték => {
props.setAttributes ({tweet: value});
};
Visszatérés [
…a kód többi része

A RichText mező értékét átadjuk az onChangeTweet függvénynek, amely ezt használja props.setAttributes funkció a tweet attribútum értékének frissítéséhez.

Most látni fogja Gutenberg erejét, amikor a blokkot használja.

RichField Gutenbergben

Hát nem félelmetes??

Blokkoló

A Gutenberg számára plug-inek építésekor nem kell minden alkalommal feltalálnia a kereket, hogy kiegészítőket készítsen pluginek számára. A Gutenberg egyszerűsített módszert kínál nekünk a blokk testreszabásának lehetővé tételéhez, és biztosítja, hogy minden felhasználónak következetes tapasztalata legyen a beépített felhasználói felület mintákkal.

A RichText összetevőhöz hasonlóan az InspectorControls összetevő hozzáad egy oldalsávot, amikor a blokkot kiválasztják. Valami ilyesmi:

Gutenberg ellenőr vezérlők

A TextareaControlt és a TextControlt szintén használjuk textarea és szövegbeviteli mező hozzáadásához az Inspector területünkre..

A következő kódot fogjuk hozzáadni a visszatérési nyilatkozathoz:

!! props.isSelected && (

),

props.isVálasztott ellenőrzések annak ellenőrzésére, hogy az Inspector csak akkor jelenik meg, ha a blokkot kiválasztotta.

A TextareaControl és a TextControl összetevők, hasonlóan a RichTexthez, érték és onChange módszerrel rendelkeznek.

Meg kell változtatnunk a blokkkijelzés kódját is az új változtatások beillesztése érdekében. Esetünkben csak a Gomb szöveget kell hozzáadnunk a blokkunkhoz, mivel a Tweet szöveg hozzáadódik a linkhez, így nem kell azt megjeleníteni a háttérprogramban.

A hiperhivatkozást a kezdeti kódban a következőkkel helyettesítheti:


{props.attributes.button}

Mint korábban említettük, eltávolítottuk a hiperhivatkozást a kódból, mert nem kell azt megjeleníteni a háttérrendszerben. Így a blokkunk így néz ki:

Gutenberg Kattintson a Tweet ellenőrző kezelőszervekre

A Blokkfelügyelő hatékony eszköz lehet a blokk számára. Ha a bővítmény speciális opciókkal rendelkezik, amelyek túl bonyolultak a szerkesztő területéhez, akkor elhelyezheti azokat az Felügyelő területén.

Egy utolsó opciót adunk a blokkunkhoz, hogy a JavaScript szakasz a következő szakaszban befejeződjön.

Az Eszköztár blokkolása

A Blokkoló eszköztár egy másik előre elkészített felhasználói felület-összetevő, amelyet további lehetőségek felvételéhez használhatunk. Ez a blokk felett jelenik meg, amikor kiválasztja. Példa:

Gutenberg blokkoló eszköztár

Ideális esetben a Blokk eszköztárnak tartalmaznia kell a blokk elsődleges vezérléseit, az Inspector pedig a másodlagos vezérlőkkel. Ez azonban vitatható és az Ön blokkjától függ.

Az Alternatív stílusvezérlés házigazdáját a Block Toolbar területen fogjuk használni.

A Block Inspectorhoz hasonlóan, a következő kódot kell hozzátennünk a visszatérési nyilatkozathoz, hogy a Blokkoló eszköztárat blokkunkhoz adjuk:

!! props.isSelected && (

),

A BlockControls és az Eszköztár-összetevők segítségével hozzáadunk egy eszköztárat blokkunkhoz. A Block Inspectorhoz hasonlóan a props.isSelected gondoskodik arról, hogy eszköztárunk csak akkor jelenjen meg, amikor a blokkunkra összpontosítunk.

Az irányításhoz Tooltip és Button komponenseket is használunk. Az eszköztipp-összetevő át van csomagolva a gomb-összetevőhöz, hogy megbizonyosodjon arról, hogy van-e egy eszköztipp, amikor az egérmutatóra kattintva átadja a környezetet.

A gombkomponens az osztálynevek modult használja, amelyet a cikkben korábban importáltunk. Az osztálynevek funkcióval három osztályt adott a vezérlésünkhöz. A harmadik osztály, aktív, csak akkor jelenik meg, ha a témattribútum értéke igaz.

OnChange funkciója váltja a téma attribútumát true / false értékre. Végül a Dashicon komponensekkel ikon jeleníthető meg a vezérlésünkhöz.

Meg kell változtatnunk a blokkkódunkat is, hogy a változásokkal együtt dolgozzunk. Cserélnünk kell a következő sort:

Val vel:

Ellenőrizzük, hogy a theme attribútum igaz-e vagy sem, és ennek megfelelően osztályt rendelünk blokkunkhoz.

Most a blokkjának így kell kinéznie:

Kattintson a Tweet eszköztárra

Befejeztük a Gutenberg-blokk JavaScript-oldalú részét. Megtalálható a fájl teljes forráskódja itt.

Most a szerveroldali kimenet kezelésével fejezzük be a blokkot.

Szerveroldali megjelenítés

A Gutenberg lehetővé teszi a szerver oldali megjelenítést a blokkok előtérben történő megjelenítéséhez. Ez a szerveroldali megjelenítés lehetővé teszi számunkra, hogy blokkokat hozzunk létre a rövid kódokhoz.

Először megtesszük a mentési módszerünket, hogy null értékre térjen vissza, helyettesítve a következő kóddal:

// A kezelőfelület meghatározása
megment() {
// Megjelenítés PHP-ben
visszatérés null;
},

A register_block_type PHP függvényt használjuk a blokk típusunk regisztrálására a PHP-ben:

if (function_exists (‘register_block_type’)) {
// Hook szerver oldali renderelés render visszahívássá
register_block_type (
„hello-gutenberg / kattintás-csipogtatás”, [
‘render_callback’ => ‘Hello_gutenberg_block_callback’,
‘attribútumok’ => sor(
„tweet” => sor(
‘type’ => ‘húr’,
),
‘tweetsent’ => sor(
‘type’ => ‘húr’,
),
„Gomb” => sor(
„Típus” => ‘húr’,
‘alapértelmezett’ => ‘Csipog’,
),
‘téma’ => sor(
„Típus” => „Logikai”,
‘alapértelmezett’ => hamis,
),
),
]
);
}

A register_block_type funkciónk. Először átadjuk neki a blokk nevünket, egy sor érvvel együtt.

Az első argumentum a render_callback függvény, amely felhívja a hello_gutenberg_block_callback függvényt a szerver oldali megjelenítésre..

A render visszahívás után az attribútumokat tömbként adjuk át, hasonlóan a block.js fájlhoz, amelyeket render visszahívási funkciónkban használunk..

Render visszahívási funkciónk így néz ki:

funkció hello_gutenberg_block_callback ($ attr) {
kivonat ($ attr);
if (isset ($ tweet)) {
$ theme = ($ theme === igaz? ‘click-to-tweet-alt’: ‘click-to-tweet’);
$ shortcode_string = ‘[clicktotweet tweet ="% s" tweetsent ="% s" gomb ="% s" theme ="% s"] ‘;
visszatérő sprintf ($ shortcode_string, $ tweet, $ tweetsent, $ gomb, $ téma);
}
}

Kicsomagoljuk az összes attribútumot, majd visszajuttatjuk a rövid kódunkba. Ez minden, amire szükség van a rövid kódú pluginek Gutenberghez történő adaptálásához.

Ebben a cikkben található összes kódot megtalálhatja a cikkben szia-Gutenberg raktár.

A következő részben megvizsgáljuk a Gutenberg meglévő beépülő moduljainak adaptálásának más módjait, ideértve az Sidebar API-t.

Ha bármilyen kérdése van a Gutenberg pluginjának adaptálásával kapcsolatban, kérdezze meg őket a megjegyzésekben!

Ne felejtsd el csatlakozni a WordPress-webhely felgyorsításának összeomlási tanfolyamához. Néhány egyszerű javítással akár 50-80% -kal csökkentheti a betöltési időt:

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