![\"Agregue](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152503-61e4e03345086.png\")
<\/a><\/p>\n\u00a1Aviso!<\/h3>\n
Este es un tutorial para crear su propia barra lateral personalizada. Pero si est\u00e1 interesado en simplemente agregar meta\/configuraciones a la barra lateral est\u00e1ndar del Inspector (pesta\u00f1a "Documento"), tengo un tutorial para exactamente eso:<\/p>\n
lo que vamos a crear<\/h2>\n
WordPress Gutenberg permite a los desarrolladores crear barras laterales personalizadas mediante la creaci\u00f3n de un llamado complemento de Javascript. (No debe confundirse con los complementos tradicionales de WordPress). Al usar un complemento de Javascript, podemos crear una nueva barra lateral y tambi\u00e9n conectarnos al men\u00fa "Herramientas y opciones".<\/p>\n
Agregaremos un nuevo elemento de men\u00fa en "Herramientas" que abrir\u00e1 nuestra barra lateral personalizada. El contenido de la barra lateral depende completamente de usted, pero revisar\u00e9 algunos ejemplos, incluido c\u00f3mo conectar un metacampo de publicaci\u00f3n dentro de \u00e9l.<\/p>\n
Para este tutorial, escribir\u00e9 ES6\/ESNext Javascript con JSX, lo que significa que debemos configurar un compilador. Si desea seguir adelante y no escribir Javascript ES5, deber\u00e1 configurar un entorno de desarrollo que compile su Javascript sobre la marcha. Si no est\u00e1 familiarizado con esto, siga mi publicaci\u00f3n que explica c\u00f3mo configurarlo<\/a> y luego regrese aqu\u00ed.<\/p>\n Configur\u00e9 mi Estoy escribiendo esto en un tema, pero funciona igual en un complemento. Solo recuerde ajustar las rutas al agregar el script al editor.<\/p>\n Para agregar nuestro script al editor de Gutenberg, necesitamos escribir algo de PHP. Si est\u00e1 en un tema, Creamos una funci\u00f3n enganchada a Debido a que ponemos en cola el script en el gancho El primer paso es registrar un complemento. Hacemos esto con la Como par\u00e1metro para registerPlugin, proporcionamos un nombre (aseg\u00farese de que sea \u00fanico) y un objeto con configuraciones. Como m\u00ednimo, debe proporcionar un componente para la propiedad de representaci\u00f3n. Tambi\u00e9n puede agregar opcionalmente un \u00edcono de los dashicons de WordPress<\/a>. Tenga en cuenta que si no especifica un \u00edcono, volver\u00e1 al \u00edcono del complemento. Para fines de demostraci\u00f3n, estoy usando el En cuanto al componente, comenzamos definiendo un componente b\u00e1sico que devuelve un div simple con alg\u00fan texto aleatorio. Y antes de todo el c\u00f3digo desestructuramos las funciones de los paquetes que queremos usar.<\/p>\n Si no sucede nada (ni siquiera errores) al actualizar Gutenberg, estamos listos para comenzar. No vemos nuestro componente porque no le hemos dicho a WordPress d\u00f3nde renderizarlo. El siguiente paso es conectar el men\u00fa de la barra lateral personalizada y los componentes del men\u00fa de herramientas para representar nuestro material.<\/p>\n Pero primero una explicaci\u00f3n de c\u00f3mo Gutenberg maneja las barras laterales personalizadas y por qu\u00e9 necesitamos hacer lo que haremos. Cuando registramos con \u00e9xito una barra lateral personalizada, una cosa suceder\u00e1 autom\u00e1ticamente inicialmente. Gutenberg agregar\u00e1 un acceso directo a nuestra barra lateral en la barra de herramientas superior, junto al men\u00fa Herramientas. Esto sucede porque nuestra barra lateral se "fija" autom\u00e1ticamente.<\/p>\n El problema de simplemente agregar una barra lateral personalizada es que cualquier usuario puede "desanclar" este acceso directo. Cuando hacen eso, \u00a1no hay ning\u00fan punto de acceso para abrir la barra lateral nuevamente! Es por eso que tambi\u00e9n necesitamos agregar un elemento de men\u00fa al men\u00fa Herramientas.<\/p>\n El registro de una barra lateral personalizada se realiza con el componente Para el Agregar un Debido a que React requiere un solo nodo envolvente alrededor del retorno del componente, envolvemos todo dentro de un Con el c\u00f3digo anterior, obtendremos las siguientes dos (probablemente tres) cosas que suceden. Obtendr\u00e1 un acceso directo con el \u00edcono de zanahoria en la barra de herramientas (si a\u00fan no lo ha desanclado). Al hacer clic en esto, se abrir\u00e1 la barra lateral. Tambi\u00e9n tendr\u00e1 un nuevo elemento de men\u00fa en la barra lateral del men\u00fa Herramientas, bajo el t\u00edtulo "Complementos".<\/p>\n El contenido real de la barra lateral depende totalmente de usted. Solo necesita agregar HTML o componentes dentro del Puede notar que falta relleno en el contenido de la barra lateral. Esto es intencional porque la idea es que crear\u00e1 paneles dentro de esta barra lateral. Los paneles son las secciones plegables en la barra lateral normal de Gutenberg. Esos son componentes que puede agregar muy f\u00e1cilmente dentro de su barra lateral personalizada. Puede agregar tantos paneles como desee y son excelentes para agrupar diferentes cosas.<\/p>\n Veamos r\u00e1pidamente c\u00f3mo podemos agregar paneles a nuestra barra lateral. Si ha creado sus propios tipos de bloques personalizados, es posible que est\u00e9 familiarizado con estos componentes. Usamos Para un Dentro de un Por ejemplo, agreguemos dos paneles a nuestra barra lateral personalizada.<\/p>\n \u00a1Con este c\u00f3digo, nuestra barra lateral personalizada comienza a parecerse realmente a Gutenberg!<\/p>\n<\/a><\/p>\nConfigurando tu Javascript<\/h2>\n
webpack.config.js<\/code>para compilar mi archivo Javascript de origen en el archivo \/assets\/js\/sidebar-plugin.js<\/code>. Este archivo compilado es lo que necesitamos para ponerlo en cola en el editor de Gutenberg. Mientras escribo este c\u00f3digo, comenc\u00e9 el compilador en tiempo de ejecuci\u00f3n que vuelve a compilar el Javascript cada vez que guardo los cambios en el c\u00f3digo fuente (npm run start<\/code>). Todo esto est\u00e1 explicado en profundidad en el tutorial mencionado anteriormente.<\/p>\nAgregar el script al editor<\/h2>\n
functions.php<\/code>es un buen lugar para comenzar, o en alg\u00fan lugar de sus archivos de complemento. Tenga en cuenta que debemos agregar el script compilado final, no el c\u00f3digo fuente. En mi ejemplo, el Javascript compilado se encuentra en el archivo \/assets\/js\/sidebar-plugin.js<\/code>.<\/p>\nenqueue_block_editor_assets<\/code>. Dentro hacemos lo de siempre [wp_enqueue_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_script\/)()<\/code>. Como dependencias al script agregamos dos; wp-plugins<\/code>, y wp-edit-post<\/code>. Estos dos paquetes deben cargarse antes de nuestro script ya que usamos funciones de ellos.<\/p>\nadd_action('enqueue_block_editor_assets', function() {\n wp_enqueue_script('awp-sidebar-plugin', get_stylesheet_directory_uri(). '\/assets\/js\/sidebar-plugin.js', ['wp-plugins', 'wp-edit-post']);\n});<\/code><\/pre>\nenqueue_block_editor_assets<\/code>, nuestro script solo se cargar\u00e1 cuando el editor de Gutenberg est\u00e9 activo. \u00a1Excelente! Ahora todo est\u00e1 listo para escribir nuestro complemento de Javascript.<\/p>\nRegistrar un complemento de Javascript<\/h2>\n
[registerPlugin](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/plugins#registerPlugin)<\/code>funci\u00f3n en wp.plugins desde dentro del wp.plugins<\/code>paquete.<\/p>\n'carrot'<\/code>icono.<\/p>\nconst { registerPlugin } = wp.plugins;\n\u00a0\nconst CustomSidebarComponent =() => {\n return(\n <div>Hey!<\/div>\n );\n}\n\u00a0\nregisterPlugin('awp-customsidebar', {\n render: CustomSidebarComponent,\n icon: 'carrot'\n});<\/code><\/pre>\nRegistrar una barra lateral personalizada<\/h2>\n
<\/a><\/p>\nPluginSidebar<\/code>del wp.editPost<\/code>paquete. La adici\u00f3n de un elemento de men\u00fa al men\u00fa Herramientas se realiza con el componente con el nombre apropiado PluginSidebarMoreMenuItem<\/code>(tambi\u00e9n en el wp.editPost<\/code>paquete).<\/p>\nPluginSidebar<\/code>componente necesitamos proporcionar algunos accesorios. Debe proporcionar como m\u00ednimo name<\/code>y title<\/code>. El accesorio title<\/code>se explica por s\u00ed mismo, este es el nombre que aparecer\u00e1 en la parte superior de la barra lateral. En el accesorio, name<\/code>proporcione una babosa \u00fanica. Cuando agrega el elemento del men\u00fa, debe consultar este slug.<\/p>\nPluginSidebarMoreMenuItem<\/code>componente (men\u00fa de herramientas) requiere como m\u00ednimo un accesorio; target<\/code>. Aqu\u00ed proporciona el mismo nombre que dio en la propiedad de la barra lateral name<\/code>. Como contenido del componente, escribe el texto que se mostrar\u00e1 como elemento de men\u00fa. Por lo general, esto ser\u00eda lo mismo que el de la barra lateral title<\/code>.<\/p>\nFragment<\/code>componente (del wp.element<\/code>paquete). Tambi\u00e9n estoy envolviendo mis cadenas __()<\/code>del wp.i18n<\/code>paquete para permitir la traducci\u00f3n.<\/p>\nconst { registerPlugin } = wp.plugins;\nconst { __ } = wp.i18n;\nconst { Fragment } = wp.element;\nconst { PluginSidebarMoreMenuItem, PluginSidebar } = wp.editPost;\n\u00a0\nconst CustomSidebarComponent =() => {\n return(\n <Fragment>\n <PluginSidebar \n name=\"awp-custom-sidebar\" \n title={__('My Custom sidebar', 'awp')}\n >Hello there.<\/PluginSidebar>\n <PluginSidebarMoreMenuItem \n target='awp-custom-sidebar'\n >{__('My Custom sidebar', 'awp')}<\/PluginSidebarMoreMenuItem>\n <\/Fragment>\n );\n}\n\u00a0\nregisterPlugin('awp-customsidebar', {\n render: CustomSidebarComponent,\n icon: 'carrot'\n});<\/code><\/pre>\n<\/a><\/p>\nAgregar contenido a la barra lateral<\/h2>\n
PluginSidebar<\/code>componente con lo que desee (en lugar del texto "Hola").<\/p>\nAgregar paneles en nuestra barra lateral<\/h3>\n
PanelBody<\/code>y opcionalmente PanelRow<\/code>del wp.components<\/code>paquete.<\/p>\nPanelBody<\/code>componente, proporciona como m\u00ednimo el accesorio title<\/code>. Opcionalmente, puede proporcionar verdadero o falso a la initialOpen<\/code>propiedad para decidir si el panel debe expandirse de forma predeterminada o no. Como contenido dentro del componente est\u00e1 todo dentro del panel.<\/p>\nPanelBody<\/code>puede utilizar opcionalmente PanelRow<\/code>componentes. No son realmente necesarios, pero pueden ayudarlo a obtener un buen estilo para el contenido de su panel.<\/p>\nconst { registerPlugin } = wp.plugins;\nconst { __ } = wp.i18n;\nconst { Fragment } = wp.element;\nconst { PluginSidebarMoreMenuItem, PluginSidebar } = wp.editPost;\nconst { PanelBody, PanelRow } = wp.components;\n\u00a0\nconst CustomSidebarComponent = () => {\n return(\n <Fragment>\n <PluginSidebarMoreMenuItem \n target='awp-custom-sidebar'\n >{__('My Custom sidebar', 'awp')}<\/PluginSidebarMoreMenuItem>\n <PluginSidebar \n name=\"awp-custom-sidebar\" \n title={__('My Custom sidebar', 'awp')}\n > \n <PanelBody\n title={__('This is a panel section', 'awp')}\n initialOpen={true}\n >\n <PanelRow>\n Put any component or content here.\n <\/PanelRow>\n <\/PanelBody>\n <PanelBody\n title={__('Another section', 'awp')}\n initialOpen={false}\n >\n <PanelRow>\n This is a collapsed section by default.\n <\/PanelRow>\n <\/PanelBody>\n <\/PluginSidebar>\n <\/Fragment>\n );\n}\n\u00a0\nregisterPlugin('awp-customsidebar', {\n render: CustomSidebarComponent,\n icon: 'carrot'\n});<\/code><\/pre>\n