Výukový program pro Gutenberg pro začátečníky: Vytvořte svůj plugin pro první blok

Gutenbergův výukový program pro začátečníky


Pokud uvažujete o vývoji něčeho pro WordPress v roce 2020, ignorování Gutenberga prostě není možnost. Všechny pluginy a motivy musí s Gutenbergem pěkně spolupracovat a poskytovat uživatelský dojem, který je konzistentní ve všem, co může uživatel vidět na panelu WordPress. A zejména proto, že Gutenberg je nyní nedílnou součástí WordPress – jednoduše označován jako editor bloků.

Jak již bylo řečeno, začít s Gutenbergem není tak jednoduché. Zatímco před pár lety byste mohli napsat kvalitní plugin WordPress s použitím pouze programu Poznámkový blok, proces se nyní stal mnohem tvrdším.

Gutenberg používá technologie jako WordPress REST API, JavaScript a React. Pro práci s Gutenbergem byly tedy nutné nové požadavky na pluginy a témata.

Dobrou zprávou je, že o tom všem dnes mluvíme! Tento příspěvek slouží jako výukový program pro začátečníky, kteří se snaží vytvořit plugin pro Gutenberg poprvé.

Zaměřujeme se především na různé aspekty vytváření pluginu pro Gutenberg – nastavení vývojového prostředí, vytvoření základního pluginu a některé nuance práce s bloky.

1. Nastavte vývojové prostředí Gutenberg

Chcete-li začít s vývojem Gutenberg, potřebujete základní znalosti JavaScriptu a React. Zde je výukový program o JavaScriptu pro vývojáře WordPress. Další balíčky v Gutenbergu mohou dále vyžadovat použití správce balíčků NodeJS, npm.

Nejnovější instalační verzi NodeJS můžete nainstalovat do Windows nebo MacOS pomocí instalačních programů na oficiálních stránkách. Pokud máte server Linux, můžete buď zkompilovat zdrojový kód, nebo použít odpovídající správce balíčků (jako apt a yum). Pokud například používáte Ubuntu, spusťte na terminálu následující příkazy.

aktualizace sudo apt
sudo apt install nodejs npm

Po úspěšné instalaci můžete spustit následující příkaz k ověření verze NodeJS.

nodejs – inverze

Po zaškrtnutí těchto políček je vhodné nastavit testovací web WordPress pomocí instance aktuálního pluginu Gutenberg (samostatného pluginu) nebo dokonce jeho vývojové verze – od GitHub.

⚠️ Poznámka; zatímco Gutenberg je nyní zabudován do WordPress, tato verze není nejnovější. Vývoj na Gutenbergu se stále děje docela samostatně a vše, co je nového, je zahrnuto do samostatného pluginu Gutenberg jako první. Skutečná verze Gutenbergu v jádru zatím neobdrží žádnou významnou aktualizaci od svého zařazení do WordPress 5.0. Vždy budete chtít pracovat na nejnovější verzi Gutenbergu, protože vám dává větší šanci, že si svou práci dokážete do budoucna a ujistíte se, že váš výtvor bude v souladu se vším, co později přijde k jádru WordPress..

Na další poznámku, pokud máte v úmyslu přispět k jádru Gutenberg pluginu, úložiště má přispívající pokyny o tom, jak nastavit místní prostředí a nastavit změny pro kontrolu.

�� A konečně, pokud se snažíte přizpůsobit své stávající pluginy Gutenbergu, zde je podrobný návod, jak toho dosáhnout: část 1 a část 2.

Chcete-li začít s adresářem pluginů, který je již připraven spolupracovat s Gutenbergem, můžete zvážit použití zásuvný modul Gutenberg. Takové řešení vám pomůže se základní strukturou souborů, abyste se mohli soustředit na obsah pluginu. Chcete-li použít tabulku, stáhněte a nainstalujte plugin odtud (zip). Instalace a aktivace pluginu kotlové desky aktivuje ukázkové bloky, které prozkoumáme v tomto tutoriálu. Kód každého bloku najdete v příslušném adresáři v umístění pluginu kotlové desky.

2. Počáteční konfigurace

Abych vám to připomněl, Gutenberg představuje koncept bloků, které jsou náhradou za standardní plátno editoru TinyMCE. V některých případech mohou bloky také nahradit krátké kódy a další další prvky obsahu, které pluginy slouží k přidání obsahu WordPress různými způsoby..

Pokud máte zájem stavět Gutenberg, nejběžnějším přístupem je vytvoření pluginu, který vytvoří nové bloky a zpřístupní je uživateli. To je přesně to, co uděláme v tomto Gutenbergově tutoriálu.

Následující části popisují postup od začátku do konce.

Konkrétní plugin, který se chystáme sestavit, vytiskne zprávu s určitým pozadím, které lze upravit. Je to jen příklad sestavení, ale můžete si zde uvedené principy vzít a aplikovat je na svůj vlastní, složitější plugin.

Základy vytváření takového pluginu by měly být známé. Začnete vytvořením nového adresáře v adresáři pluginy WordPress. V něm umístíme čtyři soubory:

  • index.php – Tento soubor obsahuje metadata o novém bloku Gutenberg.
  • block.js – Tento soubor JavaScript registruje vlastní blok Gutenberg.
  • editor.css – Tento soubor obsahuje styly editoru.
  • style.css – Tento soubor obsahuje styly pro přední konec bloku.

