Gutenberg: Bloky statické

Stejně tak jako WordPress těží z možnosti jednoduché rozšiřitelnosti, systém filtrů a ackí je takřka unikátní a snadno použitelný i pro programátora začátečníka, i Gutenberg je připravován tak, aby jej vývojáři mohli snadno doplnit o chybějící funkcionalitu – vlastní bloky.

V současném Gutenbergu lze identifikovat 3 druhy bloků. A sice bloky statické, dynamické, a bloky ukládající data do post meta – ne všechna data chceme nutně mít jen v `post_content`. Naopak, ne všechna data, která dnes ukládáme do post_meta musíme skladovat právě tam. Gutenberg se svým konceptem umožňuje často data, která by skončila jinde, skladovat přímo v post_content, kam patří.

V tomto článku se budeme věnovat pouze blokům statickým. Ačkoli toho moc neumí, poslouží nám jako velmi dobrý úvod do problematiky vytváření vlastních bloků.

Bloky statické

Statické bloky jsou nejjednodušším typem bloků. Pokud jsem vás v předchozím článku s úvodem do bloků a šablon navnadil contextovými panely nástrojů, tak vás statické bloky zklamou. Nicméně i ony mají své opodstatnění, a jsou velmi vhodné pro vysvětlení si anatomie bloku.

Předpokládám, že jste vývojář, a tak nemá cenu vás dlouho zdržovat povídáním. Tady je kód (originál lze nalézt v Gutenberg Handbook):

var el = wp.element.createElement;

wp.blocks.registerBlockType( 'mytheme/red-block', { // registrace bloku s názvem red-block a prefixem mytheme
    title: 'Červený Blok', // Titulek, zobrazuje se ve výpisu bloků
    icon: 'universal-access-alt', // Ikonka bloku, zobrazuje se ve výpisu bloků
    category: 'layout', // Kategorie bloku, ovlivňuje umístění ve výpise bloků
    edit: function() { // Funkce, která generuje HTML během editace příspěvku
        return el( 'div', { style: { backgroundColor: '#900', color: '#fff', padding: '20px' } }, 'Toto je červený blok.' );
    },
    save: function() { // Funkce, která generuje HTML zobrazené mimo editaci příspěvku
        return el( 'div', { style: { backgroundColor: '#900', color: '#fff', padding: '20px' } }, 'Toto je červený blok.' );
    }
} );

Název bloku

Jak jsem již zmiňoval minule, Gutenberg, mimo jiné, velmi dobře pracuje s best practices. Namísto toho, aby pouze doporučoval bloky prefixovat, užití prefixu přímo vyžaduje. Zde je ukázka toho, co se stane, pokud odstraním mytheme/ z názvu bloku v kódu zmíněném výše:

Takže, stejně jako je velmi vhodné si pro svůj plugin zvolit prefix, který se používá pro všechno (ano, pokud používáte v PHP namespaces, není třeba prefixovat názvy funkcí, ale určitě je vhodné prefixovat také názvy meta dat, názvy options, unikátní název by měly mít i lokalizační stringy, a tak dále, a tak dále), tak tento prefix by se měl objevit i v blocích, které vaše šablona či plugin nabízí.

Druhá část názvu bloku je jasná – unikátní název v rámci daného prefixu / namespace.

CSS třídy

Z názvu bloku Gutenberg také generuje třídu, která je vygenerovanému bloku přidělena. A tudíž je snadné připravit potřebné selectory. V případě našeho “Červeného Bloku” s názvem mytheme/red-block bude vygenerována třída s prefixem wp-block- a / bude nahrazeno pomlčkou -. Kaskádový styl pak může vypadat nějak takto:

.wp-block-mytheme-red-block {
    border: 2px solid #9c9;
    padding: 20px;
}

Titulek, Ikona, a Kategorie

Jak již bylo řečeno, Gutenberg počítá s tím, že bude snadno a často rozšiřován bloky třetích stran. Z TinyMCE víme, že toolbar není nafukovací. I když velmi často vídám instalované plugin, které přidávají další a další řady nástrojů jen proto, aby uživatel měl po ruce všechna myslitelná tlačítka. Nicméně Gutenberg se nesnaží všechny bloky zobrazit najednou. Nýbrž nabízí možnost bloky filtrovat pomocí našeptávače. Pokud blok stále uživatel nenachází, je možné navštívit záložku, která vypisuje bloky dle kategorií. V současné době jsou k dispozici následující kategorie:

  • Common Blocks (common) – bloky, které se v obsahu vyskytují často. Kategorie je první z vypsaných.
  • Formatting (formatting) – formátovací bloky, jako tabulka, zdrojový kód, citace
  • Layout Blocks (layout) – horizontální čára, more (aka zobrazit více), tlačítko, sloupce
  • Widgets (widgets) – shortcode, výpis nejnovějších příspěvků …
  • Embed (embed) – všechny embed služby – Twitter, Facebook, you name it!

