Jak přizpůsobit váš plugin pro Gutenberg: Část 1 (Block API)

"Mám plugin," říkáš ty, "jak to připravím na Gutenberg?"


Příběh je přímý; Gutenberg je nová editorská zkušenost ve WordPress, která bude v příští hlavní verzi sloučena do jádra. Spousta pluginů, které s tím nedrží krok bude zastaralý. Proto je nezbytné, abyste svůj plugin pro Gutenberg upravili dříve, než bude příliš pozdě.

Kdo je ovlivněn?

Téměř všechny pluginy které mají co do činění s editorem příspěvků, budou ovlivněny Gutenbergem. Pokud například váš plugin přidá tlačítko do TinyMCE, pak do editoru umístí krátký kód, špatné zprávy; bude to konec.
Přizpůsobte svůj plugin pro Gutenberg: Část 1 (Block API)

"Musím přizpůsobit své pluginy pro Gutenberg?"

Které pluginy tedy potřebujete aktualizovat pro Gutenberg? Jakékoli doplňky, které pracují s:

  • Zakázkové metaboxy
  • Krátké kódy
  • Tlačítka TinyMCE
  • nebo jakoukoli funkci editoru

Zatímco některé pluginy budou i nadále fungovat s Gutenbergem, například plugin, který přidává jednoduchý metabox, nebude pro vaše uživatele tak plynulý zážitek..

Dokonce i krátké kódy budou fungovat stejně jako dříve, ale v editoru to bude pouze textový uzel, zatímco všechny pluginy s krátkým kódem pro Gutenberg budou následovat jeho uživatelské rozhraní bloku a uživatelům budou snazší používat.

Takže ano, uživatelé budou preferovat pluginy, které jsou vytvořeny pro Gutenbergův zážitek. A ty, které zůstanou, budou nahrazeny konkurenčním pluginem.

Jen proto, abychom vám udělali představu, zde je příklad toho, jak vypadá standardní uživatelský editor se starým pluginem (A), a jak to vypadá v Gutenbergu (b) – s pluginem optimalizovaným pro to.

(b)Feedzy RSS Feeds - plugin Gutenberg-ready

Neboj se! Jsme tu, abychom vám pomohli s přípravou vašich pluginů na Gutenberg. Existuje mnoho způsobů, jak integrovat váš plugin do Gutenbergu, v závislosti na tom, jak váš plugin funguje, o kterém budeme diskutovat v tomto článku..

Věci, které stojí za to vědět předem, je napsáno v React. A pluginy Gutenberg jsou kódovány v JavaScriptu, což může být také hrubý přechod pro vývojáře, kteří kódují pouze v PHP. I když nemusíte znát React, abyste mohli vytvářet pluginy pro Gutenberg, budete potřebovat základní znalost JavaScriptu. Pokud jste dříve pracovali na React a JSX, bude to pro vás podobné důvody.

I když toho není dost oficiální dokumentace pro Gutenberg, jeho úložiště Github obsahuje mnoho cenných informací pro vývojáře. Pokud se chcete hluboce naučit vývoji Gutenbergu, musíte mít oči otevřené na všechno, co se děje v Gutenbergově úložišti GitHub, protože projekt se pohybuje opravdu rychle a věci se mění každý den.

Jak přizpůsobit váš plugin pro Gutenberg

Gutenbergovo API nám poskytuje mnoho způsobů, jak rozšířit editor, jako je Block API, Shortcode API a další. Které API použít, závisí na tom, jaký typ pluginu vytváříme.

Pokud je váš plugin jednoduchým pluginem s krátkým kódem, můžete použít API Block k vytvoření krásného bloku pro editor. Pokud však váš plugin používá složité metaboxy, kde blok nestačí, můžeme použít rozhraní Sidebar API.

Budeme také používat moderní hromadu vývojových nástrojů JavaScriptu, jako jsou NodeJS, NPM, webpack a ESNext. Poskytneme vám vzorové soubory, takže se nemusíte starat o nastavení vývojového prostředí.

