{"id":228916,"date":"2022-10-19T12:25:00","date_gmt":"2022-10-19T09:25:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228916"},"modified":"2022-11-09T04:47:34","modified_gmt":"2022-11-09T01:47:34","slug":"lisaeae-saeaetimiae-ydin-ja-kolmannen-osapuolen-lohkon-sivupalkkiin-suodattimilla-ja-korkeamman-jaerjestyksen-komponenteilla","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/lisaeae-saeaetimiae-ydin-ja-kolmannen-osapuolen-lohkon-sivupalkkiin-suodattimilla-ja-korkeamman-jaerjestyksen-komponenteilla\/","title":{"rendered":"Lis\u00e4\u00e4 s\u00e4\u00e4timi\u00e4 ydin- ja kolmannen osapuolen lohkon sivupalkkiin suodattimilla ja korkeamman j\u00e4rjestyksen komponenteilla"},"content":{"rendered":"\n<p>Edellisess\u00e4 oppaassamme tarkastelimme <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">mukautettujen lohkojen<\/a> <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">lis\u00e4\u00e4mist\u00e4<code>InspectorControls<\/code><\/a>, jotta voimme k\u00e4ytt\u00e4\u00e4 lohkon sivupalkin ohjaimia. T\u00e4ss\u00e4 oppaassa aiomme rakentaa sen ja lis\u00e4t\u00e4 vaihtos\u00e4\u00e4timen kaikkien lohkojemme lohkosivupalkkiin, mukaan lukien kaikki k\u00e4ytt\u00e4m\u00e4mme ydin- ja kolmannen osapuolen lohkot.<\/p>\n<p>T\u00e4ss\u00e4 oppaassa aiomme luoda &quot;luonnoslohko&quot;-toiminnon, joka sis\u00e4ltyi <a href=\"https:\/\/wholesomecode.ltd\/plugins\/wholesome-publishing\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Wholesome Publishing -laajennukseen<\/a>.<\/p>\n<h2>Edellytykset<\/h2>\n<ul>\n<li>Olet noudattanut <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Pluginin luominen WordPress Block Editor (Gutenberg)<\/a> -opasta<\/li>\n<li>Olet noudattanut <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Lis\u00e4\u00e4 sivupalkki mukautettuun WordPress-lohkoon InspectorControls-<\/a> oppaan avulla<\/li>\n<\/ul>\n<h2>Valmistautuminen t\u00e4h\u00e4n oppaaseen<\/h2>\n<p>Jos olet noudattanut <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Lis\u00e4\u00e4 sivupalkki -opasta<\/a>, hienoa. Mutta minun on nyt pyydett\u00e4v\u00e4 sinua kumoamaan oppaan vaiheessa 4 tekem\u00e4si muutokset (luonnoslohkon vaihto), koska aiomme ekstrapoloida t\u00e4m\u00e4n toiminnon ja soveltaa sit\u00e4 kaikkiin lohkoihimme.<\/p>\n<p>Jos et ole noudattanut t\u00e4t\u00e4 opasta, varmista, ett\u00e4 noudatat sit\u00e4 ensin vaiheeseen 4 asti, koska t\u00e4m\u00e4 opas jatkaa suoraan siit\u00e4.<\/p>\n<h2>Luo korkeamman tason komponentteja<\/h2>\n<p>Korkeamman j\u00e4rjestyksen komponentteja (HoC) k\u00e4ytet\u00e4\u00e4n Reactissa k\u00e4\u00e4rim\u00e4\u00e4n olemassa olevan komponentin ymp\u00e4rille ja joko v\u00e4litt\u00e4m\u00e4\u00e4n toimintoja tai lis\u00e4osia kyseiselle komponentille. Niit\u00e4 kutsutaan HoC:iksi, koska ne on lis\u00e4tty DOM:iin ennen olemassa olevaa komponenttia, tai voit sanoa &quot;korkeammassa j\u00e4rjestyksess\u00e4&quot;.<\/p>\n<p>Aiomme luoda kaksi uutta HoC:t\u00e4, joten luo laajennukseen uusi kansio <code>components<\/code>ja luo seuraavat kaksi tiedostoa:<\/p>\n<ul>\n<li><code>\/components\/withInspectorControls.js<\/code><\/li>\n<li><code>\/components\/withIsBlockDraft.js<\/code><\/li>\n<\/ul>\n<h3>InspectorControlsilla<\/h3>\n<p>Avaa <code>\/components\/withInspectorControls.js<\/code>ja lis\u00e4\u00e4 seuraava koodi:<\/p>\n<pre><code>import { InspectorControls } from '@wordpress\/block-editor';\nimport { PanelBody, ToggleControl } from '@wordpress\/components';\nimport { createHigherOrderComponent } from '@wordpress\/compose';\nimport { Fragment }    from '@wordpress\/element';\nimport { __ } from '@wordpress\/i18n';\n\nexport default createHigherOrderComponent( (BlockEdit) =&gt; {\n     return (props) =&gt; {\n        const {\n            attributes: {\n                isBlockDraft,\n            },\n            setAttributes,\n        } = props;\n\n        return (&lt;Fragment&gt;\n                &lt;BlockEdit { ...props } \/&gt;\n                &lt;InspectorControls&gt;\n                    &lt;PanelBody\n                        title={ __( 'Block Display Settings', 'wholesome-plugin') }\n                        icon=\"visibility\"\n                        initialOpen={ false }\n                    &gt;\n                        &lt;ToggleControl\n                            label={ __( 'Set Block as Draft', 'wholesome-plugin') }\n                            checked={ isBlockDraft }\n                            onChange={ (isBlockDraft) =&gt; setAttributes( { isBlockDraft }) }\n                            help={ __( 'If the block is set to draft it will not show on the front end.',\n                                'wholesome-plugin') }\n                        \/&gt;\n                    &lt;\/PanelBody&gt;\n                &lt;\/InspectorControls&gt;\n            &lt;\/Fragment&gt;\n        );\n    };\n }, 'withInspectorControls' );\n<\/code><\/pre>\n<p>Saatat tunnistaa t\u00e4m\u00e4n koodin <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">sivupalkkioppaan<\/a> vaiheesta 4. Se on melkein sama koodi, paitsi ett\u00e4 olemme k\u00e4\u00e4rineet sen <code>createHigherOrderComponent<\/code>.<\/p>\n<p><code>createHigherOrderComponent<\/code>Antaa meille p\u00e4\u00e4syn t\u00e4h\u00e4n on <code>BlockEdit<\/code>alkuper\u00e4inen muokkaustoiminto lohkolle, jonka t\u00e4m\u00e4 komponentti k\u00e4\u00e4rii. Selvit\u00e4mme, kuinka t\u00e4m\u00e4 v\u00e4litet\u00e4\u00e4n, kun luomme suodattimet pian.<\/p>\n<h3>kanssa IsBlockDraft<\/h3>\n<p>Avaa <code>\/components\/withIsBlockDraft.js<\/code>ja liit\u00e4 seuraava koodi:<\/p>\n<pre><code>import { createHigherOrderComponent } from '@wordpress\/compose';\n\nexport default createHigherOrderComponent( (BlockListBlock) =&gt; {\n     return (props) =&gt; {\n         const { attributes } = props;\n         const { isBlockDraft } = attributes;\n\n         return &lt;BlockListBlock { ...props } className={ isBlockDraft? 'draft-block': '' } \/&gt;;\n     };\n }, 'withIsBlockDraft' );\n<\/code><\/pre>\n<p>T\u00e4m\u00e4 <code>createHigherOrderComponent<\/code>antaa meille p\u00e4\u00e4syn, <code>BlockListBlock<\/code>jonka avulla voimme siirt\u00e4\u00e4 attribuutteja editorilohkon k\u00e4\u00e4reeseen. K\u00e4yt\u00e4mme sit\u00e4 t\u00e4ss\u00e4 asettamaan &#8217;draft-block&#8217;-luokan k\u00e4\u00e4reelle, jos Draft Block -kytkin on asetettu. T\u00e4m\u00e4 luo uudelleen sen, mit\u00e4 olimme aiemmin lis\u00e4nneet muokkausmenetelm\u00e4\u00e4n <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">sivupalkkioppaan<\/a> vaiheessa 4 .<\/p>\n<p>J\u00e4lleen meid\u00e4n on asetettava suodatin, joka <code>BlockListBlock<\/code>siirret\u00e4\u00e4n t\u00e4h\u00e4n ohjaukseen.<\/p>\n<h2>Aseta suodattimet<\/h2>\n<p>Lis\u00e4\u00e4 tiedoston yl\u00e4osaan <code>\/src\/index.js<\/code>seuraava:<\/p>\n<pre><code>import { addFilter } from '@wordpress\/hooks';\n\nimport withIsBlockDraft from '.\/components\/withIsBlockDraft';\nimport withInspectorControls from '.\/components\/withInspectorControls';\n<\/code><\/pre>\n<p>Meid\u00e4n pit\u00e4isi todellakin harkita liit\u00e4nn\u00e4israkenteen muuttamista niin, ett\u00e4 lohkon rekister\u00f6iv\u00e4 koodi tuodaan toisesta tiedostosta, mutta yksinkertaisuuden vuoksi k\u00e4yt\u00e4mme samaa tiedostoa.<\/p>\n<h3>Suodata attribuutit<\/h3>\n<p>Lis\u00e4\u00e4 samaan tiedostoon seuraava koodi:<\/p>\n<pre><code>addFilter(\n    'blocks.registerBlockType',\n    'wholesome-plugin\/block-draft-attributes', (settings) =&gt; {\n        const { attributes } = settings;\n        return {\n            ...settings,\n            attributes: {\n                ...attributes,\n                isBlockDraft: {\n                    default: false,\n                    type: 'boolean',\n                },\n            },\n        };\n    }\n);\n<\/code><\/pre>\n<p>T\u00e4m\u00e4 suodatin lis\u00e4\u00e4 lis\u00e4attribuutteja kaikkiin koontilohkoihin. Teoriassa voisimme suodattaa t\u00e4m\u00e4n vain tietyille lohkoille, mutta emme aio tehd\u00e4 t\u00e4t\u00e4 esimerkki\u00e4 varten.<\/p>\n<p>Jos halusimme rajoittaa t\u00e4m\u00e4n suodattimen tiettyihin lohkoihin, voisimme tehd\u00e4 sen seuraavasti:<\/p>\n<pre><code>const { attributes, name } = settings;\nif ('core\/paragraph' !== name) {\n  return;\n}\n<\/code><\/pre>\n<h3>Suodata InspectorControls<\/h3>\n<p>Lis\u00e4\u00e4 tiedostoon seuraava koodi <code>\/src\/index.js<\/code>:<\/p>\n<pre><code>addFilter(\n    'editor.BlockEdit',\n    'wholesome-plugin\/block-draft-inspector',\n    withInspectorControls,\n);\n<\/code><\/pre>\n<p>T\u00e4ss\u00e4 suodatamme <code>BlockEdit<\/code>niin, ett\u00e4 se v\u00e4litt\u00e4\u00e4 t\u00e4m\u00e4n aiemmin luomaanmme HoC:hen.<\/p>\n<p>Jos haluamme rajoittaa t\u00e4m\u00e4n suodattimen tiettyihin lohkoihin, toimisimme seuraavasti <strong>HoC<\/strong> :ss\u00e4:<\/p>\n<pre><code>if ('core\/paragraph' === props.name) {\n  return &lt;BlockEdit { ...props } \/&gt;\n}\n<\/code><\/pre>\n<h3>Suodata BlockListBlock<\/h3>\n<p>Lis\u00e4t\u00e4\u00e4n lopuksi suodatin <code>BlockListBlock<\/code>:<\/p>\n<pre><code>addFilter(\n    'editor.BlockListBlock',\n    'wholesome-plugin\/block-draft-class',\n    withIsBlockDraft\n);\n<\/code><\/pre>\n<p>J\u00e4lleen, jos haluat rajoittaa t\u00e4t\u00e4 lohkoa, voit tehd\u00e4 t\u00e4m\u00e4n HoC:n sis\u00e4ll\u00e4.<\/p>\n<h2>Lis\u00e4\u00e4 PHP ja SCSS<\/h2>\n<p>Lis\u00e4\u00e4 seuraava, <code>\/editor.scss<\/code>jotta luonnosbannerimme n\u00e4ytt\u00e4isi kauniilta (t\u00e4m\u00e4n voi tehd\u00e4 paljon paremmin, mutta t\u00e4m\u00e4 on vain esimerkki).<\/p>\n<pre><code>.editor-styles-wrapper {\n    .draft-block {\n\n        border-bottom: 1px dotted #cfcfcf;\n        border-left: 1px solid #cfcfcf;\n        border-right: 1px solid #cfcfcf;\n        margin-top: 3em;\n\n        &amp;::before {\n            background: #cfcfcf;\n            background-image: linear-gradient(45deg, #efefef 8.33%, #cfcfcf 8.33%, #cfcfcf 50%, #efefef 50%, #efefef 58.33%, #cfcfcf 58.33%, #cfcfcf 100%);\n            background-size: 8.49px 8.49px;\n            border-left: 1px solid #cfcfcf;\n            border-right: 1px solid #cfcfcf;\n            border-top: 1px solid #cfcfcf;\n            color: black;\n            content: 'Draft Block';\n            display: block;\n            font-family: monospace;\n            font-size: 1rem;\n            left: 0;\n            padding-left: 5px;\n            position: absolute;\n            top: -27px;\n            width: 100%;\n        }\n\n        opacity: .4;\n\n        &amp;.is-selected {\n            opacity: .8;\n        }\n    }\n}\n<\/code><\/pre>\n<p>Lis\u00e4\u00e4 seuraava laajennuksen juuritiedostoon (tapauksessamme <code>wholesome-plugin.php<\/code>).<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_remove_blocks_in_draft( $pre_render, $block) {\n\n    if (is_admin()) {\n        return $pre_render;\n    }\n\n    if (isset( $block['attrs']) &amp;&amp;\n        isset( $block['attrs']['isBlockDraft']) &amp;&amp;\n        $block['attrs']['isBlockDraft']) {\n        return false;\n    }\n\n    return $pre_render;\n}\nadd_filter( 'pre_render_block', 'wholesomecode_wholesome_plugin_remove_blocks_in_draft', 0, 2 );\n<\/code><\/pre>\n<p>T\u00e4m\u00e4 lopettaa luonnoslohkojen tulostuksen k\u00e4ytt\u00f6liittym\u00e4ss\u00e4.<\/p>\n<h2>Sen n\u00e4keminen toiminnassa<\/h2>\n<p>Muista k\u00e4\u00e4nt\u00e4\u00e4 <code>npm start<\/code>ja voimme nyt asettaa mink\u00e4 tahansa tyyppisen lohkon luonnoslohkoksi:<\/p>\n<p>Luonnoslohkojen asettaminen ja poistaminen<\/p>\n<ul>\n<li>Tutustu <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">sis\u00e4kk\u00e4isten alilohkojen luomiseen <code>InnerBlocks<\/code>komponentin avulla<\/a><\/li>\n<li>Tutustu <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">post-metakenttien k\u00e4ytt\u00f6\u00f6n Gutenberg-lohkoissa<\/a><\/li>\n<li>Kokeile <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">lis\u00e4t\u00e4 ohjaimia viestien sivupalkkiin<\/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>Edellisess\u00e4 oppaassamme tarkastelimme InspectorControlsin lis\u00e4\u00e4mist\u00e4 mukautettuihin lohkoihimme, jotta voimme k\u00e4ytt\u00e4\u00e4 ohjaimia lohkon sivupalkissa. T\u00e4ss\u00e4 oppaassa aiomme rakentaa sen ja lis\u00e4t\u00e4&#8230;<\/p>\n","protected":false},"author":1,"featured_media":221177,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[782,938,719,895],"tags":[1166],"class_list":["post-228916","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-avoimen-laehdekoodin-ohjelmisto","category-gutenberg-5","category-kehittaejae","category-koodi","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/228916","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=228916"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/228916\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/221177"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=228916"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=228916"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=228916"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}