{"id":228466,"date":"2022-10-19T13:57:00","date_gmt":"2022-10-19T10:57:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228466"},"modified":"2022-11-09T02:34:26","modified_gmt":"2022-11-08T23:34:26","slug":"looge-pluginsidebar-abil-kohandatud-kuelgriba","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/looge-pluginsidebar-abil-kohandatud-kuelgriba\/","title":{"rendered":"Looge PluginSidebar abil kohandatud k\u00fclgriba"},"content":{"rendered":"\n<p><a href=\"https:\/\/hashnode.com\/@wholesomecode\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/p>\n<p>Oleme vaadanud kohandatud <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">plokkide k\u00fclgribasid<\/a>, <a href=\"https:\/\/wholesomecode.ltd\/guides\/block-sidebar-filters-higher-order-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">kolmanda osapoole plokkide k\u00fclgribasid<\/a> InspectorControlsi kaudu ja seda, kuidas <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">postituste k\u00fclgribale<\/a> juhtelemente lisada. Selles juhendis vaatleme oma juhtelementide paigutamist nende enda kohandatud k\u00fclgribale.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168447-61e7cd4993d41.png\" alt=\"Looge PluginSidebar abil kohandatud k\u00fclgriba\" \/>Meie kohandatud k\u00fclgriba<\/p>\n<p>\u00dclaltoodud ekraanipilt n\u00e4itab, mida me ehitame. Enamasti muudame lihtsalt <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">postituse k\u00fclgriba juhendis<\/a> loodud koodi veidi, seega veenduge, et olete selle juhendi esmalt t\u00e4itnud.<\/p>\n<h2>Eeldused<\/h2>\n<ul>\n<li>Olete j\u00e4rginud <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPressi plokiredaktori (Gutenbergi) pistikprogrammi loomise<\/a> juhendit<\/li>\n<li>Lugege eelmisi k\u00fclgriba juhendeid (<a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">kohandatud ploki<\/a> jaoks <a href=\"https:\/\/wholesomecode.ltd\/guides\/block-sidebar-filters-higher-order-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">k\u00fclgriba ja olemasoleva ploki jaoks k\u00fclgriba<\/a> )<\/li>\n<li>J\u00e4rginud PluginDocumentSettingPaneli juhendit <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Postituse k\u00fclgribale juhtelementide lisamine<\/a><\/li>\n<\/ul>\n<p>Kasutame <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">postituse k\u00fclgriba juhendi<\/a> koodi, nii et kui te pole seda juhendit t\u00e4itnud, tehke seda. Pole hullu, ma ootan.<\/p>\n<p>Avage <code>\/components\/Sidebar.js<\/code>eelmises juhendis loodud fail. Asendame rea, mis impordib <code>PluginDocumentSettingPanel<\/code>, j\u00e4rgmise koodiga:<\/p>\n<pre><code>import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress\/edit-post';\n<\/code><\/pre>\n<p>N\u00fc\u00fcd asenda m\u00e4rgistus <code>&lt;PluginDocumentSettingPanel...<\/code>ja <code>&lt;PluginSidebar...<\/code>t\u00f6\u00f6 on tehtud! eks?<\/p>\n<p>No jah ja ei. See annab meile k\u00fclgriba, kuid see on kole! Vajame m\u00f5ningaid paneele, et juhtnupud oleksid \u00f5igesti vormindatud.<\/p>\n<p>Samuti puudub &#8216;Valikud&#8217; men\u00fc\u00fcst k\u00fclgriba. Selle lahendamiseks peame rakendama <code>PluginSidebarMoreMenuItem<\/code>.<\/p>\n<p>Redigeerige <code>\/components\/Sidebar.js<\/code>uuesti ja kleepige j\u00e4rgmine kood:<\/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>See on parem, oleme kasutanud t\u00e4pselt sama koodi nagu meie eelmise postituse k\u00fclgriba n\u00e4ites, kuid n\u00fc\u00fcd n\u00e4eb see osa v\u00e4lja.<\/p>\n<p>N\u00fc\u00fcd, kui meil on kood paigas, \u00e4rge unustage <code>npm start<\/code>selle kompileerimiseks k\u00e4ivitada ja see peaks n\u00fc\u00fcd v\u00e4lja n\u00e4gema j\u00e4rgmine:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168447-61e7cd4bd2a51.gif\" alt=\"Looge PluginSidebar abil kohandatud k\u00fclgriba\" \/>Meie kohandatud k\u00fclgriba t\u00f6\u00f6s<\/p>\n<p>Nagu meie pistikprogrammi k\u00fclgriba juhendis, l\u00fclitame sisse logimise n\u00f5ude l\u00fcliti, v\u00e4rskendame v\u00e4ljalogitud postitust, l\u00fclitame selle uuesti v\u00e4lja ja v\u00e4rskendame postitust uuesti. Kui see on sisse l\u00fclitatud, ei p\u00e4\u00e4se me postitusele juurde.<\/p>\n<p>Meie k\u00fclgriba nimi on <code>wholesomecode-wholesome-plugin-sidebar'<\/code>. Soovi korral saame selle k\u00fclgriba automaatselt avada ja sulgeda mujalt redaktoris. Oletame, et meil on kl\u00f5psamistoiminguga nupp, mis seda teeb.<\/p>\n<p>K\u00fclgriba d\u00fcnaamilise avamise kood on j\u00e4rgmine:<\/p>\n<pre><code>wp.data.dispatch('core\/edit-post').openGeneralSidebar( 'wholesomecode-wholesome-plugin-sidebar\/wholesomecode-wholesome-plugin-sidebar' );\n<\/code><\/pre>\n<p>Samamoodi saame k\u00fclgriba d\u00fcnaamiliselt sulgeda j\u00e4rgmiselt:<\/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>Vaadake <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">komponendiga<\/a> <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">pesastatud alamplokkide loomist<code>InnerBlocks<\/code><\/a><\/li>\n<li>Vaadake <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">post-meta v\u00e4ljade kasutamist Gutenbergi plokkides<\/a> (kui te pole seda veel teinud) ja <a href=\"https:\/\/wholesomecode.ltd\/guides\/custom-meta-boxes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Gutenbergi komponendip\u00f5histes kohandatud metakastides<\/a><\/li>\n<li>Vaadake <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Gutenbergi komponentidega seadete lehe loomist<\/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>Oleme vaadanud kohandatud plokkide k\u00fclgribasid, kolmanda osapoole plokkide k\u00fclgribasid InspectorControlsi kaudu ja seda, kuidas postituste k\u00fclgribale juhtelemente lisada. Selles juhendis vaatleme &#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":[718,937,894,842,802,863],"tags":[1165],"class_list":["post-228466","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arendaja","category-gutenberg-4","category-kood","category-opetused","category-php-4","category-wordpress-4","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/228466","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=228466"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/228466\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/221001"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=228466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=228466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=228466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}