Gutenberg vám jako vývojářům otevírá vzrušující nové možnosti. V tomto tutoriálu vám prozradím vše, co potřebujete o tomto blokovém editoru vědět. Přečtěte si, jak vytvořit vlastní WordPress bloky a upravit ty stávající.

Gutenberg je editor, který byl zveřejněn s WordPress 5.0. S Gutenbergem byl zaveden koncept WordPress bloků. Ty umožňují provozovatelům webových stránek přetahovat designové prvky bez externího page builderu nebo programovacích dovedností. 

Gutenberg bude v budoucnu použit jako základ pro full site editing. V minulosti bylo vždy nutné programovat, i když jste použili page builder: U některých změn byl nutný kód.

S každým novým WordPress major updatem lze pozorovat, že znalosti PHP a tradiční vývoj WordPress stránek již nestačí. Jako WordPress vývojáři musíte Gutenberg ovládat.

Tento tutoriál zahrnuje: 

• Co Gutenberg je
• Jak pracovat s WordPress bloky
• Jak používat tyto nové funkce a technologie k vytváření výkonných WordPress webů

Pusťme se do WordPress Gutenberg tutoriálu pro vývojáře!

Co je Gutenberg?

Gutenberg byl zveřejněn společně s WordPress 5.0, aby bylo snazší vytvářet příspěvky a stránky čistě vizuálním způsobem. To však byla pouze první fáze projektu.

Gutenberg se spoléhá na moderní technologie, jako je JavaScript, React a REST API, aby vytvořil dynamické prostředí editoru, které napodobuje úpravy frontendu. V této první fázi byl tento blokový editor zveřejněn. 

S dalšími aktualizacemi a druhou fází se má Gutenberg stát plnohodnotným editorem webových stránek. V budoucnu bude možné vytvářet WordPress weby pouze pomocí bloků.

To znamená: Kdo vytváří WordPress stránky, musí nově definovat vlastní pracovní postup. Znalosti PHP již nestačí k vytvoření WordPress stránky od základů. Musíte se vyznat v JavaScriptu, Reactu a REST API, abyste mohli vytvořit jednotlivé bloky a designové prvky pro webové stránky založené na Gutenbergu. 

Začínáme s WordPress bloky

Je vzrušující, se dát na tuto novou cestu s Gutenberg editorem. S tímto tutoriálem se naučíte všechno důležité, než začnete s Gutenberg development a vytvoříte vlastní WordPress bloky.

Co musíte vědět, než budete vyvíjet s Gutenbergem 

Nejdůležitější jazyk, který potřebujete umět, abyste zvládli tento WordPress Gutenberg tutoriál pro vývojáře a vývojářky, je Javascript. Přesněji řečeno, potřebujete umět verzi ES5, která je podporována většinou moderních prohlížečů. 

Novější funkce jsou součástí verze ES6 z roku 2015 a v nejnovější verzi ESNext. 

Pochopit ES6 a ESNext může mít smysl. Pokud je však chcete používat u vývoje WordPress bloků, musíte vědět, jak nakonfigurovat nástroje, které převedou váš novější kód na ES5. 

Musíte také pochopit JSX, což je rozšíření syntaxe Javascriptu a která také vyžaduje transformaci. Vzhledem k tomu, že se ES6, ESNext a JSX mnohem snadněji píší než ES5, stojí za to, nastavit transformační nástroje. 

Webpack, ve spojení s Babel, je populární transformační nástroj. Tato kombinace nástrojů minifikuje váš Javascript. 

V neposlední řadě vám znalost React JS může nesmírně pomoci, pokud vytváříte vlastní WordPress bloky nebo sledujete různé WordPress návody pro vývojáře, které se zaměřují na přizpůsobení bloků. 

Obsahy se v Gutenbergu ukládají odlišně 

Na rozdíl od klasického content editoru se obsah v Gutenbergu ukládá jinak. Obsah již není uložen jako HTML, ale jako HTML komentář v určité struktuřeve formátu JSON. To usnadňuje přenos obsahu do jiné WordPress instalace nebo do content management systému (CMS). 

Ukládání obsahu v tradičním HTML je v pořádku, pokud jde o jednoduchý a textový obsah. Pokud se však zabýváte dynamicky generovaným obsahem, bude váš kód bohužel nečistý. 

Nemusíte znát nutně technické detaily o tom, jak fungují WordPress bloky. Důležité: Pokud vytvoříte obsah v Gutenbergu, je vytvořené HTML bez parsovaného chaotického kódu. Protože všechny podrobnosti jsou uloženy v HTML komentářích. 

