Práce s novým editorem příspěvků Gutenberg

Velká aktualizace na WordPress 5.0 s sebou přinesla jednu zásadní změnu – blokový editor příspěvků Gutenberg. V tomto článku si práci s ním podrobně ukážeme a poradíme vám, jak se případně vrátit ke starému vizuálnímu editoru.

Obecně o editoru Gutenberg

Nový editor zcela mění zažitý způsob tvorby příspěvků. Původní editor fungoval na principu WYSIWYG (zkratka anglického „What you see is what you get.“, česky „Co vidíš, to dostaneš.“). Ten známe např. z běžných kancelářských textových editorů (MS Word, LibreOffice Writer a další). Gutenberg pracuje s bloky (proto blokový editor), které umožňují vložení různého druhu obsahu. Výsledný příspěvek tak představuje jakousi skládačku různých bloků. Principem se to podobá tzv. page builderům (funguje tak např. šablona Divi, o které jsme se zmínili v tomto článku).

Takto v administraci WordPress vypadá nový příspěvek v původním klasickém editoru:

wordpress příspěvek klasický editor

Nový blokový editor příspěvků Gutenberg vypadá trochu jinak:

wordpress_vytvorit-novy-prispevek_blokovy_editor_gutenberg

Instalace nového editoru

Gutenberg není třeba instalovat, je součástí WordPress 5.0 a zcela nahrazuje původní editor. Stačí tedy potvrdit příslušnou aktualizaci. Tvorba nového článku nebo stránky a stejně tak editace existujících příspěvků už budou automaticky probíhat v novém editoru.

Tvorba příspěvku v novém editoru

Tvorba příspěvků v novém editoru není náročná, ale nutno říci, že je úplně jiná, než na co jsme byli léta zvyklí.

Orientace v novém editoru

Po vytvoření nového článku či stránky se objeví editor se 2 připravenými bloky.

wordpress_vytvorit-novy-prispevek_blokovy_editor_gutenberg_blok-nazev-prispevku

Prvním (základním) blokem je název. U něj se objeví podoba trvalého odkazu s možností jeho editace. Trvalý odkaz můžete rovněž upravit přes položku v pravém sloupci.

wordpress_vytvorit-novy-prispevek_blokovy_editor_gutenberg_blok-obsah-prispevku

Druhý blok už představuje obsah příspěvku. Pro začátek si do něj napíšeme úvodní informace k novému článku, tedy prostý text bez úprav. Při psaní se automaticky zobrazí lišta pro editaci textu a sloupec vpravo se přepne na záložku „Blok“.

press_vytvorit-novy-prispevek_blokovy_editor_gutenberg_blok_textovy_editor_uprava textu
wordpress_vytvorit-novy-prispevek_blokovy_editor_gutenberg_blok_textovy_editor_uprava textu_2

Klávesové zkratky, HTML editor, režim celé obrazovky

Všechny tyto položky najdete pod ikonkou tří teček vpravo nahoře.

wordpress_vytvorit-novy-prispevek_blokovy_editor_gutenberg_nastavení

HTML editor

wordpress_vytvorit-novy-prispevek_blokovy_editor_gutenberg_nastavení_prepnuti_html_editor

K urychlení práce s bloky určitě poslouží klávesové zkratky. Pokud píšete články ve WordPress často, jejich naučení se se vám určitě vyplatí.

wordpress_vytvorit-novy-prispevek_blokovy_editor_gutenberg_nastavení_klvesove_zkratky

Vložení dalšího bloku

Další blok můžete vložit několika způsoby, primárně pomocí ikonek + na několika místech na stránce.

wordpress_vytvorit-novy-prispevek_blokovy_editor_gutenberg_pridani_bloku

Další možností je poslední ikonka u každého bloku, která vám zobrazí následující menu. Pomocí položek Vložit pod a Vložit nad vložíte do příspěvku další blok.

wordpress_vytvorit-novy-prispevek_blokovy_editor_gutenberg_pridani_bloku2

Nový blok vytvoříte i použitím klávesy enter při psaní textu.

Posouvání bloků

Umístění/pořadí vytvořených bloků můžete libovolně měnit. Slouží k tomu šipky, které se objeví po najetí myší na každý blok.

wordpress_prispevek_blokovy_editor_gutenberg_poradi_bloku

Hledání/procházení druhů bloků

