Basic Gutenberg Block Patterns<\/h3>\n\n\n\n
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.<\/p>\n\n\n\n
Creating a Pattern<\/h4>\n\n\n\n\n- Vytvo\u0159\u00edme si libovoln\u00fd blok, kter\u00fd nastylujeme:<\/li>\n<\/ol>\n\n\n\n
![\"\"](\"https:\/\/musilda.cz\/wp-content\/uploads\/2024\/02\/gutenberg-prvni-vzor.png\")
<\/a><\/figure>\n\n\n\n\n- V horn\u00edm panelu n\u00e1stroj\u016f zvol\u00edme t\u0159i te\u010dky a klikneme na mo\u017enost “vytvo\u0159it vzor<\/strong>“.<\/li>\n<\/ol>\n\n\n\n
![\"\"](\"https:\/\/musilda.cz\/wp-content\/uploads\/2024\/02\/wordpress-gutenberg-jak-vytvorit-vzor.png\")
<\/a><\/figure>\n\n\n\n\n- Vysko\u010d\u00ed na n\u00e1s okno, kam zad\u00e1me n\u00e1zev vzoru, od\u0161krtneme pole “Synchronizov\u00e1no” a p\u0159\u00edpadn\u011b zvol\u00edme rubriky.<\/li>\n<\/ol>\n\n\n\n
![\"\"](\"https:\/\/musilda.cz\/wp-content\/uploads\/2024\/02\/gutenberg-tvorba-vzoru-bez-synchronizace.png\")
<\/a><\/figure>\n\n\n\n\n- Ve fin\u00e1le m\u00e1me n\u00e1\u0161 prvn\u00ed vytvo\u0159en\u00fd vzor, kter\u00fd m\u016f\u017eeme kdekoliv na webu libovoln\u011b pou\u017e\u00edvat. Najdeme jej n\u00e1sledovn\u011b:<\/li>\n<\/ol>\n\n\n\n
![\"\"](\"https:\/\/musilda.cz\/wp-content\/uploads\/2024\/02\/wordpress-gutenberg-navod-na-vytvareni-vzorupng-1024x547.png\")
<\/a><\/figure>\n\n\n\nSynchronised Block Patterns in Gutenberg<\/h3>\n\n\n\n
Synchronized patterns hold incredible potential. If we create one and then use it in multiple places, they will depend on each other.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Creating a Synchronized Pattern<\/h4>\n\n\n\n\n- Postup je stejn\u00fd jako v p\u0159edchoz\u00edm p\u0159\u00edpad\u011b, akor\u00e1t p\u0159i vytv\u00e1\u0159en\u00ed nech\u00e1me mo\u017enost “Synchronizov\u00e1no” za\u0161krtnutou.<\/li>\n<\/ol>\n\n\n\n
![\"\"](\"https:\/\/musilda.cz\/wp-content\/uploads\/2024\/02\/gutenberg-synchronizovany-blok.png\")
<\/a><\/figure>\n\n\n\n\n- Pokud blok kdekoliv jinde na webu pou\u017eijeme, bude se chovat jako glob\u00e1ln\u00ed. Uprav\u00edme-li jeden blok, ostatn\u00ed se mu p\u0159izp\u016fsob\u00ed a naopak.<\/li>\n<\/ol>\n\n\n\n
You can tell that the pattern is global by the purple icon next to the block.<\/p>\n\n\n\n![\"\"](\"https:\/\/musilda.cz\/wp-content\/uploads\/2024\/02\/globalni-vzor-v-gutenbergu.png\")
<\/a><\/figure>\n\n\n\nHow Do I Unsync a Block?<\/h4>\n\n\n\n
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”).<\/p>\n\n\n\n![\"\"](\"https:\/\/musilda.cz\/wp-content\/uploads\/2024\/02\/gutenberg-jak-odpojit-vzor.png\")
<\/a><\/figure>\n\n\n\nHow and Where to Manage Patterns?<\/h2>\n\n\n\n
Select the “Manage patterns” option at the pattern.<\/p>\n\n\n\n![\"\"](\"https:\/\/musilda.cz\/wp-content\/uploads\/2024\/02\/sprava-vzoru-v-gutenbergu.png\")
<\/a><\/figure>\n\n\n\nWe 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.<\/p>\n\n\n\n![\"\"](\"https:\/\/musilda.cz\/wp-content\/uploads\/2024\/02\/sprava-vzoru.png\")
<\/a><\/figure>\n\n\n\nHow to Transfer Designs to Another Website?<\/h2>\n\n\n\n
In pattern management, we have the option to export each pattern in JSON format.<\/p>\n\n\n\n
\n- Vzor exportujeme do na\u0161eho po\u010d\u00edta\u010de<\/li>\n<\/ol>\n\n\n\n
![\"\"](\"https:\/\/musilda.cz\/wp-content\/uploads\/2024\/02\/export-json-vzoru-z-gutenbergu.png\")
<\/a><\/figure>\n\n\n\n\n- P\u0159ejdeme na web, ve kter\u00e9m chceme dan\u00fd vzor pou\u017e\u00edvat.<\/li>\n\n\n\n
- Otev\u0159eme spr\u00e1vu vzor\u016f a zvol\u00edme mo\u017enost “Importovat z JSON”<\/li>\n<\/ol>\n\n\n\n
![\"\"](\"https:\/\/musilda.cz\/wp-content\/uploads\/2024\/02\/jak-importovat-vzory-z-json-ve-wordpressu.png\")
<\/a><\/figure>\n\n\n\n\n- Po \u00fasp\u011b\u0161n\u00e9m importu a znovu na\u010dten\u00ed str\u00e1nky by m\u011bl b\u00fdt nahran\u00fd vzor viditeln\u00fd a pou\u017eiteln\u00fd.<\/li>\n<\/ol>\n\n\n\n
Jak\u00e9 jsou v\u00fdhody Gutenberg vzor\u016f?<\/h2>\n\n\n\n
Hlavn\u00ed v\u00fdhodou Gutenberg vzor\u016f je znovupou\u017eit\u00ed na ostatn\u00edch webov\u00fdch str\u00e1nk\u00e1ch WordPressu. Ji\u017e nikdy nemus\u00edme s prac\u00ed za\u010d\u00ednat od nuly, a m\u016f\u017eeme tak kdykoliv pou\u017e\u00edt n\u011bkter\u00e9 \u010d\u00e1sti ji\u017e existuj\u00edc\u00ed \u0161ablony.<\/p>\n\n\n\n
V\u0161echny vzory lze pou\u017e\u00edvat bez extern\u00edch plugin\u016f! To m\u00e1 v\u00fdhodu v tom, \u017ee nebudeme m\u00edt \u017e\u00e1dn\u00e9 probl\u00e9my s kompatibilitou, proto\u017ee vzory v Gutenbergu byly p\u0159edstaveny jako z\u00e1kladn\u00ed funkce WordPressu.<\/p>\n\n\n\n
Knihovna ji\u017e vytvo\u0159en\u00fdch vzor\u016f<\/h2>\n\n\n\n
Pokud p\u0159i tvorb\u011b webov\u00fdch str\u00e1nek v Gutenbergu hled\u00e1te inspiraci, nebo se V\u00e1m nechce za\u010d\u00ednat od nuly, m\u016f\u017eete vyu\u017e\u00edt n\u011bkter\u00e9 z vytvo\u0159en\u00fdch vzor\u016f, kter\u00e9 u\u017eivatel\u00e9 sd\u00edlely na ofici\u00e1ln\u00edch str\u00e1nk\u00e1ch WordPressu. <\/p>\n\n\n\n
Knihovna je k dispozici zde<\/a>.<\/p>\n\n\n\n![\"\"](\"https:\/\/musilda.cz\/wp-content\/uploads\/2024\/03\/vzory-pro-gutenberg.png\")
<\/a><\/figure>\n\n\n\nPo rozkliknut\u00ed libovoln\u00e9ho vzoru jej pomoc\u00ed tla\u010d\u00edtka m\u016f\u017eeme jednodu\u0161e zkop\u00edrovat, a n\u00e1sledn\u011b vlo\u017eit na n\u00e1\u0161 web.<\/p>\n\n\n\n
N\u011bkdy m\u016f\u017eeme naj\u00edt i \u0161ablony, kter\u00e9 poskytuj\u00ed vzory ke sta\u017een\u00ed. P\u0159\u00edkladem m\u016f\u017ee b\u00fdt \u0161ablona Frost. N\u011bkter\u00e9 z\u00e1kladn\u00ed vzory t\u00e9to \u0161ablony si n\u00ed\u017ee uk\u00e1\u017eeme.<\/p>\n\n\n\n
Z\u00e1kladn\u00ed vzory:<\/strong><\/p>\n\n\n\n\n- O autorovi<\/a><\/li>\n\n\n\n
- Notifika\u010dn\u00ed bar<\/a><\/li>\n\n\n\n
- Portfolio<\/a><\/li>\n\n\n\n
- Tabulky s cen\u00edkem<\/a><\/li>\n\n\n\n
- \u010clenov\u00e9 t\u00fdmu<\/a><\/li>\n\n\n\n
- Cit\u00e1ty<\/a><\/li>\n\n\n\n
- Hero sekce<\/a><\/li>\n<\/ul>\n\n\n\n
Pokud s Gutenbergem teprve za\u010d\u00edn\u00e1te, bude nejsp\u00ed\u0161e t\u011b\u017ek\u00e9 si na vzory a jejich znovupou\u017eit\u00ed zvyknout. Alespo\u0148 za zkou\u0161ku v\u0161ak rozhodn\u011b stoj\u00ed, a pokud je za\u010dnete aktivn\u011b pou\u017e\u00edvat, vytvo\u0159\u00edte v\u017edy udr\u017eiteln\u00fd jednotn\u00fd vzhled a styl nap\u0159\u00ed\u010d cel\u00fdm webem. Nav\u00edc p\u0159i tvorb\u011b nov\u00fdch web\u016f ji\u017e nikdy nebudete muset za\u010d\u00ednat od nuly. <\/p>\n","protected":false},"excerpt":{"rendered":"
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<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_lock_modified_date":false,"footnotes":""},"categories":[6],"tags":[11,12],"class_list":["post-1272","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-gutenberg","tag-wordpress-gutenberg"],"_links":{"self":[{"href":"https:\/\/affinite.io\/wp-json\/wp\/v2\/posts\/1272"}],"collection":[{"href":"https:\/\/affinite.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/affinite.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/affinite.io\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/affinite.io\/wp-json\/wp\/v2\/comments?post=1272"}],"version-history":[{"count":1,"href":"https:\/\/affinite.io\/wp-json\/wp\/v2\/posts\/1272\/revisions"}],"predecessor-version":[{"id":1273,"href":"https:\/\/affinite.io\/wp-json\/wp\/v2\/posts\/1272\/revisions\/1273"}],"wp:attachment":[{"href":"https:\/\/affinite.io\/wp-json\/wp\/v2\/media?parent=1272"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/affinite.io\/wp-json\/wp\/v2\/categories?post=1272"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/affinite.io\/wp-json\/wp\/v2\/tags?post=1272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/a><\/figure>\n\n\n\n- \n
- V horn\u00edm panelu n\u00e1stroj\u016f zvol\u00edme t\u0159i te\u010dky a klikneme na mo\u017enost “vytvo\u0159it vzor<\/strong>“.<\/li>\n<\/ol>\n\n\n\n<\/a><\/figure>\n\n\n\n
- \n
- Vysko\u010d\u00ed na n\u00e1s okno, kam zad\u00e1me n\u00e1zev vzoru, od\u0161krtneme pole “Synchronizov\u00e1no” a p\u0159\u00edpadn\u011b zvol\u00edme rubriky.<\/li>\n<\/ol>\n\n\n\n<\/a><\/figure>\n\n\n\n
- \n
- Ve fin\u00e1le m\u00e1me n\u00e1\u0161 prvn\u00ed vytvo\u0159en\u00fd vzor, kter\u00fd m\u016f\u017eeme kdekoliv na webu libovoln\u011b pou\u017e\u00edvat. Najdeme jej n\u00e1sledovn\u011b:<\/li>\n<\/ol>\n\n\n\n<\/a><\/figure>\n\n\n\n
Synchronised Block Patterns in Gutenberg<\/h3>\n\n\n\n
Synchronized patterns hold incredible potential. If we create one and then use it in multiple places, they will depend on each other.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Creating a Synchronized Pattern<\/h4>\n\n\n\n
- \n
- Postup je stejn\u00fd jako v p\u0159edchoz\u00edm p\u0159\u00edpad\u011b, akor\u00e1t p\u0159i vytv\u00e1\u0159en\u00ed nech\u00e1me mo\u017enost “Synchronizov\u00e1no” za\u0161krtnutou.<\/li>\n<\/ol>\n\n\n\n<\/a><\/figure>\n\n\n\n
- \n
- Pokud blok kdekoliv jinde na webu pou\u017eijeme, bude se chovat jako glob\u00e1ln\u00ed. Uprav\u00edme-li jeden blok, ostatn\u00ed se mu p\u0159izp\u016fsob\u00ed a naopak.<\/li>\n<\/ol>\n\n\n\n
You can tell that the pattern is global by the purple icon next to the block.<\/p>\n\n\n\n
<\/a><\/figure>\n\n\n\nHow Do I Unsync a Block?<\/h4>\n\n\n\n
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”).<\/p>\n\n\n\n
<\/a><\/figure>\n\n\n\nHow and Where to Manage Patterns?<\/h2>\n\n\n\n
Select the “Manage patterns” option at the pattern.<\/p>\n\n\n\n
<\/a><\/figure>\n\n\n\nWe 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.<\/p>\n\n\n\n
<\/a><\/figure>\n\n\n\nHow to Transfer Designs to Another Website?<\/h2>\n\n\n\n
In pattern management, we have the option to export each pattern in JSON format.<\/p>\n\n\n\n
- \n
- Vzor exportujeme do na\u0161eho po\u010d\u00edta\u010de<\/li>\n<\/ol>\n\n\n\n<\/a><\/figure>\n\n\n\n
- \n
- P\u0159ejdeme na web, ve kter\u00e9m chceme dan\u00fd vzor pou\u017e\u00edvat.<\/li>\n\n\n\n
- Otev\u0159eme spr\u00e1vu vzor\u016f a zvol\u00edme mo\u017enost “Importovat z JSON”<\/li>\n<\/ol>\n\n\n\n<\/a><\/figure>\n\n\n\n
- \n
- Po \u00fasp\u011b\u0161n\u00e9m importu a znovu na\u010dten\u00ed str\u00e1nky by m\u011bl b\u00fdt nahran\u00fd vzor viditeln\u00fd a pou\u017eiteln\u00fd.<\/li>\n<\/ol>\n\n\n\n
Jak\u00e9 jsou v\u00fdhody Gutenberg vzor\u016f?<\/h2>\n\n\n\n
Hlavn\u00ed v\u00fdhodou Gutenberg vzor\u016f je znovupou\u017eit\u00ed na ostatn\u00edch webov\u00fdch str\u00e1nk\u00e1ch WordPressu. Ji\u017e nikdy nemus\u00edme s prac\u00ed za\u010d\u00ednat od nuly, a m\u016f\u017eeme tak kdykoliv pou\u017e\u00edt n\u011bkter\u00e9 \u010d\u00e1sti ji\u017e existuj\u00edc\u00ed \u0161ablony.<\/p>\n\n\n\n
V\u0161echny vzory lze pou\u017e\u00edvat bez extern\u00edch plugin\u016f! To m\u00e1 v\u00fdhodu v tom, \u017ee nebudeme m\u00edt \u017e\u00e1dn\u00e9 probl\u00e9my s kompatibilitou, proto\u017ee vzory v Gutenbergu byly p\u0159edstaveny jako z\u00e1kladn\u00ed funkce WordPressu.<\/p>\n\n\n\n
Knihovna ji\u017e vytvo\u0159en\u00fdch vzor\u016f<\/h2>\n\n\n\n
Pokud p\u0159i tvorb\u011b webov\u00fdch str\u00e1nek v Gutenbergu hled\u00e1te inspiraci, nebo se V\u00e1m nechce za\u010d\u00ednat od nuly, m\u016f\u017eete vyu\u017e\u00edt n\u011bkter\u00e9 z vytvo\u0159en\u00fdch vzor\u016f, kter\u00e9 u\u017eivatel\u00e9 sd\u00edlely na ofici\u00e1ln\u00edch str\u00e1nk\u00e1ch WordPressu. <\/p>\n\n\n\n
Knihovna je k dispozici zde<\/a>.<\/p>\n\n\n\n
<\/a><\/figure>\n\n\n\nPo rozkliknut\u00ed libovoln\u00e9ho vzoru jej pomoc\u00ed tla\u010d\u00edtka m\u016f\u017eeme jednodu\u0161e zkop\u00edrovat, a n\u00e1sledn\u011b vlo\u017eit na n\u00e1\u0161 web.<\/p>\n\n\n\n
N\u011bkdy m\u016f\u017eeme naj\u00edt i \u0161ablony, kter\u00e9 poskytuj\u00ed vzory ke sta\u017een\u00ed. P\u0159\u00edkladem m\u016f\u017ee b\u00fdt \u0161ablona Frost. N\u011bkter\u00e9 z\u00e1kladn\u00ed vzory t\u00e9to \u0161ablony si n\u00ed\u017ee uk\u00e1\u017eeme.<\/p>\n\n\n\n
Z\u00e1kladn\u00ed vzory:<\/strong><\/p>\n\n\n\n
- \n
- O autorovi<\/a><\/li>\n\n\n\n
- Notifika\u010dn\u00ed bar<\/a><\/li>\n\n\n\n
- Portfolio<\/a><\/li>\n\n\n\n
- Tabulky s cen\u00edkem<\/a><\/li>\n\n\n\n
- \u010clenov\u00e9 t\u00fdmu<\/a><\/li>\n\n\n\n
- Cit\u00e1ty<\/a><\/li>\n\n\n\n
- Hero sekce<\/a><\/li>\n<\/ul>\n\n\n\n
Pokud s Gutenbergem teprve za\u010d\u00edn\u00e1te, bude nejsp\u00ed\u0161e t\u011b\u017ek\u00e9 si na vzory a jejich znovupou\u017eit\u00ed zvyknout. Alespo\u0148 za zkou\u0161ku v\u0161ak rozhodn\u011b stoj\u00ed, a pokud je za\u010dnete aktivn\u011b pou\u017e\u00edvat, vytvo\u0159\u00edte v\u017edy udr\u017eiteln\u00fd jednotn\u00fd vzhled a styl nap\u0159\u00ed\u010d cel\u00fdm webem. Nav\u00edc p\u0159i tvorb\u011b nov\u00fdch web\u016f ji\u017e nikdy nebudete muset za\u010d\u00ednat od nuly. <\/p>\n","protected":false},"excerpt":{"rendered":"
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<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_lock_modified_date":false,"footnotes":""},"categories":[6],"tags":[11,12],"class_list":["post-1272","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-gutenberg","tag-wordpress-gutenberg"],"_links":{"self":[{"href":"https:\/\/affinite.io\/wp-json\/wp\/v2\/posts\/1272"}],"collection":[{"href":"https:\/\/affinite.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/affinite.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/affinite.io\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/affinite.io\/wp-json\/wp\/v2\/comments?post=1272"}],"version-history":[{"count":1,"href":"https:\/\/affinite.io\/wp-json\/wp\/v2\/posts\/1272\/revisions"}],"predecessor-version":[{"id":1273,"href":"https:\/\/affinite.io\/wp-json\/wp\/v2\/posts\/1272\/revisions\/1273"}],"wp:attachment":[{"href":"https:\/\/affinite.io\/wp-json\/wp\/v2\/media?parent=1272"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/affinite.io\/wp-json\/wp\/v2\/categories?post=1272"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/affinite.io\/wp-json\/wp\/v2\/tags?post=1272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Notifika\u010dn\u00ed bar<\/a><\/li>\n\n\n\n
- O autorovi<\/a><\/li>\n\n\n\n
- Po \u00fasp\u011b\u0161n\u00e9m importu a znovu na\u010dten\u00ed str\u00e1nky by m\u011bl b\u00fdt nahran\u00fd vzor viditeln\u00fd a pou\u017eiteln\u00fd.<\/li>\n<\/ol>\n\n\n\n
- Vzor exportujeme do na\u0161eho po\u010d\u00edta\u010de<\/li>\n<\/ol>\n\n\n\n
- Pokud blok kdekoliv jinde na webu pou\u017eijeme, bude se chovat jako glob\u00e1ln\u00ed. Uprav\u00edme-li jeden blok, ostatn\u00ed se mu p\u0159izp\u016fsob\u00ed a naopak.<\/li>\n<\/ol>\n\n\n\n
- Postup je stejn\u00fd jako v p\u0159edchoz\u00edm p\u0159\u00edpad\u011b, akor\u00e1t p\u0159i vytv\u00e1\u0159en\u00ed nech\u00e1me mo\u017enost “Synchronizov\u00e1no” za\u0161krtnutou.<\/li>\n<\/ol>\n\n\n\n
- Ve fin\u00e1le m\u00e1me n\u00e1\u0161 prvn\u00ed vytvo\u0159en\u00fd vzor, kter\u00fd m\u016f\u017eeme kdekoliv na webu libovoln\u011b pou\u017e\u00edvat. Najdeme jej n\u00e1sledovn\u011b:<\/li>\n<\/ol>\n\n\n\n
- Vysko\u010d\u00ed na n\u00e1s okno, kam zad\u00e1me n\u00e1zev vzoru, od\u0161krtneme pole “Synchronizov\u00e1no” a p\u0159\u00edpadn\u011b zvol\u00edme rubriky.<\/li>\n<\/ol>\n\n\n\n