{"id":228179,"date":"2022-10-17T14:43:00","date_gmt":"2022-10-17T11:43:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228179"},"modified":"2022-11-09T01:09:13","modified_gmt":"2022-11-08T22:09:13","slug":"anvaenda-en-mall-med-innerblocks-i-wordpress-block-editor-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/anvaenda-en-mall-med-innerblocks-i-wordpress-block-editor-gutenberg\/","title":{"rendered":"Anv\u00e4nda en mall med InnerBlocks i WordPress Block Editor (Gutenberg)"},"content":{"rendered":"\n<p>N\u00e4r du skapar ett block i WordPress Block Editor (Gutenberg) kan du skapa ett omr\u00e5de som till\u00e5ter andra blocktyper att kapslas in i ditt block. Detta g\u00f6r du med <code>InnerBlocks<\/code>komponenten.<\/p>\n<p>I v\u00e5ra andra guider har vi tidigare utforskat <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-pattern-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">blockm\u00f6nster<\/a> och <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">blockmallar<\/a>. Den h\u00e4r guiden handlar om att skapa en mall f\u00f6r kapslade block.<\/p>\n<h2>F\u00f6ruts\u00e4ttningar<\/h2>\n<ul>\n<li>Var bekant med <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">att skapa plugins f\u00f6r WordPress Gutenberg<\/a><\/li>\n<\/ul>\n<h2>Skapa en Nested Block Plugin<\/h2>\n<p>Efter att du har utf\u00f6rt stegen i guiden f\u00f6r att <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">skapa en Gutenberg-plugin<\/a>, upp till (men inte inklusive) <strong>steg 5<\/strong>, b\u00f6r du ha ramverket p\u00e5 plats f\u00f6r att skapa det kapslade blockplugin-programmet.<\/p>\n<h3>L\u00e4gg till InnerBlocks till<code>\/src\/edit.js<\/code><\/h3>\n<p>\u00d6ppna upp <code>\/src\/edit.js<\/code>i din editor och ers\u00e4tt importen f\u00f6r <code>useBlockProps<\/code>med f\u00f6ljande:<\/p>\n<pre><code>import { InnerBlocks, useBlockProps } from '@wordpress\/block-editor';\n<\/code><\/pre>\n<p>Detta l\u00e5ter oss anv\u00e4nda InnerBlocks-komponenten i v\u00e5r redigeringsmetod.<\/p>\n<p>\u00c4ndra sedan hela redigeringsfunktionen till f\u00f6ljande:<\/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>Detta registrerar InnerBlock<\/p>\n<h3>Mata in attributen<code>\/src\/save.js<\/code><\/h3>\n<p>\u00d6ppna upp <code>\/src\/save.js<\/code>i din editor och ers\u00e4tt importen f\u00f6r <code>useBlockProps<\/code>med f\u00f6ljande:<\/p>\n<pre><code>import { InnerBlocks, useBlockProps } from '@wordpress\/block-editor';\n<\/code><\/pre>\n<p>Detta l\u00e5ter oss anv\u00e4nda InnerBlocks-komponenten i v\u00e5r spara-renderingsmetod.<\/p>\n<p>Mata sedan ut inneh\u00e5llet i Innerblocks-komponenten genom att ers\u00e4tta <code>save<\/code>funktionen med f\u00f6ljande:<\/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>Detta matar helt enkelt ut v\u00e4rdet p\u00e5 InnerBlocks till en <code>&lt;div&gt;<\/code>.<\/p>\n<h3>Kompilera plugin<\/h3>\n<p>\u00d6ppna terminalen, se till att du \u00e4r i rotkatalogen f\u00f6r ditt plugin och k\u00f6r f\u00f6ljande kommando:<\/p>\n<p>Skriptet kommer att kompileras. Om du har n\u00e5gra fel b\u00f6r terminalen g\u00f6ra dig medveten om vad de \u00e4r.<\/p>\n<h2>L\u00e4gga till mallen InnerBlocks<\/h2>\n<p>F\u00f6r att g\u00f6ra det enkelt kommer vi att anv\u00e4nda exakt samma mall som vi tidigare skapat f\u00f6r <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-pattern-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">blockm\u00f6nstren<\/a> och <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">blockmallguiden<\/a>.<\/p>\n<p>Mallen \u00e4r mycket lik den vi definierade i v\u00e5r <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">blockmallguide<\/a>, men attributen finns i ett objekt ist\u00e4llet f\u00f6r en flerdimensionell array.<\/p>\n<p>Ers\u00e4tt <code>Edit<\/code>funktionen med f\u00f6ljande kod:<\/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>Detta skapar en mall f\u00f6r det kapslade blocket. Observera att anv\u00e4ndningen <code>templateLock<\/code>\u00e4r inst\u00e4lld p\u00e5 alla. Detta fungerar p\u00e5 samma s\u00e4tt som <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/#template-lock\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">malll\u00e5set f\u00f6r blockmallen<\/a> och har f\u00f6ljande tv\u00e5 alternativ:<\/p>\n<ul>\n<li><code>all<\/code>\u2014 f\u00f6rhindrar alla operationer. Det \u00e4r inte m\u00f6jligt att infoga nya block, flytta befintliga block eller ta bort block.<\/li>\n<li><code>insert<\/code>\u2014 f\u00f6rhindrar att block s\u00e4tts in eller tas bort, men till\u00e5ter att befintliga block flyttas.<\/li>\n<\/ul>\n<p>Du kan ocks\u00e5 <a href=\"https:\/\/wholesomecode.ltd\/#allowed-blocks-for-nested-blocks\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">definiera vilka block som \u00e4r till\u00e5tna inom de kapslade blocken<\/a>.<\/p>\n<ol>\n<li>Infoga och visa mallen f\u00f6r InnerBlocks<\/li>\n<\/ol>\n<hr \/>\n<p>Du kan infoga det kapslade blocket p\u00e5 samma s\u00e4tt som alla andra block, genom att klicka p\u00e5 plusikonen och s\u00f6ka efter <code>Wholesome Plugin<\/code>.<\/p>\n<p>Infogar mallen f\u00f6r kapslade block<\/p>\n<p>Observera att som tidigare har de kapslade blocken inuti de kapslade blocken inte malll\u00e5set till\u00e4mpat p\u00e5 dem.<\/p>\n<p>Det finns naturligtvis l\u00f6sningar f\u00f6r detta, genom att vara kreativ med hur du skapar en kombination av blockmallar och anpassade kapslade block.<\/p>\n<h3>Titta p\u00e5 blocket<\/h3>\n<p>Efter lite mixtrande med SCSS ser v\u00e5rt utmatade block ut ungef\u00e4r s\u00e5 h\u00e4r:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168925-61e7f7ef79395.png\" alt=\"Anv\u00e4nda en mall med InnerBlocks i WordPress Block Editor (Gutenberg)\" \/>Infogar mallen f\u00f6r kapslade block<\/p>\n<p>Ist\u00e4llet f\u00f6r att l\u00e5sa mallen kan du ist\u00e4llet begr\u00e4nsa den genom att ange vilka block du f\u00e5r infoga i den. Byt bara ut <code>Edit<\/code>funktionen med f\u00f6ljande kod:<\/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>H\u00e4r utel\u00e4mnar vi <code>templateLock<\/code>argumentet och begr\u00e4nsar ist\u00e4llet v\u00e5rt kapslade block till f\u00f6ljande block:<\/p>\n<ul>\n<li>Kolumn (<code>core\/column<\/code>)<\/li>\n<li>Kolumner (<code>core\/column<\/code>er)<\/li>\n<li>Grupp (<code>core\/group<\/code>)<\/li>\n<li>Rubrik (<code>core\/heading<\/code>)<\/li>\n<li>Stycke (<code>core\/paragraph<\/code>)<\/li>\n<\/ul>\n<p>\u00c5terigen, detta fungerar inte p\u00e5 n\u00e5gra kapslade block i mallen.<\/p>\n<ul>\n<li>Beh\u00f6ver du n\u00e5got mer flexibelt? Testa att <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-pattern-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">registrera ett blockm\u00f6nster<\/a> ist\u00e4llet<\/li>\n<li>Beh\u00f6ver du n\u00e5got mer statiskt? F\u00f6rs\u00f6k att <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">registrera en blockmall<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>N\u00e4r du skapar ett block i WordPress Block Editor (Gutenberg) kan du skapa ett omr\u00e5de som till\u00e5ter andra blocktyper att kapslas in i ditt block. Du g\u00f6r detta med 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":[942,848,922,818,724,868],"tags":[1173],"class_list":["post-228179","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg-9","category-handledningar","category-oevrig","category-plugins-3","category-utvecklaren","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228179","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=228179"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228179\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/223619"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=228179"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=228179"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=228179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}