Gutenberg obsahuje poměrně velké množství různých druhů bloků, s nimiž můžete obsah svého webu tvořit. Při vytvoření nového bloku se vám automaticky zobrazí možnost volby. Na prvním místě se zobrazí nejčastěji užívané druhy bloků. Níže můžete procházet další druhy bloků.

ess_prispevek_blokovy_editor_gutenberg_prehled_bloku

Bloky je možné i vyhledávat, pokud znáte jejich název.

wordpress_prispevek_blokovy_editor_gutenberg_hledani_bloku

Tip: Pokud některé druhy bloků vůbec nevyužíváte, můžete je ze seznamu dostupných bloků (dočasně) odstranit. Slouží k tomu Block manager, který naleznete pod ikonkou tří teček vpravo nahoře (pod uživatelským jménem).

wordpress_prispevek_blokovy_editor_gutenberg_manazer_bloku

Změna bloku, vymazání bloku

Změna druhu bloku se provádí jednoduše pomocí první ikonky v liště, která k danému bloku patří.

wordpress_prispevek_blokovy_editor_gutenberg_zmena_bloku

Vymazání nepotřebného bloku se provádí pomocí poslední ikonky v liště > Odstranit blok, případně pomocí SHIFT + ALT + Z.

wordpress_prispevek_blokovy_editor_gutenberg_vymazani_bloku

Druhy bloků

Nyní si popíšeme, jaké možnosti skrývají jednotlivé druhy bloků. Některá nastavení se zobrazují v liště nad daným blokem, další pak v postranním menu.

Odstavec

  • Slouží pro běžné textové odstavce.
  • Lze upravit velikost písma, zarovnání, barvu textu i barvu pozadí.
  • Lze vložit odkaz, ztučnění i kurzívu.
  • Nový řádek vkládáte pomocí CTRL + ENTER (samotný ENTER vloží nový blok).
wordpress_prispevek_blokovy_editor_gutenberg_blok_odstavec
wordpress_prispevek_blokovy_editor_gutenberg_blok_odstavec2

Nadpis

  • Slouží pro tvoru jakýchkoli nadpisů v textu (např. nadpisů k jednotlivým odstavcům).
  • Lze zvolit úroveň nadpisu (H1 – H6), vložit odkaz, ztučnění i kurzívu.
  • Lze vytvořit i HTML záložku pro přímé odkazování na oddíl na stránce.
wordpress_prispevek_blokovy_editor_gutenberg_blok_nadpis

Obrázky

  • Vkládají se z Knihovny médií, z URL adresy nebo se nahrávají.
  • Lze zvolit zarovnání/obtékání, přidat popisek i alternativní text a nastavit URL adresu, na kterou bude odkazovat.
  • Nově je možné jednoduše upravit velikost obrázku v textu.
wordpress_prispevek_blokovy_editor_gutenberg_blok_obrazky
wordpress_prispevek_blokovy_editor_gutenberg_blok_obrazky2

Má-li obrázek nastaveno zarovnání s obtékáním (např. zde align left), nový blok se automaticky zařadí vedle něj.

wordpress_prispevek_blokovy_editor_gutenberg_blok_obrazky-obtekani

Nemá-li obrázek nastaveno žádné zarovnání, nový blok se automaticky zařadí pod něj.

wordpress_prispevek_blokovy_editor_gutenberg_blok_obrazky-bez-obtekani

Tip: Při nastaveném obtékání obrázku se může lišta nástrojů nového bloku skrýt za obrázek. Jednoduše se to dá vyřešit tím, že se obrázku nenastaví žádné zarovnání, poskládají se požadované bloky a zarovnání s obtékáním se zvolí až poté. Gutenberg však nabízí i další řešení, a to přímo blok Média a text.

wordpress_prispevek_blokovy_editor_gutenberg_blok_obrazky-tip

Média a text

  • Umožňuje jednoduché vložení textu + obrázku či jiných médií vedle sebe.
  • Hodí se spíše pro menší obrázky a krátký text.
  • Text obrázek neobtéká.
wordpress_prispevek_blokovy_editor_gutenberg_blok_media-a-text

Klasický editor

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

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í.
  • Galerie však významnou inovací neprošla, stále není možné vytvářet uživatelsky přívětivé galerie, v nichž je možné prohlížet velké obrázky bez opuštění stránky s galerií.
wordpress_prispevek_blokovy_editor_gutenberg_blok_galerie

Náhled galerie v článku

wordpress_prispevek_blokovy_editor_gutenberg_blok_galerie-nahled-v-clanku

