Jak používat nový editor bloků WordPress – Váš průvodce WordPress Gutenberg

Od vydání WordPress 5.0 6. prosince 2018 má WordPress nový výchozí editor obsahu. Během vývoje se nazýval editor WordPress Gutenberg, "Gutenberg" je nyní jen "Editor WordPress" nebo "editor bloků" pokud chcete být konkrétnější.


Nový editor bloků s sebou přináší zcela odlišný přístup k tvorbě obsahu ve formě bloky (odtud název…). A v tomto příspěvku se budete přesně učit, jak tyto bloky a další funkce nového editora používat k vytváření obsahu na svém webu WordPress..

Ať už jste svůj web aktualizovali na WordPress 5.0, přečtěte si, abyste se naučili, jak pomocí nového editoru bloků Gutenberg vytvářet obsah a rozvržení na vašem webu.

Průvodce WordPress Gutenberg

Co je Gutenberg?

Gutenberg je název projektu pro nový editor bloků WordPress, který nahradil editor WordPress TinyMCE jako výchozí editor WordPress ve WordPress 5.0.

Zatímco Gutenberg byl oficiální jméno, zatímco editor byl ve vývoji, je to právě teď "editor bloků WordPress" nebo "editor WordPress" protože je oficiálně součástí základního softwaru. Jako takový mě často uvidíte, jak to nazývám "editor bloků" v tomto příspěvku, spíše než "Gutenberg".

Jako rychlý opakovací modul vypadal starý editor WordPress TinyMCE. Tento editor se nyní nazývá klasický editor:

původní wordpress tinymce editor

A tady je to, co vypadá v novém WordPressu editor bloků, AKA Gutenberg:

Editor bloků WordPress Gutenberg

Je to však více než estetická aktualizace. Gutenberg zcela změní zážitek z editace přechodem k blokovému přístupu k obsahu (přesněji o tom, které bloky jsou za sekundu!).

Zatímco se aktuálně zaměřuje na vytváření obsahu, konečným cílem je mít editor bloků Gutenberg "přesahovat příspěvek do šablon stránek a nakonec i úplné přizpůsobení stránek."

To znamená, že nakonec budete moci celý svůj web vytvořit pomocí bloků, včetně vstupních stránek a dalšího důležitého obsahu.

Je Gutenberg součástí WordPressu?

Gutenberg byl oficiálně propuštěn jako součást WordPress 5.0 6. prosince 2018. Pokud jste svůj web aktualizovali na WordPress 5.0, měli byste nyní ve výchozím nastavení vidět nový editor bloků.

Nicméně kvůli velikosti vydání se někteří spravovaní hostitelé WordPress rozhodli neaktualizovat stránky lidí hned. Z tohoto důvodu je pravděpodobné, že na vašem webu ještě není spuštěn WordPress 5.0. V takovém případě je jen na vás, zda chcete aktualizovat nebo ne (ale neměli byste čekat příliš dlouho na výkon a zabezpečení).

Jak funguje editor WordPress Gutenberg

Před sekundou jsem vám řekl, že Gutenberg je editor bloků. Bylo to trochu hrubé nechat vás viset, protože pokud jste jako většina lidí, možná nevíte, co to znamená.

Tady je tedy bloková editace 101:

Gutenberg v podstatě nahrazuje jediné editační pole současného editoru WordPress TinyMCE množstvím jednotlivců "bloky".

Tyto bloky vám pak umožňují vytvářet složitější návrhy, než jsou ty, které umožňují starý klasický editor WordPress.

Co je to blok?

Blok může být téměř cokoli. Například můžete mít bloky pro:

  • Regulární text
  • snímky
  • Vložení videa
  • Tlačítka
  • Widgety (ano, ty stejné widgety, které používáte v postranním panelu)
  • Tabulky
  • Atd.

A co je pěkné, je to, že vývojáři budou moci vytvářet své vlastní bloky třetích stran, ke kterým budete mít přístup prostřednictvím pluginů pro ještě větší flexibilitu.

Každý blok je vlastní entitou, s kterou můžete manipulovat individuálně. Zde je například rychlý příspěvek Gutenberg, který obsahuje tři bloky:

  • 2 textové bloky
  • 1 blok obrázku

