Přehled bloků Gutenberg editoru

V předchozím článku jsme si zběžně popsali nový editor Gutenberg. Tento článek na něj naváže a jednotlivé bloky popíše podrobněji. Zároveň vám ukážeme možnosti nástroje Správce bloků a možnost uložení opakovatelných bloků.

Začneme tím, jak si zobrazíte všechny bloky. Stačí kliknout na tlačítkoplus v levém horním rohu nebo v těle článku.

Přehled kategorií bloků

Bloky v editoru Gutenberg jsou rozděleny do několika skupin. První z nich jsou bloky Nejpoužívanější, dále najdete Běžné bloky, Formátování, Prvky rozložení, Widgety, Externí obsah a v našem případě ještě bloky pluginu Yoast – Yoast Structured Data Blocks.

Všechny tyto skupiny si nyní projdeme a popíšeme si jejich jednotlivé bloky.

Nejpoužívanější bloky

Zde najdete právě ty bloky, které ve svých článcích užíváte opakovaně.

Běžné bloky

wordpress_gutenberg_editor_prehled_bezne-bloky

Běžné bloky obsahují sadu bloků pro základní práci s textem, vložení obrázku, videa či souboru a označení úvodního obrázku článku. Podívejme se detailněji na jednotlivé bloky.

Odstavec

wordpress_gutenberg editor blok odstavec

Základní blok, který slouží pro běžné textové odstavce. Nový řádek vkládáte pomocí CTRL + ENTER (samotný ENTER vloží nový blok).

V horním menu lze:

  • upravit zarovnání celého odstavce (vpravo, na střed, vlevo),
  • vložit odkaz,
  • ztučnit text nebo vložit kurzívu a dále
  • vložit kód, přeškrtnutí a obrázek bez možnosti zarovnání.

V postranním menu lze:

  • vložit iniciálu,
  • upravit velikost písma,
  • nastavit barvu textu i barvu pozadí.

Nadpis

wordpress_gutenberg_editor_blok_nadpis

Slouží pro tvorbu jakýchkoli nadpisů v textu (např. nadpisů k jednotlivým odstavcům).

V horním menu lze:

  • zvolit úroveň nadpisu (H2 – H4),
  • ztučnit text nebo vložit kurzívu a dále
  • vložit kód, přeškrtnutí a obrázek bez možnosti zarovnání.

V postranním menu lze:

  • zvolit úroveň nadpisu (H1 – H6),
  • upravit zarovnání nadpisu (vpravo, na střed, vlevo) a
  • vytvořit HTML záložku pro přímé odkazování na oddíl na stránce.

Citace

wordpress_gutenberg_editor_blok_citace

Slouží pro vkládání jasných a přehledných citací. Výsledný vzhled citace se odvíjí od použité šablony.

V horním menu lze:

  • upravit zarovnání celé citace (vpravo, na střed, vlevo),
  • vložit odkaz,
  • ztučnit text nebo vložit kurzívu a dále
  • vložit kód, přeškrtnutí a obrázek bez možnosti zarovnání.

V postranním menu lze:

  • vybrat základní nebo velký styl.

Obrázky

wordpress_gutenberg_editor_blok_obrazek
wordpress_gutenberg_editor_blok_obrazek_ukazka

Vloží obrázek z Knihovny médií nebo z URL adresy. Obrázek lze i nově nahrát. Po vložení obrázku do bloku se zobrazí další možnosti.

V horním menu lze:

  • upravit zobrazení/zarovnání obrázku v článku,
  • změnit obrázek.

V postranním menu lze:

  • nastavit velikost obrázku,
  • přidat odkaz (na soubor nebo na stránku se souborem, případně jinam).

Seznamy

wordpress_gutenberg_editor_blok_seznam

Slouží pro tvorbu odrážkových i číselných seznamů.

V horním menu lze:

  • vybrat odrážkový nebo číselný druh seznamu,
  • vytvořit více úrovní seznamu (= zmenšit/zvětšit odsazení),
  • vložit odkaz,
  • ztučnit text nebo vložit kurzívu a dále
  • vložit kód, přeškrtnutí a obrázek bez možnosti zarovnání.

Videa

wordpress_gutenberg_editor_blok_video
wordpress_gutenberg_editor_blok_video_ukazka

Vloží video přehrávač pro video soubor z Knihovny médií nebo pro video z URL adresy. Video lze i nově nahrát. Po vložení videa do bloku se zobrazí další možnosti.

V horním menu lze:

  • upravit zobrazení/zarovnání videa v článku,
  • změnit video.