Citace

  • Umožňuje základní úpravy pro zarovnání, tučné písmo a kurzívu.
  • Lze si zvolit základní nebo velký styl.
  • Výsledný vzhled citace se odvíjí od použité šablony.
wordpess_prispevek_blokovy_editor_gutenberg_blok_citace_zakladni
wordpress_prispevek_blokovy_editor_gutenberg_blok_citace_velka

Audio

  • Vloží jednoduchý audio přehrávač.
  • Audio soubor se vkládá z Knihovny médií nebo se nově nahrává.
wordpress_prispevek_blokovy_editor_gutenberg_blok_audio

Soubor

  • Vloží odkaz na stažení vybraného (podporovaného) souboru.
wordpress_prispevek_blokovy_editor_gutenberg_blok_soubor

Video

  • Nově vloží video přehrávač pro video soubor z Knihovny médií nebo pro video z URL adresy.
wordpress_prispevek_blokovy_editor_gutenberg_blok_video

Tabulky

  • Nově je možné jednoduše vkládat tabulky do textu bez nutnosti užití pluginu nebo znalosti HTML/CSS.
  • Po základní volbě počtu řádků a sloupců se vytvoří tabulka, kterou můžete dále libovolně upravovat.
wordpress_prispevek_blokovy_editor_gutenberg_blok_tabulky
wordpress_prispevek_blokovy_editor_gutenberg_blok_tabulky-pridani-sloupce-radku
wordpress_prispevek_blokovy_editor_gutenberg_blok_tabulky-design

Sloupce

  • Umožní jednoduše text v příspěvku rozdělit do sloupců.
  • Sloupce mohou mít různé barvy textu i pozadí.
wordpress_prispevek_blokovy_editor_gutenberg_blok_sloupce

Widgety

  • Umožňuje vložení běžných widgetů přímo do článku.
wordpress_prispevek_blokovy_editor_gutenberg_blok_widgety

Externí obsah

  • Umožňuje vložení obsahu z jiných stránek.
wordpress_prispevek_blokovy_editor_gutenberg_blok_externi_obsah
wordpress_prispevek_blokovy_editor_gutenberg_blok_externi_obsah_facebook

Další bloky

Gutenberg obsahuje samozřejmě i další bloky, my jsme však do článku vybrali ty základní a nejvíce užívané. Své bloky si mohou přidávat i pluginy.
Přehled všech bloků editoru Gutenberg najdete v článku Přehled bloků Gutenberg editoru.

Publikování příspěvku

Kategorie a štítky u článků, uložené verze daného příspěvku, naplánované publikování, náhledový obrázek a nastavení možnosti komentování, tedy všechny nástroje pro publikování příspěvku naleznete ve sloupci vpravo.

wordpress_prispevek_blokovy_editor_gutenberg_nastroje-publikovani

Jednotlivým položkám se zde blíže věnovat nebudeme. Jejich funkce jsou stále stejné a věnovali jsme se jim již v článku Vše o psaní příspěvku ve WordPress.

Nový editor vs. starý editor

Práce s novým editorem je úplně jiná, než na co byli dlouholetí uživatelé redakčního systému WordPress zvyklí. Není tedy divu, že Gutenberg vzbuzuje rozpačité reakce, u někoho nadšení, u jiných zděšení až odpor. Tak tomu ale bývá vždy, když se vývojáři rozhodnou pro razantní změnu. Gutenberg je jednodušším řešením zejména pro ty, kteří vůbec neovládají HTML/CSS. V některých ohledech je lepší, nabízí úpravy textu, pro něž bylo třeba instalovat pluginy nebo ovládat HTML/CSS. Nicméně je zase zbytečně složitý tam, kde to bylo s předchozím editorem jednoduché (např. používání samostatných bloků pro nadpisy práci spíše zpomaluje než usnadňuje).

V současné chvíli však vše naznačuje tomu, že se s novým editorem budou muset uživatelé smířit. Na druhou stranu na to mají poměrně hodně času, minimálně do roku 2022 bude podporován plugin Klasický editor (Classic Editor), který umožňuje návrat k původnímu vizuálnímu editoru.

wordpress_plugin_klasicky_editor

4 komentáře u „Práce s novým editorem příspěvků Gutenberg“

  1. Dobry den
    Nainstaloval jsem plugin gutenberg a jak ho spustím přímo na moji konkretní šablonu abych mohl vytvářet web? diky moc za info

    Odpovědět

Napsat komentář