Sledujte, jak snadno lze tyto bloky přeskupit pouhým přetažením:

Gutenberg drag and drop

A protože každý blok je "samostatný", můžete také přidat věci jako vlastní pozadí pouze pro konkrétní bloky.

Obecně vám dává větší flexibilitu a hloubkové ovládání.

Gutenberg je tedy tvůrcem stránek, správně?

Ehh, ne tak docela. Alespoň ne ve své současné podobě.

Gutenberg zjednoduší stylování běžného obsahu, jako jsou příspěvky na blogu nebo standardní stránky, ale v současné podobě není náhradou za tvůrce stránek v poměru 1: 1..

Gutenberg již na povrchové úrovni postrádá dvě základní věci:

  • Flexibilní sloupce, i když existuje základní blok sloupců a někteří vývojáři třetích stran vytvořili zajímavé bloky.
  • Skutečný drag and drop – novější verze Gutenbergu vám umožňuje přeskupit bloky pomocí drag and drop, ale stále to není free-form, jako většina tvůrců stránek.

S tím bylo řečeno, editor bloků Gutenberg je připraven eliminovat potřebu tvůrců stránek pro většinu "Standard" obsahu a také vytváří jednotnou metodu vytváření dalších složitý příspěvek rozvržení v WordPress.

Ale pokud jde o budování více složité stránky, jako vstupní stránka, pravděpodobně oceníte větší flexibilitu, kterou nabízejí tvůrci stránek (alespoň během počátečního vydání Gutenberga).

Například v našem srovnání mezi Elementor vs Divi Builder vs Beaver Builder můžete vidět, jak tvůrci horní stránky nabízejí například:

  • Free-form drag and drop editace
  • Pravá podpora pro více sloupců, kde můžete vytvořit libovolný počet sloupců, do kterých lze jednotlivé prvky přetáhnout
  • Spousta předem připravených šablon
  • Pokročilé možnosti stylingu se skvrnami pro vlastní okraje / výplně a mnoho dalšího
  • Reaktivní nastavení designu

Nový editor bloků by se tam jednou mohl dostat. Ale přinejmenším ve své úvodní verzi vydání vám tvůrci stránek stále poskytnou flexibilitu při navrhování komplikovanějších samostatných stránek.

Musíte použít nový editor bloků? Můžete si ponechat předchozí editor WordPress?

Ne, nemusíte používat nový editor bloků a Ano, můžete pokračovat pomocí předchozího editoru WordPress. Chcete-li deaktivovat editor bloků Gutenberg a vrátit svůj web do klasického editoru po upgradu na WordPress 5.0, můžete použít oficiální Klasický editor zapojit.

Přečtěte si našeho průvodce jak zakázat editor bloků Gutenberg dozvědět se více.

Potřebujete speciální motiv pro použití nového editoru bloků Gutenberg?

Protože je nyní výchozím editorem WordPress, je editor bloků vytvořen pro práci s jakýmkoli tématem WordPress. Výběr tématu, které konkrétně nabízí kompatibilitu s Gutenbergem, však nabídne některé velmi skutečné výhody.

Za prvé, témata mohou nabídnout vestavěný styling pro všechny tyto nové bloky. Ještě lepší je, že témata mohou tyto styly skutečně načíst uvnitř editoru. To znamená, že při vytváření obsahu pro lepší zážitek z WYSIWYG můžete vidět skutečné styly svých bloků (viz základní verzi tohoto v akci zde)

Gutenbergská témata také budou moci nabídnout předem připravené šablony složené z různých bloků, takže vše, co musíte udělat, je zapojit svůj obsah do existujících bloků a zasáhnout Publikovat.

Kromě toho existují i ​​další malé výhody, jako je zarovnání obrazu v plné šířce. Takže – můžete použít jakýkoli motiv, který chcete, ale stojí za to dvakrát zkontrolovat, zda vývojář motivu plánuje přidat podporu.

Pokud chcete pro testování použít pouze téma, všechna tato témata mají podporu nového editoru bloků:

  • Neve – Neve je naše nové téma, které je vytvořeno speciálně pro práci s editorem bloků Gutenberg.
  • Zakra – pěkná lehká varianta od ThemeGrill.
  • Hestia Lite – flexibilní téma, které se řídí zásadami materiálového designu.

