{"id":228444,"date":"2022-10-19T11:16:00","date_gmt":"2022-10-19T08:16:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228444"},"modified":"2022-11-09T02:28:25","modified_gmt":"2022-11-08T23:28:25","slug":"agregue-controles-a-la-barra-lateral-de-publicaciones-con-plugindocumentsettingpanel","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/agregue-controles-a-la-barra-lateral-de-publicaciones-con-plugindocumentsettingpanel\/","title":{"rendered":"Agregue controles a la barra lateral de publicaciones con PluginDocumentSettingPanel"},"content":{"rendered":"\n<p>Hasta ahora, hemos echado un vistazo a la barra lateral de bloques <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">agregando <code>InspectorControls<\/code>a nuestros bloques personalizados<\/a> y <a href=\"https:\/\/wholesomecode.ltd\/guides\/block-sidebar-filters-higher-order-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">agregando controles a la barra lateral de bloques central y de terceros con filtros y componentes de orden superior<\/a>. En esta gu\u00eda, veremos c\u00f3mo agregar controles a la barra lateral de la publicaci\u00f3n.<\/p>\n<p>Configuraci\u00f3n de visualizaci\u00f3n en la barra lateral de la publicaci\u00f3n<\/p>\n<p>En esta gu\u00eda, vamos a crear un control de &#8216;Configuraci\u00f3n de visualizaci\u00f3n&#8217; que solo permitir\u00e1 a los usuarios registrados ver la publicaci\u00f3n cuando se active.<\/p>\n<h2>requisitos previos<\/h2>\n<ul>\n<li>Haber seguido la gu\u00eda <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Crear un complemento para el editor de bloques de WordPress (Gutenberg)<\/a><\/li>\n<li>Lea las gu\u00edas de la barra lateral anterior (<a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">barra lateral para un bloque personalizado<\/a> y <a href=\"https:\/\/wholesomecode.ltd\/guides\/block-sidebar-filters-higher-order-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">barra lateral para un bloque existente<\/a> )<\/li>\n<li>Lea la gu\u00eda <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Uso de metacampos de publicaci\u00f3n para almacenar atributos en la<\/a> gu\u00eda del editor de bloques de WordPress (Gutenberg)<\/li>\n<\/ul>\n<h2>Registrando el Post Meta en PHP<\/h2>\n<p>Complete los pasos en la <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">gu\u00eda de creaci\u00f3n de complementos<\/a> para darnos nuestro complemento inicial, ampliaremos esto en nuestra gu\u00eda.<\/p>\n<p>Una vez que haya hecho esto, configuremos la publicaci\u00f3n meta que necesitamos para nuestro control de alternancia de permisos. Abra el archivo ra\u00edz del complemento (en nuestro caso <code>wholesome-plugin.php<\/code>) y agregue el siguiente c\u00f3digo:<\/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>Si ha echado un vistazo a la <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">gu\u00eda de metacampos<\/a> de publicaci\u00f3n, esto deber\u00eda parecerle un poco familiar. Todo lo que hace es permitir que se acceda a nuestra publicaci\u00f3n desde el editor de bloques (Gutenberg).<\/p>\n<p>En su complemento, cree una nueva carpeta llamada <code>components<\/code>y cree el siguiente archivo <code>\/components\/Sidebar.js<\/code>. En ese archivo pega el siguiente c\u00f3digo:<\/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>Lo <code>ToggleControl<\/code>hemos visto antes en nuestras gu\u00edas de barra lateral anteriores, pero el panel que estamos usando es ligeramente nuevo. Usamos <code>PluginDocumentSettingPanel<\/code>para identificar que este control debe aparecer en la barra lateral de la publicaci\u00f3n.<\/p>\n<p>Tambi\u00e9n tenga en cuenta que en lugar de extraer atributos, obtenemos nuestros metadatos con el siguiente c\u00f3digo:<\/p>\n<pre><code>const meta = select( 'core\/editor' ).getEditedPostAttribute( 'meta' );\nconst exampleToggle = meta['_wholesomecode_wholesome_plugin_require_login'];\n<\/code><\/pre>\n<p>y lo guardamos a trav\u00e9s de nuestro <code>onChange<\/code>m\u00e9todo usando este c\u00f3digo:<\/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>Esto actualiza el meta de la publicaci\u00f3n actual. En realidad, no se guardar\u00e1 hasta que guardemos nuestra publicaci\u00f3n, por lo que todo el guardado se maneja por nosotros.<\/p>\n<p>Hay una \u00faltima cosa que debemos hacer con nuestra barra lateral de publicaciones, y es registrarla. En la parte superior del <code>\/src\/index.js<\/code>archivo agregue lo siguiente:<\/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>Realmente deber\u00edamos pensar en alterar la estructura de nuestro complemento para que el c\u00f3digo que registra el bloque se importe desde otro archivo, pero por simplicidad usaremos el mismo archivo.<\/p>\n<p>Aqu\u00ed usamos <code>registerPlugin<\/code>para registrar la barra lateral. Pasamos el componente de la barra lateral que creamos como el m\u00e9todo de &#8216;renderizaci\u00f3n&#8217;, junto con un \u00edcono.<\/p>\n<h2>Agregar la l\u00f3gica Ocultar si se cerr\u00f3 la sesi\u00f3n<\/h2>\n<p>Una vez m\u00e1s, abra el archivo ra\u00edz del complemento (en nuestro caso <code>wholesome-plugin.php<\/code>) y coloque el siguiente c\u00f3digo. Hay formas mucho mejores de hacer esto, pero lo mantendr\u00e9 breve para fines de ejemplo:<\/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>Este c\u00f3digo simplemente devuelve nuestra plantilla 404 y un estado de 401 (no autorizado) si el conmutador se establece en verdadero.<\/p>\n<p>Echemos un vistazo a los controles de la barra lateral de publicaciones en acci\u00f3n.<\/p>\n<p>Control de permisos a trav\u00e9s de la barra lateral de la publicaci\u00f3n<\/p>\n<p>En este ejemplo, cambiamos el interruptor a verdadero, vemos nuestra p\u00e1gina en una nueva ventana del navegador (cerrada la sesi\u00f3n) y, despu\u00e9s de una actualizaci\u00f3n, vemos que devuelve la p\u00e1gina 404, luego la cambiamos a falso, actualizamos y listo, la publicaci\u00f3n vuelve a ser visible. \u00a1Magia de Gutenberg!<\/p>\n<ul>\n<li>Eche un vistazo a la creaci\u00f3n de una <a href=\"https:\/\/wholesomecode.ltd\/guides\/custom-sidebar-pluginsidebar\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">barra lateral personalizada independiente<\/a><\/li>\n<li>Eche un vistazo a la creaci\u00f3n de <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">bloques secundarios anidados con el <code>InnerBlocks<\/code>componente<\/a><\/li>\n<li>Eche un vistazo al <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">uso de metacampos de publicaci\u00f3n en bloques de Gutenberg<\/a> (si a\u00fan no lo ha hecho) y <a href=\"https:\/\/wholesomecode.ltd\/guides\/custom-meta-boxes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">metaboxes personalizados controlados por componentes de Gutenberg<\/a><\/li>\n<li>Eche un vistazo a la <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">creaci\u00f3n de una p\u00e1gina de configuraci\u00f3n con Gutenberg Components<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hasta ahora, hemos echado un vistazo a la barra lateral de bloques agregando InspectorControls a nuestros bloques personalizados y agregando controles a la barra lateral de bloques central y de terceros con filtros y Superior&#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":[892,716,935,914,861],"tags":[1172],"class_list":["post-228444","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-desarrollador","category-gutenberg-2","category-otro","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/228444","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=228444"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/228444\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/221243"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=228444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=228444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=228444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}