{"id":228805,"date":"2022-10-17T10:01:00","date_gmt":"2022-10-17T07:01:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228805"},"modified":"2022-11-09T04:20:03","modified_gmt":"2022-11-09T01:20:03","slug":"rekisteroei-lohkomalli-wordpressin-lohkoeditoriin-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/rekisteroei-lohkomalli-wordpressin-lohkoeditoriin-gutenberg\/","title":{"rendered":"Rekister\u00f6i lohkomalli WordPressin lohkoeditoriin (Gutenberg)"},"content":{"rendered":"\n<p>Edellisess\u00e4 oppaassani tutkin <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-pattern-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">lohkokuvioiden voimaa<\/a>. Lohkomallit ovat samanlaisia, mutta sen sijaan, ett\u00e4 luottaisit siihen, ett\u00e4 asiakkaasi lis\u00e4\u00e4 lohkokuvioita editoriin, se antaa heille t\u00e4ydellisen asettelun heti, kun ne lis\u00e4\u00e4v\u00e4t uuden viestin.<\/p>\n<h2>Edellytykset<\/h2>\n<ul>\n<li>WordPressin asennus<\/li>\n<li>Koodieditori<\/li>\n<\/ul>\n<h2>Luo estomalli<\/h2>\n<p>T\u00e4ss\u00e4 esimerkiss\u00e4 aion lis\u00e4t\u00e4 saman <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-pattern-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">lohkokuvion, jonka loin edellisess\u00e4 oppaassani<\/a>, mutta lohkomalliksi.<\/p>\n<p>T\u00e4ss\u00e4 oppaassa kopioimme editorin tulosteen HTML-koodin. T\u00e4ss\u00e4 oppaassa aiomme tehd\u00e4 jotain hieman erilaista ja rakentaa joukon lohkon nimiavaruuksia, ominaisuuksia ja sis\u00e4lt\u00f6\u00e4.<\/p>\n<p>Yksinkertaisimmassa muodossaan lohkomalli n\u00e4ytt\u00e4\u00e4 v\u00e4h\u00e4n t\u00e4lt\u00e4:<\/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>Kuten n\u00e4et, se on taulukko, joka sis\u00e4lt\u00e4\u00e4 seuraavan kaavan mukaisia \u200b\u200blohkoja:<\/p>\n<ul>\n<li>Est\u00e4 nimiavaruus<\/li>\n<li>Est\u00e4 attribuutit<\/li>\n<\/ul>\n<p>Haluamme kuitenkin k\u00e4ytt\u00e4\u00e4 sis\u00e4kk\u00e4isi\u00e4 lohkoja, joten v\u00e4lit\u00e4mme t\u00e4h\u00e4n lohkotaulukkoon kolmannen parametrin, joka on innerBlocks.<\/p>\n<p><strong>Haluatko vain lohkon sijoituksen?<\/strong><\/p>\n<p>Huomaa, ett\u00e4 voit j\u00e4tt\u00e4\u00e4 attribuutit tyhjiksi, jos haluat antaa lohkoille ilman asetettua sis\u00e4lt\u00f6\u00e4.<\/p>\n<p>Matriisi, jolla luodaan sama lohko, jonka loimme lohkokuviooppaassa, tarvitsemme monimutkaisemman taulukon, kuten:<\/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>Rekister\u00f6i estomalli<\/h2>\n<h3>Lohkomallin rekister\u00f6iminen olemassa olevalle viestityypille<\/h3>\n<p>Voit rekister\u00f6id\u00e4 lohkomallin olemassa olevalle viestityypille (kuten <code>post<\/code>viestityypille) k\u00e4ytt\u00e4m\u00e4ll\u00e4 alla olevaa koodia ohittamaan viestityyppiobjektin.<\/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>T\u00e4m\u00e4 koodi yksinkertaisesti asettaa mallin ja (valinnaisesti) <code>[template_lock](https:\/\/wholesomecode.ltd\/#template-lock)<\/code>tyypin.<\/p>\n<p>Koko koodi n\u00e4ytt\u00e4isi t\u00e4lt\u00e4:<\/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>Lohkomallin rekister\u00f6iminen uudelle viestityypille<\/h3>\n<p>Jos olet rekister\u00f6im\u00e4ss\u00e4 viestityyppi\u00e4, voit siirt\u00e4\u00e4 mallin <code>template<\/code>argumenttiin <code>register_post_type<\/code>.<\/p>\n<p>Voit my\u00f6s siirt\u00e4\u00e4 <code>[template_lock](https:\/\/wholesomecode.ltd\/#template-lock)<\/code>argumentin kohtaan <code>register_post_type<\/code>.<\/p>\n<h3>Mallin lukitus<\/h3>\n<p>Argumentti <code>template_lock<\/code>voi tehd\u00e4 useita asioita riippuen argumentista, joka sille v\u00e4litet\u00e4\u00e4n. N\u00e4m\u00e4 on lueteltu <a href=\"https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-templates\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Gutenbergin kehitysoppaassa<\/a> seuraavasti:<\/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><strong>Mallin lukitus ei toimi sis\u00e4kk\u00e4isiss\u00e4 lohkoissa<\/strong><\/p>\n<p>Mallilukko toimii vain ylimm\u00e4n tason lohkoissa. K\u00e4yt\u00e4 t\u00e4t\u00e4 hy\u00f6dyksesi luomalla asettelun, jossa on kiinte\u00e4t otsikot, kuvat, kappaleet ja ryhm\u00e4alue, johon asiakkaasi voivat lis\u00e4t\u00e4 haluamaansa sis\u00e4lt\u00f6\u00e4.<\/p>\n<p>Voit my\u00f6s <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">luoda mukautetun sis\u00e4kk\u00e4isen lohkomallin InnerBlocksilla<\/a>.<\/p>\n<p>Voit my\u00f6s <a href=\"https:\/\/wholesomecode.ltd\/#allowed-block-types\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">rajoittaa lohkoja, jotka voit lis\u00e4t\u00e4 tiettyihin viestityyppeihin<\/a>.<\/p>\n<h2>K\u00e4yt\u00e4 Est\u00e4-mallia<\/h2>\n<p>Jos haluat k\u00e4ytt\u00e4\u00e4 lohkomallia, luo vain uusi viesti (tai mukautettu viestityyppi riippuen siit\u00e4, miten m\u00e4\u00e4ritit asiat). Malli lis\u00e4t\u00e4\u00e4n, ja sivullasi on nyt kiinte\u00e4t sis\u00e4lt\u00f6alueet.<\/p>\n<p>Viestin lis\u00e4\u00e4minen n\u00e4ytt\u00e4\u00e4 lohkomallin<\/p>\n<p>Voit rajoittaa eri viestityypeille saatavilla olevia lohkoja k\u00e4ytt\u00e4m\u00e4ll\u00e4 seuraavaa koodia.<\/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>Yll\u00e4 oleva koodi rajoittaa viestityypin sallitut lohkot <code>post<\/code>seuraaviin:<\/p>\n<ul>\n<li>\n<p>Sarake (<code>core\/column<\/code>)<\/p>\n<\/li>\n<li>\n<p>Sarakkeet (sarakkeet <code>core\/column<\/code>)<\/p>\n<\/li>\n<li>\n<p>Ryhm\u00e4 (<code>core\/group<\/code>)<\/p>\n<\/li>\n<li>\n<p>Otsikko (<code>core\/heading<\/code>)<\/p>\n<\/li>\n<li>\n<p>Kappale (<code>core\/paragraph<\/code>)<\/p>\n<\/li>\n<li>\n<p>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><\/p>\n<\/li>\n<li>\n<p>Tarvitsetko jotain, joka koskee lapsilohkoja? Yrit\u00e4 <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">rekister\u00f6id\u00e4 InnerBlocks-malli<\/a><\/p>\n<\/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>Edellisess\u00e4 oppaassani tutkin lohkokuvioiden voimaa. Lohkomallit ovat samanlaisia, mutta sen sijaan, ett\u00e4 luottaisit siihen, ett\u00e4 asiakkaasi lis\u00e4\u00e4 lohkokuvioita editoriin, se antaa 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":[927,719,895,864],"tags":[1166],"class_list":["post-228805","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aiheita","category-kehittaejae","category-koodi","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/228805","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=228805"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/228805\/revisions"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=228805"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=228805"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=228805"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}