V postranním menu lze:

  • nastavit automatické přehrávání, opakování a ztišení,
  • zobrazit/vypnout ovládací panel přehrávače,
  • nastavit předběžné načítání,
  • zvolit náhledový obrázek videa.

Audio

wordpress_gutenberg_editor_blok_audio

Vloží audio přehrávač pro audio soubor z Knihovny médií nebo pro audio z URL adresy. Soubor lze i nově nahrát. Po vložení audia do bloku se zobrazí další možnosti.

V horním menu lze:

  • upravit zobrazení/zarovnání přehrávače v článku,
  • změnit audio soubor.

V postranním menu lze:

  • nastavit automatické přehrávání a opakování,
  • nastavit předběžné načítání.

Soubor

wordpress_gutenberg_editor_blok_soubor
wordpress_gutenberg_editor_blok_soubor_ukazka

Vloží odkaz v podobě tlačítka na stažení vybraného (podporovaného) souboru. Soubor se vybírá z Knihovny médií nebo se nově nahrává. Po vložení souboru do bloku se zobrazí další možnosti.

V horním menu lze:

  • upravit zobrazení/zarovnání odkazu/tlačítka v článku,
  • změnit soubor.

V postranním menu lze:

  • nastavit cíl odkazu (konkrétní soubor nebo jeho stránka),
  • nastavit otevření odkazu v novém okně,
  • zobrazit/zakázat tlačítko ke stažení.

Galerie

wordpress_gutenberg_editor_blok_galerie

Umožňuje zobrazení většího počtu obrázků najednou a jejich seřazení do přehledné galerie. Vybírají se obrázky z Knihovny médií nebo se nahrávají. Po vložení prvních obrázků do bloku se zobrazí další možnosti.

V horním menu lze:

  • upravit zobrazení/zarovnání galerie v článku,
  • změnit soubory v galerii.

V postranním menu lze:

  • vybrat počet sloupců galerie,
  • nastavit ořezávání obrázků,
  • nastavit cíl odkazu (žádný, konkrétní soubor nebo jeho stránka).

Úvodní obrázek

wordpress_gutenberg_editor_blok_uvodni obrazek

Vloží blok textu na obrázek. Obrázek vybíráte z galerie nebo nově nahráváte. Text se upravuje se stejnými možnostmi, jaké nabízí blok Odstavec. Obrázek překrytý textem představuje jednu z možností zajímavého úvodu pro články.

Formátování

wordpress_gutenberg_editor_prehled_bloku_formatovani

Vlastní formátování

wordpress_gutenberg_editor_blok_vlastni_formatovani

Blok umožňuje v rámci běžného odstavce zvolit libovolné vlastní odsazení např. pomocí mezer a případně i vlastní stylování.

V horním menu lze:

  • vložit odkaz,
  • ztučnit text nebo vložit kurzívu a dále
  • vložit kód, přeškrtnutí a obrázek bez možnosti zarovnání.

Klasický editor

wordpress_gutenberg_editor_blok_klasicky_editor

Zobrazí klasický editor pro úpravu textu tak, jak jej známe z předchozích verzí.

Tabulka

wordpress_gutenberg_editor_blok_tabulka_nastaveni
wordpress_gutenberg_editor_blok_tabulka

Umožňuje vkládat tabulky do textu o libovolném počtu buněk. Po základní volbě počtu řádků a sloupců se vytvoří tabulka, kterou můžete dále libovolně upravovat.

V horním menu lze:

  • upravit zobrazení/zarovnání tabulky v článku,
  • přidat další sloupec/řádek nad nebo pod (řídí se aktuálně zvolenou buňkou),
  • odstranit sloupec/řádek (řídí se aktuálně zvolenou buňkou),
  • vložit odkaz,
  • ztučnit text nebo vložit kurzívu a dále
  • vložit kód, přeškrtnutí a obrázek bez možnosti zarovnání.

V postranním menu lze:

  • zvolit styl – normální nebo pruhy,
  • nastavit pevnou šířku buněk,
  • vybrat barvu pozadí (z nabídky 4 odstínů).

Poesie

wordpress_gutenberg_editor_blok_poesie

Slouží pro vkládání básní či textů písní. Výsledné zobrazení se však odvíjí od použité šablony, mezi bloky Poesie a Odstavec nemusí být žádný viditelný rozdíl.

V horním menu lze:

  • upravit zarovnání celého odstavce (vpravo, na střed, vlevo),
  • vložit odkaz,
  • ztučnit text nebo vložit kurzívu a dále
  • vložit kód, přeškrtnutí a obrázek bez možnosti zarovnání.

Vlastní HTML

