Gutenberg oktatóprogram kezdő fejlesztőknek: Hozza létre az első blokk pluginját

Gutenberg bemutató kezdőknek


Ha 2020-ban valami fejlesztést tervez a WordPress számára, akkor a Gutenberg figyelmen kívül hagyása egyszerűen nem lehetséges. A plugineknek és a témáknak szépen együtt kell működniük a Gutenberggel, és olyan felhasználói élményt kell biztosítaniuk, amely következetes minden, amit a felhasználó láthat a WordPress irányítópulton. És különösen mivel a Gutenberg a WordPress szerves része, amelyet egyszerűen blokk-szerkesztőnek hívnak.

Ennek ellenére a Gutenbergpel való kezdés nem olyan egyszerű. Míg néhány évvel ezelőtt jó minőségű WordPress plugin-t tudott írni, csak a Jegyzettömb használatával, a folyamat most sokkal nehezebbé vált..

A Gutenberg olyan technológiákat használ, mint a WordPress REST API, a JavaScript és a React. Ezért a pluginokra és a témákra vonatkozó új követelmények szükségesek voltak a Gutenberghez való munka érdekében.

A jó hír az, hogy ma mindent erről beszélünk! Ez a bejegyzés Gutenberg oktatóanyagként szolgál kezdőknek, akik először akarnak létrehozni egy plugint a Gutenberghez.

Elsősorban a Gutenberg-bővítmény létrehozásának különféle szempontjaira összpontosítunk – a fejlesztési környezet beállítására, az alapszintű plugin létrehozására és a blokkokkal végzett munka néhány árnyalata felé..

1. Állítsa be a Gutenberg fejlesztési környezetét

A Gutenberg fejlesztésével kezdeni kell néhány alapvető ismeretet a JavaScriptről és a Reaktúráról. Itt található egy bemutató a JavaScriptről egy WordPress fejlesztő számára. Ezenkívül további csomagokra Gutenbergben szükség lehet egy NodeJS csomagkezelő használatára, npm.

A NodeJS legújabb stabil verzióját a telepítőkkel telepítheti Windows vagy MacOS rendszerre a hivatalos oldalon. Ha van Linux szerver, fordíthatja a forráskódot, vagy használhatja a megfelelő csomagkezelőt (például az apt és yum). Például, ha Ubuntu-t használ, futtassa a következő parancsokat a terminálon.

sudo apt frissítés
sudo apt install nodejs npm

Miután a telepítés sikeres volt, futtassa a következő parancsot a NodeJS verziójának ellenőrzéséhez.

nodejs – verzió

Miután bejelölte ezeket a négyzeteket, érdemes beállítani a teszt WordPress webhelyét a jelenlegi Gutenberg plugin (önálló plugin) példányával vagy akár annak fejlesztő verziójával – megszerezheti azt a GitHub-tól.

⚠️ Megjegyzés; míg a Gutenberg be van építve a WordPressbe, ez a verzió nem a legújabb. A fejlesztés a Gutenberg-en továbbra is meglehetősen külön-külön történik, és mindezt az új először a Gutenberg önálló pluginja tartalmazza. A magban lévő tényleges Gutenberg verzió még nem kap jelentős változást a WordPress 5.0-ba való beillesztése óta. Mindig azt akarja, hogy a Gutenberg legújabb verzióján dolgozzon, mivel ez nagyobb esélyt biztosít a munkája jövőbeni bizonyítására, és gondoskodik arról, hogy az alkotásod összhangban legyen mindazzal, ami később a WordPress magjába kerül..

Egy másik megjegyzés: ha hozzájárulni kíván a Gutenberg központi pluginhez, akkor a lerakat rendelkezik hozzájáruló iránymutatások a helyi környezet beállításáról és a felülvizsgálathoz szükséges változtatások beállításáról.

�� Végül, ha a meglévő pluginjait a Gutenberghez kívánja igazítani, akkor itt található egy részletes útmutató, hogyan lehet ezt elérni: 1. és 2. rész.

