{"id":228261,"date":"2022-10-19T12:39:00","date_gmt":"2022-10-19T09:39:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228261"},"modified":"2022-11-09T01:33:58","modified_gmt":"2022-11-08T22:33:58","slug":"laegg-till-kontroller-i-sidofaeltet-core-och-third-party-block-med-filter-och-komponenter-av-hoegre-ordning","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/laegg-till-kontroller-i-sidofaeltet-core-och-third-party-block-med-filter-och-komponenter-av-hoegre-ordning\/","title":{"rendered":"L\u00e4gg till kontroller i sidof\u00e4ltet Core och Third Party Block med filter och komponenter av h\u00f6gre ordning"},"content":{"rendered":"\n<p>I v\u00e5r senaste guide tittade vi p\u00e5 <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">att l\u00e4gga <code>InspectorControls<\/code>till v\u00e5ra anpassade block<\/a> f\u00f6r att g\u00f6ra det m\u00f6jligt f\u00f6r oss att anv\u00e4nda kontroller i blockets sidof\u00e4lt. I den h\u00e4r guiden kommer vi att bygga vidare p\u00e5 det och l\u00e4gga till en v\u00e4xlingskontroll till blockets sidof\u00e4lt f\u00f6r alla v\u00e5ra block, inklusive alla k\u00e4rn- och tredjepartsblock som vi anv\u00e4nder.<\/p>\n<p>I den h\u00e4r guiden kommer vi att skapa funktionen &quot;utkastblock&quot; som fanns i mitt plugin f\u00f6r <a href=\"https:\/\/wholesomecode.ltd\/plugins\/wholesome-publishing\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Wholesome Publishing<\/a>.<\/p>\n<h2>F\u00f6ruts\u00e4ttningar<\/h2>\n<ul>\n<li>Har f\u00f6ljt guiden <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Skapa ett plugin f\u00f6r WordPress Block Editor (Gutenberg) .<\/a><\/li>\n<li>Har f\u00f6ljt guiden <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">L\u00e4gg till en sidof\u00e4lt till ditt anpassade WordPress-block med<\/a> InspectorControls<\/li>\n<\/ul>\n<h2>F\u00f6rbered dig f\u00f6r den h\u00e4r guiden<\/h2>\n<p>Om du har f\u00f6ljt <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guiden L\u00e4gg till en sidof\u00e4lt<\/a>, bra. Men jag kommer nu att beh\u00f6va be dig att \u00e5ngra \u00e4ndringarna du gjorde i steg 4 i den guiden (Draft Block Toggle), eftersom vi kommer att extrapolera den funktionen och till\u00e4mpa den p\u00e5 alla v\u00e5ra block.<\/p>\n<p>Om du inte har f\u00f6ljt den guiden, se till att du f\u00f6ljer den upp till steg 4 f\u00f6rst, eftersom den h\u00e4r guiden f\u00f6ljer direkt p\u00e5 den.<\/p>\n<h2>Skapa komponenter av h\u00f6gre ordning<\/h2>\n<p>Higher Order Components (HoC) anv\u00e4nds i React f\u00f6r att linda en befintlig komponent och antingen skicka funktionalitet eller rekvisita till den komponenten. De kallas HoCs eftersom de infogas i DOM f\u00f6re den befintliga komponenten, eller s\u00e5 kan man s\u00e4ga i en &quot;H\u00f6gre ordning&quot;.<\/p>\n<p>Vi kommer att skapa tv\u00e5 nya HoCs, s\u00e5 skapa en ny mapp i din plugin som heter <code>components<\/code>och skapa f\u00f6ljande tv\u00e5 filer:<\/p>\n<ul>\n<li><code>\/components\/withInspectorControls.js<\/code><\/li>\n<li><code>\/components\/withIsBlockDraft.js<\/code><\/li>\n<\/ul>\n<h3>med InspectorControls<\/h3>\n<p>\u00d6ppna <code>\/components\/withInspectorControls.js<\/code>och l\u00e4gg till f\u00f6ljande kod:<\/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>Du kanske k\u00e4nner igen den h\u00e4r koden fr\u00e5n steg 4 i <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">sidof\u00e4ltsguiden<\/a>. Det \u00e4r ungef\u00e4r samma kod, f\u00f6rutom att vi har packat in den i <code>createHigherOrderComponent<\/code>.<\/p>\n<p>Den <code>createHigherOrderComponent<\/code>till\u00e5ter oss att komma \u00e5t <code>BlockEdit<\/code>detta \u00e4r den ursprungliga redigeringsfunktionen f\u00f6r blocket som denna komponent kommer att radbryta. Vi kommer att uppt\u00e4cka hur detta skickas in n\u00e4r vi skapar filtren inom kort.<\/p>\n<h3>withIsBlockDraft<\/h3>\n<p>\u00d6ppna <code>\/components\/withIsBlockDraft.js<\/code>och klistra in f\u00f6ljande kod:<\/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>Detta <code>createHigherOrderComponent<\/code>till\u00e5ter oss att komma \u00e5t <code>BlockListBlock<\/code>vilket l\u00e5ter oss skicka attribut till editorblocket. Vi anv\u00e4nder den h\u00e4r f\u00f6r att st\u00e4lla in en &#8217;draft-block&#8217;-klass till omslaget om Draft Block-v\u00e4xlingen har st\u00e4llts in. Detta \u00e5terskapar det vi tidigare hade lagt till i redigeringsmetoden i steg 4 i <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">sidof\u00e4ltsguiden<\/a>.<\/p>\n<p>\u00c5terigen m\u00e5ste vi st\u00e4lla in ett filter f\u00f6r att <code>BlockListBlock<\/code>skickas till denna kontroll.<\/p>\n<h2>St\u00e4ll in filtren<\/h2>\n<p>L\u00e4gg till f\u00f6ljande h\u00f6gst upp i <code>\/src\/index.js<\/code>filen:<\/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>Vi borde verkligen t\u00e4nka p\u00e5 att \u00e4ndra strukturen p\u00e5 v\u00e5rt plugin s\u00e5 att koden som registrerar blocket importeras fr\u00e5n en annan fil, men f\u00f6r enkelhetens skull kommer vi att anv\u00e4nda samma fil.<\/p>\n<h3>Filtrera attributen<\/h3>\n<p>L\u00e4gg till f\u00f6ljande kod i samma fil:<\/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>Det h\u00e4r filtret l\u00e4gger till ytterligare attribut till alla block i bygget. I teorin skulle vi kunna filtrera detta till att bara vara f\u00f6r vissa block, men vi kommer inte att g\u00f6ra det f\u00f6r v\u00e5rt exempel.<\/p>\n<p>Om vi \u200b\u200bville begr\u00e4nsa det h\u00e4r filtret till vissa block skulle vi kunna g\u00f6ra det s\u00e5 h\u00e4r:<\/p>\n<pre><code>const { attributes, name } = settings;\nif ('core\/paragraph' !== name) {\n  return;\n}\n<\/code><\/pre>\n<h3>Filtrera InspectorControls<\/h3>\n<p>L\u00e4gg till f\u00f6ljande kod i <code>\/src\/index.js<\/code>filen:<\/p>\n<pre><code>addFilter(\n    'editor.BlockEdit',\n    'wholesome-plugin\/block-draft-inspector',\n    withInspectorControls,\n);\n<\/code><\/pre>\n<p>H\u00e4r filtrerar vi <code>BlockEdit<\/code>s\u00e5 att det g\u00e5r igenom detta till v\u00e5r HoC som vi skapade tidigare.<\/p>\n<p>Om vi \u200b\u200bville begr\u00e4nsa detta filter till vissa block skulle vi g\u00f6ra f\u00f6ljande <strong>inom HoC<\/strong> :<\/p>\n<pre><code>if ('core\/paragraph' === props.name) {\n  return &lt;BlockEdit { ...props } \/&gt;\n}\n<\/code><\/pre>\n<h3>Filtrera BlockListBlocket<\/h3>\n<p>L\u00e5t oss slutligen l\u00e4gga till filtret f\u00f6r v\u00e5r <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>\u00c5terigen, om du vill begr\u00e4nsa detta block kan du g\u00f6ra detta inuti HoC.<\/p>\n<h2>L\u00e4gg till PHP och SCSS<\/h2>\n<p>L\u00e4gg till f\u00f6ljande f\u00f6r <code>\/editor.scss<\/code>att f\u00e5 v\u00e5r Draft-banner att se snygg ut (detta kan g\u00f6ras mycket b\u00e4ttre, men det h\u00e4r \u00e4r bara ett exempel).<\/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>L\u00e4gg till f\u00f6ljande i rotfilen f\u00f6r plugin-programmet (i v\u00e5rt fall <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>Detta kommer att stoppa utkastsblocken fr\u00e5n att matas ut p\u00e5 fronten.<\/p>\n<h2>Att se det i aktion<\/h2>\n<p>Kom ih\u00e5g att kompilera med <code>npm start<\/code>och vi kan nu st\u00e4lla in alla typer av block till ett utkastblock:<\/p>\n<p>St\u00e4lla in och avaktivera utkastsblock<\/p>\n<ul>\n<li>Ta en titt p\u00e5 att skapa <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">kapslade underordnade block med <code>InnerBlocks<\/code>komponenten<\/a><\/li>\n<li>Ta en titt p\u00e5 hur du <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">anv\u00e4nder post-metaf\u00e4lt i Gutenberg-block<\/a><\/li>\n<li>Testa att <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">l\u00e4gga till kontroller i inl\u00e4ggets sidof\u00e4lt<\/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>I v\u00e5r senaste guide tittade vi p\u00e5 att l\u00e4gga till InspectorControls till v\u00e5ra anpassade block f\u00f6r att g\u00f6ra det m\u00f6jligt f\u00f6r oss att anv\u00e4nda kontroller i blockets sidof\u00e4lt. I den h\u00e4r guiden ska vi bygga vidare p\u00e5 det och l\u00e4gga till&#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":[942,901,787,724],"tags":[1173],"class_list":["post-228261","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg-9","category-koda","category-programvara-med-oeppen-kaellkod","category-utvecklaren","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228261","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=228261"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228261\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/221177"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=228261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=228261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=228261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}