Co lze s WordPress Gutenberg bloky dělat 

V Gutenbergu lze dělat několik věcí. Pokud sledujete WordPress tutoriál pro vývojáře, měli byste si být vědomi vlastních možností. 

Podívejme se na několik možností: 

• Vytvořte si vlastní WordPress bloky: Toto je nejsložitější úkol, který můžete udělat. Ale vytvořit si vlastní WordPress bloky se vyplatí, pokud chcete dosáhnout skutečných úprav. 
• Připravte pro Gutenberg svou šablonu: To zahrnuje, že se budete řídit pokyny pro návod na WordPress.org, abyste zajistili, že vaše šablona bude s Gutenbergem kompatibilní. To zahrnuje úpravu stylu bloku tak, aby si šablona ponechala požadovaný vzhled a udržela funkci bloku. 
• Přizpůsobit nebo rozšířit obsahové bloky: Jak bylo uvedeno výše, můžete stávající WordPress bloky v Gutenbergu přizpůsobit. To zahrnuje buď přidání vlastních stylů bloků, přidání filtrů prostřednictvím Javascriptu, nebo přizpůsobení kategorií bloků a typů bloků, které se zobrazují pro konkrétní přizpůsobitelné typy příspěvků. 

Nastavit vývojové prostředí pro Gutenberg blok editor

Než budete s Gutenbergem tvořit nebo budete moci absolvovat jakýkoli WordPress tutoriál pro vývojáře, musíte nastavit vývojové prostředí. Prvním krokem je pořídit si Node.js. WordPress doporučuje použít k instalaci a správě Node Version Managera (nvm). 

V rámci klonovaného úložiště můžete Gutenberg stavět následovným způsobem: 

npm ci
npm run build

Toto kódování vede k tomu, že lze Gutenberg použít jako plugin. Poté přidáte vytvořený Gutenberg adresář do složky wp-obsah/plugins ve vašem místním WordPress prostředí. A White Pixel také doporučuje instalovat Webpack a Babel. 

Projděte všechny kroky nastavení, abyste konfigurovali vývojové prostředí. Potřebujete místní testovací webovou stránku, na které WordPress s vámi vytvořeným Gutenberg pluginem běží a přístup k terminálu, abyste mohli provést vyžádání přes příkazový řádek. WordPress.org poskytuje mnoho prostředků pro vývojové skripty. 

Po nastavení a konfigurování místního prostředí můžeme nyní přejít k hlavní části tohoto WordPress tutoriálu pro vývojáře a vývojářky: WordPress bloky.

Jak porozumět WordPress blokům

WordPress bloky jsou kontejnery, ve kterých je obsah umístěn v blokovém editoru WordPressu. WordPress bloky lze přesouvat pomocí rozhraní drag & drop.

Je důležité, abyste pochopili, co WordPress bloky jsou, než vytvoříte vlastní. WordPress bloky jsou velmi rozsáhlé a zahrnují několik důležitých funkcí, mimo jiné s ohledem na: 

• Obsah: Tyto běžně používané bloky zahrnují odstavce, nadpisy, obrázky, seznamy, citáty a multimédia.
• Formátování: Vylepšete formátování vlastního obsahu pomocí bloků, které přidávají kód, vlastní HTML a tabulky.
• Rozložení: Přizpůsobte vzhled stránek a příspěvků pomocí bloků k přidání zalomení stránek, mezer, sloupců, bloků tlačítek a oddělovačů.
• Widgety:Tyto bloky umožňují snadné vkládání widgetů kamkoli a zahrnují možnosti, jako shortcode, kategorie, sociální ikony, RSS a nejnovější komentáře. 

Jak vytvořit vlastní WordPress bloky

S tímto WordPress Gutenberg tutoriálem pro vývojáře a vývojářky se dozvíte, co potřebujete k přizpůsobení obsahu WordPress bloků. Pak je můžete použít na svých webových stránkách nebo těch svých zákazníků. 

Jak registrovat nové WordPress bloky

Každý nový blok začíná registrací. Použijte funkci registerBlockType, abyste registrovali novou definici typu bloku.  

Název bloku je řetězec, který musí být zapsán jako namespace/block-name. Vyměňte namespace za název bloku, který chcete vytvořit. 

Odtud je třeba definovat vlastnosti nového bloku, například název, popis, kategorii, ikonu, klíčová slova nebo styly. 

Přidání panelů nástrojů pro individuálně přizpůsobitelné akce