Další možnosti najdete v naší kolekci nejlepších témat WordPress kompatibilních s Gutenberg.

Vytvořte své první rozvržení pomocí editoru bloků WordPress Gutenberg

Za předpokladu, že používáte WordPress 5.0 a nový editor bloků, jste připraveni kopat do masa tohoto článku. Níže vám ukážu, jak ve skutečnosti použít nový editor bloků WordPress Gutenberg k vytvoření úplného rozložení stránky.

Tímto způsobem budete připraveni vytěžit maximum z WordPress 5.0 a nového editoru.

Rychlá prohlídka rozhraní editoru bloků WordPress

Než začnete přidávat některé bloky, projdeme rychlé shrnutí prvků rozhraní hlavního editoru bloků:

Rozhraní editoru bloků gutenberg

  • (A) – umožňuje přidávat nové bloky.
  • (B) – tlačítka zpět / znovu
  • (C) – umožňuje přístup k nastavení dokumentů a zahrnuje věci jako kategorie & tagy, doporučené obrázky atd. Je to podobné jako aktuální postranní panel v editoru WordPress
  • (D) – pokud máte vybraný jednotlivý blok, získáte přístup k nastavením, která jsou pro tento blok specifická
  • (E) – umožňuje přístup k živému náhledu příspěvku nebo publikování / aktualizaci příspěvku
  • (F) – Jakmile přidáte nějaké bloky, budete ve skutečnosti pracovat s obsahem vašeho příspěvku

Přidávání nových bloků

Jak jsem diskutoval v úvodu, budete používat odděleně "bloky" pro vytvoření rozvržení pomocí nového editoru.

Chcete-li přidat nový blok, stačí kliknout na ikonu +Plus ikonu a vyberte typ obsahu, který chcete přidat:

přidání nového bloku

Ve výše uvedeném příkladu jsem vám ukázal, jak přidat základní blok odstavce. Ale Gutenberg ve skutečnosti obsahuje tunu různých bloků, rozdělených do různých sekcí:

typy bloků

Nahoře vidíte seznam svých Nejvíc používané bloky. Pokud však přejdete dolů, zobrazí se také sekce pro běžné bloky, formátování, prvky rozvržení, widgety a vložení:

typy bloků

  • Vložené prvky – obsahuje pouze jeden blok pro vložený obrázek.
  • Společné bloky – obsahuje základní stavební bloky, jako jsou obrázky, odstavce (běžný text), nadpisy, citace atd.
  • Formátování – umožňuje přidat další formátovaný obsah, jako jsou uvozovky, tabulky nebo klasický textový editor WordPress
  • Prvky rozložení– umožňuje rozdělit text do dvou sloupců, včetně tlačítek, oddělovačů nebo "Více" štítek
  • Widgety – umožňuje přidat krátké kódy, nejnovější příspěvky nebo kategorie. Je dokonce možné zobrazit widgety postranního panelu přímo v Gutenbergu.
  • Vloží – pomáhají vkládat obsah z externích zdrojů, jako jsou Twitter, YouTube, Facebook, Instagram a další.
  • Znovu použitelný – Jakmile se dostanete na kloub věcí, můžete uložit skupiny bloků jako šablony pro opakované použití a nechat je zde zobrazit. Tato oblast se nezobrazí, dokud neuložíte svou první opakovaně použitelnou šablonu, kterou vám ukážeme, jak dále v tomto příspěvku..

Vytváření základní dispozice s Gutenbergem

Začněme jednoduše. Řekněme, že si jen chcete vytvořit základní rozvržení příspěvků na blogu, které zahrnuje:

  • Regulární text
  • Obrázek
  • Citát
  • Vložené video YouTube

Takto byste to udělali s Gutenbergem:

Nejprve byste celý svůj příspěvek napsali do editoru. Nebo, pokud jste jako já a raději napsat do Dokumentů Google, můžete to všechno vložit a Gutenberg jej automaticky převede na bloky.

Přidání netextových bloků