V tomto příspěvku se budeme dívat jak učinit váš plugin Gutenberg kompatibilním pomocí Block API. Budeme se zabývat dalšími metodami (Sidebar API, Panel publikování, Stavový řádek) & podobná API) v části dvě, pokud je to potřeba.

Všechny uvedené příklady najdete v toto úložiště GitHub.

Gutenbergovo vývojové prostředí

Vývoj pro Gutenberg vyžaduje, abyste nastavili spoustu nástrojů, jako jsou NPM, webpack, Babel a JSX. Trvá to hodně času a úsilí, takže jsme pro vás připravili prostředí.

Gutenberg Boilerplate je plugin s minimálním nastavením a příklady vývoje Gutenbergu. Obsahuje jeden příklad bloku a postranního panelu. Pomocí tohoto můžete rozšířit svůj vlastní blok.

Gutenberg Boilerplate

Můžete vidličku nebo klonovat Úložiště Gutenberg Boilerplate tvému / wp-content / plugins / a použít jej jako své vývojové prostředí.

Chcete-li začít, musíte do svého počítače nainstalovat NodeJS. Přejděte do složky Gutenberg Boilerplate a spusťte instalaci npm

Od této chvíle musíte znát tři příkazy, které budete během vývojového procesu používat:

  • npm install – Nainstalujte závislosti projektu při klonování projektu.
  • npm run dev – Kompilace kódu během procesu vývoje. Musíte to spustit jednou a bude neustále sledovat změny.
  • npm run build – kompilace kódu pro optimalizované sestavení po dokončení procesu vývoje.

Block API

Bloky jsou základním prvkem Gutenberga, jedná se o editor založený na blocích. Block API vám umožňuje vytvářet bloky pro Gutenberg. Můžete vytvářet bloky, které mohou vykreslit základní HTML, krátké kódy, nebo dokonce vytvářet dynamické bloky, aby zobrazovaly například vaše nejnovější příspěvky.

Proces založený na existujícím pluginu

V našem příkladu použijeme zkrácený kód Click to Tweet do bloku Gutenberg. Tento krátký kód pro klepnutí na Tweet vykreslí pole Tweetu s vaším textem a tlačítko pro tweetování tohoto textu. Takhle:

Klepnutím rozložte Tweet

Náš krátký kód vypadá takto:

[clicktotweet tweet ="Text, který se má zobrazit" tweetsent ="Text, který má být tweetován" button ="tweet" téma ="click-to-tweet"]

Náš shortcode má čtyři parametry:

  • tweet: Text, který se objeví na vašem webu.
  • tweetsent: Text, který jde na Twitter.
  • tlačítko: Tweet text tlačítka.
  • téma: Buď klepnutím na tweet nebo klepnutím na tweet jako alt box.

Přizpůsobení pluginů pro Gutenberg pomocí API API

Existují dva způsoby, jak to udělat s Gutenbergem, buď můžeme vykreslit HTML na front-end, nebo můžeme použít náš Gutenberg blok k vykreslení shortcode na front-end. U tohoto článku to uděláme později.

Celý kód je k dispozici v Ahoj Gutenberg úložiště pluginů na GitHubu. Úložiště můžete klonovat, abyste viděli plugin v akci nebo upravili kód.

Enqueue skripty / styly pro Gutenberg

Nejprve musíme enkódovat naše skripty a styly do editoru Gutenberg pomocí enqueue_block_assets:

/ **
* Enqueue front-end a editor JavaScript a CSS
* /
function hello_gutenberg_scripts () {
$ blockPath = ‘/dist/block.js’;
$ stylePath = ‘/dist/block.css’;

// Vytvoření souboru JS přiloženého bloku
wp_enqueue_script (
‘hello-gutenberg-block-js’,
plugins_url ($ blockPath, __FILE__),
[‘wp-i18n’, ‘wp-blocks’, ‘wp-editor’, ‘wp-components’],
filemtime (plugin_dir_path (__ FILE__). $ blockPath)
);

// Vytvoření stylů frontendu a editoru bloků
wp_enqueue_style (
‘hello-gutenberg-block-css’,
plugins_url ($ stylePath, __FILE__),
”,
filemtime (plugin_dir_path (__ FILE__). $ stylePath)
);

}