A sablon plugin könyvtár elindításához, amely már készen áll a Gutenbergi együttműködésre, érdemes fontolóra vennie a használatát a Gutenberg kazánlap plugin. Ez a megoldás segíti az alapvető fájlszerkezetet, így a plugin tartalmára összpontosítva. A kazánlap használatához töltse le és telepítse a bővítményt innen (zip). A kazánlap beépülő modul telepítése és aktiválása aktiválja a mintablokkokat, amelyeket ebben az oktatóanyagban fogunk megvizsgálni. Az egyes blokkok kódját megtalálja a megfelelő könyvtárban a kazánlap beépülő moduljának helyén.

2. Kezdeti konfiguráció

Csak emlékeztetőül, Gutenberg bemutatja a blokkok fogalmát, amelyek helyettesítik a szokásos TinyMCE szerkesztő vászonját. Egyes esetekben a blokkok helyettesíthetik a rövid kódokat és más kiegészítő tartalomelemeket is, amelyeket a plugins különféle módon adtak hozzá a WordPress tartalomhoz..

Ha érdekli a Gutenberg épületét, akkor a leggyakoribb módszer egy plugin létrehozása, amely új blokkokat hoz létre és elérhetővé teszi a felhasználó számára. Pontosan ezt fogjuk tenni ebben a Gutenberg-bemutatóban.

A következő szakaszok leírják a folyamatot az elejétől a végéig.

Az a plugin, amelyet építeni fogunk, kinyomtat egy üzenetet egy bizonyos háttérrel, amely testreszabható. Csak egy példaépítés, de veheti az itt bemutatott alapelveket és alkalmazhatja azokat a saját, összetettebb beépülő moduljára.

Egy ilyen plugin építésének alapjait ismerni kell. Először létrehoz egy új könyvtárat a WordPress plugins könyvtárában. Ebben négy fájlt fogunk elhelyezni:

  • index.php – Ez a fájl metaadatokat tartalmaz az új Gutenberg blokkról.
  • block.js – Ez a JavaScript fájl regisztrálja a Gutenberg egyedi blokkját.
  • editor.css – Ez a fájl a szerkesztő stílusait tartalmazza.
  • style.css – Ez a fájl a blokk első felének stílusait tartalmazza.

A lista első két fájlja gondoskodik a blokk regisztrálásáról, a következő két fájl pedig a blokk elemeinek vizuális stílusát határozza meg.

3. A blokk regisztrálása

A Gutenberg számára a blokk regisztrálásának ebben a lépésben nagyjából két dolgot fedünk le:

  • a plugin metaadatainak regisztrálása a WordPress PHP motorjában,
  • regisztrálja a blokkot a React keretrendszerrel, amelyen a Gutenberg fut.

Az index.php fájl a blokk és a szerkesztő enqueue eszközeit tartalmazza.

  • Először regisztrálja az egyedi funkciókat az add_action segítségével.
  • Ezután a wp_enqueue_style és wp_enqueue_script függvényekkel határozza meg a blokk és a szerkesztő JavaScript és CSS fájljainak útvonalát felsoroló funkciókat..

Összegezzük ezt az alábbi PHP-kódon keresztül:

add_action (‘enqueue_block_editor_assets’, ‘gb_block_01_basic_editor_assets’);

gb_block_01_basic_editor_assets () funkció
// Szkriptek.
wp_enqueue_script (
‘Gb-block-01-alap’,
plugins_url (‘block.js’, __FILE__),
tömb (‘wp-blokkok’, ‘wp-i18n’, ‘wp-elem’),
filemtime (plugin_dir_path (__FILE__). ‘block.js’)
);

// Stílusok.
wp_enqueue_style (
‘Gb-block-01-alap-szerkesztő’,
plugins_url (‘editor.css’, __FILE__),
tömb (‘wp-edit-blocks’),
filemtime (plugin_dir_path (__FILE__). ‘editor.css’)
);
}

