{"id":228326,"date":"2022-10-19T12:16:00","date_gmt":"2022-10-19T09:16:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228326"},"modified":"2022-11-09T01:53:21","modified_gmt":"2022-11-08T22:53:21","slug":"dodaj-elementy-sterujace-do-paska-bocznego-rdzenia-i-bloku-stron-trzecich-z-filtrami-i-komponentami-wyzszego-rzedu","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/dodaj-elementy-sterujace-do-paska-bocznego-rdzenia-i-bloku-stron-trzecich-z-filtrami-i-komponentami-wyzszego-rzedu\/","title":{"rendered":"Dodaj elementy steruj\u0105ce do paska bocznego rdzenia i bloku stron trzecich z filtrami i komponentami wy\u017cszego rz\u0119du"},"content":{"rendered":"\n<p>W naszym ostatnim przewodniku przyjrzeli\u015bmy si\u0119 <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">dodawaniu <code>InspectorControls<\/code>do naszych niestandardowych blok\u00f3w,<\/a> aby umo\u017cliwi\u0107 nam korzystanie z element\u00f3w steruj\u0105cych na pasku bocznym bloku. W tym przewodniku zamierzamy na tym oprze\u0107 i doda\u0107 kontrol\u0119 prze\u0142\u0105czania do paska bocznego bloku wszystkich naszych blok\u00f3w, w tym wszystkich blok\u00f3w podstawowych i innych firm, kt\u00f3rych u\u017cywamy.<\/p>\n<p>W tym przewodniku zamierzamy utworzy\u0107 funkcj\u0119 \u201ebloku roboczego&quot;, kt\u00f3ra pojawi\u0142a si\u0119 w mojej <a href=\"https:\/\/wholesomecode.ltd\/plugins\/wholesome-publishing\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wtyczce Wholesome Publishing<\/a>.<\/p>\n<h2>Warunki wst\u0119pne<\/h2>\n<ul>\n<li>Post\u0119powa\u0142em zgodnie z przewodnikiem Tworzenie <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wtyczki do edytora blok\u00f3w WordPress (Gutenberg)<\/a><\/li>\n<li>Post\u0119powa\u0142em zgodnie z przewodnikiem Dodaj <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">pasek boczny do niestandardowego bloku WordPress za pomoc\u0105 InspectorControls<\/a><\/li>\n<\/ul>\n<h2>Przygotowanie do tego przewodnika<\/h2>\n<p>Je\u015bli post\u0119powa\u0142e\u015b zgodnie z instrukcj\u0105 <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">dodawania paska bocznego<\/a>, \u015bwietnie. Ale teraz b\u0119d\u0119 musia\u0142 poprosi\u0107 o cofni\u0119cie zmian wprowadzonych w kroku 4 tego przewodnika (Prze\u0142\u0105czanie bloku roboczego), poniewa\u017c zamierzamy ekstrapolowa\u0107 t\u0119 funkcjonalno\u015b\u0107 i zastosowa\u0107 j\u0105 do wszystkich naszych blok\u00f3w.<\/p>\n<p>Je\u015bli nie post\u0119powa\u0142e\u015b zgodnie z tym przewodnikiem, upewnij si\u0119, \u017ce najpierw wykona\u0142e\u015b krok 4, poniewa\u017c ten przewodnik jest kontynuacj\u0105 tego.<\/p>\n<h2>Tw\u00f3rz komponenty wy\u017cszego rz\u0119du<\/h2>\n<p>Komponenty wy\u017cszego rz\u0119du (HoC) s\u0105 u\u017cywane w React, aby owin\u0105\u0107 istniej\u0105cy komponent i przekaza\u0107 funkcjonalno\u015b\u0107 lub w\u0142a\u015bciwo\u015bci do tego komponentu. Nazywa si\u0119 je HoCs, poniewa\u017c s\u0105 wstawiane do DOM przed istniej\u0105cym komponentem, lub mo\u017cna powiedzie\u0107 w \u201eWy\u017cszym Porz\u0105dku&#8221;.<\/p>\n<p>Zamierzamy utworzy\u0107 dwa nowe HoCs, wi\u0119c utw\u00f3rz nowy folder we wtyczce o nazwie <code>components<\/code>i utw\u00f3rz nast\u0119puj\u0105ce dwa pliki:<\/p>\n<ul>\n<li><code>\/components\/withInspectorControls.js<\/code><\/li>\n<li><code>\/components\/withIsBlockDraft.js<\/code><\/li>\n<\/ul>\n<h3>withInspectorControls<\/h3>\n<p>Otw\u00f3rz <code>\/components\/withInspectorControls.js<\/code>i dodaj nast\u0119puj\u0105cy 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>Mo\u017cesz rozpozna\u0107 ten kod od kroku 4 <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">przewodnika po pasku bocznym<\/a>. To prawie ten sam kod, z wyj\u0105tkiem tego, \u017ce opakowali\u015bmy go w <code>createHigherOrderComponent<\/code>.<\/p>\n<p><code>createHigherOrderComponent<\/code>Pozwala nam na dost\u0119p do tej <code>BlockEdit<\/code>oryginalnej funkcji edycji bloku, kt\u00f3ry ten komponent b\u0119dzie zawija\u0142. Wkr\u00f3tce dowiemy si\u0119, jak to jest przekazywane, gdy utworzymy filtry.<\/p>\n<h3>withIsBlockDraft<\/h3>\n<p>Otw\u00f3rz <code>\/components\/withIsBlockDraft.js<\/code>i wklej nast\u0119puj\u0105cy 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>To <code>createHigherOrderComponent<\/code>pozwala nam na dost\u0119p <code>BlockListBlock<\/code>, kt\u00f3ry pozwala nam przekaza\u0107 atrybuty do opakowania bloku edytora. U\u017cywamy go tutaj, aby ustawi\u0107 klas\u0119 \u201edraft-block&#8221; w opakowaniu, je\u015bli ustawiono prze\u0142\u0105cznik Draft Block. Odtwarza to, co wcze\u015bniej dodali\u015bmy do metody edycji w kroku 4 <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">przewodnika po pasku bocznym<\/a>.<\/p>\n<p>Znowu musimy ustawi\u0107 filtr, kt\u00f3ry ma <code>BlockListBlock<\/code>by\u0107 przekazany do tej kontrolki.<\/p>\n<h2>Skonfiguruj filtry<\/h2>\n<p>Na g\u00f3rze <code>\/src\/index.js<\/code>pliku dodaj nast\u0119puj\u0105ce informacje:<\/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>Powinni\u015bmy naprawd\u0119 pomy\u015ble\u0107 o zmianie struktury naszej wtyczki, aby kod rejestruj\u0105cy blok by\u0142 importowany z innego pliku, ale dla uproszczenia u\u017cyjemy tego samego pliku.<\/p>\n<h3>Filtruj atrybuty<\/h3>\n<p>W tym samym pliku dodaj nast\u0119puj\u0105cy kod:<\/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>Ten filtr dodaje dodatkowe atrybuty do wszystkich blok\u00f3w w kompilacji. Teoretycznie mogliby\u015bmy filtrowa\u0107 to tylko dla niekt\u00f3rych blok\u00f3w, ale nie b\u0119dziemy tego robi\u0107 dla naszego przyk\u0142adu.<\/p>\n<p>Gdyby\u015bmy chcieli ograniczy\u0107 ten filtr do okre\u015blonych blok\u00f3w, mogliby\u015bmy to zrobi\u0107 w ten spos\u00f3b:<\/p>\n<pre><code>const { attributes, name } = settings;\nif ('core\/paragraph' !== name) {\n  return;\n}\n<\/code><\/pre>\n<h3>Filtruj Inspektora Kontroli<\/h3>\n<p>Dodaj nast\u0119puj\u0105cy kod do <code>\/src\/index.js<\/code>pliku:<\/p>\n<pre><code>addFilter(\n    'editor.BlockEdit',\n    'wholesome-plugin\/block-draft-inspector',\n    withInspectorControls,\n);\n<\/code><\/pre>\n<p>Tutaj filtrujemy <code>BlockEdit<\/code>, aby przekaza\u0142 to do naszego HoC, kt\u00f3ry stworzyli\u015bmy wcze\u015bniej.<\/p>\n<p>Gdyby\u015bmy chcieli ograniczy\u0107 ten filtr do okre\u015blonych blok\u00f3w, <strong>w HoC zrobiliby\u015bmy<\/strong> nast\u0119puj\u0105ce czynno\u015bci :<\/p>\n<pre><code>if ('core\/paragraph' === props.name) {\n  return &lt;BlockEdit { ...props } \/&gt;\n}\n<\/code><\/pre>\n<h3>Filtruj blok listy blok\u00f3w<\/h3>\n<p>Na koniec dodajmy filtr dla naszego <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>Ponownie, je\u015bli chcesz ograniczy\u0107 ten blok, mo\u017cesz to zrobi\u0107 w HoC.<\/p>\n<h2>Dodaj PHP i SCSS<\/h2>\n<p>Dodaj poni\u017csze, <code>\/editor.scss<\/code>aby nasz baner Draft wygl\u0105da\u0142 \u0142adnie (mo\u017cna to zrobi\u0107 znacznie lepiej, ale to tylko przyk\u0142ad).<\/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>Dodaj nast\u0119puj\u0105ce elementy do pliku g\u0142\u00f3wnego wtyczki (w naszym przypadku <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>Spowoduje to zatrzymanie wyprowadzania blok\u00f3w roboczych na interfejsie.<\/p>\n<h2>Widz\u0105c to w akcji<\/h2>\n<p>Pami\u0119taj, aby skompilowa\u0107 <code>npm start<\/code>i mo\u017cemy teraz ustawi\u0107 dowolny typ bloku na blok roboczy:<\/p>\n<p>Ustawianie i rozbrajanie blok\u00f3w roboczych<\/p>\n<ul>\n<li>Sp\u00f3jrz na tworzenie <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">zagnie\u017cd\u017conych blok\u00f3w podrz\u0119dnych za pomoc\u0105 <code>InnerBlocks<\/code>komponentu<\/a><\/li>\n<li>Zobacz, jak <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">u\u017cywa\u0107 meta p\u00f3l postu w blokach Gutenberga<\/a><\/li>\n<li>Spr\u00f3buj <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">doda\u0107 elementy steruj\u0105ce do paska bocznego posta<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>W naszym ostatnim przewodniku przyjrzeli\u015bmy si\u0119 dodaniu InspectorControls do naszych niestandardowych blok\u00f3w, aby umo\u017cliwi\u0107 nam korzystanie z kontrolek na pasku bocznym bloku. W tym przewodniku b\u0119dziemy si\u0119 na tym opiera\u0107 i dodamy&#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":[721,940,897,784],"tags":[1169],"class_list":["post-228326","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-deweloper","category-gutenberg-7","category-kod","category-oprogramowanie-open-source","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228326","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=228326"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228326\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/221177"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=228326"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=228326"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=228326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}