Nyní, když je váš obsah rozdělen do bloků, můžete umístit kurzor na místo, kam chcete vložit první obrázek, a kliknout na ikonu Plus ikona. To vytvoří přestávku. Poté klikněte na ikonu Plus ikonu znovu pro vložení bloku obrázku:

blok obrázku

To vám umožní vložit blok obrázků, ze kterého můžete nahrávat nebo vybírat obrázky podobným způsobem jako aktuální editor WordPress:

vložte obrázek

Jakmile vyberete obrázek, měli byste jej vidět přímo v rozvržení stránky:

vložený obrázek

Dále najeďte kurzorem na místo, kam chcete vložit vyžádanou nabídku, a stejným přístupem vložte další blok. Můžete buď hledat "citát" nebo jít do Společné bloky sekce:

vložit nabídku

Poté uvidíte svůj nový blok vyžádaných nabídek. Chcete-li vytvořit nabídku, stačí kliknout do bloku a napsat:

zadejte nabídku

Chcete-li vložit video YouTube, můžete přidat nové Youtube blok od Vloží tab. Chcete-li vložit video, stačí zadat adresu URL a kliknout Vložit:

blok youtube

Volitelné – vytváření různých sloupců

Chcete být ještě více kreativní? Gutenberg nyní obsahuje experimentální funkci sloupců, která umožňuje rychle vytvořit více sloupců. Vše, co musíte udělat, je přidat Sloupce (Beta) blok od Prvky rozložení sekce. Poté můžete do něj vložit další bloky:

Gutenbergovy sloupy

Po dokončení stačí kliknout na ikonu Publikovat knoflík:

publikovat příspěvek

A na front-end budete mít svůj formátovaný blogový příspěvek.

Jak přizpůsobit jednotlivé bloky

Protože editor WordPress Gutenberg obsahuje spoustu různých bloků, nemohu vám ukázat, jak používat jednotlivé bloky.

Ale mohu vám dát základní rámec, který se vztahuje na všechny bloky.

V podstatě ovládáte obsah v aktuálním textu editora:

editace bloku

Pro základní styl textu a zarovnání můžete použít panel nabídek, který se objeví, když umístíte kurzor myši na blok:

styling bloku

A pro pokročilejší stylování obvykle stylujete v bloku Blok karta nastavení.

Pro přístup na tuto kartu vyberte blok, který chcete upravit, a přejděte na Blok karta:

přizpůsobení bloku

Jak změnit uspořádání jednotlivých bloků

Chcete-li změnit uspořádání bloků, máte dvě možnosti. Můžete použít Nahoru nebo Dolů šipka, když se vznášíte nad blokem, posune blok v tomto směru:

pohybovat gutenbergovými bloky

Nebo můžete bloky přetahovat. Chcete-li aktivovat funkci přetahování, musíte umístit kurzor myši nad ikonu šest teček mezi šipkami nahoru a dolů

Gutenberg drag and drop

Dává to všechno dohromady

Jakmile zjistíte, jak věci fungují s novým editorem bloků, je to docela bezbolestné a intuitivní.

Nejprve se můžete setkat s rostoucími bolestmi a potížemi při provádění základních akcí, které jste považovali za samozřejmost.

Ale jakmile se dostanete na kloub věcí – měli byste projíždět konstrukcí budovy. A s pokročilejšími bloky, s nimiž Gutenberg přichází, budete mít větší flexibilitu než editor TinyMCE WordPress.

Nějaké úhledné, ale pokročilejší Gutenbergovy triky

Když se více seznámíte s editorem bloků WordPress Gutenberg, můžete najít některé z těchto triků jako šetřiče času.

Rychle vytvořte nový blok zadáním

Výše jsem vám ukázal, jak vytvářet bloky pomocí tlačítka Vložit. Chcete-li však ušetřit čas, můžete ve skutečnosti vytvářet bloky jednoduše zadáním této syntaxe:

/ BLOCK-NAME

Objeví se okno automatického návrhu, které vám pomůže najít příslušný blok.

Zde je například návod, jak vytvořit blok obrázku pouze pomocí klávesnice:

Docela pohodlné a velké šetří čas!

bloková zkratka

Upravte zdrojový kód přímo

Kdykoli můžete upravit zdrojový kód celého svého příspěvku kliknutím na ikonu tři tečky v pravém horním rohu a výběrem Editor kódu:

