WordPress Gutenberg – Patterns – Evolution of Reusable Blocks

Synchronized patterns and designs replace repeatable blocks since WordPress version 6.3 (introduced in version 5.5).

Thanks to these patterns, we are able to create a basic website layout so that we don’t have to start from scratch for every page. When used correctly, we can simplify our work in Gutenberg by using patterns.

There are two groups of Gutenberg patterns:

• Basic Patterns
• Synchronised Patterns

Basic Gutenberg Block Patterns

If synchronization is avoided, each pattern behaves separately. So if we use a pattern in multiple places on the site, we can edit each one separately without affecting the others.

Creating a Pattern

1. Vytvoříme si libovolný blok, který nastylujeme:

2. V horním panelu nástrojů zvolíme tři tečky a klikneme na možnost “vytvořit vzor“.

3. Vyskočí na nás okno, kam zadáme název vzoru, odškrtneme pole “Synchronizováno” a případně zvolíme rubriky.

4. Ve finále máme náš první vytvořený vzor, který můžeme kdekoliv na webu libovolně používat. Najdeme jej následovně:

Synchronised Block Patterns in Gutenberg

Synchronized patterns hold incredible potential. If we create one and then use it in multiple places, they will depend on each other.

This can make your job easier when editing the site. For example, if we need to change the background color of a web page, the changes are applied globally, so we don’t have to change the color of each individual element.

Creating a Synchronized Pattern

1. Postup je stejný jako v předchozím případě, akorát při vytváření necháme možnost “Synchronizováno” zaškrtnutou.

2. Pokud blok kdekoliv jinde na webu použijeme, bude se chovat jako globální. Upravíme-li jeden blok, ostatní se mu přizpůsobí a naopak.

You can tell that the pattern is global by the purple icon next to the block.

How Do I Unsync a Block?

If you don’t want the modification of an individual block to affect the patterns of other blocks, you can simply disable the global behavior of the block (option “Disconnect pattern”).

How and Where to Manage Patterns?

Select the “Manage patterns” option at the pattern.

We are then redirected to a page listing all the patterns we have created and can edit. For synchronized patterns, the changes are again reflected globally.

How to Transfer Designs to Another Website?

In pattern management, we have the option to export each pattern in JSON format.

1. Vzor exportujeme do našeho počítače

2. Přejdeme na web, ve kterém chceme daný vzor používat.
3. Otevřeme správu vzorů a zvolíme možnost “Importovat z JSON”

4. Po úspěšném importu a znovu načtení stránky by měl být nahraný vzor viditelný a použitelný.

Jaké jsou výhody Gutenberg vzorů?

Hlavní výhodou Gutenberg vzorů je znovupoužití na ostatních webových stránkách WordPressu. Již nikdy nemusíme s prací začínat od nuly, a můžeme tak kdykoliv použít některé části již existující šablony.

Všechny vzory lze používat bez externích pluginů! To má výhodu v tom, že nebudeme mít žádné problémy s kompatibilitou, protože vzory v Gutenbergu byly představeny jako základní funkce WordPressu.

Knihovna již vytvořených vzorů

Pokud při tvorbě webových stránek v Gutenbergu hledáte inspiraci, nebo se Vám nechce začínat od nuly, můžete využít některé z vytvořených vzorů, které uživatelé sdílely na oficiálních stránkách WordPressu.

Knihovna je k dispozici zde.

Po rozkliknutí libovolného vzoru jej pomocí tlačítka můžeme jednoduše zkopírovat, a následně vložit na náš web.

Někdy můžeme najít i šablony, které poskytují vzory ke stažení. Příkladem může být šablona Frost. Některé základní vzory této šablony si níže ukážeme.

Základní vzory:

• O autorovi
• Notifikační bar
• Portfolio
• Tabulky s ceníkem
• Členové týmu
• Citáty
• Hero sekce

Pokud s Gutenbergem teprve začínáte, bude nejspíše těžké si na vzory a jejich znovupoužití zvyknout. Alespoň za zkoušku však rozhodně stojí, a pokud je začnete aktivně používat, vytvoříte vždy udržitelný jednotný vzhled a styl napříč celým webem. Navíc při tvorbě nových webů již nikdy nebudete muset začínat od nuly.