Blokový editor

Modul 4: Tvorba obsahu · Doba čtení: 8 minut

Cíl lekce: Po této lekci dokážete sestavit stránku z bloků a vzorů a víte, jak fungují koncepty, plánování a starší verze.

Klíčové pojmy: blok, nastavení bloku, panel nástrojů, zobrazení seznamu, skupina, sloupce, vzor, synchronizovaný vzor, koncept, soukromé, naplánování, starší verze, náhled

Všechno je blok

Od verze WordPress 5.0 (konec roku 2018) tvoříte obsah v blokovém editoru (nazývaném také Gutenberg, podle názvu projektu). Stránka se skládá z jednotlivých bloků: nadpis, odstavec, obrázek, tlačítko, seznam, tabulka, vložené video. Každý blok má svá vlastní nastavení. Bloky řadíte pod sebe, vedle sebe (ve sloupcích) nebo do sebe (ve skupině).

Proč bloky? Ve starém editoru byla stránka jedno velké textové pole. Pokud jste chtěli dva sloupce nebo tlačítko, potřebovali jste nástroj pro tvorbu stránek, shortcody nebo HTML. S bloky to zvládnete přímo ve WordPressu a výsledkem je čistý HTML kód, který šablona zformátuje.

Na pozadí WordPress ukládá bloky jako HTML s komentářovými značkami před a za nimi:

<!-- wp:heading -->
<h2 class="wp-block-heading">Otevírací doba</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Máme otevřeno od úterý do soboty.</p>
<!-- /wp:paragraph -->

To je dobré vědět: obsah zůstává čitelným HTML kódem, i když později změníte šablonu nebo blok přestane existovat. Uvidíte to, když u bloku zvolíte „Upravit jako HTML“, nebo v editoru kódu (Ctrl+Shift+Alt+M).

Editor ve třech částech

1. Plátno uprostřed: Vaše stránka přibližně tak, jak bude vypadat.
2. Panel nástrojů nad vybraným blokem: tučné písmo, kurzíva, odkaz, zarovnání a změna typu bloku (odstavec se změní v seznam, obrázek v galerii).
3. Postranní panel vpravo se dvěma záložkami: Stránka (nebo Příspěvek) s nastavením celé stránky a Blok s nastavením vybraného bloku, jako je barva, prostor a velikost písma.

Dva nástroje, které Vám práci výrazně usnadní:

• Zobrazení seznamu (ikona se třemi čárkami vlevo nahoře): struktura Vaší stránky zobrazená jako strom. Umožňuje přesně vybrat blok, který chcete, i když je uvnitř skupiny ve sloupci.
• Lomítkové příkazy: na prázdném řádku napište / a název bloku (/nadpis, /tlačítko, /obrázek) a stiskněte Enter.

Stavba pomocí skupin a sloupců

Dobrá stránka má jasnou strukturu. K tomu slouží tři stavební kameny:

• Skupina: rámeček kolem několika bloků s vlastním pozadím nebo odsazením. Například barevný blok s nadpisem, větou a tlačítkem.
• Sloupce: bloky vedle sebe. Na telefonu se zobrazí pod sebou.
• Řádek a Zásobník: varianty skupiny, které řadí bloky vodorovně nebo svisle.

Používejte nadpisy správným způsobem: jeden H1 (titulek stránky, který obvykle vytváří sama šablona), pod ním H2 pro kapitoly a H3 pro části uvnitř nich. Nevybírejte nadpis kvůli velikosti písma, tu upravíte v nastavení bloku. Čtečky obrazovky a vyhledávače používají nadpisy k pochopení struktury stránky (lekce 9.2).

Vzory: nemusíte začínat pokaždé od nuly

Jedná se o vzor, tedy hotovou skupinu bloků: nadpis s textem a obrázkem, ceníková tabulka, tři sloupce s ikonami. Vkládáte je přes tlačítko pro vkládání (plus), záložka Vzory. Vaše šablona jich většinou nabízí několik a v knihovně vzorů na wordpress.org jich jsou stovky.