Chcete-li do bloku přidat vlastní akce pomocí interaktivního panelu nástrojů, můžete přizpůsobit fungující panely nástrojů u Gutenberg (nebo je vytvořit sami). Nastavení vlastních ikon, formátování, umístění a přiřazených akcí v závislosti na potřebách vašich pluginů nebo šablony. 

Podle příručky editoru bloků může přidání vlastního panelu nástrojů vypadat podobně: 

Jak přeložit WordPress bloky 

Když provedete internacionalizaci, můžete zajistit, aby se vaše WordPress bloky dostaly k širšímu publiku. 

Od WordPress 5.0 můžete použít wp-i18n JavaScript balíček, abyste přidali přeložitelné řetězce. Můžete také vytvořit překladové soubory a nechat je načíst, když uživatel požaduje obsah v tomto jazyce. 

Přidat nastavení do Inspektoru

Všechny bloky mají několik nastavení v Inspektoru, které se zobrazí na pravé straně obrazovky, když jsou vloženy do vašeho obsahu. A v závislosti na WordPress bloku jsou aspekty, které mohou uživatelé přizpůsobit, odlišné. Pro každý jednotlivý blok, který vytvoříte, musí být definováno nastavení Inspektoru. 

Du kannst <InspectorControls> hinzufügen, indem du WordPress mitteilst, welche Inspektor Steuerelemente verwendet werden sollen, wie sie aussehen sollen, welche Optionen enthalten sein sollen und in welcher Reihenfolge sie erscheinen sollen. 

Úsilí JavaScriptu pro WordPress vypadá asi takhle: 

S těmito specifikacemi pak můžete použít JSX k úpravě každé funkce a přizpůsobení jejího pořadí. 

Jak vydat dynamický obsahu pomocí PHP

Dynamický obsah je pro WordPress nezbytný. Existuje mnoho důvodů, proč by se vám dynamický blok mohl hodit. 

Pokud například chcete vytvořit Latest Posts Block, který zobrazuje nejnovější blogové příspěvky v reálném čase, potřebujete dynamický blok. 

Blok je na PHP odkázaný, protože potřebuje načíst nové informace pokaždé, když je renderován. Aby byla většina bloků dynamická, je klíčové, aby byla funkce paměti změněna na nulu. Pak vložíte kód a dáte pokyn novému bloku, aby načetl příslušný obsah. 

Můžete také nastavit atribut, který dá bloku pokyn, aby zobrazoval určitý počet příspěvků.

Přidání jednotlivých nastavení k stávajícím Gutenberg blokům

Můžete také přidat přizpůsobitelná nastavení a provést změny v již existujících Gutenberg WordPress blocích. Můžete například přidat přizpůsobitelné ovládací prvky do panelu rozšířeného bloku v nastavení inspektoru bloku. Jeffrey Carandang napsal super návod na svém blogu.

Jak vytvořit Custom Block Patterns

Pusťme se v tomto WordPress tutoriálu pro vývojáře do dalšího aspektu Gutenbergu. S WordPress block pattern lze vytvářet a sdílet předdefinovaná rozložení bloků. Jedná se o seskupení WordPress bloků, které umožňují vytvářet složité layouty několika kliknutími.

Na block patterns se dostanete, když stisknete + na obrazovce pro příspěvky/stránky. Poté uvidíte všechny pro váš web dostupné block patterns. 

Jak vytvořit vlastní block patterns 

Nejdříve vytvoříte návrh stránky nebo příspěvku. Vložte bloky do požadované konfigurace. Pokud máte např. online časopis, budete možná chtít vytvořit rozložení stránky pro nové články s lákavými názvy, sloupci, obrázky a citáty. 

Poté budete muset utvořit bloky tak, aby vypadaly, jak chcete. 

Dalším krokem je zkopírovat vše, co jste doposud udělali. Klikněte na všechny bloky a podržením klávesy ALT je vyberte. Pak klepněte na ikonu se třemi tečkami (další možnosti) na panelu nástrojů. Klikněte na kopírovat. 

Dále budete muset dešifrovat výstup HTML, který jste právě zkopírovali. K tomu můžete použít nástroj JSON Escape/Unescape. Zkopírujte Result String Code, který se zobrazí po kliknutí na Escape. 

Nyní musíte nový block pattern zaregistrovat. 

Jak zaregistrovat a odregistrovat block patterns

Custom Block Patterns můžete zaregistrovat pomocí rozhraní Block Patterns API a přidat kód functions.php, který jste nahoře zkopírovali, do souboru vlastních WordPress šablon nebo přidáním do vlastního pluginu.

Můžete také použít Block Pattern Builder Plugin, abyste eliminovali požadavky na kódování pro vytváření block patterns.  