Všechny bloky jsou ve výpisu a vyhledávání zobrazeny spolu se svým názvem a ikonkou. Ikonku si lze zvolit ze všech, které jsou k dispozici v rámci Dashicons – nejspíš znáte z vlastní položky menu, ikonky custom post type, či z vlastní konfigurační stránky.

Všechny tyto parametry, ačkoli se to může zdát malicherné, jsou důležité právě pro to, aby je uživatelé snadno nalezli. Rozhodně se podívejte do jakých kategorií jaké bloky patří, než plácnete svůj blok někam, kde by jej nikdo nehledal. Název by měl být intuitivní, jelikož si dokážu představit, že nikoli jen power-users, ale všichni uživatelé se pokusí blok nejdříve vyhledat pomocí klíčového slova.

No a ikonka? Vsadím se, že správná volba pomůže uživateli právě ve chvíli, kdy vyhledávání pomocí klíčového slova, tedy titulku, selže. Takže i zde věnujme chvíli času. Prohlédněte si galerii dostupných ikonek.

Funkce edit a save

V naší ukázce toho tyto funkce nedělají zrovna mnoho. Nicméně mají na svědomí HTML, které je blokem generováno a na frontendu nakonec vytištěno (to platí především pro funkci save).

HTML element vrácený z funkce edit je použito během editace příspěvku, naopak HTML element vrácený z funkce save je HTML, které je uloženo do post_content a nakonec tedy zobrazeno na frontendu (nebo při přepnutí do HTML, aka Code, editoru).

wp.element.createElement

Gutenberg nabízí jazykově neutrální API, abstrakci nad knihovnou, jenž je interně použita. Onou interní knihovnou je v současnoti React. Abstrakce na Reactem není pouze proto, aby bylo možné React v případě potřeby nahradit, ale také proto, aby bylo případně možné překlenout změny mezi jednotlivými verzemi Reactu bez toho, aniž by vývojáři šablon a pluginů museli přepisovat své implementace. Ano, i Gutenberg se řídí WordPress filozofií zpětné kompatiblity.

V našem příkladě:

var el = wp.element.createElement;
...
 el( 'div', { style: { backgroundColor: '#900', color: '#fff', padding: '20px' } }, 'Toto je červený blok.' );

Je vytvořen element div s atributy style nastavující červenou barvu pozadí, bílý text a padding. Poslední parametr funkce je poté innherHTML takového elementu. Záměrně uvádím innerHTML – nemusí totiž nutně obsahovat pouze text, ale také další element, či několik elementů:

return el(
    'div',
    { style: {
        backgroundColor: '#900',
        color: '#fff',
        padding: '20px'
    } },
    el( 'div', { style: { backgroundColor: '#900', color: '#fff', padding: '20px' } }, 'Toto je červený blok.' ),
    el( 'div', { style: { backgroundColor: '#900', color: '#fff', padding: '20px' } }, 'Toto je červený blok.' ) );

Použité ve funkcích edit a save vygeneruje následující HTML:

<!-- wp:mytheme/red-block -->
<div style="background-color:#900;color:#fff;padding:20px" class="wp-block-mytheme-red-block">
    <div style="background-color:#900;color:#fff;padding:20px">Toto je červený blok.</div>
    <div style="background-color:#900;color:#fff;padding:20px">Toto je červený blok.</div>
</div>
<!-- /wp:mytheme/red-block -->

Všimněte si v JS kódu konstrukce, kdy druhý vnořený blok div je použit jako 4. parametr – netřeba ze 3. parametru dělat pole, každý další vnořený element předáme jako další parametr.

Pro více informací o wp.element zavítejte do dokumentace přímo v GitHub repozitáři

Domácí úkol

Pokud jste si Gutenberg stále ještě nenainstalovali, učiňte tak nyní. Lze jej jednoduše nainstalovat přímo z plugin repozitáře. Po instalaci a aktivaci si budete moci vyzkoušet tvorbu obsahu, ale hlavně také vyzkoušet tvorbu bloků.

Navíc, tvorbu bloků zmíněných v tomto článku lze provést přímo z webového prohlíže tím, že kód vložíme přímo do konzole! Jednoduše nakopírujte kód zmíněný výše, otevřete konzoli, vložte kód a stiskněte enter. “Červený blok” se objeví v nabídce bloků a lze jej do stránky vložit.

Vyzkoušejte si změnu generovaných elementů a také změnu elementů mezi jednotlivými stavy (funkce edit a save). Kupříkladu změna textu či barvy pozadí.

Určitě si všimnete, že nelze jednoduše zaregistrovat jeden blok vícekrát. V tom případě se vám bude hodit následující funkce pro deregistraci existujícího blocku. Její zavolání vám umožní ukázkový kód zavolat znovu:

wp.blocks.unregisterBlockType( 'mytheme/red-block' );

Další zdroje ke studiu:

One thought on “Gutenberg: Bloky statické”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s