// Háčkové skripty fungují do háku editoru bloků
add_action (‘enqueue_block_assets’, ‘hello_gutenberg_scripts’);

Do skriptu jsme přidali čtyři závislosti, které použijeme v našem bloku. Nejprve se o těchto závislostech dovíme:

wp-i18n je Gutenbergova verze internacionalizačních funkcí, jako je __ (). wp-blocks se používá pro funkci registerBlockType, která registruje váš blok. Pro různé komponenty v našem bloku používáme skripty wp-editor a wp-components.

Nyní, když jsme zinkasovali vaše aktiva, můžeme začít psát náš blok /src/block.js soubor.

Import závislostí

Pokud používáte Gutenberg Boilerplate, pak váš block.js soubor by měl mít základní strukturu bloků, kterou můžete použít k vytváření pluginů pro Gutenberg:

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

const {registerBlockType} = wp.blocks;

/ **
* Zaregistrujte blok
* /
export default registerBlockType (‘gutenberg-boilerplate / block’, {
// Název bloku
title: __ (‘Gutenberg Boilerplate’),
// Popis bloku
description: __ (‘Příklad bloku.’),
// Bloková kategorie
kategorie: ‘běžné’,
// Ikona bloku
icon: ‘admin-site’,
// Blokovat klíčová slova
klíčová slova: [
__ (‘Boilerplate’),
__( ‘Ahoj světe’ ),
__ (‘Příklad’),
],
atributy: {
},
// Definování rozhraní pro úpravy
edit: props => {
vrátit se (

{__ (‘Hello Backend’)}

);
},
// Definování rozhraní front-end
save: props => {
vrátit se (

{__ (‘Ahoj frontend’)}

);
},
});

Můžete spustit npm run dev a začít kompilovat náš kód v reálném čase.

Nejprve importujeme všechny komponenty a knihovny, které potřebujeme pro blok nahoře:

/ **
* Blokové závislosti
* /

importovat třídy z ‘classnames’;

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

const {registerBlockType} = wp.blocks;

const {
Bohatý text,
InspectorControls,
BlockControls,
} = wp.editor;

const {
PanelBody,
TextareaControl,
TextControl,
Dashicon,
Panel nástrojů,
Knoflík,
Popis,
} = wp.components;

První dovozy třídy které jsme nainstalovali pomocí npm, abychom v našem kódu použili více tříd, protože JSX nepovoluje více tříd v elementech.

Dozvieme se o dalších komponentách, které jsme importovali, když je používáme.

Definujte atributy

Nyní definujeme čtyři atributy pro náš Gutenbergův blok, stejně jako náš shortcode:

atributy: {
tweet: {
type: ‘string’,
},
tweetsent: {
type: ‘string’,
},
knoflík: {
type: ‘string’,
výchozí: __ („Tweet“),
},
téma: {
typ: ‘boolean’,
default: false,
},
},

Jak vidíte, všechny atributy jsou stejné jako náš krátký kód. Všechny atributy mají klíč typu, který říká Gutenbergovi jeho datový typ. Můžete použít řetězec, číslo, boolean & objekt jako akceptované typy.

Některé atributy obsahují také výchozí hodnotu. Atributy mohou mít také další vlastnosti, například zdroj a selektory, které v našem příkladu nebudeme používat, ale můžete dozvědět se o nich více zde.

Upravit rozhraní

Nyní budeme stavět editační rozhraní našeho bloku, které bude na displeji – uživatelé jej uvidí při úpravě bloku v Gutenbergu.

Chcete-li získat základní myšlenku, můžeme nejprve pevný kód našeho bloku a stavět na něm nahrazením následující oblasti v našem kódu:

// Definování rozhraní pro úpravy
edit: props => {
vrátit se (

{__ (‘Hello Backend’)}

);
},

S následujícím kódem:

// Definování rozhraní pro úpravy
edit: props => {
vrátit se [

Dýně a tučňáci

tweet

];
},

To by vám mělo poskytnout představu o našem konečném výsledku. Vypadá to takto:

Pluginy pro Gutenberg

Prvním prvkem bloku je textová oblast tweetu. Nahradíme jej upravitelným textovým polem podobným Gutenbergovu záhlaví.