Ez határozza meg az alapszerkesztő erőforrásait. A blokkhoz csak a CSS fájlra van szükség, amelyet a wp_enqueue_style függvény határoz meg.

A block.js fájl leírja a blokk tulajdonságait a Gutenberg szerkesztőben. A következő attribútumokat és tulajdonságokat határozzuk meg:

  • title – A blokk címe
  • ikon – egy ikon a blokk megjelenítéséhez; bármelyik ikont kiválaszthatja a közül ez a dashicons gyűjtemény
  • kategória – a csoport, amelyhez a blokk tartozik. Példák a blokkcsoportokra: "gyakori," "formázás," "beágyaz."
  • edit – JavaScript funkció, amely egy DOM elemet ad vissza. A wp.element.createElement függvényt használunk egy egyedi DOM elem p p elem létrehozására, amelybe az egyedi szöveg bele van írva. Gutenberg meghívja ezt a tulajdonságot, amikor a felhasználó a blokkra kattint a szerkesztőből.

(függvény () {
var registerBlockType = wp.blocks.registerBlockType;

registerBlockType (‘gb / basic-01’, {
cím: __ (‘GB Basic’, ‘GB’),
ikon: ‘pajzs-alt’,
kategória: „közös”,

szerkesztés: function (kellékek) {
return wp.element.createElement (
‘P’,
{className: props.className},
‘Helló Világ! – a szerkesztőtől (01 Basic Block). ”
);
},

});
}) ();

Ehhez hasonlóan létrehozhat egy mentési tulajdonságot, amelyre hívják fel a blokk kiválasztását a kezelőfelületből.

A fenti kódban a p elem className nevét definiáltuk a props.className névvel, amely létrehoz egy osztálynevet, amely a wp-block-tal kezdődik, amelyet a blokk neve követ. A Gutenberg-oktatóprogram következő részében meghatározzuk az osztály stílusait.

4. A blokk testreszabása

Amint azt az előző szakaszban tárgyaltuk, ezen oktatóanyag következő lépése a blokk elemek tulajdonságainak meghatározása. Definiáljuk a háttér színét, a szöveg színét és a szegélyt.

.wp-block-gb-basic-01 {
szín: # 000;
háttér: mistyrose;
szegély: 0.2rem szilárd piros;
}

A CSS-fájlok helyett SCSS-fájlokat is hozzáadhat, és összeállíthatja azokat a csomóponttal. Továbbá, itt van a Gutenberg elemek stílusának bemutatója a CSS Tricks-től.

Az első Gutenberg bemutató eredményei

Végül készek vagyunk kipróbálni az általunk létrehozott blokkot. Ha a Gutenberg plugin aktiválva van, menjen a + ikonra, és ellenőrizze, megjelenik-e az új blokk.

új Gutenberg blokk

Ezután, ha rákattint a blokkra, észreveszi, hogy a fentről üzenet látható, háttérszínnel és szegéllyel a CSS fájlból:

blokk akcióban

Következtetés

Az első Gutenberg bemutatónk végére érkeztünk. Remélem, hogy ez hasznos volt. Nyilvánvaló, hogy amit itt építettünk, nem szuper bonyolult, de elképzelést kell adnia neked az alapszerkezetekről, amikor együtt dolgozunk a Gutenberggel, és hogyan kell megtervezni a következő bővítményt.

Először megvitattuk a Gutenberg fejlesztési környezet felállításának lépéseit. Ezután bevezetünk egy kazánlemez-bővítményt a további fejlesztés elősegítése érdekében. Ezután a vita középpontjában az új blokk regisztrálásának és stílusának különböző lépései váltottak.

Remélem, hogy ez a Gutenberg oktatóprogram segített neked az első Gutenberg-bővítmény létrehozásában!

Ha bármilyen kérdése van, tüzet távolítsa el az alábbi 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
    Like this post? Please share to your friends:
    Adblock
    detector
    map