{"id":228333,"date":"2022-10-19T10:41:00","date_gmt":"2022-10-19T07:41:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228333"},"modified":"2022-11-09T01:55:54","modified_gmt":"2022-11-08T22:55:54","slug":"dodaj-kontrolki-do-paska-bocznego-posta-za-pomoca-plugindocumentsettingpanel","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/dodaj-kontrolki-do-paska-bocznego-posta-za-pomoca-plugindocumentsettingpanel\/","title":{"rendered":"Dodaj kontrolki do paska bocznego posta za pomoc\u0105 PluginDocumentSettingPanel"},"content":{"rendered":"\n<p>Jak dot\u0105d przyjrzeli\u015bmy si\u0119 blokowi bocznemu, <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">dodaj\u0105c <code>InspectorControls<\/code>nasze niestandardowe bloki<\/a> i <a href=\"https:\/\/wholesomecode.ltd\/guides\/block-sidebar-filters-higher-order-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">dodaj\u0105c kontrolki do g\u0142\u00f3wnego i zewn\u0119trznego paska bocznego z filtrami i komponentami wy\u017cszego rz\u0119du<\/a>. W tym przewodniku przyjrzymy si\u0119 dodawaniu kontrolek do paska bocznego posta.<\/p>\n<p>Ustawienia wy\u015bwietlania na pasku bocznym posta<\/p>\n<p>W tym przewodniku zamierzamy utworzy\u0107 kontrolk\u0119 \u201eUstawienia wy\u015bwietlania&quot;, kt\u00f3ra pozwoli tylko zalogowanym u\u017cytkownikom przegl\u0105da\u0107 posty po prze\u0142\u0105czeniu.<\/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>Przeczytaj przewodnik U\u017cywanie <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">p\u00f3l post meta do przechowywania atrybut\u00f3w w edytorze blok\u00f3w WordPress (Gutenberg)<\/a><\/li>\n<\/ul>\n<h2>Rejestracja Post Meta w PHP<\/h2>\n<p>Wykonaj kroki w przewodniku <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">tworzenia wtyczek,<\/a> aby da\u0107 nam nasz\u0105 pocz\u0105tkow\u0105 wtyczk\u0119, om\u00f3wimy to w naszym przewodniku.<\/p>\n<p>Po wykonaniu tej czynno\u015bci skonfigurujmy meta postu, kt\u00f3rej potrzebujemy do kontroli prze\u0142\u0105czania naszych uprawnie\u0144. Otw\u00f3rz plik g\u0142\u00f3wny wtyczki (w naszym przypadku <code>wholesome-plugin.php<\/code>) i dodaj nast\u0119puj\u0105cy kod:<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_register_post_meta() {\n    register_meta(\n        'post',\n        '_wholesomecode_wholesome_plugin_require_login',\n        [\n            'auth_callback' =&gt; '__return_true',\n            'default'       =&gt; false,\n            'show_in_rest'  =&gt; true,\n            'single'        =&gt; true,\n            'type'          =&gt; 'boolean',\n        ]\n    );\n}\nadd_action( 'init', 'wholesomecode_wholesome_plugin_register_post_meta' );\n<\/code><\/pre>\n<p>Je\u015bli zajrza\u0142e\u015b do <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">przewodnika po polach po meta<\/a>, powinno to wygl\u0105da\u0107 troch\u0119 znajomo. Wszystko, co robi, to umo\u017cliwia dost\u0119p do naszej meta postu z poziomu edytora blok\u00f3w (Gutenberg).<\/p>\n<p>W swojej wtyczce utw\u00f3rz nowy folder o nazwie <code>components<\/code>i utw\u00f3rz nast\u0119puj\u0105cy plik <code>\/components\/Sidebar.js<\/code>. W tym pliku wklej nast\u0119puj\u0105cy kod:<\/p>\n<pre><code>import { ToggleControl } from '@wordpress\/components';\nimport { dispatch, select } from '@wordpress\/data';\nimport { PluginDocumentSettingPanel } from '@wordpress\/edit-post';\nimport { Component } 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;PluginDocumentSettingPanel\n            name=\"wholesomecode-wholesome-plugin-sidebar\"\n            title={ __( 'Display Settings', 'wholesome-plugin') }\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              } }\n              \/&gt;\n          &lt;\/PluginDocumentSettingPanel&gt;\n        );\n    }\n}\n<\/code><\/pre>\n<p>Widzieli\u015bmy <code>ToggleControl<\/code>wcze\u015bniej w naszych poprzednich przewodnikach po pasku bocznym, ale panel, kt\u00f3rego u\u017cywamy, jest nieco nowy. U\u017cywamy <code>PluginDocumentSettingPanel<\/code>do okre\u015blenia, \u017ce \u200b\u200bta kontrolka powinna pojawi\u0107 si\u0119 na pasku bocznym posta.<\/p>\n<p>Zauwa\u017c te\u017c, \u017ce zamiast wci\u0105ga\u0107 atrybuty, otrzymujemy nasze metadane z nast\u0119puj\u0105cym kodem:<\/p>\n<pre><code>const meta = select( 'core\/editor' ).getEditedPostAttribute( 'meta' );\nconst exampleToggle = meta['_wholesomecode_wholesome_plugin_require_login'];\n<\/code><\/pre>\n<p>i zapisujemy go za pomoc\u0105 naszej <code>onChange<\/code>metody za pomoc\u0105 tego kodu:<\/p>\n<pre><code>onChange={ (value) =&gt; {\n  dispatch( 'core\/editor' ).editPost( {\n    meta: {\n      '_wholesomecode_wholesome_plugin_require_login': value,\n    },\n  } );\n} }\n<\/code><\/pre>\n<p>To aktualizuje meta bie\u017c\u0105cego posta. W rzeczywisto\u015bci nie zostanie zapisany, dop\u00f3ki nie zapiszemy naszego posta, wi\u0119c ca\u0142e zapisywanie jest obs\u0142ugiwane za nas.<\/p>\n<p>Jest jeszcze jedna ostatnia rzecz, kt\u00f3r\u0105 musimy zrobi\u0107 z naszym paskiem bocznym posta, a mianowicie go zarejestrowa\u0107. Na g\u00f3rze <code>\/src\/index.js<\/code>pliku dodaj nast\u0119puj\u0105ce informacje:<\/p>\n<pre><code>import { registerPlugin } from '@wordpress\/plugins';\nimport render from '.\/components\/Sidebar';\n\nregisterPlugin(\n    'wholesomecode-wholesome-plugin-sidebar',\n    {\n        icon: 'visibility',\n        render,\n    }\n);\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<p>Tutaj u\u017cywamy <code>registerPlugin<\/code>do zarejestrowania paska bocznego. Przekazujemy komponent Sidebar, kt\u00f3ry stworzyli\u015bmy jako metod\u0119 \u201erender&#8221; wraz z ikon\u0105.<\/p>\n<h2>Dodaj logik\u0119 Ukryj, je\u015bli si\u0119 wylogujesz<\/h2>\n<p>Ponownie otw\u00f3rz plik g\u0142\u00f3wny wtyczki (w naszym przypadku <code>wholesome-plugin.php<\/code>) i wrzu\u0107 nast\u0119puj\u0105cy kod. S\u0105 na to o wiele lepsze sposoby, ale pisz\u0119 kr\u00f3tko na przyk\u0142ad:<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_require_login() {\n    global $post, $wp_query;\n\n    if (is_admin() ||! is_singular() ||! $post) {\n        return;\n    }\n\n    if (is_user_logged_in()) {\n        return;\n    }\n\n    $login_required = get_post_meta( $post-&gt;ID, '_wholesomecode_wholesome_plugin_require_login', true );\n\n    if (! $login_required) {\n        return;\n    }\n\n    $wp_query-&gt;set_404();\n    status_header( 401 );\n}\nadd_action( 'wp', 'wholesomecode_wholesome_plugin_require_login' );\n<\/code><\/pre>\n<p>Ten kod po prostu zwraca nasz szablon 404 i stan 401 (Nieautoryzowany), je\u015bli prze\u0142\u0105cznik jest ustawiony na warto\u015b\u0107 prawda.<\/p>\n<p>Przyjrzyjmy si\u0119 dzia\u0142aj\u0105cym kontrolkom paska bocznego posta.<\/p>\n<p>Kontrolowanie uprawnie\u0144 za pomoc\u0105 paska bocznego postu<\/p>\n<p>W tym przyk\u0142adzie prze\u0142\u0105czamy prze\u0142\u0105cznik na true, wy\u015bwietlamy nasz\u0105 stron\u0119 w nowym (wylogowanym) oknie przegl\u0105darki i po od\u015bwie\u017ceniu widzimy, \u017ce zwraca stron\u0119 404, nast\u0119pnie prze\u0142\u0105czamy j\u0105 na false, od\u015bwie\u017canie i voila, post jest ponownie widoczny. Magia Gutenberga!<\/p>\n<ul>\n<li>Sp\u00f3jrz na tworzenie samodzielnego <a href=\"https:\/\/wholesomecode.ltd\/guides\/custom-sidebar-pluginsidebar\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">niestandardowego paska bocznego<\/a><\/li>\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>Do tej pory przyjrzeli\u015bmy si\u0119 blokowi bocznemu, dodaj\u0105c InspectorControls do naszych niestandardowych blok\u00f3w i dodaj\u0105c kontrolki do podstawowego i zewn\u0119trznego paska bocznego z filtrami i wy\u017cszymi &#8230;<\/p>\n","protected":false},"author":1,"featured_media":221243,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[721,940,919,897,866],"tags":[1169],"class_list":["post-228333","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-deweloper","category-gutenberg-7","category-inny","category-kod","category-wordpress-7","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228333","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=228333"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228333\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/221243"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=228333"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=228333"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=228333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}