wordpress_gutenberg_editor_blok_vlastni_hmtl

Umožňuje vložení textu s libovolným HTML kódem.

Kód

wordpress_gutenberg_editor_blok_kod
wordpress_gutenberg_editor_blok_kod_ukazka

Používá se pro vložení ukázky kódu do článku. Zachová strukturu vloženého textu.

Stručný výpis (Citát) 

wordpress_gutenberg_editor_blok_strucny_vypis
wordpress_gutenberg_editor_blok_strucny_vypis_vs_Citace_ukazka
Srovnání bloků Citace a Stručný výpis

Speciální odstavec, který slouží ke vkládání citátů a podobných vyjádření do textu. Je podobný bloku Citace, avšak podle nás je výraznější. Navíc v tomto bloku můžete nastavit barvy textu a pozadí, což v bloku Citace nelze.

V horním menu lze:

  • upravit zarovnání celého odstavce,
  • vložit odkaz,
  • ztučnit text nebo vložit kurzívu a dále
  • vložit kód, přeškrtnutí a obrázek bez možnosti zarovnání.

V postranním menu lze:

  • zvolit styl – normální nebo plnou barvu,
  • u normálního stylu vybrat barvu ohraničení a textu, u toho druhého pak barvu pozadí a barvu textu.

Prvky rozvržení

wordpress_gutenberg_editor_prehled_bloku_prvky_rozlozeni
Prvky rozvržení – zde najdete bloky pro práci s obsahem a pro rozvržení stránky, jako jsou sloupce, tlačítka, rozdělení a další.

Sloupce

Tento blok umožní vytvořit 2 až 6 sloupců v příspěvku. Do každého můžete vložit  libovolné bloky. Sloupce ve WordPress dlouho chyběly a často se to řešilo externími pluginy tzv. page buildery nebo pomocí shortcode pluginů.  Nastavujete zde pouze počet sloupců a šířku sloupců. Sloupce automaticky vloží na začátek každého sloupce blok Odstavec.

wordpress_gutenberg_editor_blok_sloupce

Tlačítko

wordpress_gutenberg_editor_blok_tlacitko

Vloží výrazný prvek tlačítka, např. pro zvýraznění odkazu.

Pokud vložíte do pole pro text zkopírovaný text i s odkazem odjinud, vloží se automaticky obojí – text i adresa odkazu, avšak tlačítko nemusí správně fungovat. Raději text do tlačítka napište a následně vložte odkaz do pole pod tlačítkem.

V horním menu lze:

  • upravit zarovnání v textu,
  • ztučnit text nebo vložit kurzívu a dále
  • vložit kód, přeškrtnutí a obrázek bez možnosti zarovnání.

V postranním menu lze:

  • zvolit styl tlačítka,
  • vybrat barvy ohraničení či pozadí a textu.

Média a text

wordpress_gutenberg_editor_blok_media_a_text_uvod

Umožňuje umístění textu a mediálního souboru vedle sebe (vloží se dva bloky). Text obrázek neobtéká, hodí se proto spíše pro menší obrázky a krátký text. Bloky pro mediální soubor a odstavec textu fungují podobně, jako jsme výše popisovali samostatné bloky. Obrázky se však vkládají pouze v původní velikosti.

Vodorovná čára

wordpress_gutenberg_editor_blok_vodorovna_cara

Vloží čáru oddělující od sebe text. Čára může být krátká nebo dlouhá, případně může mít podobu 3 teček. Na obrázku vidíte dlouhou čáru.

Pokračování textu

wordpress_gutenberg_editor_blok_pokracovani-textu
wordpress_gutenberg_editor_blok_pokracovani_textu_ukazka

Obsah nad tímto blokem se na hlavní stránce a v archivu zobrazí jako stručný výpis příspěvku. V šabloně však zároveň musí být nastaveno zobrazení Stručného výpisu příspěvků (excerpt).

Widgety

wordpress_gutenberg_editor_prehled_bloku_widgety
Widgety – přidáte widgety přímo do stránky nebo do článku

Bloky v této skupině umožňují vložení widgetů přímo do článku či stránky. Jedná se o běžné widgety, které uživatelé znají z nastavení vzhledu:

  • Kalendář,
  • Nejnovější příspěvky,
  • Nejnovější komentáře,
  • Zkrácený zápis
  • Archivy,
  • Štítky,
  • Rubriky,
  • RSS a
  • Vyhledávání.

Externí obsah

Umožňuje vložení obsahu z jiných webů a sociálních sítí, jako je např.:

  • YouTube (videa),
  • Facebook (příspěvky),
  • Twitter (tweety),
  • Instagram (příspěvky),
  • Vimeo (videa),
  • Kickstarter, Tumblr
  • a z mnoha dalších.
