Gutenberg: Bloky a šablony obsahu

Projekt Gutenberg přichází s konceptem bloků, pomocí kterých uživatelé WordPressu budou moci nově skládat obsah jednotlivých příspěvků, namísto aby v rámci jednoho jediného WYSIWYG editoru vytvářeli obsah, ze kterého se již při tvorbě stává jakýsi blob.

Poznámka: pokud jste Gutenberg ještě netestovali, rozhodně si jej nainstalujte a vyzkoušejte.

Bloky a kontextové panely nástrojů

Bloky, které uživatel nově bude mít k dispozici, umožní pohodlný a jednoduchý způsob jakým lze s obsahem manipulovat. To uživatelé ocení pokaždé, když se budou muset k nějaké části příspěvku vrátit – ať již během úvodní tvorby příspěvku, nebo poté při jeho další úpravě.

To, že samotný obsah příspěvku, stránky, či vlastního typu obsahu (custom post type; CPT) bude rozdělen do jednotlivých bloků umožňuje zcela nový rozměr úprav. Tvůrci bloků (základní sada je součástí Gutenbergu, a tedy je/bude dostupna bez dalšího) mohou nadefinovat nástroje a nastavení, které se daného bloku týkají. To je zásadní rozdíl oproti TinyMCE, který poskytuje jeden globální panel nástrojů “pro všechno”.

Takový kontextový panel nástrojů může u odstavce vypadat následovně:

Pro odstavec opravdu většinou nepotřebujeme nic jiného než zarovnání, důraz (tučné písmo, kurzíva), přeškrtnutí, či možnost vytvořit odkaz. Naopak pro nadpis využijeme spíše možnost změnit úroveň nadpisu:

Takovýto kontextový panel nástrojů by měl uživatelům vyhovat více než jeden globální. Navíc Gutenberg jde dál, a v rámci jednoho bloku může existovat více oblastí, kde se panel nástrojů zobrazí, a tvůrci bloků tak mohou vytvářet i komplexnější struktury, přičemž je zachována přívětivost úprav a přímá zpětná vazba s tím, jak bude jejich obsah nakonec vypadat. Podívejme se na blok “cover image”:

Šablony příspěvků a vlastních typů obsahu

Gutenberg vedle bloků samotných, které uživatelé mohou přidávat, přináší také koncept šablon. Pro začátek se jedná “pouze” o šablony obsahu jednotlivých typů obsahu (příspěvek, stránka, CPT). Vývojář šablony či pluginu může ke svému, či některému z výchozích typů obsahu, nadefinovat šablonu v podobě bloků, které jsou při tvorbě nového příspěvku předvyplněny do obsahu.

Takové šablony mohou být zaregistrovány dokonce jako neměnné! To je, dle mého názoru, celkem silný nástroj pro tvůrce šablon (a nyní myslím vzledů/témat pro celý web, nikoli pro obsah příspěvku v rámci Gutenbergu), zvláště pak pokud tyto mají složitější design a předpokládají nějaký specifický obsah.

Placeholders

Na tomto místě si dovolím malou odbočku. Gutenberg se snaží tvůrce nových bloků trochu více dirigovat. A to nejen co se týče stylu programování, ale i kvality bloků z pohledu uživatelů. Osobně takovou snahu jen kvituji. Jeden z designových principů, které Gutenberg přináší jsou placeholders ( ale je toho vícero, a rozhodně doporučuji přečíst celé Gutenberg Design Principles & Vision ).

Placeholder je obsah, ať již textový či obrazový, kterým se předvyplní blok ve chvíli kdy je přidán do obsahu stránky. Tím dá okamžitě tvůrci obsahu jasnou představu o tom, jak který blok bude sám o sobě vypadat, a jak bude fungovat s okolím.

Navíc, takový placeholder může třeba obsahovat i krátký návod k tomu, co se po uživateli očekává, případně i vysvětlení jaký obsah má doplnit.

Registrace vlastních šablon

Šablony obsahu příspěvků jsou, po samotné instalaci pluginu, asi nejjednodušší způsob jakým lze začít s Gutenbergem jakožto vývojář. V zásadě se jedná jen o další parametr funkce register_post_type.

Zde si dovolím zkopírovat ukázku z Gutenberg Handbook, kde je zaregistrován nový CTP pro knihy, a je mu předpřipravena šablona obsahující blok pro obrázek, nadpis, a odstavec:

function register_post_type() {
    $args = array(
        'public' => true,
        'label'  => 'Books',
        'show_in_rest' => true,
        'template' => array(
            array( 'core/image', array(
                'align' => 'left',
            ) ),
            array( 'core/heading', array(
                'placeholder' => 'Add Author...',
            ) ),
            array( 'core/paragraph', array(
                'placeholder' => 'Add Description...',
            ) ),
        ),
    );
    register_post_type( 'book', $args );
}
add_action( 'init', 'register_post_type' );

Co se kódu týče, všimněte si, že názvy všech bloků (kupříkladu core/heading, či core/paragraph) obsahují prefix. Ono core/, který je vyhrazený pro defaultní sadu bloků. Gutenberg neumožňuje vývojáři zaregistrovat blok, který by prefix neměl. Je skvělé vidět, že jsou best practices jako “prefix everything” vynucovány.

Výše zmíněný kód by měl vyprodukovat něco podobného následujícímu rozhraní:

Všimněte si onoho “Add Author…” či “Add Description…”, což jsou přesně ony nápovědy toho, co se po uživateli očekává zmiňované v předchozím odstavci. Lze si třeba představit šablonu pro tiskové zprávy, kdy se uživatel z placeholderů jednotlivých bloků dozví, co kam patří, a šablona mu tak pomůže vytvořit kvalitní tiskovou zprávu:

Více ukázek, včetně toho jak takovou šablonu uzamknout pro editaci, či jak přidat šablonu již existujícím typům obsahu (které třeba nemůžete modifikovat), určitě si projděte příslušný handbook.

Závěrem

Jak již bylo zmíněno, šablony jsou asi nejjednodušší způsob jak začít s Gutenbergem něco dělat. Jejich tvorba je jednoduchá a defaultní nabídka bloků je dostatečně bohatá na to, aby bylo možné s jejich pomocí připravit nějaký funkční prototyp.

Tak jako je to v Gutenbergu se vším, je nutné hledět i do budoucna. Podobným způsobem jakým šablony definují obsah příspěvku či stránky, bude v dalších fázích projektu možné definovat celé layouty webu.

Osobně se mi nikdy nepodařilo, bez menších či větších kódovacích zásahů, nastavit šablonu na svém webu tak, jak jsem ji viděl v demu. Nicméně to, jakým způsobem Gutenberg umožňuje šablonovat a vést uživatele k tomu, aby jen “doplňoval prázdná místa” v layoutu, a přináší tak jiskřičku naděje, že jednou opravdu na svůj web dostanu šablonu přesně tak, jak jsem ji viděl v demu, jen si dosadit vlastní obsah.

One thought on “Gutenberg: Bloky a šablony obsahu”

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 )

Connecting to %s