{"id":228353,"date":"2022-10-19T14:03:00","date_gmt":"2022-10-19T11:03:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228353"},"modified":"2022-11-09T02:01:15","modified_gmt":"2022-11-08T23:01:15","slug":"utworz-niestandardowy-pasek-boczny-za-pomoca-paska-bocznego-wtyczki","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/utworz-niestandardowy-pasek-boczny-za-pomoca-paska-bocznego-wtyczki\/","title":{"rendered":"Utw\u00f3rz niestandardowy pasek boczny za pomoc\u0105 paska bocznego wtyczki"},"content":{"rendered":"\n<p><a href=\"https:\/\/hashnode.com\/@wholesomecode\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/p>\n<p>Przyjrzeli\u015bmy si\u0119 niestandardowym <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">paskom<\/a> bocznym bloku, <a href=\"https:\/\/wholesomecode.ltd\/guides\/block-sidebar-filters-higher-order-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">paskom bocznym blok\u00f3w innych firm<\/a> za po\u015brednictwem InspectorControls oraz sposobom dodawania element\u00f3w steruj\u0105cych do <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">paska bocznego posta<\/a>. W tym przewodniku przyjrzymy si\u0119 umieszczeniu naszych kontrolek na ich w\u0142asnym, niestandardowym pasku bocznym.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168447-61e7cd4993d41.png\" alt=\"Utw\u00f3rz niestandardowy pasek boczny za pomoc\u0105 paska bocznego wtyczki\" \/>Nasz niestandardowy pasek boczny<\/p>\n<p>Powy\u017cszy zrzut ekranu pokazuje, co zamierzamy zbudowa\u0107. W wi\u0119kszo\u015bci przypadk\u00f3w zamierzamy tylko nieznacznie zmieni\u0107 kod, kt\u00f3ry zbudowali\u015bmy w <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">przewodniku po pasku bocznym Post<\/a>, wi\u0119c upewnij si\u0119, \u017ce najpierw uko\u0144czy\u0142e\u015b ten przewodnik.<\/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>Przeczytaj poprzednie przewodniki po pasku bocznym (<a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">pasek boczny dla bloku niestandardowego<\/a> i <a href=\"https:\/\/wholesomecode.ltd\/guides\/block-sidebar-filters-higher-order-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">pasek boczny dla istniej\u0105cego bloku<\/a> )<\/li>\n<li>Post\u0119powa\u0142em zgodnie z instrukcj\u0105 <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Dodaj kontrolki do paska bocznego posta za pomoc\u0105<\/a> przewodnika PluginDocumentSettingPanel<\/li>\n<\/ul>\n<p>U\u017cyjemy kodu z <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">przewodnika po pasku bocznym Post<\/a>, wi\u0119c je\u015bli nie uko\u0144czy\u0142e\u015b tego przewodnika, zr\u00f3b to. W porz\u0105dku, poczekam.<\/p>\n<p>Otw\u00f3rz <code>\/components\/Sidebar.js<\/code>plik utworzony w poprzednim przewodniku. Zast\u0105pimy wiersz, kt\u00f3ry importuje <code>PluginDocumentSettingPanel<\/code>nast\u0119puj\u0105cy kod:<\/p>\n<pre><code>import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress\/edit-post';\n<\/code><\/pre>\n<p>Teraz zast\u0105p znaczniki <code>&lt;PluginDocumentSettingPanel...<\/code>i <code>&lt;PluginSidebar...<\/code>gotowe! Prawid\u0142owy?<\/p>\n<p>C\u00f3\u017c, tak i nie. To daje nam pasek boczny, ale jest brzydki! Potrzebujemy kilku paneli, aby kontrolki by\u0142y poprawnie sformatowane.<\/p>\n<p>Brakuje r\u00f3wnie\u017c paska bocznego w menu \u201eOpcje&quot;. Aby rozwi\u0105za\u0107 ten problem, musimy wdro\u017cy\u0107 <code>PluginSidebarMoreMenuItem<\/code>.<\/p>\n<p>Edytuj <code>\/components\/Sidebar.js<\/code>ponownie i wklej nast\u0119puj\u0105cy kod:<\/p>\n<pre><code>import { Panel, PanelBody, ToggleControl } from '@wordpress\/components';\nimport { dispatch, select } from '@wordpress\/data';\nimport { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress\/edit-post';\nimport { Component, Fragment } from '@wordpress\/element';\nimport { __ } from '@wordpress\/i18n';\n\nexport default class Sidebar extends Component {\n    render() {\n        const meta = select( 'core\/editor' ).getEditedPostAttribute( 'meta' );\n        const exampleToggle = meta['_wholesomecode_wholesome_plugin_require_login'];\n\n        return (&lt;Fragment&gt;\n                &lt;PluginSidebarMoreMenuItem target=\"wholesomecode-wholesome-plugin-sidebar\"&gt;\n                { __( 'Display Settings', 'wholesome-plugin') }\n                &lt;\/PluginSidebarMoreMenuItem&gt;\n                &lt;PluginSidebar\n                    name=\"wholesomecode-wholesome-plugin-sidebar\"\n                    title={ __( 'Display Settings', 'wholesome-plugin') }\n                &gt;\n                    &lt;Panel&gt;\n                        &lt;PanelBody\n                            title={ __( 'Display Settings', 'wholesome-plugin') }\n                            icon=\"visibility\"\n                        &gt;\n                            &lt;ToggleControl\n                                checked={ exampleToggle }\n                                help={ __( 'User must be logged-in in to view this post.', 'wholesome-plugin') }\n                                label={ __( 'Require Login', 'wholesome-plugin') }\n                                onChange={ (value) =&gt; {\n                                    dispatch( 'core\/editor' ).editPost( {\n                                        meta: {\n                                            '_wholesomecode_wholesome_plugin_require_login': value,\n                                        },\n                                    } );\n                                    this.setState( { exampleToggle: value } );\n                                } }\n                            \/&gt;\n                        &lt;\/PanelBody&gt;\n                    &lt;\/Panel&gt;\n                &lt;\/PluginSidebar&gt;\n            &lt;\/Fragment&gt;\n        );\n    }\n}\n<\/code><\/pre>\n<p>To lepiej, u\u017cyli\u015bmy dok\u0142adnie tego samego kodu, co w naszym poprzednim przyk\u0142adzie paska bocznego posta, ale teraz wygl\u0105da to tak samo.<\/p>\n<p>Teraz, gdy mamy ju\u017c nasz kod, nie zapomnij go uruchomi\u0107 <code>npm start<\/code>, aby go skompilowa\u0107, a teraz powinien wygl\u0105da\u0107 nast\u0119puj\u0105co:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168447-61e7cd4bd2a51.gif\" alt=\"Utw\u00f3rz niestandardowy pasek boczny za pomoc\u0105 paska bocznego wtyczki\" \/>Nasz niestandardowy pasek boczny w akcji<\/p>\n<p>Podobnie jak w naszym przewodniku po pasku bocznym wtyczek, prze\u0142\u0105czamy prze\u0142\u0105cznik wymaganego logowania, od\u015bwie\u017camy wylogowany post, wy\u0142\u0105czamy go i od\u015bwie\u017camy ponownie. Po prze\u0142\u0105czeniu nie mo\u017cemy uzyska\u0107 dost\u0119pu do wpisu.<\/p>\n<p>Nazwa naszego paska bocznego to <code>wholesomecode-wholesome-plugin-sidebar'<\/code>. Je\u015bli chcemy, mo\u017cemy automatycznie otwiera\u0107 i zamyka\u0107 ten pasek boczny z dowolnego miejsca w edytorze. Za\u0142\u00f3\u017cmy, \u017ce mamy przycisk z akcj\u0105 klikni\u0119cia, kt\u00f3ry to robi.<\/p>\n<p>Kod do dynamicznego otwierania paska bocznego jest nast\u0119puj\u0105cy:<\/p>\n<pre><code>wp.data.dispatch('core\/edit-post').openGeneralSidebar( 'wholesomecode-wholesome-plugin-sidebar\/wholesomecode-wholesome-plugin-sidebar' );\n<\/code><\/pre>\n<p>Podobnie mo\u017cemy dynamicznie zamkn\u0105\u0107 pasek boczny w nast\u0119puj\u0105cy spos\u00f3b:<\/p>\n<pre><code>wp.data.dispatch('core\/edit-post').closeGeneralSidebar( 'wholesomecode-wholesome-plugin-sidebar\/wholesomecode-wholesome-plugin-sidebar' );\n<\/code><\/pre>\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>Sp\u00f3jrz na <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">u\u017cycie post meta p\u00f3l w blokach Gutenberga<\/a> (je\u015bli jeszcze tego nie zrobi\u0142e\u015b) i <a href=\"https:\/\/wholesomecode.ltd\/guides\/custom-meta-boxes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Gutenberg Component Driven Custom Meta Boxes<\/a><\/li>\n<li>Sp\u00f3jrz na <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">tworzenie strony ustawie\u0144 za pomoc\u0105 komponent\u00f3w Gutenberg<\/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>Przyjrzeli\u015bmy si\u0119 niestandardowym paskom bocznym blok\u00f3w, paskom bocznym blok\u00f3w innych firm za po\u015brednictwem InspectorControls i sposobom dodawania element\u00f3w steruj\u0105cych do paska bocznego posta. W tym przewodniku przyjrzymy si\u0119 &#8230;<\/p>\n","protected":false},"author":1,"featured_media":221001,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[721,940,897,805,845,866],"tags":[1169],"class_list":["post-228353","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-deweloper","category-gutenberg-7","category-kod","category-php-7","category-samouczki","category-wordpress-7","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228353","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=228353"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228353\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/221001"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=228353"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=228353"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=228353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}