editace kódu v gutenbergu

Aktivujte režim celé obrazovky, pevný panel nástrojů atd.

Nový editor bloků obsahuje několik různých režimů, které vám umožní změnit zážitek z úprav. Můžeš:

  • Přidejte pevný panel nástrojů jako editor TinyMCE
  • Přejít na celou obrazovku
  • Dejte a "reflektor" na aktivním bloku

Chcete-li je použít "Zobrazení", klikněte na tři tečky v pravém horním rohu.

Gutenbergovy názory

Ušetřete čas pomocí klávesových zkratek Gutenberg

Kromě standardních klávesových zkratek má editor bloků řadu vyhrazených klávesových zkratek, které vám mohou pomoci:

  • Vložte nové bloky nad nebo pod vybraný blok
  • Vymažte blok
  • Duplikujte blok
  • Atd.

Úplný seznam klávesových zkratek otevřete pomocí Shift + Alt + H zkratka.

Klávesové zkratky Gutenberg

Vytvořte znovu použitelné šablony šablon

Pokud máte konkrétní kolekci / uspořádání bloků, které musíte znovu použít na více místech, můžete skupinu bloků uložit jako opakovaně použitelnou šablonu. Šablonu budete moci pojmenovat. Potom ji můžete vložit stejně jako byste měli normální blok.

Postup vytvoření šablony:

  • Vyberte bloky, které chcete zahrnout
  • Klikněte na ikonu tři tečky ikona
  • Vybrat Přidat do opakovaně použitelných bloků

Šablony bloků pro opakované použití Gutenberg

Upravit obsah opakovaně použitelného bloku

Kromě usnadnění rychlého vkládání formátovaného obsahu vám opakovaně použitelné bloky také umožňují rychlou aktualizaci všech instancí tohoto opakovaně použitelného bloku..

To znamená, že jakmile upravíte obsah opakovaně použitelného bloku, nový příspěvek, který používá tento opakovaně použitelný blok, získá také nový obsah.

Chcete-li upravit opakovaně použitelný blok, přejděte na ikonu Znovu použitelný v bloku zavaděče a klikněte na Spravujte všechny opakovaně použitelné bloky knoflík. Nebo můžete navštívit stránku yoursite.com/wp-admin/edit.php?post_type=wp_block (ujistěte se, že váš web site.com je nahrazen skutečnou adresou URL)..

Úpravy opakovaně použitelných bloků WordPress

Rozšiřte editor bloků o pluginy

Pokud chcete získat fantazii, můžete nyní najít spoustu doplňků pro rozšíření Gutenberg, které přidávají své vlastní bloky.

Vydra Blocks je dobrá volba, jak začít. Dává vám další bloky pro věci, jako jsou ceny, reference, Mapy Google, ikony sdílení, "klikněte na tweet" tlačítka a další.


Gutenbergovy bloky a knihovna šablon Otterem Gutenbergovy bloky a knihovna šablon Otterem

Autor: ThemeIsle

Aktuální verze: 1.5.4

Poslední aktualizace: 26. května 2020

otter-blocks.zip


Hodnocení 98%


60 000 instalací


WP 5.2 + Vyžaduje

Ovládejte nepořádek pomocí Správce bloků

Nový editor přidává mnoho bloků, zejména pokud používáte některé z těchto bloků, které jsme zmínili výše. To může věci trochu zaplnit a zpomalit. Pokud existují nějaké bloky, které nikdy neplánujete použít, můžete použít Block Manager zakázat je.

Použití Správce bloků:

  • Klikněte na ikonu tři tečky v pravém horním rohu
  • Vybrat Block Manager
  • Pomocí zaškrtávacích políček blokujte podle potřeby bloky

Správce bloků WordPress

Pomocí rychlé navigace v obsahu můžete rychle procházet obsah

U dlouhého obsahu nebo obsahu, kde používáte mnoho vnořených bloků, může být obtížné rychle najít blok, který hledáte..

Editor bloků obsahuje a Blokovat navigaci nástroj, který můžete otevřít kliknutím na panelu nástrojů nebo pomocí Shift + Alt + O klávesová zkratka.

