{"id":228288,"date":"2022-10-19T13:58:00","date_gmt":"2022-10-19T10:58:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228288"},"modified":"2022-11-09T01:42:03","modified_gmt":"2022-11-08T22:42:03","slug":"skapa-ett-anpassat-sidofaelt-med-pluginsidebar","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/skapa-ett-anpassat-sidofaelt-med-pluginsidebar\/","title":{"rendered":"Skapa ett anpassat sidof\u00e4lt med PluginSidebar"},"content":{"rendered":"\n<p><a href=\"https:\/\/hashnode.com\/@wholesomecode\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/p>\n<p>Vi har tagit en titt p\u00e5 anpassade <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">blocksidof\u00e4lt<\/a>, blockeringssidof\u00e4lt fr\u00e5n <a href=\"https:\/\/wholesomecode.ltd\/guides\/block-sidebar-filters-higher-order-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">tredje part<\/a> via InspectorControls och hur man l\u00e4gger till kontroller i <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">postsidof\u00e4ltet<\/a>. I den h\u00e4r guiden ska vi titta p\u00e5 hur vi placerar v\u00e5ra kontroller i deras helt egna anpassade sidof\u00e4lt.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168447-61e7cd4993d41.png\" alt=\"Skapa ett anpassat sidof\u00e4lt med PluginSidebar\" \/>V\u00e5r anpassade sidof\u00e4lt<\/p>\n<p>Sk\u00e4rmdumpen ovan visar vad vi ska bygga. F\u00f6r det mesta kommer vi bara att \u00e4ndra koden som vi byggde i <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Post Sidebar-guiden<\/a> n\u00e5got, s\u00e5 se till att du har slutf\u00f6rt den guiden f\u00f6rst.<\/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>L\u00e4s de tidigare sidof\u00e4ltsguiderna (<a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">sidof\u00e4lt f\u00f6r ett anpassat block<\/a> och <a href=\"https:\/\/wholesomecode.ltd\/guides\/block-sidebar-filters-higher-order-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">sidof\u00e4lt f\u00f6r ett befintligt block<\/a> )<\/li>\n<li>Har f\u00f6ljt guiden <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">L\u00e4gg till kontroller till Post Sidebar med<\/a> PluginDocumentSettingPanel<\/li>\n<\/ul>\n<p>Vi kommer att anv\u00e4nda koden fr\u00e5n <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Post Sidebar-guiden<\/a>, s\u00e5 om du inte har slutf\u00f6rt den guiden, v\u00e4nligen g\u00f6r det. Det \u00e4r okej, jag v\u00e4ntar.<\/p>\n<p>\u00d6ppna <code>\/components\/Sidebar.js<\/code>filen som du skapade i f\u00f6reg\u00e5ende guide. Vi kommer att ers\u00e4tta raden som importerar <code>PluginDocumentSettingPanel<\/code>med f\u00f6ljande kod:<\/p>\n<pre><code>import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress\/edit-post';\n<\/code><\/pre>\n<p>Byt nu ut markeringen <code>&lt;PluginDocumentSettingPanel...<\/code>med <code>&lt;PluginSidebar...<\/code>och jobbet gjort! H\u00f6ger?<\/p>\n<p>Tja, ja och nej. Det ger oss en sidof\u00e4lt, men det \u00e4r fult! Vi beh\u00f6ver n\u00e5gra paneler s\u00e5 att kontrollerna formateras korrekt.<\/p>\n<p>\u00c4ven sidof\u00e4ltet saknas i menyn &quot;Alternativ&quot;. F\u00f6r att l\u00f6sa detta m\u00e5ste vi implementera <code>PluginSidebarMoreMenuItem<\/code>.<\/p>\n<p>Redigera <code>\/components\/Sidebar.js<\/code>igen och klistra in f\u00f6ljande 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>Det \u00e4r b\u00e4ttre, vi har anv\u00e4nt exakt samma kod som i v\u00e5rt tidigare sidof\u00e4ltsexempel, men nu ser det ut som en del.<\/p>\n<p>Nu n\u00e4r vi har v\u00e5r kod p\u00e5 plats, gl\u00f6m inte att k\u00f6ra <code>npm start<\/code>f\u00f6r att kompilera den, och den ska nu se ut s\u00e5 h\u00e4r:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168447-61e7cd4bd2a51.gif\" alt=\"Skapa ett anpassat sidof\u00e4lt med PluginSidebar\" \/>V\u00e5r anpassade sidof\u00e4lt i aktion<\/p>\n<p>Som i v\u00e5r guide f\u00f6r plugin-sidof\u00e4ltet byter vi v\u00e4xeln kr\u00e4ver inloggning, uppdaterar ett utloggat inl\u00e4gg, st\u00e4nger av det igen och uppdaterar inl\u00e4gget igen. N\u00e4r den \u00e4r aktiverad kan vi inte komma \u00e5t inl\u00e4gget.<\/p>\n<p>Namnet p\u00e5 v\u00e5r sidof\u00e4lt \u00e4r <code>wholesomecode-wholesome-plugin-sidebar'<\/code>. Om vi \u200b\u200bvill kan vi automatiskt \u00f6ppna och st\u00e4nga sidof\u00e4ltet fr\u00e5n n\u00e5gon annanstans i editorn. L\u00e5t oss s\u00e4ga att vi har en knapp med en klick\u00e5tg\u00e4rd som g\u00f6r detta.<\/p>\n<p>Koden f\u00f6r att \u00f6ppna sidof\u00e4ltet dynamiskt \u00e4r f\u00f6ljande:<\/p>\n<pre><code>wp.data.dispatch('core\/edit-post').openGeneralSidebar( 'wholesomecode-wholesome-plugin-sidebar\/wholesomecode-wholesome-plugin-sidebar' );\n<\/code><\/pre>\n<p>P\u00e5 samma s\u00e4tt kan vi st\u00e4nga sidof\u00e4ltet dynamiskt s\u00e5 h\u00e4r:<\/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>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 postmetaf\u00e4lt i Gutenberg-block<\/a> (om du inte redan har gjort det) och <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>Ta en titt p\u00e5 <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">att skapa en inst\u00e4llningssida med Gutenberg Components<\/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>Vi har tagit en titt p\u00e5 anpassade blocksidof\u00e4lt, tredjepartsblocksidof\u00e4lt via InspectorControls och hur man l\u00e4gger till kontroller i postsidof\u00e4ltet. I den h\u00e4r guiden ska vi titta p\u00e5&#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":[942,848,901,807,724,868],"tags":[1173],"class_list":["post-228288","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg-9","category-handledningar","category-koda","category-php-9","category-utvecklaren","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228288","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=228288"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228288\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/221001"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=228288"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=228288"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=228288"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}