{"id":228239,"date":"2022-10-17T14:18:00","date_gmt":"2022-10-17T11:18:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228239"},"modified":"2022-11-09T01:27:15","modified_gmt":"2022-11-08T22:27:15","slug":"uzywanie-szablonu-z-innerblocks-w-edytorze-blokow-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/uzywanie-szablonu-z-innerblocks-w-edytorze-blokow-wordpress-gutenberg\/","title":{"rendered":"U\u017cywanie szablonu z InnerBlocks w edytorze blok\u00f3w WordPress (Gutenberg)"},"content":{"rendered":"\n<p>Podczas tworzenia bloku w Edytorze blok\u00f3w WordPress (Gutenberg) mo\u017cesz utworzy\u0107 obszar, kt\u00f3ry umo\u017cliwia zagnie\u017cd\u017canie innych typ\u00f3w blok\u00f3w w twoim bloku. Robisz to z <code>InnerBlocks<\/code>komponentem.<\/p>\n<p>W innych naszych przewodnikach badali\u015bmy wcze\u015bniej <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-pattern-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wzorce<\/a> blokowe i <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">szablony blokowe<\/a>. W tym przewodniku om\u00f3wiono tworzenie szablonu dla blok\u00f3w zagnie\u017cd\u017conych.<\/p>\n<h2>Warunki wst\u0119pne<\/h2>\n<ul>\n<li>Zapoznaj si\u0119 z <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">tworzeniem wtyczek do WordPress Gutenberg<\/a><\/li>\n<\/ul>\n<h2>Utw\u00f3rz wtyczk\u0119 zagnie\u017cd\u017conego bloku<\/h2>\n<p>Po wykonaniu krok\u00f3w w samouczku <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">tworzenia wtyczki Gutenberg, a\u017c do (ale nie w tym)<\/a> <strong>kroku 5<\/strong>, powiniene\u015b mie\u0107 struktur\u0119 do tworzenia wtyczki zagnie\u017cd\u017conej bloku.<\/p>\n<h3>Dodaj wewn\u0119trzne bloki do<code>\/src\/edit.js<\/code><\/h3>\n<p>Otw\u00f3rz <code>\/src\/edit.js<\/code>w edytorze i zast\u0105p importowanie <code>useBlockProps<\/code>nast\u0119puj\u0105cym:<\/p>\n<pre><code>import { InnerBlocks, useBlockProps } from '@wordpress\/block-editor';\n<\/code><\/pre>\n<p>Umo\u017cliwi nam to u\u017cycie komponentu InnerBlocks w naszej metodzie renderowania edycji.<\/p>\n<p>Nast\u0119pnie zmie\u0144 ca\u0142\u0105 funkcj\u0119 Edytuj na nast\u0119puj\u0105c\u0105:<\/p>\n<pre><code>export default function Edit() {\n    return (&lt;div { ...useBlockProps() }&gt;\n            &lt;InnerBlocks\/&gt;\n        &lt;\/div&gt;\n    );\n}\n<\/code><\/pre>\n<p>To rejestruje InnerBlock<\/p>\n<h3>Wypisz atrybuty w<code>\/src\/save.js<\/code><\/h3>\n<p>Otw\u00f3rz <code>\/src\/save.js<\/code>w edytorze i zast\u0105p importowanie <code>useBlockProps<\/code>nast\u0119puj\u0105cym:<\/p>\n<pre><code>import { InnerBlocks, useBlockProps } from '@wordpress\/block-editor';\n<\/code><\/pre>\n<p>Umo\u017cliwi nam to u\u017cycie komponentu InnerBlocks w naszej metodzie zapisywania renderowania.<\/p>\n<p>Nast\u0119pnie wyprowad\u017a zawarto\u015b\u0107 komponentu Innerblocks, zast\u0119puj\u0105c <code>save<\/code>funkcj\u0119 nast\u0119puj\u0105c\u0105:<\/p>\n<pre><code>export default function save() {\n    return (&lt;div { ...useBlockProps.save() }&gt;\n            &lt;InnerBlocks.Content \/&gt;\n        &lt;\/div&gt;\n    );\n}\n<\/code><\/pre>\n<p>To po prostu wyprowadza warto\u015b\u0107 InnerBlocks do <code>&lt;div&gt;<\/code>.<\/p>\n<h3>Kompilacja wtyczki<\/h3>\n<p>Otw\u00f3rz terminal, upewnij si\u0119, \u017ce jeste\u015b w katalogu g\u0142\u00f3wnym swojej wtyczki i uruchom nast\u0119puj\u0105ce polecenie:<\/p>\n<p>Skrypt si\u0119 skompiluje. Je\u015bli masz jakie\u015b b\u0142\u0119dy, terminal powinien ci\u0119 poinformowa\u0107 o tym, czym one s\u0105.<\/p>\n<h2>Dodawanie szablonu InnerBlocks<\/h2>\n<p>Aby upro\u015bci\u0107 spraw\u0119, u\u017cyjemy dok\u0142adnie tego samego szablonu, kt\u00f3ry wcze\u015bniej stworzyli\u015bmy dla <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-pattern-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wzor\u00f3w blok\u00f3w<\/a> i przewodnika po <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">szablonach blok\u00f3w<\/a>.<\/p>\n<p>Szablon jest bardzo podobny do tego, kt\u00f3ry zdefiniowali\u015bmy w naszym <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">przewodniku po szablonach blok\u00f3w<\/a>, jednak atrybuty znajduj\u0105 si\u0119 w obiekcie, a nie w wielowymiarowej tablicy.<\/p>\n<p>Zast\u0105p <code>Edit<\/code>funkcj\u0119 nast\u0119puj\u0105cym kodem:<\/p>\n<pre><code>export default function Edit() {\n    return (&lt;div { ...useBlockProps() }&gt;\n            &lt;InnerBlocks\n                template={ [\n                    [ 'core\/heading', { level: 2, content: 'Example Nested Block Template' } ],\n                    [ 'core\/paragraph', { content: 'Lorem ipsum dolor sit amet labore cras venenatis.' } ],\n                    [ 'core\/columns', {},\n                        [\n                            [ 'core\/column', {}, [\n                                    [ 'core\/heading', { level: 3, content: 'Sub Heading 1' } ],\n                                    [ 'core\/paragraph', { content: 'Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.' } ],\n                                ]\n                            ],\n                            [ 'core\/column', {}, [\n                                    [ 'core\/heading', { level: 3, content: 'Sub Heading 2' } ],\n                                    [ 'core\/paragraph', { content: 'Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.' } ],\n                                ]\n                            ],\n                        ]\n                    ],\n                ] }\n                templateLock=\"all\"\n            \/&gt;\n        &lt;\/div&gt;\n    );\n}\n<\/code><\/pre>\n<p>Tworzy to szablon dla zagnie\u017cd\u017conego bloku. Zwr\u00f3\u0107 uwag\u0119, \u017ce u\u017cycie <code>templateLock<\/code>jest ustawione na all. Dzia\u0142a to tak samo jak <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/#template-lock\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">blokada szablonu dla szablonu bloku<\/a> i ma nast\u0119puj\u0105ce dwie opcje:<\/p>\n<ul>\n<li><code>all<\/code>\u2014 zapobiega wszelkim operacjom. Nie mo\u017cna wstawia\u0107 nowych blok\u00f3w, przenosi\u0107 istniej\u0105cych ani usuwa\u0107 blok\u00f3w.<\/li>\n<li><code>insert<\/code>\u2014 zapobiega wstawianiu lub usuwaniu blok\u00f3w, ale umo\u017cliwia przenoszenie istniej\u0105cych blok\u00f3w.<\/li>\n<\/ul>\n<p>Mo\u017cesz tak\u017ce <a href=\"https:\/\/wholesomecode.ltd\/#allowed-blocks-for-nested-blocks\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">okre\u015bli\u0107, kt\u00f3re bloki s\u0105 dozwolone w zagnie\u017cd\u017conych blokach<\/a>.<\/p>\n<ol>\n<li>Wstawianie i przegl\u0105danie szablonu InnerBlocks<\/li>\n<\/ol>\n<hr \/>\n<p>Zagnie\u017cd\u017cony blok mo\u017cna wstawi\u0107 w taki sam spos\u00f3b, jak ka\u017cdy inny blok, klikaj\u0105c ikon\u0119 plusa i wyszukuj\u0105c <code>Wholesome Plugin<\/code>.<\/p>\n<p>Wstawianie szablonu zagnie\u017cd\u017conego bloku<\/p>\n<p>Zauwa\u017c, \u017ce tak jak poprzednio, zagnie\u017cd\u017cone bloki wewn\u0105trz zagnie\u017cd\u017conych blok\u00f3w nie maj\u0105 zastosowanej blokady szablonu.<\/p>\n<p>Istniej\u0105 oczywi\u015bcie rozwi\u0105zania tego problemu, b\u0119d\u0105c kreatywnym w tworzeniu kombinacji szablon\u00f3w blok\u00f3w i niestandardowych blok\u00f3w zagnie\u017cd\u017conych.<\/p>\n<h3>Ogl\u0105danie bloku<\/h3>\n<p>Po kr\u00f3tkim majstrowaniu przy SCSS, nasz blok wyj\u015bciowy wygl\u0105da mniej wi\u0119cej tak:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168925-61e7f7ef79395.png\" alt=\"U\u017cywanie szablonu z InnerBlocks w edytorze blok\u00f3w WordPress (Gutenberg)\" \/>Wstawianie szablonu zagnie\u017cd\u017conego bloku<\/p>\n<p>Zamiast blokowa\u0107 szablon, mo\u017cesz go ograniczy\u0107, okre\u015blaj\u0105c, kt\u00f3re bloki mo\u017cesz do niego wstawi\u0107. Wystarczy zast\u0105pi\u0107 <code>Edit<\/code>funkcj\u0119 nast\u0119puj\u0105cym kodem:<\/p>\n<pre><code>export default function Edit() {\n    return (&lt;div { ...useBlockProps() }&gt;\n            &lt;InnerBlocks\n                template={ [\n                    [ 'core\/heading', { level: 2, content: 'Example Nested Block Template' } ],\n                    [ 'core\/paragraph', { content: 'Lorem ipsum dolor sit amet labore cras venenatis.' } ],\n                    [ 'core\/columns', {},\n                        [\n                            [ 'core\/column', {}, [\n                                    [ 'core\/heading', { level: 3, content: 'Sub Heading 1' } ],\n                                    [ 'core\/paragraph', { content: 'Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.' } ],\n                                ]\n                            ],\n                            [ 'core\/column', {}, [\n                                    [ 'core\/heading', { level: 3, content: 'Sub Heading 2' } ],\n                                    [ 'core\/paragraph', { content: 'Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.' } ],\n                                ]\n                            ],\n                        ]\n                    ],\n                ] }\n                allowedBlocks={ [\n                    'core\/column',\n                    'core\/columns',\n                    'core\/heading',\n                    'core\/paragraph',\n                ] }\n            \/&gt;\n        &lt;\/div&gt;\n    );\n}\n<\/code><\/pre>\n<p>Tutaj pomijamy <code>templateLock<\/code>argument i zamiast tego ograniczamy nasz zagnie\u017cd\u017cony blok do nast\u0119puj\u0105cych blok\u00f3w:<\/p>\n<ul>\n<li>Kolumna (<code>core\/column<\/code>)<\/li>\n<li>Kolumny (<code>core\/column<\/code>s)<\/li>\n<li>Grupa (<code>core\/group<\/code>)<\/li>\n<li>Nag\u0142\u00f3wek (<code>core\/heading<\/code>)<\/li>\n<li>Akapit (<code>core\/paragraph<\/code>)<\/li>\n<\/ul>\n<p>Ponownie, to nie zadzia\u0142a na \u017cadnych zagnie\u017cd\u017conych blokach w szablonie.<\/p>\n<ul>\n<li>Potrzebujesz czego\u015b bardziej elastycznego? Spr\u00f3buj zamiast tego <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-pattern-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">zarejestrowa\u0107 wz\u00f3r blokowy<\/a><\/li>\n<li>Potrzebujesz czego\u015b bardziej statycznego? Spr\u00f3buj <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">zarejestrowa\u0107 szablon bloku<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Podczas tworzenia bloku w Edytorze blok\u00f3w WordPress (Gutenberg) mo\u017cesz utworzy\u0107 obszar, kt\u00f3ry umo\u017cliwia zagnie\u017cd\u017canie innych typ\u00f3w blok\u00f3w w twoim bloku. Robisz to z InnerBlo&#8230;<\/p>\n","protected":false},"author":1,"featured_media":223619,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[721,940,919,845,866,815],"tags":[1169],"class_list":["post-228239","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-deweloper","category-gutenberg-7","category-inny","category-samouczki","category-wordpress-7","category-wtyczki","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228239","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=228239"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228239\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/223619"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=228239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=228239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=228239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}