{"id":228270,"date":"2022-10-19T10:47:00","date_gmt":"2022-10-19T07:47:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228270"},"modified":"2022-11-09T01:36:16","modified_gmt":"2022-11-08T22:36:16","slug":"laegg-till-kontroller-i-post-sidebar-med-plugindocumentsettingpanel","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/laegg-till-kontroller-i-post-sidebar-med-plugindocumentsettingpanel\/","title":{"rendered":"L\u00e4gg till kontroller i Post Sidebar med PluginDocumentSettingPanel"},"content":{"rendered":"\n<p>Hittills har vi tagit en titt p\u00e5 sidof\u00e4ltet f\u00f6r block genom <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">att l\u00e4gga <code>InspectorControls<\/code>till v\u00e5ra anpassade block<\/a> och <a href=\"https:\/\/wholesomecode.ltd\/guides\/block-sidebar-filters-higher-order-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">l\u00e4gga till kontroller till k\u00e4rn- och tredjepartsblocksidof\u00e4ltet med filter och h\u00f6gre ordningskomponenter<\/a>. I den h\u00e4r guiden ska vi titta p\u00e5 hur vi l\u00e4gger till kontroller i sidof\u00e4ltet.<\/p>\n<p>Visa inst\u00e4llningar i postsidof\u00e4ltet<\/p>\n<p>I den h\u00e4r guiden kommer vi att skapa en &quot;Visningsinst\u00e4llningar&quot;-kontroll som endast till\u00e5ter inloggade anv\u00e4ndare att se inl\u00e4gget n\u00e4r de v\u00e4xlas.<\/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>L\u00e4s <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Anv\u00e4nda inl\u00e4ggsmetaf\u00e4lt f\u00f6r att lagra attribut i<\/a> guiden WordPress Block Editor (Gutenberg).<\/li>\n<\/ul>\n<h2>Registrera Post Meta i PHP<\/h2>\n<p>V\u00e4nligen slutf\u00f6r stegen i <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guiden skapa plugin<\/a> f\u00f6r att ge oss v\u00e5rt f\u00f6rsta plugin, vi kommer att ut\u00f6ka om detta i v\u00e5r guide.<\/p>\n<p>N\u00e4r du har gjort detta, l\u00e5t oss st\u00e4lla in postmeta som vi beh\u00f6ver f\u00f6r v\u00e5r beh\u00f6righetsv\u00e4xlingskontroll. \u00d6ppna rotfilen f\u00f6r plugin-programmet (i v\u00e5rt fall <code>wholesome-plugin.php<\/code>) och l\u00e4gg till f\u00f6ljande 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>Om du har tagit en titt p\u00e5 <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guiden f\u00f6r inl\u00e4ggsmetaf\u00e4lt<\/a> b\u00f6r detta se lite bekant ut. Allt det g\u00f6r \u00e4r att det g\u00f6r att v\u00e5r postmeta kan n\u00e5s fr\u00e5n blockredigeraren (Gutenberg).<\/p>\n<p>Skapa en ny mapp i ditt plugin som heter <code>components<\/code>och skapa f\u00f6ljande fil <code>\/components\/Sidebar.js<\/code>. Klistra in f\u00f6ljande kod i den filen:<\/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>De <code>ToggleControl<\/code>vi har sett tidigare i v\u00e5ra tidigare sidof\u00e4ltsguider, men panelen vi anv\u00e4nder \u00e4r n\u00e5got ny. Vi anv\u00e4nder <code>PluginDocumentSettingPanel<\/code>f\u00f6r att identifiera att denna kontroll ska visas i inl\u00e4ggets sidof\u00e4lt.<\/p>\n<p>Observera ocks\u00e5 att ist\u00e4llet f\u00f6r att dra in attribut f\u00e5r vi v\u00e5r metadata med f\u00f6ljande kod:<\/p>\n<pre><code>const meta = select( 'core\/editor' ).getEditedPostAttribute( 'meta' );\nconst exampleToggle = meta['_wholesomecode_wholesome_plugin_require_login'];\n<\/code><\/pre>\n<p>och vi sparar det via v\u00e5r <code>onChange<\/code>metod med denna kod:<\/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>Detta uppdaterar metan f\u00f6r det aktuella inl\u00e4gget. Det kommer faktiskt inte att sparas f\u00f6rr\u00e4n vi sparar v\u00e5rt inl\u00e4gg, s\u00e5 all besparing hanteras \u00e5t oss.<\/p>\n<p>Det finns en sista sak vi beh\u00f6ver g\u00f6ra med v\u00e5r post sidof\u00e4lt, och det \u00e4r att registrera den. L\u00e4gg till f\u00f6ljande h\u00f6gst upp i <code>\/src\/index.js<\/code>filen:<\/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>Vi borde verkligen t\u00e4nka p\u00e5 att \u00e4ndra strukturen p\u00e5 v\u00e5rt plugin s\u00e5 att koden som registrerar blocket importeras fr\u00e5n en annan fil, men f\u00f6r enkelhetens skull kommer vi att anv\u00e4nda samma fil.<\/p>\n<p>H\u00e4r anv\u00e4nder vi <code>registerPlugin<\/code>f\u00f6r att registrera sidof\u00e4ltet. Vi skickar in Sidebar-komponenten som vi skapade som &#8217;render&#8217;-metoden, tillsammans med en ikon.<\/p>\n<h2>L\u00e4gg till logiken G\u00f6m om utloggad<\/h2>\n<p>\u00d6ppna \u00e5terigen rotfilen f\u00f6r plugin-programmet (i v\u00e5rt fall <code>wholesome-plugin.php<\/code>) och sl\u00e4pp in f\u00f6ljande kod. Det finns mycket b\u00e4ttre s\u00e4tt att g\u00f6ra detta, men jag h\u00e5ller det kort f\u00f6r exempel:<\/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>Den h\u00e4r koden returnerar helt enkelt v\u00e5r 404-mall och statusen 401 (Obeh\u00f6rig) om v\u00e4xlingen \u00e4r inst\u00e4lld p\u00e5 sant.<\/p>\n<p>L\u00e5t oss ta en titt p\u00e5 postsidof\u00e4ltets kontroller i aktion.<\/p>\n<p>Styra beh\u00f6righeter via Post Sidebar<\/p>\n<p>I det h\u00e4r exemplet v\u00e4xlar vi omkopplaren till sant, tittar p\u00e5 v\u00e5r sida i ett nytt (utloggat) webbl\u00e4sarf\u00f6nster och efter en uppdatering ser vi att den returnerar 404-sidan, v\u00e4xlar den sedan till false, refresh och voil\u00e0, inl\u00e4gget \u00e4r synligt igen. Gutenberg magi!<\/p>\n<ul>\n<li>Ta en titt p\u00e5 att skapa ett frist\u00e5ende <a href=\"https:\/\/wholesomecode.ltd\/guides\/custom-sidebar-pluginsidebar\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">anpassat sidof\u00e4lt<\/a><\/li>\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>Hittills har vi tagit en titt p\u00e5 blocksidof\u00e4ltet genom att l\u00e4gga till InspectorControls till v\u00e5ra anpassade block och l\u00e4gga till kontroller till k\u00e4rnan och tredje parts blocksidof\u00e4lt med filter och h\u00f6gre &#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":[942,901,922,724,868],"tags":[1173],"class_list":["post-228270","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg-9","category-koda","category-oevrig","category-utvecklaren","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228270","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=228270"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228270\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/221243"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=228270"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=228270"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=228270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}