Jak použít Gutenberg Editor jako vývojáři šablon

Díky Gutenbergu je snadné vytvářet WordPress bloky, které dělají z publikovaného obsahu podívanou. Gutenbergem lze ale nahradit i Page Builder plugin jako je Elementor nebo Divi.

Gutenberg lze použít také k vytvoření poutavých layoutů pro domovskou stránku, když aktivujete bloky v celé délce a šířce. Nebo můžete sestavit úplně novou šablonu na základě bloku. 

Pojďme podrobně probrat některé z vašich možností. 

Přidání částí stránky pomocí cover bloků

Cover bloky jsou novějším doplňkem Gutenbergu a jsou skvělým způsobem, jak přidat na stránku různé části. Další informace naleznete v tomto videu.

Překryvné bloky, které můžete přidat, jsou:

• Obrazové bloky
• Pozadí videa
• Bloky nadpisů
• Bloky odstavců
• Bloky tlačítek 

Cover bloky dělají váš web všestrannější. Tímto způsobem můžete vytvořit individuální domovskou stránku. Mohli byste dokonce vytvořit jednoduchou WordPress šablonu s kombinací z cover bloků a block patterns. 

V dohledné době se můžeme těšit na ještě rozsáhlejší způsoby, jak plně upravovat webové stránky. Tým od Make WordPress Design uvádí, že hlavními body bude template manipulation, pokročilé block patterns a globální styly. 

Použití pluginu Advanced Custom Fields 

Jedním z omezení bloků je, že nemůžete dosáhnout full width layoutu: Vždy bude v krabicích. 

S několika chytrými manipulacemi však můžete plugin Advanced Custom Fields použít k přidání vlastního meta nastavení a vynutit rozložení v plné šířce. To je nezbytné, pokud chcete Gutenberg použít k vytvoření vlastních šablon. 

Použití vlastních stylů bloků 

Další způsob, jak můžete jako vývojáři šablon Gutenberg využít, je použití custom block stylů. Jakmile jste vytvořili block patterns nebo použili cover bloky k vytvoření častí stránek, můžete styly bloků ke každému zúčastněnému bloku přidat, nebo z něj odstranit. 

Abyste mohli styly přidávat nebo odstaňovat, musíte znát název bloků, které jsou s ním spojeny. Tento další krok umožňuje, že nemusíte vkládat vlastní třídu CSS při každém použití bloku. 

WordPress bloky pro landing pages a front pages

Již jsme zmínili, jak efektivní jsou cover bloky k vytváření domovských stránek webů nebo vašich šablon. Fungují skvěle také pro vstupní stránky. 

Několik dalších bloků, které stojí za zmínku a mohou s tímto úkolem pomoci, jsou: 

• Galerie
• Sloupcové bloky
• Obrazové bloky
• Tabulkové bloky
• Textové bloky

Většinu bloků lze použít ve spojení s krytými obrazovými bloky k vytvoření profesionálně vypadající domovské stránky. 

Pokud potřebujete více funkcí, můžete přidat plugin pro Gutenberg blok, který přidává jednotlivé bloky ke Gutenbergu, nebo plugin pro Gutenberg blok knihovnu, který jich přidá několik. 

Ultimate Addons for Gutenberg a Atomic Blocks jsou vynikající možnosti knihovny, které poskytují jednodušší prostředí pro vytváření webu s bloky pro testimonials, call to action, možnosti rozložení stránky, kontaktní formuláře, cenové tabulky a shortcodes. 

Pluginy jsou ideální pro ty, kteří se s Gutenbergem obeznámí a chtějí vyvíjet webové stránky, aniž by museli použí mnoho kódů. 

Myšlenky k WordPress blokům

WordPress Gutenberg Block Editor je nyní součástí WordPress core a vývojový tým WordPressu s ním má velké plány. Bude možné, použít Gutenberg k vytvoření navigační nabídky. A v budoucnu bude tento editor kompatibilní s ještě více šablonami.

S pomocí tohoto WordPress tutoriálu pro vývojáře a vývojářky nyní umíte použít WordPress bloky k vytvoření webových stránek a přizpůsobení obsahu vlastním potřebám. 

Nyní můžete vytvářet bloky WordPress od nuly a nakonec vytvářet celé webové stránky WordPress pomocí vestavěného editoru bloků.
Mezitím byste se měli ujistit, že webové stránky, které vyvíjíte na Raidboxes být hostován.Raidboxes nabízí komplexní WordPress hostingové balíčky, které jsou vhodné pro jednotlivé provozovatele webových stránek i agentury.