{"id":228464,"date":"2022-10-19T14:00:00","date_gmt":"2022-10-19T11:00:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228464"},"modified":"2022-11-09T02:33:47","modified_gmt":"2022-11-08T23:33:47","slug":"crear-una-barra-lateral-personalizada-con-pluginsidebar","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/crear-una-barra-lateral-personalizada-con-pluginsidebar\/","title":{"rendered":"Crear una barra lateral personalizada con PluginSidebar"},"content":{"rendered":"\n<p><a href=\"https:\/\/hashnode.com\/@wholesomecode\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/p>\n<p>Hemos echado un vistazo a las barras laterales de <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">bloques personalizadas, las barras laterales<\/a> de bloques de <a href=\"https:\/\/wholesomecode.ltd\/guides\/block-sidebar-filters-higher-order-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">terceros<\/a> a trav\u00e9s de InspectorControls y c\u00f3mo agregar controles a la <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">barra lateral de la publicaci\u00f3n<\/a>. En esta gu\u00eda, veremos c\u00f3mo colocar nuestros controles en su propia barra lateral personalizada.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168447-61e7cd4993d41.png\" alt=\"Crear una barra lateral personalizada con PluginSidebar\" \/>Nuestra barra lateral personalizada<\/p>\n<p>La captura de pantalla de arriba muestra lo que vamos a construir. En su mayor parte, solo vamos a modificar ligeramente el c\u00f3digo que construimos en la <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">gu\u00eda Post Sidebar<\/a>, as\u00ed que aseg\u00farese de haber completado esa gu\u00eda primero.<\/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>Haber seguido la gu\u00eda <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Agregar controles a la barra lateral de publicaci\u00f3n con PluginDocumentSettingPanel<\/a><\/li>\n<\/ul>\n<p>Vamos a usar el c\u00f3digo de la <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">gu\u00eda Post Sidebar<\/a>, as\u00ed que si no ha completado esa gu\u00eda, h\u00e1galo. Est\u00e1 bien, esperar\u00e9.<\/p>\n<p>Abre el <code>\/components\/Sidebar.js<\/code>archivo que creaste en la gu\u00eda anterior. Vamos a reemplazar la l\u00ednea que importa <code>PluginDocumentSettingPanel<\/code>con el siguiente c\u00f3digo:<\/p>\n<pre><code>import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress\/edit-post';\n<\/code><\/pre>\n<p>\u00a1 Ahora reemplace el marcado <code>&lt;PluginDocumentSettingPanel...<\/code>con <code>&lt;PluginSidebar...<\/code>y trabajo hecho! \u00bfDerecha?<\/p>\n<p>Bueno, s\u00ed y no. Eso nos da una barra lateral, \u00a1pero es feo! Necesitamos algunos paneles para que los controles est\u00e9n formateados correctamente.<\/p>\n<p>Tambi\u00e9n falta la barra lateral en el men\u00fa &#8216;Opciones&#8217;. Para solucionar esto necesitamos implementar <code>PluginSidebarMoreMenuItem<\/code>.<\/p>\n<p>Edite <code>\/components\/Sidebar.js<\/code>de nuevo y pegue el siguiente c\u00f3digo:<\/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>Eso es mejor, hemos usado exactamente el mismo c\u00f3digo que en nuestro ejemplo de barra lateral de publicaci\u00f3n anterior, pero ahora se ve bien.<\/p>\n<p>Ahora que tenemos nuestro c\u00f3digo en su lugar, no olvides ejecutarlo <code>npm start<\/code>para compilarlo, y ahora deber\u00eda tener el siguiente aspecto:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168447-61e7cd4bd2a51.gif\" alt=\"Crear una barra lateral personalizada con PluginSidebar\" \/>Nuestra barra lateral personalizada en acci\u00f3n<\/p>\n<p>Al igual que en nuestra gu\u00eda de la barra lateral de complementos, cambiamos el interruptor de inicio de sesi\u00f3n requerido, actualizamos una publicaci\u00f3n cerrada, la apagamos y actualizamos la publicaci\u00f3n nuevamente. Cuando se activa, no podemos acceder a la publicaci\u00f3n.<\/p>\n<p>El nombre de nuestra barra lateral es <code>wholesomecode-wholesome-plugin-sidebar'<\/code>. Si lo deseamos, podemos abrir y cerrar autom\u00e1ticamente esta barra lateral desde cualquier otro lugar del editor. Digamos que tenemos un bot\u00f3n con una acci\u00f3n de clic que hace esto.<\/p>\n<p>El c\u00f3digo para abrir la barra lateral de forma din\u00e1mica es el siguiente:<\/p>\n<pre><code>wp.data.dispatch('core\/edit-post').openGeneralSidebar( 'wholesomecode-wholesome-plugin-sidebar\/wholesomecode-wholesome-plugin-sidebar' );\n<\/code><\/pre>\n<p>Del mismo modo, podemos cerrar din\u00e1micamente la barra lateral as\u00ed:<\/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>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>Hemos echado un vistazo a las barras laterales de bloques personalizados, las barras laterales de bloques de terceros a trav\u00e9s de InspectorControls y c\u00f3mo agregar controles a la barra lateral de la publicaci\u00f3n. En esta gu\u00eda vamos a ver&#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":[892,716,935,800,840,861],"tags":[1172],"class_list":["post-228464","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-desarrollador","category-gutenberg-2","category-php-2","category-tutoriales","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/228464","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=228464"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/228464\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/221001"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=228464"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=228464"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=228464"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}