Budeme používat Bohatý text součást, kterou jsme dříve importovali, abychom nahradili náš pevně kódovaný text.

Naše komponenta RichText má pět argumentů. format je řetězec, protože budeme používat náš shortcode k zobrazení prvků na front-endu. Pokud bychom v našem atributu chtěli použít selektor, formát by byl maticí.

RichText má ve výchozím nastavení některé možnosti formátování, například tučné a kurzíva, které jsme deaktivovali předáním prázdného pole v argumentu formattingControls.

placeholder je zástupný text, když v poli není žádný text, a onChange spustí funkci onChangeTweet, když dojde ke změně události.

Nakonec bude hodnota hodnotou našeho pole, která bude převzata z atributu tweet, který jsme definovali dříve.

Jakmile jsme definovali naši oblast RichText, musíme stavět na funkci ChangeTweet, která se spustí, když se změní hodnota v našem textovém poli..

// Definování rozhraní pro úpravy
edit: props => {
const onChangeTweet = hodnota => {
props.setAttributes ({tweet: value});
};
vrátit se [
…zbytek kódu

Předáváme hodnotu pole RichText funkci onChangeTweet, která používá props.setAttributes funkce pro aktualizaci hodnoty atributu tweet.

Jakmile použijete blok, uvidíte sílu Gutenberga.

RichField v Gutenbergu

Není to úžasné?

Blokový inspektor

Při vytváření pluginů pro Gutenberg nemusíte pokaždé znovu vynalézat kolo, abyste pro své pluginy vytvořili doplňkové panely. Gutenberg nám poskytuje zjednodušený způsob, jak povolit přizpůsobení bloku a zajišťuje, že každý uživatel má konzistentní zkušenosti se zabudovanými vzory uživatelského rozhraní.

Podobně jako součást RichText i InspectorControls přidává postranní panel, když je vybrán blok. Něco takového:

Kontroly inspektorů Gutenberg

K přidání pole pro textové pole a text do naší oblasti Inspector použijeme také textareaControl a textControl..

K návratovému příkazu přidáme následující kód:

!! props.isVybráno && (

),

props.isSelected zkontroluje, zda se inspektor objeví pouze při výběru bloku.

Komponenty TextareaControl a TextControl, podobně jako RichText, mají hodnotu a metodu onChange.

Abychom vyhověli novým změnám, musíme také změnit kód zobrazení bloku. V našem případě stačí do našeho bloku přidat pouze text tlačítka, protože do odkazu bude přidán text Tweetu, takže jej nemusíme zobrazovat v našem backendu.

Hypertextový odkaz v našem počátečním kódu můžete nahradit následujícím:


{props.attributes.button}

Jak bylo uvedeno výše, odebíráme hypertextový odkaz z našeho kódu, protože jej nemusíme zobrazovat v pozadí. Díky tomu bude náš blok vypadat takto:

Gutenberg Klepnutím zobrazíte Tweet Inspector Controls

Block Inspector může být pro váš blok mocným nástrojem. Pokud má váš plugin pokročilé možnosti, které jsou příliš komplikované pro oblast editoru, můžete je umístit do oblasti Inspector.

Přidáme poslední možnost do našeho bloku, abychom dokončili část JavaScriptu v následující sekci.

Blokovat panel nástrojů

Panel nástrojů blokování je další předem vytvořená součást uživatelského rozhraní, kterou můžeme použít k přidání dalších možností do našeho bloku. Když jej vyberete, objeví se nad vaším blokem. Příklad:

Panel nástrojů Gutenberg Block

V ideálním případě by panel nástrojů Block měl obsahovat primární ovládací prvky vašeho bloku a inspektor hostující sekundární ovládací prvky. To je však sporné a záleží na vašem bloku.

Budeme používat oblast Block Toolbar k hostování naší alternativní kontroly stylu.

Podobně jako u Inspektora bloků musíme do našeho návratového příkazu přidat následující kód, abychom do našeho bloku přidali Panel nástrojů blokování:

!! props.isVybráno && (

),

Komponenty BlockControls a Toolbar používáme k přidání panelu nástrojů do našeho bloku. Podobně jako Block Inspector, props.isSelected zajišťuje, že se náš panel nástrojů objeví, pouze když se zaměříme na náš blok.

Pro naši kontrolu také používáme komponenty Tooltip a Button. Komponenta s popisem je omotána kolem komponenty Button, abyste se ujistili, že je zde popis, když umístíte kurzor nad ovládací prvek, čímž získáte další kontext.

Komponenta Button používá modul classnames, který jsme importovali dříve v tomto článku. Funkci classnames jsme použili k tomu, abychom naší třídě dali tři třídy. Třetí třída, is-active, se objeví, pouze pokud je hodnota atributu motivu true.

Jeho funkce onChange přepíná atribut motivu na true / false. Nakonec se komponenty Dashicon používají k zobrazení ikony pro naši kontrolu.

Budeme také muset změnit náš blokový kód, aby pracoval se změnami. Musíme nahradit následující řádek:

S:

Zkontrolujeme, zda je atribut motivu pravdivý nebo nepravdivý, a podle toho přiřazujeme třídu našemu bloku.

Nyní by váš blok měl vypadat takto:

Klepnutím na panel nástrojů Tweet

Dokončili jsme část Gutenbergova bloku na straně JavaScriptu. Můžete najít celý zdrojový kód souboru tady.

Nyní dokončíme náš blok zpracováním výstupu na straně serveru.

Vykreslování na straně serveru

Gutenberg vám umožňuje použít k vykreslení bloků na front-end vykreslování na straně serveru. Toto vykreslování na straně serveru nám umožňuje vytvářet bloky pro krátké kódy.

Nejprve provedeme naši metodu uložení, aby se vrátila null nahrazením následujícího kódu:

// Definování rozhraní front-end
Uložit() {
// Vykreslování v PHP
návrat null;
},

Pro registraci typu bloku v PHP použijeme funkci PHP_registru_bloku_typu:

if (function_exists (‘register_block_type’))) {
// Vykreslování na straně serveru do zpětného volání vykreslení
register_block_type (
‘hello-gutenberg / click-to-tweet’, [
‘render_callback’ => ‘hello_gutenberg_block_callback’,
‘atributy’ => pole (
‘tweet’ => pole (
‘type’ => ‘tětiva’,
),
‘tweetsent’ => pole (
‘type’ => ‘tětiva’,
),
‘button’ => pole (
‘type’ => ‘tětiva’,
‘default’ => ‘Tweet’,
),
‘téma’ => pole (
‘type’ => „boolean“,
‘default’ => Nepravdivé,
),
),
]
);
}

Naše funkce register_block_type. Nejprve mu předáme naše blokové jméno spolu s řadou argumentů.

Prvním argumentem je funkce render_callback, která volá naši funkci hello_gutenberg_block_callback pro renderování na straně serveru.

Po našem zpětném volání vykreslení předáváme atributy jako pole podobné souboru block.js, které používáme v naší funkci zpětného volání vykreslení.

Naše funkce zpětného volání vykreslení vypadá takto:

function hello_gutenberg_block_callback ($ attr) {
extrakt ($ attr);
if (isset ($ tweet)) {
$ theme = ($ theme === true? ‘click-to-tweet-alt’: ‘click-to-tweet’);
$ shortcode_string = ‘[clicktotweet tweet ="% s" tweetsent ="% s" button ="% s" téma ="% s"] ‘;
návrat sprintf ($ shortcode_string, $ tweet, $ tweetsent, $ button, $ theme);
}
}

Rozbalíme všechny atributy a vrátíme je do našeho krátkého kódu. To je vše, co potřebujete k přizpůsobení vašich pluginů pro krátké kódy pro Gutenberg.

V tomto článku naleznete veškerý kód použitý v tomto článku ahoj-gutenberg úložiště.

V další části se podíváme na další způsoby, jak přizpůsobit stávající pluginy pro Gutenberg, včetně rozhraní Sidebar API.

Pokud máte nějaké dotazy, jak přizpůsobit svůj plugin pro Gutenberg, zeptejte se jich v komentářích!

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