První dva soubory v seznamu se postarají o registraci bloku a další dva soubory definují vizuální styly prvků bloku.

3. Registrace bloku

V tomto kroku registrace bloku pro Gutenberga se budeme zabývat dvěma věcmi:

  • registrace metadat pluginu pomocí PHP motoru WordPress,
  • registrace bloku s rámcem React, na kterém běží Gutenberg.

Soubor index.php obsahuje aktiva enqueue bloku a editor.

  • Nejprve zaregistrujte vlastní funkce pomocí add_action.
  • Poté pomocí funkcí wp_enqueue_style a wp_enqueue_script definujte funkce, které vypíšou cestu souborů JavaScript a CSS pro blok a editor..

Pojďme to shrnout pomocí níže uvedeného kódu PHP:

add_action (‘enqueue_block_editor_assets’, ‘gb_block_01_basic_editor_assets’);

funkce gb_block_01_basic_editor_assets () {
// Skripty.
wp_enqueue_script (
‘gb-block-01-basic’,
plugins_url (‘block.js’, __FILE__),
pole (‘wp-bloky’, ‘wp-i18n’, ‘wp-element’),
filemtime (plugin_dir_path (__FILE__). ‘block.js’)
);

// Styly.
wp_enqueue_style (
‘gb-block-01-basic-editor’,
plugins_url (‘editor.css’, __FILE__),
pole (‘wp-edit-bloky’),
filemtime (plugin_dir_path (__FILE__). ‘editor.css’)
);
}

Definuje zdroje pro základní editor. Pro blok je nutný pouze soubor CSS, který je definován pomocí funkce wp_enqueue_style.

Soubor block.js popisuje vlastnosti bloku v editoru Gutenberg. Definujeme následující atributy a vlastnosti:

  • title – Název bloku
  • icon – ikona pro zobrazení bloku; můžete vybrat libovolnou ikonu tato sbírka dashikónů
  • category – Skupina, do které bude blok patřit. Příklady skupin bloků jsou "společný," "formátování," "vložit."
  • edit – Funkce JavaScript, která vrací prvek DOM. Pomocí funkce wp.element.createElement vytvoříme vlastní prvek DOM odstavce p, s vlastním textem v něm zapsaným. Gutenberg vyvolá tuto vlastnost, když uživatel klikne na blok z editoru.

(function () {
var registerBlockType = wp.blocks.registerBlockType;

registerBlockType (‘gb / basic-01’, {
title: __ (‘GB Basic’, ‘GB’),
ikona: ‘štít-alt’,
kategorie: ‘běžné’,

edit: function (rekvizity) {
return wp.element.createElement (
‘p’,
{className: props.className},
‘Ahoj světe! – z editoru (01 Základní blok). “
);
},

});
}) ();

Podobně můžete vytvořit vlastnost uložení, která se vyvolá, když je blok vybrán z frontendu.

Ve výše uvedeném kódu jsme definovali className elementu p pomocí props.className, který vytvoří název třídy začínající wp-block, následovaný názvem bloku. V další části tohoto tutoriálu Gutenberg definujeme styly této třídy.

4. Přizpůsobení bloku

Jak bylo uvedeno v předchozí části, dalším krokem v tomto tutoriálu je definování vlastností blokových prvků. Definujme barvu pozadí, barvu textu a ohraničení.

.wp-block-gb-basic-01 {
barva: # 000;
pozadí: mistyrose;
ohraničení: 0.2rem plná červená;
}

Místo souborů CSS můžete také přidat soubory SCSS a zkompilovat je s uzlem. Dále zde návod na stylování Gutenbergových prvků od CSS Tricks.

Výsledky prvního Gutenbergova tutoriálu

Konečně jsme připraveni vyzkoušet blok, který jsme vytvořili. Pokud je aktivován plugin Gutenberg, přejděte na stránku + a zkontrolujte, zda se tam nový blok objeví.

nový Gutenbergův blok

Dále, pokud kliknete na blok, zjistíte, že je vidět zpráva shora, s barvou pozadí a ohraničením ze souboru CSS:

blokovat v akci

Závěr

Končíme na konci vašeho prvního Gutenbergova tutoriálu. Doufám, že to bylo užitečné. Je pravda, že to, co jsme zde vytvořili, není příliš složité, ale mělo by vám poskytnout představu o základních strukturách při práci s Gutenbergem a jak naplánovat další plugin.

Nejprve jsme probrali kroky k vytvoření vývojového prostředí Gutenberg. Dále jsme představili plugin pro plotové desky, který vám pomůže s dalším vývojem. Poté se pozornost diskuse posunula k různým krokům při registraci a úpravě nového bloku.

Doufám, že vám tento tutoriál Gutenberg pomohl vytvořit váš první plugin Gutenberg!

Pokud máte nějaké dotazy, oheň v komentářích níže.

Nezapomeňte se připojit k našemu havarijnímu kurzu při urychlení vašeho webu WordPress. Pomocí několika jednoduchých oprav můžete zkrátit dobu načítání až o 50–80%:

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