{"id":233375,"date":"2023-02-12T17:18:00","date_gmt":"2023-02-12T14:18:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233375"},"modified":"2022-11-10T23:21:25","modified_gmt":"2022-11-10T20:21:25","slug":"gutenbergi-plokimustrid-arendaja-pilk","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/gutenbergi-plokimustrid-arendaja-pilk\/","title":{"rendered":"Gutenbergi plokimustrid: arendaja pilk"},"content":{"rendered":"\n<p>Pilk WordPressi Gutenbergi uutesse plokimustritesse arendaja silmis. Uurime, mis need on, milleks neid saab kasutada, ja uurime p\u00f5hjalikumalt, kuidas neile koodi kirjutada.<\/p>\n<h2>Plokimustrid ja nende kasutamine<\/h2>\n<p>Plokimustrid v\u00f5eti kasutusele WordPressi versioonis 5.5 (11. august 2020). Need on ploki sisestaja uus funktsioon, mis h\u00f5lbustab mitme ploki eelm\u00e4\u00e4ratletud konfiguratsiooni sisestamist. Teema v\u00f5i pistikprogrammi arendajad saavad m\u00e4\u00e4rata plokkide r\u00fchma, nende pesastamise, sisu ja atribuudid ning l\u00f5ppkasutajad saavad selle sisestada lihtsa \u00fche kl\u00f5psuga. Idee seisneb selles, et l\u00f5ppkasutajad ei pea enam k\u00e4sitsi keerukaid paigutusi ja k\u00f5iki kohandatud s\u00e4tteid koostama ning neid sageli kasutatavate plokkide jaoks sobivatesse konteineritesse pesastama.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153813-61e5135f8834f.png\" data-rel=\"lightbox\" ><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153813-61e5135f8834f.png\" alt=\"Gutenbergi plokimustrid: arendaja pilk\" ><\/a><\/p>\n<p>Kui plokimuster on redaktorisse lisatud, ei tea plokid, et need lisati plokimustri kaudu. Need lisatakse tavaliste plokkidena, mis v\u00f5imaldavad kasutajatel oma sisu ja s\u00e4tteid muuta. P\u00f5him\u00f5tteliselt on see otsetee mitme ploki konfiguratsiooni lisamiseks.<\/p>\n<p>Idee on hea! K\u00f5igil l\u00f5ppkasutajatel ei ole mugav koostada redaktoris suurt pesastatud plokkide struktuuri, et see t\u00e4iuslik v\u00e4lja n\u00e4eks. Kuid siiani on see funktsioon peamiselt arendajatele kasulik, kuna l\u00f5ppkasutajad ei saa oma mustreid luua. Kasutajate enda kohandatud plokkide puhul peavad nad kasutama korduvkasutatavaid plokke. Kuid eriti teemaarendajate jaoks v\u00f5imaldavad plokkide mustrid n\u00e4idata l\u00f5ppkasutajatele t\u00f5eliselt parimat plokkide konfiguratsiooni, mis teemas h\u00e4sti toimib.<\/p>\n<p>WordPress on lisanud plokimustrite jaoks uue teematoe: <code>'core-block-patterns'<\/code>. Core k\u00e4ivitab alates versioonist 5.5.0 automaatselt a <code>add_theme_support('core-block-patterns')<\/code>, nii et te ei pea seda oma teemas tegema.<\/p>\n<p>Kuna k\u00f5ik plokkmustri funktsioonid on olemas ainult v\u00e4ga uues WordPressi versioonis, on hea m\u00f5te esmalt selle olemasolu kontrollida, et mitte rikkuda saite vanemate WordPressi versioonidega. K\u00f5igis allpool toodud koodin\u00e4idetes olen just seda teinud.<\/p>\n<p>WordPress 5.5 tarnitakse 9 eelm\u00e4\u00e4ratletud plokimustriga (vt allolevat loendit). Plokimustrid kuvatakse mustrite kategooriates (tuum lisab 5 kategooriat). Blokeerimismustri kategooriad t\u00f6\u00f6tavad nagu postituste kategooriad; saate paigutada ploki mustri mitmesse kategooriasse. Teemade ja pistikprogrammide arendajad saavad registreerida oma plokimustrid ja plokimustrite kategooriad, samuti t\u00fchistada nende registreerimise. Nii et vaatame l\u00e4hemalt, kuidas!<\/p>\n<h2>WordPressi 5.5-s sisalduvad plokimustrid ja plokkide mustrite kategooriad<\/h2>\n<p>WordPress 5.5-s tarnitud plokkide mustrid on j\u00e4rgmised (iga mustri nimeruum ja n\u00e4lkja ID kuvatakse sulgudes):<\/p>\n<ul>\n<li>Kaks nuppu (&#8216; <code>core\/two-buttons<\/code>&#8216;)<\/li>\n<li>Kolm nuppu (&#8216; <code>core\/three-buttons<\/code>&#8216;)<\/li>\n<li>Kaks veergu teksti (&#8216; <code>core\/text-two-columns<\/code>&#8216;)<\/li>\n<li>Kaks veergu teksti piltidega (&#8216; <code>core\/text-two-columns-with-images<\/code>&#8216;)<\/li>\n<li>Kolm tekstiveergu nuppudega (&#8216; <code>core\/text-three-columns-buttons<\/code>&#8216;)<\/li>\n<li>Kaks pilti k\u00f5rvuti (&#8216; <code>core\/two-images<\/code>&#8216;)<\/li>\n<li>Suur p\u00e4is koos pealkirjaga (&#8216; <code>core\/large-header<\/code>&#8216;)<\/li>\n<li>Suur p\u00e4is koos p\u00e4ise ja nupuga (&#8216; <code>core\/large-header-button<\/code>&#8216;)<\/li>\n<li>Tsitaat (&#8216; <code>core\/quote<\/code>&#8216;)<\/li>\n<\/ul>\n<p>WordPress 5.5-s lisatud kategooriad on j\u00e4rgmised (nende n\u00e4lkjate ID-d kuvatakse sulgudes):<\/p>\n<ul>\n<li>Nupud (&#8216; <code>buttons<\/code>&#8216;)<\/li>\n<li>Veerud (&#8216; <code>columns<\/code>&#8216;)<\/li>\n<li>Galerii (&#8216; <code>gallery<\/code>&#8216;)<\/li>\n<li>P\u00e4ised (&quot; <code>header<\/code>&quot; \u2013 m\u00e4rkus, et l\u00f5ppu ei ole &quot;s&quot;)<\/li>\n<li>Tekst (&#8216; <code>text<\/code>&#8216;)<\/li>\n<\/ul>\n<h2>Plokimustrite registreerimise t\u00fchistamine<\/h2>\n<p>Blokeerimismustrite registreerimise saate t\u00fchistada, kasutades funktsiooni <code>[unregister_block_pattern](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-patterns\/#unregister_block_pattern)()<\/code>. Sisestage parameetrina eemaldamiseks lihtsalt plokimustriga string. Tuumaploki mustrite kohta vaadake \u00fclaltoodud \u00fclevaadet. K\u00e4ivitage see funktsioon toiminguga \u00fchendatud funktsiooni sees <code>init<\/code>.<\/p>\n<p>N\u00e4ide p\u00f5hiploki mustrite &quot;Kaks nuppu&quot; ja &quot;Kolm nuppu&quot; registreerimise t\u00fchistamisest:<\/p>\n<pre><code>add_action('init', function() {\n    if (!function_exists('unregister_block_pattern')) {\n        return;\n    }\n    unregister_block_pattern('core\/two-buttons');\n    unregister_block_pattern('core\/three-buttons');\n});<\/code><\/pre>\n<h2>Plokkide mustrite registreerimine<\/h2>\n<p>Uue plokimustri registreerimine toimub funktsiooniga <code>[register_block_pattern](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-patterns\/#register_block_pattern)()<\/code>. See aktsepteerib kahte parameetrit; esimene on teie mustri unikaalse nime string, sealhulgas nimeruum. Teine on teie plokimustri seadete hulk.<\/p>\n<p><strong>N\u00e4pun\u00e4ide<\/strong>. Plokimustri m\u00e4\u00e4ratlemiseks peate oma ploki konfiguratsiooni jaoks esitama toores HTML-sisu. Ma ei soovita seda k\u00e4sitsi v\u00e4lja kirjutada, kuna see p\u00f5hjustab kergesti kehtetuid plokkide konflikte. Selle asemel minge redaktorisse ja seadistage plokid nii, nagu soovite, et need mustris oleksid. Seej\u00e4rel kl\u00f5psake vanemploki t\u00f6\u00f6riistaribal &quot;punktimen\u00fc\u00fcd&quot; ja kl\u00f5psake nuppu &quot;Kopeeri&quot;. P\u00e4rast seda saate minna tagasi oma koodiredaktorisse ja kleepida (Ctrl+V). See annab teile kopeeritud konfiguratsiooni t\u00f6\u00f6tlemata HTML-i. Kasutage koodiredaktori funktsioone, et asendada k\u00f5ik reavahetused <code>n<\/code>ja veenduda, et jutum\u00e4rgid on \u00f5iged.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153813-61e513609a439.png\" data-rel=\"lightbox\" ><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153813-61e513609a439.png\" alt=\"Gutenbergi plokimustrid: arendaja pilk\" ><\/a><\/p>\n<p>Teie plokimustri omadused on j\u00e4rgmised (teine \u200b\u200bargumentide massiiv):<\/p>\n<ul>\n<li><strong><code>title<\/code><\/strong>(n\u00f5utav): teie plokimustri kuvatav nimi<\/li>\n<li><code>**content**<\/code>(n\u00f5utav): ploki konfiguratsiooni RAW HTML<\/li>\n<li><strong><code>description<\/code><\/strong>: ploki mustri kirjeldus. Visuaalselt peidetud<\/li>\n<li><strong><code>categories<\/code><\/strong>: kategooriate massiiv, millesse see plokimuster lisada. Kui te seda atribuuti ei anna, paigutatakse plokk plokimustri kategooriasse &quot;Kategooreeta&quot;.<\/li>\n<li><strong><code>keywords<\/code><\/strong>: hulk m\u00e4rks\u00f5nu, mis aitavad kasutajatel teie mustrit otsimise ajal leida<\/li>\n<li><strong><code>viewportWidth<\/code><\/strong>: sisestage sisestajas ploki mustri laiuse t\u00e4isarv. M\u00f5jutab ainult sisestusprogrammi eelvaadet.<\/li>\n<\/ul>\n<p>Siin on n\u00e4ide plokimustri registreerimisest, mis koosneb t\u00e4islaiusest kaaneplokist, millel on taustav\u00e4rv, mis sisaldab konkreetse tekstiv\u00e4rviga keskele joondatud pealkirjaplokki ja kindla tekstiv\u00e4rviga keskele joondatud l\u00f5iku:<\/p>\n<pre><code>add_action('init', function() {\n    if (!function_exists('register_block_pattern')) {\n        return;\n    }\n    register_block_pattern('awp\/standard-cta-section', [\n        'title' =&gt; __('Standard CTA Section', 'awp'),\n        'keywords' =&gt; ['cta'],\n        'categories' =&gt; ['header'],\n        'viewportWidth' =&gt; 1000,\n        'content' =&gt; \"&lt;!-- wp:cover {\"customOverlayColor\":\"#dadee2\",\"align\":\"full\"} --&gt;n&lt;div class=\"wp-block-cover alignfull has-background-dim\" style=\"background-color:#dadee2\"&gt;&lt;div class=\"wp-block-cover__inner-container\"&gt;&lt;!-- wp:heading {\"align\":\"center\",\"level\":1,\"style\":{\"color\":{\"text\":\"#414446\"}}} --&gt;n&lt;h1 class=\"has-text-align-center has-text-color\" style=\"color:#414446\"&gt;Section title&lt;\/h1&gt;n&lt;!-- \/wp:heading --&gt;nn&lt;!-- wp:paragraph {\"align\":\"center\",\"style\":{\"color\":{\"text\":\"#414446\"}}} --&gt;n&lt;p class=\"has-text-align-center has-text-color\" style=\"color:#414446\"&gt;Write your text here.&lt;\/p&gt;n&lt;!-- \/wp:paragraph --&gt;&lt;\/div&gt;&lt;\/div&gt;n&lt;!-- \/wp:cover --&gt;\",\n    ]);\n});<\/code><\/pre>\n<h2>Plokimustri kategooriate registreerimine<\/h2>\n<p>Arendajad saavad registreerida ka kohandatud plokimustri kategooriaid. Seda tehakse funktsiooniga <code>[register_block_pattern_category](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-patterns\/#register_block_pattern_category)()<\/code>. See aktsepteerib kahte parameetrit; esiteks kategooria slug string ja teiseks omaduste massiiv. Praeguse seisuga toetatakse teises argumendis ainult \u00fchte omadust; <code>label<\/code>kategooria loetava nime jaoks.<\/p>\n<p>Allpool on n\u00e4ide kohandatud plokimustri kategooria registreerimisest:<\/p>\n<pre><code>add_action('init', function() {\n    if (!function_exists('register_block_pattern_category')) {\n        return;\n    }\n    register_block_pattern_category('awp-patterns', ['label' =&gt; __('AWhitePixel Block Patterns', 'awp')]);\n});<\/code><\/pre>\n<p>Selle abil saate lisada &#8216;awp-mustrid&#8217; <code>categories<\/code>argumendile &#8216; &#8216; <code>register_block_pattern()<\/code>. Pidage meeles, et kui kategooriale pole registreeritud plokimustreid, ei kuvata kategooriat ploki sisestajas. Selle kuvamiseks peate sellesse kategooriasse lisama v\u00e4hemalt \u00fche plokimustri.<\/p>\n<h2>Plokimustrite kategooriate registreerimise t\u00fchistamine<\/h2>\n<p>L\u00f5puks on olemas funktsioon <code>[unregister_block_pattern_category](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-patterns\/#unregister_block_pattern_category)()<\/code>plokimustri kategooria registreerimise t\u00fchistamiseks. Esitage parameetrina kategooria n\u00e4lkjas. P\u00f5hikategooriate ja nende n\u00e4lkjate kohta vaadake \u00fclaltoodud plokimustri kategooriate \u00fclevaadet.<\/p>\n<p>\u00c4rge unustage, et plokimustri kategooriad, millel pole neile m\u00e4\u00e4ratud plokimustreid, ei ole ploki sisestajas n\u00e4htavad. Seega, kui t\u00fchistate k\u00f5ik kategooriale m\u00e4\u00e4ratud plokimustrid, ei ole kategooria ise enam n\u00e4htav ja te ei pea tingimata kategooriat t\u00fchistama. K\u00f5ik plokkide mustrid, mis on m\u00e4\u00e4ratud ainult eemaldatavale kategooriale, teisaldatakse kategooriasse \u201eKategeerimata&quot;.<\/p>\n<p>Siin on n\u00e4ide p\u00f5hiploki mustri kategooria &quot;nupud&quot; registreerimise t\u00fchistamisest:<\/p>\n<pre><code>add_action('init', function() {\n    if (!function_exists('unregister_block_pattern_category')) {\n        return;\n    }\n    unregister_block_pattern_category('buttons');\n});<\/code><\/pre>\n<h2>J\u00e4reldus<\/h2>\n<p>WordPress Gutenbergi uus plokimustri funktsioon on kindlasti samm l\u00e4hemale sellele, et plokiredaktor t\u00f6\u00f6taks rohkem lehe koostajana. Minu arvates on negatiivne k\u00fclg see, et l\u00f5ppkasutajad ei saa oma mustreid luua. Kuid see on hea funktsioon teemaarendajatele, kuna see v\u00f5imaldab l\u00f5ppkasutajatel h\u00f5lpsasti seadistada ploki konfiguratsioone ja paigutusi, mis teemas h\u00e4sti t\u00f6\u00f6tavad. See on t\u00e4iesti uus funktsioon ja t\u00f5en\u00e4oliselt areneb ja t\u00e4iustatakse seda l\u00e4hitulevikus! Mina n\u00e4iteks ei j\u00f5ua \u00e4ra oodata!<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Arendaja pilk WordPressi Gutenbergi plokimustritesse. Mis need on, milleks neid saab kasutada ja p\u00f5hjalikum uurimine, kuidas neile koodi kirjutada.<\/p>\n","protected":false},"author":1,"featured_media":223885,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[718,894,718,937,937,894,1110,842,802,802,812,812,842,863,863],"tags":[1165],"class_list":["post-233375","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arendaja","category-kood","category-gutenberg-4","category-n-a","category-opetused","category-php-4","category-pistikprogrammid","category-wordpress-4","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233375","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=233375"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233375\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/223885"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=233375"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=233375"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=233375"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}