{"id":228814,"date":"2022-10-17T14:19:00","date_gmt":"2022-10-17T11:19:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228814"},"modified":"2022-11-09T04:22:22","modified_gmt":"2022-11-09T01:22:22","slug":"mallin-kaeyttaeminen-innerblocksilla-wordpressin-lohkoeditorissa-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/mallin-kaeyttaeminen-innerblocksilla-wordpressin-lohkoeditorissa-gutenberg\/","title":{"rendered":"Mallin k\u00e4ytt\u00e4minen InnerBlocksilla WordPressin lohkoeditorissa (Gutenberg)"},"content":{"rendered":"\n<p>Kun luot lohkon WordPressin lohkoeditorissa (Gutenberg), voit luoda alueen, joka sallii muiden lohkotyyppien sis\u00e4llytt\u00e4misen lohkoosi. Teet t\u00e4m\u00e4n <code>InnerBlocks<\/code>komponentin kanssa.<\/p>\n<p>Muissa oppaissamme olemme aiemmin tutkineet <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-pattern-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">lohkokuvioita<\/a> ja <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">lohkomalleja<\/a>. T\u00e4ss\u00e4 oppaassa tarkastellaan mallin luomista sis\u00e4kk\u00e4isille lohkoille.<\/p>\n<h2>Edellytykset<\/h2>\n<ul>\n<li>Tutustu <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPress Gutenbergin lis\u00e4osien luomiseen<\/a><\/li>\n<\/ul>\n<h2>Luo sis\u00e4kk\u00e4inen lohkolaajennus<\/h2>\n<p>Kun olet suorittanut <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Gutenberg-laajennuksen<\/a> opetusohjelman vaiheet, <strong>vaiheeseen 5<\/strong> asti (mutta ei mukaan lukien), sinulla pit\u00e4isi olla kehys sis\u00e4kk\u00e4isen lohkolaajennuksen luomiseksi.<\/p>\n<h3>Lis\u00e4\u00e4 InnerBlocks kohteeseen<code>\/src\/edit.js<\/code><\/h3>\n<p>Avaa <code>\/src\/edit.js<\/code>editorissasi ja korvaa tuonti kohteelle <code>useBlockProps<\/code>seuraavalla:<\/p>\n<pre><code>import { InnerBlocks, useBlockProps } from '@wordpress\/block-editor';\n<\/code><\/pre>\n<p>T\u00e4m\u00e4 antaa meille mahdollisuuden k\u00e4ytt\u00e4\u00e4 InnerBlocks-komponenttia muokkaustavassamme.<\/p>\n<p>Muuta sitten koko muokkaustoiminto seuraavaksi:<\/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>T\u00e4m\u00e4 rekister\u00f6i InnerBlockin<\/p>\n<h3>Tulosta attribuutit sis\u00e4\u00e4n<code>\/src\/save.js<\/code><\/h3>\n<p>Avaa <code>\/src\/save.js<\/code>editorissasi ja korvaa tuonti kohteelle <code>useBlockProps<\/code>seuraavalla:<\/p>\n<pre><code>import { InnerBlocks, useBlockProps } from '@wordpress\/block-editor';\n<\/code><\/pre>\n<p>T\u00e4m\u00e4 antaa meille mahdollisuuden k\u00e4ytt\u00e4\u00e4 InnerBlocks-komponenttia tallennusrender\u00f6intimenetelm\u00e4ss\u00e4mme.<\/p>\n<p>Tulosta seuraavaksi Innerblocks-komponentin sis\u00e4lt\u00f6 korvaamalla <code>save<\/code>funktio seuraavalla:<\/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>T\u00e4m\u00e4 yksinkertaisesti tulostaa InnerBlockien arvon <code>&lt;div&gt;<\/code>.<\/p>\n<h3>Pluginin k\u00e4\u00e4nt\u00e4minen<\/h3>\n<p>Avaa p\u00e4\u00e4te, varmista, ett\u00e4 olet laajennuksen juurihakemistossa ja suorita seuraava komento:<\/p>\n<p>K\u00e4sikirjoitus kootaan. Jos sinulla on virheit\u00e4, p\u00e4\u00e4tteen pit\u00e4isi ilmoittaa sinulle, mit\u00e4 ne ovat.<\/p>\n<h2>InnerBlocks-mallin lis\u00e4\u00e4minen<\/h2>\n<p>Jotta asiat olisivat yksinkertaisia, aiomme k\u00e4ytt\u00e4\u00e4 t\u00e4sm\u00e4lleen samaa mallia, jonka loimme aiemmin <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-pattern-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">lohkomalleille<\/a> ja <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">lohkomallioppaalle<\/a>.<\/p>\n<p>Malli on hyvin samanlainen kuin se, jonka m\u00e4\u00e4ritimme <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">lohkomallioppaassamme<\/a>, mutta attribuutit ovat objektissa moniulotteisen taulukon sijaan.<\/p>\n<p>Korvaa <code>Edit<\/code>funktio seuraavalla koodilla:<\/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>T\u00e4m\u00e4 luo mallin sis\u00e4kk\u00e4iselle lohkolle. Huomaa, jonka k\u00e4ytt\u00f6 <code>templateLock<\/code>on asetettu kaikille. T\u00e4m\u00e4 toimii samalla tavalla kuin <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/#template-lock\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">lohkomallin mallilukko,<\/a> ja siin\u00e4 on seuraavat kaksi vaihtoehtoa:<\/p>\n<ul>\n<li><code>all<\/code>\u2014 est\u00e4\u00e4 kaikki toiminnot. Ei ole mahdollista lis\u00e4t\u00e4 uusia lohkoja, siirt\u00e4\u00e4 olemassa olevia lohkoja tai poistaa lohkoja.<\/li>\n<li><code>insert<\/code>\u2014 est\u00e4\u00e4 lohkojen lis\u00e4\u00e4misen tai poistamisen, mutta sallii olemassa olevien lohkojen siirt\u00e4misen.<\/li>\n<\/ul>\n<p>Voit my\u00f6s <a href=\"https:\/\/wholesomecode.ltd\/#allowed-blocks-for-nested-blocks\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">m\u00e4\u00e4ritt\u00e4\u00e4, mitk\u00e4 lohkot ovat sallittuja sis\u00e4kk\u00e4isten lohkojen sis\u00e4ll\u00e4<\/a>.<\/p>\n<ol>\n<li>InnerBlocks-mallin lis\u00e4\u00e4minen ja tarkasteleminen<\/li>\n<\/ol>\n<hr \/>\n<p>Voit lis\u00e4t\u00e4 sis\u00e4kk\u00e4isen lohkon samalla tavalla kuin mink\u00e4 tahansa muun lohkon napsauttamalla plus-kuvaketta ja etsim\u00e4ll\u00e4 <code>Wholesome Plugin<\/code>.<\/p>\n<p>Sis\u00e4kk\u00e4isen lohkomallin lis\u00e4\u00e4minen<\/p>\n<p>Huomaa, ett\u00e4 kuten aiemmin, sis\u00e4kk\u00e4isten lohkojen sis\u00e4ll\u00e4 oleviin sis\u00e4kk\u00e4isiin lohkoihin ei ole kohdistettu mallilukkoa.<\/p>\n<p>T\u00e4h\u00e4n on tietysti olemassa kiertotapoja, kun luot luovasti lohkomallien ja mukautettujen sis\u00e4kk\u00e4isten lohkojen yhdistelm\u00e4n.<\/p>\n<h3>Lohkon katselu<\/h3>\n<p>Pienen SCSS:n kanssa puuhastelun j\u00e4lkeen tulostettu lohkomme n\u00e4ytt\u00e4\u00e4 hieman t\u00e4lt\u00e4:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168925-61e7f7ef79395.png\" alt=\"Mallin k\u00e4ytt\u00e4minen InnerBlocksilla WordPressin lohkoeditorissa (Gutenberg)\" \/>Sis\u00e4kk\u00e4isen lohkomallin lis\u00e4\u00e4minen<\/p>\n<p>Sen sijaan, ett\u00e4 lukitsisit mallin, voit sen sijaan rajoittaa sit\u00e4 ilmoittamalla, mit\u00e4 lohkoja sinulla on lupa lis\u00e4t\u00e4 siihen. Korvaa <code>Edit<\/code>toiminto vain seuraavalla koodilla:<\/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>T\u00e4ss\u00e4 j\u00e4t\u00e4mme pois <code>templateLock<\/code>argumentin ja rajoitamme sen sijaan sis\u00e4kk\u00e4isen lohkomme seuraaviin lohkoihin:<\/p>\n<ul>\n<li>Sarake (<code>core\/column<\/code>)<\/li>\n<li>Sarakkeet (sarakkeet <code>core\/column<\/code>)<\/li>\n<li>Ryhm\u00e4 (<code>core\/group<\/code>)<\/li>\n<li>Otsikko (<code>core\/heading<\/code>)<\/li>\n<li>Kappale (<code>core\/paragraph<\/code>)<\/li>\n<\/ul>\n<p>T\u00e4m\u00e4k\u00e4\u00e4n ei toimi mallin sis\u00e4kk\u00e4isiss\u00e4 lohkoissa.<\/p>\n<ul>\n<li>Tarvitsetko jotain joustavampaa? Yrit\u00e4 sen sijaan <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-pattern-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">rekister\u00f6id\u00e4 lohkokuvio<\/a><\/li>\n<li>Tarvitsetko jotain staattisempaa? Yrit\u00e4 <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">rekister\u00f6id\u00e4 estomalli<\/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>Kun luot lohkon WordPressin lohkoeditorissa (Gutenberg), voit luoda alueen, joka sallii muiden lohkotyyppien sis\u00e4llytt\u00e4misen lohkoosi. Teet t\u00e4m\u00e4n InnerBlon kanssa&#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":[938,719,813,917,843,864],"tags":[1166],"class_list":["post-228814","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg-5","category-kehittaejae","category-laajennuksia","category-muut","category-opetusohjelmia","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/228814","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=228814"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/228814\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/223619"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=228814"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=228814"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=228814"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}