{"id":228352,"date":"2022-10-17T15:01:00","date_gmt":"2022-10-17T12:01:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228352"},"modified":"2022-11-09T02:01:13","modified_gmt":"2022-11-08T23:01:13","slug":"malli-kasutamine-koos-innerblocksiga-wordpressi-plokiredaktoris-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/malli-kasutamine-koos-innerblocksiga-wordpressi-plokiredaktoris-gutenberg\/","title":{"rendered":"Malli kasutamine koos InnerBlocksiga WordPressi plokiredaktoris (Gutenberg)"},"content":{"rendered":"\n<p>Kui loote WordPressi plokiredaktoris (Gutenberg) ploki, saate luua ala, mis v\u00f5imaldab teie ploki sisse pesastada teisi plokit\u00fc\u00fcpe. Teete seda <code>InnerBlocks<\/code>komponendiga.<\/p>\n<p>Teistes juhendites uurisime varem <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-pattern-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">plokkide mustreid<\/a> ja <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">plokimalle<\/a>. Selles juhendis k\u00e4sitletakse pesastatud plokkide malli loomist.<\/p>\n<h2>Eeldused<\/h2>\n<ul>\n<li>Olge tuttav <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPressi Gutenbergi pistikprogrammide loomisega<\/a><\/li>\n<\/ul>\n<h2>Looge pesastatud ploki pistikprogramm<\/h2>\n<p><a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">P\u00e4rast seda, kui olete Gutenbergi pistikprogrammi loomise<\/a> \u00f5petuse etapid l\u00e4bi viinud (kuid mitte kaasa arvatud) <strong>5 sammuni<\/strong>, peaks teil olema pesastatud plokkplugina loomiseks raamistik.<\/p>\n<h3>Lisage InnerBlocks<code>\/src\/edit.js<\/code><\/h3>\n<p>Avage <code>\/src\/edit.js<\/code>oma redaktoris ja asendage import <code>useBlockProps<\/code>j\u00e4rgmisega:<\/p>\n<pre><code>import { InnerBlocks, useBlockProps } from '@wordpress\/block-editor';\n<\/code><\/pre>\n<p>See v\u00f5imaldab meil kasutada redigeerimisrenderdusmeetodis komponenti InnerBlocks.<\/p>\n<p>Seej\u00e4rel muutke kogu redigeerimisfunktsioon j\u00e4rgmiselt:<\/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>See registreerib InnerBlocki<\/p>\n<h3>V\u00e4ljutage atribuudid<code>\/src\/save.js<\/code><\/h3>\n<p>Avage <code>\/src\/save.js<\/code>oma redaktoris ja asendage import <code>useBlockProps<\/code>j\u00e4rgmisega:<\/p>\n<pre><code>import { InnerBlocks, useBlockProps } from '@wordpress\/block-editor';\n<\/code><\/pre>\n<p>See v\u00f5imaldab meil kasutada meie salvestamisrenderdusmeetodis komponenti InnerBlocks.<\/p>\n<p>J\u00e4rgmisena v\u00e4ljastage komponendi Innerblocks sisu, asendades <code>save<\/code>funktsiooni j\u00e4rgmisega:<\/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>See lihtsalt v\u00e4ljastab InnerBlockide v\u00e4\u00e4rtuse <code>&lt;div&gt;<\/code>.<\/p>\n<h3>Plugina kompileerimine<\/h3>\n<p>Avage terminal, veenduge, et olete oma pistikprogrammi juurkataloogis ja k\u00e4ivitage j\u00e4rgmine k\u00e4sk:<\/p>\n<p>Skript kompileeritakse. Kui teil on vigu, peaks terminal teid teavitama, mis need on.<\/p>\n<h2>InnerBlocksi malli lisamine<\/h2>\n<p>Asjade lihtsuse huvides kasutame t\u00e4pselt sama malli, mille l\u00f5ime eelnevalt <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-pattern-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">plokkide mustrite<\/a> ja <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">plokimalli<\/a> juhendi jaoks.<\/p>\n<p>Mall on v\u00e4ga sarnane <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">plokimallide juhendis<\/a> m\u00e4\u00e4ratletule, kuid atribuudid on mitmem\u00f5\u00f5tmelise massiivi asemel objektis.<\/p>\n<p>Asendage <code>Edit<\/code>funktsioon j\u00e4rgmise koodiga:<\/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>See loob pesastatud ploki malli. Pange t\u00e4hele, mille kasutamine <code>templateLock<\/code>on m\u00e4\u00e4ratud k\u00f5igile. See k\u00e4itub samamoodi nagu <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/#template-lock\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">plokimalli malli lukk<\/a> ja sellel on kaks j\u00e4rgmist valikut.<\/p>\n<ul>\n<li><code>all<\/code>\u2014 takistab k\u00f5iki toiminguid. Uusi plokke pole v\u00f5imalik sisestada, olemasolevaid plokke teisaldada ega plokke kustutada.<\/li>\n<li><code>insert<\/code>\u2014 takistab plokkide sisestamist v\u00f5i eemaldamist, kuid v\u00f5imaldab olemasolevaid plokke liigutada.<\/li>\n<\/ul>\n<p>Samuti saate <a href=\"https:\/\/wholesomecode.ltd\/#allowed-blocks-for-nested-blocks\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">m\u00e4\u00e4rata, millised plokid on pesastatud plokkides lubatud<\/a>.<\/p>\n<ol>\n<li>InnerBlocksi malli sisestamine ja vaatamine<\/li>\n<\/ol>\n<hr \/>\n<p>Saate sisestada pesastatud ploki samamoodi nagu mis tahes muud plokki, kl\u00f5psates plussikooni ja otsides <code>Wholesome Plugin<\/code>.<\/p>\n<p>Pesastatud ploki malli sisestamine<\/p>\n<p>Pange t\u00e4hele, et nagu varemgi, ei ole pesastatud plokkide sees olevatele pesastatud plokkidele mallilukku rakendatud.<\/p>\n<p>Loomulikult on selle jaoks lahendusi, olles loominguline plokimallide ja kohandatud pesastatud plokkide kombinatsiooni loomisel.<\/p>\n<h3>Bloki vaatamine<\/h3>\n<p>P\u00e4rast pisut SCSS-iga nuputamist n\u00e4eb meie v\u00e4ljundplokk v\u00e4lja umbes selline:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168925-61e7f7ef79395.png\" alt=\"Malli kasutamine koos InnerBlocksiga WordPressi plokiredaktoris (Gutenberg)\" \/>Pesastatud ploki malli sisestamine<\/p>\n<p>Malli lukustamise asemel v\u00f5ite selle asemel piirata, m\u00e4rkides, milliseid plokke teil on lubatud sellesse sisestada. Lihtsalt asendage <code>Edit<\/code>funktsioon j\u00e4rgmise koodiga:<\/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>Siin j\u00e4tame <code>templateLock<\/code>argumendi v\u00e4lja ja piirame selle asemel oma pesastatud plokki j\u00e4rgmiste plokkidega:<\/p>\n<ul>\n<li>Veerg (<code>core\/column<\/code>)<\/li>\n<li>Veerud (veerud <code>core\/column<\/code>)<\/li>\n<li>R\u00fchm (<code>core\/group<\/code>)<\/li>\n<li>Pealkiri (<code>core\/heading<\/code>)<\/li>\n<li>L\u00f5ige (<code>core\/paragraph<\/code>)<\/li>\n<\/ul>\n<p>J\u00e4llegi, see ei t\u00f6\u00f6ta malli \u00fchegi pesastatud plokiga.<\/p>\n<ul>\n<li>Kas vajate midagi paindlikumat? Proovige selle asemel <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-pattern-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">registreerida blokeerimismuster<\/a><\/li>\n<li>Kas vajate midagi staatilisemat? Proovige <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">registreerida blokeerimismall<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Kui loote WordPressi plokiredaktoris (Gutenberg) ploki, saate luua ala, mis v\u00f5imaldab teie ploki sisse pesastada teisi plokit\u00fc\u00fcpe. Teete seda InnerBloga&#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":[718,937,916,842,812,863],"tags":[1165],"class_list":["post-228352","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arendaja","category-gutenberg-4","category-muud","category-opetused","category-pistikprogrammid","category-wordpress-4","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/228352","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=228352"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/228352\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/223619"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=228352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=228352"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=228352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}