Vzory si můžete vytvořit i sami: vyberte několik bloků, v panelu nástrojů zvolte tři tečky a Vytvořit vzor. Přitom zvolíte, zda má být vzor synchronizovaný:

• Nesynchronizováno: pokaždé, když ho vložíte, získáte samostatnou kopii. Pokud ji upravíte, změní se pouze tato kopie. Hodí se jako šablona.
• Synchronizováno: všude, kde se vzor nachází, je stejný. Upravíte-li ho na jednom místě, změní se všude. Hodí se pro blok „Kontakt a otevírací doba“, který je na deseti stránkách. (Dříve se jim říkalo „znovu použitelné bloky“.)

Jedna past: synchronizovaný vzor, který na jedné stránce „jen tak“ upravíte, se změní i na všech ostatních stránkách. Chcete-li mít na jednom místě něco jiného, převeďte danou kopii na běžnou skupinu (rozpojit).

Uložení, publikování a naplánování

Stránka má stav:

Použijte Náhled k prohlédnutí stránky tak, jak ji uvidí návštěvník, i na mobilu a tabletu, než ji zveřejníte.

Starší verze: cesta zpět v čase

Pokaždé, když uložíte, WordPress uloží starší verzi: podobu stránky v daném okamžiku. V postranním panelu u stránky vidíte, kolik starších verzí existuje. Po kliknutí uvidíte pomocí posuvníku rozdíly mezi dvěma verzemi a můžete obnovit starší verzi.

Starší verze jsou Vaší první záchrannou sítí při omylu („omylem jsem smazal polovinu stránky“). Všechny se ale ukládají do databáze. Web s tisíci staršími verzemi je větší a někdy pomalejší. Jejich počet můžete omezit v souboru wp-config.php:

define( 'WP_POST_REVISIONS', 20 );

Lekce 6.3 se zabývá úklidem starých verzí.

Kde editor končí

Blokový editor vytváří obsah stránky. To, co je kolem obsahu (záhlaví webu, menu, patička), patří k šabloně. U blokové šablony to upravujete v Úpravě webu (Vzhled > Editor) pomocí stejných bloků; u klasické šablony v Customizeru a u Widgetů (lekce 5.1). Pokud používáte nástroj pro tvorbu stránek jako Elementor nebo Divi, pracujete v tomto programu místo blokového editoru; jeho nevýhodami se zabývá lekce 5.1.

Shrnutí

• Stránka se skládá z bloků, které řadíte pod sebe, vedle sebe a do sebe; WordPress je ukládá jako HTML s komentářovými značkami.
• Zobrazení seznamu a lomítkové příkazy umožňují stavět rychle a přesně.
• Používejte nadpisy pro strukturu (H2, H3), ne kvůli velikosti písma.
• Vzory šetří práci; synchronizovaný vzor se mění všude najednou.
• Koncept, naplánování, soukromé a starší verze Vám dávají kontrolu nad tím, co je kdy viditelné, a cestu zpět.

Kvíz

Úkol

Úkol D4.1: Sestavte stránku z bloků. Vytvořte konceptovou stránku „O nás“ s: nadpisem H2 a H3, nejméně dvěma odstavci, obrázkem s alt textem, blokem sloupců se dvěma sloupci, tlačítkem s odkazem a vzorem z knihovny. Z jedné skupiny vytvořte vlastní synchronizovaný vzor a vložte ho na druhou konceptovou stránku. Poté ho upravte na jednom místě a sledujte, co se stane na druhé stránce. Nakonec obnovte dřívější starší verzi. U každého kroku udělejte zaškrtnutí a ve dvou větách popište, kdy byste synchronizovaný vzor použili a kdy ne.

Další čtení

Pro práci přímo ve WordPressu zatím nemáme vlastní články; oficiální dokumentace WordPressu je ale obsáhlá.

• Blokový editor (wordpress.org, anglicky): https://wordpress.org/documentation/article/wordpress-block-editor/
• Vzory (wordpress.org, anglicky): https://wordpress.org/documentation/article/block-pattern/
• Starší verze (wordpress.org, anglicky): https://wordpress.org/documentation/article/revisions/