wordpress_gutenberg_editor_prehled_bloku_externi_obsah-2
wordpress_gutenberg_editor_prehled_bloku_externi_obsah-3
wordpress_gutenberg_editor_prehled_bloku_externi_obsah-4

Externí obsah – tímto vložíte externí obsah do stránek WordPress.

Bloky pluginů

Pluginy si mohou přidávat své vlastní bloky. Zde uvádíme příklad s pluginy Yoast SEO, MailPoet a NextGEN Gallery, o kterých jsme se již v několika článcích zmiňovali. Pluginy mohou své bloky přidat na různá místa, např. zde do nové skupiny pod ostatní bloky nebo mezi běžné bloky. Pokud nemůžete blok pluginu najít, zkuste do vyhledávání zadat jeho název.

wordpress_gutenberg_editor_blok_nextgen_gallery
Blok od NextGEN Gallery přidává galerii

Plugin Yoast SEO přidává do editoru Gutenberg 2 bloky optimalizované pro vyhledávače, a sice strukturovaná data v podobě pěkných seznamů.

Blok How-to se hodí pro všechny možné návody, výčty, recepty či jiné postupy. Umožňuje vkládání dat do připraveného seznamu, který se od běžného seznamu liší zejména tučným nadpisem u každého bodu a možností uvedení potřebného času k vypracování. 

Yoast SEO blok

Blok FAQ (Frequently Asked Questions) umožňuje vytvoření pěkného výčtu nejčastějších dotazů, které od svých čtenářů/zákazníků dostáváte.

Yoast SEO - blok

U obou bloků můžete k jednotlivým krokům přidat i obrázek. Do každého příspěvku můžete přidat pouze 1 blok How-to a/nebo 1 blok FAQ.

Správce bloků (Block manager)

Nástroj Správce bloků naleznete pod symbolem tří teček vpravo nahoře pod uživatelským jménem, a to vždy při psaní příspěvku. Správce bloků vám umožní spravovat zobrazované bloky v nabídce nového bloku. Můžete tedy nechat zaškrtnuté jen ty bloky, které využíváte, čímž se zrychlí orientace ve výběru druhu bloku. Například můžete vypnout zobrazování mnoho bloků z kategorie externího obsahu.

wordpress_gutenberg_editor_spravce_bloku

Opakování bloku

Editor Gutenberg nabízí možnost uložení bloku pro jeho pozdější opakované použití v rámci webu. Při aktualizaci bloku se změny projeví všude, kde se daný blok používá. Pod ikonkou tří teček v pravém horním rohu naleznete položku Spravovat všechny opakovatelné bloky, přes níž se dostanete na seznam všech takových bloků.

wordpress_gutenberg_editor_opakovane-bloky
Přidání bloku do opakovaných bloků
wordpress_gutenberg_editor_opakovatelne-bloky-seznam
Opakovatelné bloky se zobrazí jako položka mezi ostatními typy bloků

Jednotlivé opakovatelné bloky můžete editovat přes seznam opakovatelných bloků nebo v každém článku, do něhož daný blok vložíte. Uložené změny se projeví ve všech příspěvcích, v nichž se tento blok nachází.

Nové bloky ve WordPress 5.4

S touto verzi přibyly v Gutenbergu 2 nové bloky – sociální ikony a tlačítka. Mezi další novinky patří možnost nastavení prolínání barev pozadí (gradient) a zobrazení editoru na celou stránku (tlačítko Fullscreen mode v menu tří vertikálních teček vpravo nahoře).

Ikonky sociálních sítí (Social icons)

Ikonky sociálních sítí, obchodů a dalších hojně užívaných serverů, RSS nebo např. e-mailu jsou k dispozici v bloku Social icons. Některé jsou na výběr ihned, další můžete přidat pomocí + (vše v horním menu). V pravém menu pak zadáte popisky. V článku se zobrazí pouze to tlačítko, ke kterému napíšete URL adresu.

Tlačítka (Buttons)

Novým prvkem tlačítka (blok Buttons) můžete zvýraznit např. důležitý odkaz. V horním menu zadáváte adresu, v pravém menu volíte barvu textu a pozadí (k dispozici je i zmíněný nový gradient).

2 komentáře u „Přehled bloků Gutenberg editoru“

    • Máte na mysli konkrétní plugin? To je spíše záležitost pluginu, jak integruje ankety do článků…. Může to být blok v Gutenberg editoru, shortcode ale i html kód …

      Odpovědět

Napsat komentář