{"id":228172,"date":"2022-10-17T10:00:00","date_gmt":"2022-10-17T07:00:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228172"},"modified":"2022-11-09T01:06:47","modified_gmt":"2022-11-08T22:06:47","slug":"registrera-en-blockmall-foer-wordpress-block-editor-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/registrera-en-blockmall-foer-wordpress-block-editor-gutenberg\/","title":{"rendered":"Registrera en blockmall f\u00f6r WordPress Block Editor (Gutenberg)"},"content":{"rendered":"\n<p>I min tidigare guide utforskade jag <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-pattern-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">kraften i blockm\u00f6nster<\/a>. Blockmallar liknar varandra, men ist\u00e4llet f\u00f6r att f\u00f6rlita sig p\u00e5 att din klient infogar blockm\u00f6nster i redigeraren, ger det dem en fullst\u00e4ndig layout s\u00e5 snart de infogar ett nytt inl\u00e4gg.<\/p>\n<h2>F\u00f6ruts\u00e4ttningar<\/h2>\n<ul>\n<li>WordPress installation<\/li>\n<li>Kodredigerare<\/li>\n<\/ul>\n<h2>Skapa din blockmall<\/h2>\n<p>I det h\u00e4r exemplet ska jag infoga samma <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-pattern-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">blockm\u00f6nster som jag skapade i min tidigare guide<\/a>, men som en blockmall.<\/p>\n<p>I den guiden kopierade vi editorns HTML-kod. I den h\u00e4r guiden ska vi g\u00f6ra n\u00e5got lite annorlunda och bygga upp en rad blocknamnomr\u00e5den, egenskaper och inneh\u00e5ll.<\/p>\n<p>I sin enklaste form ser en blockmall ut ungef\u00e4r s\u00e5 h\u00e4r:<\/p>\n<pre><code>$block_template = [\n  [ 'core\/heading', [ 'level'   =&gt; 2, 'content' =&gt; 'Example Block Template' ] ],\n  [ 'core\/paragraph', [ 'content' =&gt; 'Lorem ipsum dolor sit amet labore cras venenatis.' ] ],\n];\n<\/code><\/pre>\n<p>Som du kan se \u00e4r det en array som inneh\u00e5ller block i f\u00f6ljande m\u00f6nster:<\/p>\n<ul>\n<li>Blockera namnutrymme<\/li>\n<li>Blockera attribut<\/li>\n<\/ul>\n<p>Vi vill dock anv\u00e4nda kapslade block, s\u00e5 vi kommer att skicka in en tredje parameter till denna blockarray, som \u00e4r innerBlocks.<\/p>\n<p><strong>Vill du bara ha blockplaceringen?<\/strong><\/p>\n<p>Observera att du kan l\u00e4mna attributen tomma, f\u00f6r att bara f\u00f6rse blocken utan fastst\u00e4llt inneh\u00e5ll.<\/p>\n<p>Arrayen f\u00f6r att skapa samma block som vi skapade i blockm\u00f6nsterguiden, vi beh\u00f6ver en mer komplex array, som s\u00e5:<\/p>\n<pre><code>$block_template = [\n  [\n    'core\/group',\n    [],\n    [\n      [\n        'core\/heading',\n        [\n          'level'   =&gt; 2,\n          'content' =&gt; 'Example Block Template',\n        ]\n      ],\n      [\n        'core\/paragraph',\n        [\n          'content' =&gt; 'Lorem ipsum dolor sit amet labore cras venenatis.',\n        ]\n      ],\n      [\n        'core\/columns',\n        [],\n        [\n          [\n            'core\/column',\n            [],\n            [\n              [\n                'core\/heading',\n                [\n                  'level'   =&gt; 3,\n                  'content' =&gt; 'Sub Heading 1',\n                ]\n              ],\n              [\n                'core\/paragraph',\n                [\n                  'content' =&gt; 'Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.',\n                ]\n              ],\n            ]\n          ],\n          [\n            'core\/column',\n            [],\n            [\n              [\n                'core\/heading',\n                [\n                  'level'   =&gt; 3,\n                  'content' =&gt; 'Sub Heading 2',\n                ]\n              ],\n              [\n                'core\/paragraph',\n                [\n                  'content' =&gt; 'Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.',\n                ]\n              ],\n            ]\n          ],\n        ],\n      ],\n    ]\n  ]\n];\n<\/code><\/pre>\n<h2>Registrera blockmallen<\/h2>\n<h3>Registrera en blockmall f\u00f6r en befintlig posttyp<\/h3>\n<p>F\u00f6r att registrera en blockmall f\u00f6r en befintlig inl\u00e4ggstyp (som <code>post<\/code>posttyp) kan du anv\u00e4nda koden nedan f\u00f6r att \u00e5sidos\u00e4tta posttypobjektet.<\/p>\n<pre><code>function register_block_template() {\n\n    $post_type_object                = get_post_type_object( 'post' );\n    $post_type_object-&gt;template      = $block_template;\n    $post_type_object-&gt;template_lock = 'all';\n}\nadd_action( 'init', 'register_block_template' );\n<\/code><\/pre>\n<p>Denna kod anger helt enkelt mallen och (valfritt) <code>[template_lock](https:\/\/wholesomecode.ltd\/#template-lock)<\/code>typen.<\/p>\n<p>Hela koden skulle se ut s\u00e5 h\u00e4r:<\/p>\n<pre><code>function register_block_template() {\n    $block_template = [\n      [\n        'core\/group',\n        [],\n        [\n          [\n            'core\/heading',\n            [\n              'level'   =&gt; 2,\n              'content' =&gt; 'Example Block Template',\n            ]\n          ],\n          [\n            'core\/paragraph',\n            [\n              'content' =&gt; 'Lorem ipsum dolor sit amet labore cras venenatis.',\n            ]\n          ],\n          [\n            'core\/columns',\n            [],\n            [\n              [\n                'core\/column',\n                [],\n                [\n                  [\n                    'core\/heading',\n                    [\n                      'level'   =&gt; 3,\n                      'content' =&gt; 'Sub Heading 1',\n                    ]\n                  ],\n                  [\n                    'core\/paragraph',\n                    [\n                      'content' =&gt; 'Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.',\n                    ]\n                  ],\n                ]\n              ],\n              [\n                'core\/column',\n                [],\n                [\n                  [\n                    'core\/heading',\n                    [\n                      'level'   =&gt; 3,\n                      'content' =&gt; 'Sub Heading 2',\n                    ]\n                  ],\n                  [\n                    'core\/paragraph',\n                    [\n                      'content' =&gt; 'Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.',\n                    ]\n                  ],\n                ]\n              ],\n            ],\n          ],\n        ]\n      ]\n    ];\n\n    $post_type_object                = get_post_type_object( 'post' );\n    $post_type_object-&gt;template      = $block_template;\n    $post_type_object-&gt;template_lock = 'all';\n}\nadd_action( 'init', 'register_block_template' );\n<\/code><\/pre>\n<h3>Registrera en blockmall f\u00f6r en ny inl\u00e4ggstyp<\/h3>\n<p>Om du registrerar en inl\u00e4ggstyp kan du skicka mallen till <code>template<\/code>argumentet <code>register_post_type<\/code>.<\/p>\n<p>Du kan ocks\u00e5 skicka in <code>[template_lock](https:\/\/wholesomecode.ltd\/#template-lock)<\/code>argumentet till <code>register_post_type<\/code>.<\/p>\n<h3>Malll\u00e5s<\/h3>\n<p>Argumentet <code>template_lock<\/code>kan g\u00f6ra flera saker beroende p\u00e5 vilket argument som skickas till det. Dessa listas i <a href=\"https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-templates\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Gutenbergs utvecklingsguide<\/a> som:<\/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><strong>Malll\u00e5s fungerar inte p\u00e5 kapslade block<\/strong><\/p>\n<p>Malll\u00e5set fungerar endast p\u00e5 block p\u00e5 \u00f6versta niv\u00e5n. Anv\u00e4nd detta till din f\u00f6rdel genom att skapa en layout som har fasta rubriker, bilder, stycken och ett gruppomr\u00e5de f\u00f6r din klient att infoga det inneh\u00e5ll de vill.<\/p>\n<p>Du kan ocks\u00e5 <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">skapa en anpassad kapslad blockmall med InnerBlocks<\/a>.<\/p>\n<p>Du kan ocks\u00e5 <a href=\"https:\/\/wholesomecode.ltd\/#allowed-block-types\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">begr\u00e4nsa de block som du f\u00e5r infoga i vissa inl\u00e4ggstyper<\/a>.<\/p>\n<h2>Anv\u00e4nd blockmallen<\/h2>\n<p>F\u00f6r att anv\u00e4nda blockmallen skapa bara ett nytt inl\u00e4gg (eller anpassad inl\u00e4ggstyp beroende p\u00e5 hur du konfigurerat saker). Mallen kommer att infogas och du kommer nu att ha fasta inneh\u00e5llsomr\u00e5den p\u00e5 din sida.<\/p>\n<p>Att infoga ett inl\u00e4gg visar blockmallen<\/p>\n<p>Du kan begr\u00e4nsa de block som \u00e4r tillg\u00e4ngliga f\u00f6r olika inl\u00e4ggstyper med hj\u00e4lp av f\u00f6ljande kod.<\/p>\n<pre><code>function filter_allowed_block_types( $allowed_block_types, $post) {\n\n  if ($post-&gt;post_type !== 'post') {\n    return $allowed_block_types;\n  }\n\n  $allowed_block_types = [\n    'core\/column',\n    'core\/columns',\n    'core\/group',\n    'core\/heading',\n    'core\/paragraph',\n  ];\n\n  return $allowed_block_types;\n}\nadd_filter( 'allowed_block_types', 'filter_allowed_block_types', 10, 2 );\n<\/code><\/pre>\n<p>Koden ovan begr\u00e4nsar de block som till\u00e5ts i <code>post<\/code>posttypen till f\u00f6ljande:<\/p>\n<ul>\n<li>\n<p>Kolumn (<code>core\/column<\/code>)<\/p>\n<\/li>\n<li>\n<p>Kolumner (<code>core\/column<\/code>er)<\/p>\n<\/li>\n<li>\n<p>Grupp (<code>core\/group<\/code>)<\/p>\n<\/li>\n<li>\n<p>Rubrik (<code>core\/heading<\/code>)<\/p>\n<\/li>\n<li>\n<p>Stycke (<code>core\/paragraph<\/code>)<\/p>\n<\/li>\n<li>\n<p>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<\/p>\n<\/li>\n<li>\n<p>Beh\u00f6ver du n\u00e5got som g\u00e4ller barnblock? Testa <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">att registrera en InnerBlocks-mall<\/a><\/p>\n<\/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>I min tidigare guide utforskade jag kraften i blockm\u00f6nster. Blockmallar liknar varandra, men ist\u00e4llet f\u00f6r att lita p\u00e5 att din klient infogar blockm\u00f6nster i editorn, ger det t&#8230;<\/p>\n","protected":false},"author":1,"featured_media":223608,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[932,901,724,868],"tags":[1173],"class_list":["post-228172","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aemnen","category-koda","category-utvecklaren","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228172","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=228172"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228172\/revisions"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=228172"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=228172"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=228172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}