Pokud jste uvnitř vnořeného bloku (jako jsou sloupce), Blokovat navigaci nástroj zobrazí všechny vnořené bloky. Chcete-li vybrat konkrétní blok, můžete na něj kliknout v seznamu.

Blokovat funkci navigace

Přepínání mezi režimy úprav a výběru

S aplikací WordPress 5.4 získáte přístup ke dvěma různým režimům, které můžete přepínat pomocí horního panelu nástrojů:

  • Upravit – to je to, co budete dělat většinu času. To vám umožní upravit obsah všech vašich bloků. Toto je výchozí režim editoru.
  • Vybrat – to usnadňuje výběr konkrétních bloků, zejména při práci s vnořenými bloky (např. Bloky uvnitř sloupce). Jakmile kliknete do bloku, automaticky se přepnete zpět na Upravit režim.

Režim výběru editoru bloků WordPress

Experimentujte s novými funkcemi editoru bloků

Od doby, kdy byl editor bloků začleněn do jádra, existují ve skutečnosti dvě verze editoru bloků:

  1. Nativní verze v základním softwaru WordPress (to je pravděpodobně to, co používáte)
  2. Gutenberg plugin

Verze pluginu Gutenberg je v podstatě testovací základnou pro základní editor. Verze pluginu obsahuje nové funkce, které jsou ve vývoji. Nakonec budou tyto funkce sloučeny do jádra. Ale pokud si s nimi chcete brzo zahrát, stačí si nainstalovat plugin Gutenberg z WordPress.org.


Gutenberg Gutenberg

Autor: Gutenberg Team

Aktuální verze: 8.2.1

Poslední aktualizace: 28. května 2020

gutenberg.8.2.1.zip


Hodnocení 40%


200 000 + instalace


5.3.0 Požadavky

Co se stane se vším starým obsahem?

Než dokončím práci, dovolte mi rychle se seznámit s tím, co se stane se vším starým obsahem, jakmile provedete aktualizaci na WordPress 5.0 (pokud jste tak již neučinili).

Nebojte se – nezmizí! Ale zkušenost je trochu jiná:

Když aktualizujete svůj web na WordPress 5.0 a máte existující obsah vytvořený pomocí původního editoru TinyMCE, editor bloků vloží veškerý váš starý obsah do jediného Klasický blok. Tento klasický blok je v podstatě editorem TinyMCE…, ale zabudován do nového editoru bloků.

Gutenbergův klasický blok

Chcete-li pracovat se starým obsahem, můžete buď:

  • Ponechte ji v klasickém bloku a upravte ji stejně jako u starého editoru WordPress
  • Použijte tři tečky ikonu a vyberte Převést na bloky. To vše rozdělí na jednotlivé bloky. Poté můžete s vaším obsahem pracovat stejně, jako byste jej původně vytvořili pomocí editoru bloků Gutenberg.

Převést na bloky

Co bude dál pro editor bloků Gutenberg?

Zatímco editor bloků je nyní oficiálně součástí jádra (díky vydání WordPress 5.0), tým WordPress zdaleka nedokončil projekt Gutenberg.

V současné době hlavní tým pracuje na tom, aby editor bloků nahradil widgety WordPress a také vám umožní vytvářet navigační nabídky s bloky..

I když tyto funkce ještě nejsou, jsou na cestě. Z tohoto důvodu se vyplatí začít učit rozhraní editoru bloků ASAP!

Pro většinu příležitostných uživatelů přinese po několika rostoucích bolestech flexibilnější zážitek z vytváření obsahu.

Non-vývojáři budou moci intuitivně vytvářet složitější rozvržení s extra prvky, jako jsou tlačítka, vložení obsahu a mnoho dalšího. A to, doufejme, pomůže WordPress k dalšímu růstu.

Teď bychom od vás rádi slyšeli. Jsem si jist, že mnozí z vás mají silné myšlenky na nového editoru bloků Gutenberg – dejte nám o tom vědět v komentářích!

Nezapomeňte se připojit k našemu havarijnímu kurzu při urychlení vašeho webu WordPress. Pomocí několika jednoduchých oprav můžete zkrátit dobu načítání až o 50–80%:

Rozvržení, prezentace a úpravy Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map