[add_meta_box](https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/)()<\/code>. Esta funci\u00f3n le permite agregar un cuadro meta con su contenido personalizado en la parte inferior o al costado al editar una publicaci\u00f3n. \u00a1Este m\u00e9todo todav\u00eda funciona, tambi\u00e9n en el editor de Gutenberg!<\/p>\n![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153559-61e51080f2022.png\")
<\/a><\/p>\nSin embargo, se ve un poco fuera de lugar en comparaci\u00f3n con el resto del contenido de la barra lateral de Gutenberg. Y sin mencionar que necesitar\u00eda escribir manualmente el c\u00f3digo de entrada (casilla de verificaci\u00f3n, entradas de texto, etc.) con PHP y tambi\u00e9n escribir c\u00f3digo adicional para guardarlos cuando se actualice la publicaci\u00f3n. Y si desea que la metaconfiguraci\u00f3n de su publicaci\u00f3n sea din\u00e1mica (digamos que desea ocultar un campo a menos que se haya activado alg\u00fan otro campo), entonces tendr\u00eda que poner en cola manualmente un script y s\u00ed, lo adivin\u00f3, manejar manualmente la l\u00f3gica din\u00e1mica. de ocultar y mostrar. Todo esto ahora est\u00e1 desactualizado y es m\u00e1s f\u00e1cil con el nuevo editor de Gutenberg basado en Javascript. F\u00e1cilmente podemos hacer algo como esto:<\/p>\n
![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153559-61e51081c74ff.png\")
<\/a><\/p>\nEl proceso<\/h2>\n
El proceso es el siguiente:<\/p>\n
\n- Registramos cada meta clave de publicaci\u00f3n personalizada que queremos agregar en PHP usando
[register_post_meta](https:\/\/developer.wordpress.org\/reference\/functions\/register_post_meta\/)()<\/code>y la configuramos como disponible en la API REST de WP. Este es un paso necesario para que la publicaci\u00f3n meta est\u00e9 disponible en el editor de Gutenberg.<\/li>\n- Creamos un archivo Javascript y lo ponemos en cola espec\u00edficamente para el editor (solo).<\/li>\n
- Dentro del archivo Javascript registramos un complemento
[registerPlugin](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-plugins\/#registerPlugin)()<\/code>dici\u00e9ndole que represente nuestro componente.<\/li>\n- Dentro de ese componente podemos generar lo que necesitemos. Podemos usar los componentes integrados de WordPress para representar f\u00e1cilmente diferentes tipos de configuraciones. Y al usar el paquete de datos de WordPress, podemos obtener y actualizar los valores meta de la publicaci\u00f3n de inmediato a medida que se modifican.<\/li>\n<\/ul>\n
Entremos directamente, comenzando con la parte de PHP; registrando el post meta.<\/p>\n
Registro de la publicaci\u00f3n meta<\/h2>\n
Para cada meta de publicaci\u00f3n que desee agregar a la barra lateral de Gutenberg, deber\u00e1 registrarse usando [register_post_meta](https:\/\/developer.wordpress.org\/reference\/functions\/register_post_meta\/)()<\/code>. Esto es necesario para que est\u00e9n disponibles a trav\u00e9s de la API REST de WP (que usa Gutenberg) y, por lo tanto, disponibles en nuestro Javascript.<\/p>\nEn el functions.php<\/code>archivo de su tema o en alg\u00fan otro archivo PHP activo, agregue una funci\u00f3n enganchada al init<\/code>gancho ‘ ‘. Dentro de la funci\u00f3n, repite un register_post_meta()<\/code>para cada meta de publicaci\u00f3n personalizada que desea agregar. La funci\u00f3n toma tres argumentos; El primer par\u00e1metro es el tipo de publicaci\u00f3n para el que desea registrar el meta (establecido como cadena vac\u00eda para todos los tipos de publicaci\u00f3n). El segundo par\u00e1metro es el nombre de la meta clave para su meta. Y el tercero es una serie de configuraciones. Es aqu\u00ed donde definimos que este meta debe ser accesible en la API REST de WP configurando ‘ show_in_rest<\/code>‘ en verdadero.<\/p>\nPor ejemplo, digamos que quiero agregar un interruptor de encendido\/apagado y una entrada de texto a la barra lateral del editor. Eso significa que register_post_meta()<\/code>solicito un tipo de valor booleano y de cadena, respectivamente. Tambi\u00e9n quiero limitar estos metadatos de publicaci\u00f3n al tipo de publicaci\u00f3n ‘publicaci\u00f3n’ solamente. Eso se ver\u00eda algo como:<\/p>\nadd_action( 'init', function() {\n register_post_meta( 'post', '_my_custom_bool', [\n 'show_in_rest' => true,\n 'single' => true,\n 'type' => 'boolean',\n ] );\n\u00a0\n register_post_meta( 'post', '_my_custom_text', [\n 'show_in_rest' => true,\n 'single' => true,\n 'type' => 'string',\n ] );\n} );<\/code><\/pre>\nAhora tengo una meta clave de publicaci\u00f3n lista _my_custom_bool<\/code>y _my_custom_text<\/code>disponible en Gutenberg. Te recomiendo que les cambies el nombre a algo que tenga sentido para ti.<\/p>\nRegistrando nuestro plugin Javascript<\/h2>\n
Para nuestro pr\u00f3ximo paso, agregaremos un archivo Javascript y nos aseguraremos de ponerlo en cola usando PHP.<\/p>\n
Tenga en cuenta que escribo el c\u00f3digo Javascript en sintaxis ES6. Esto significa que configur\u00e9 una configuraci\u00f3n de paquete web\/Babel para compilar mi archivo en un archivo Javascript legible separado para el navegador.<\/p>\n
Tengo una gu\u00eda sobre c\u00f3mo configurar esto si no est\u00e1 seguro de c\u00f3mo funciona:<\/p>\n
Necesitamos asegurarnos de que WordPress cargue nuestro script en el editor. Hacemos esto conectando una funci\u00f3n enqueue_block_editor_assets<\/code>y llamando a [wp_enqueue_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_script\/)()<\/code>:<\/p>\nadd_action( 'enqueue_block_editor_assets', function() {\n wp_enqueue_script(\n 'awp-custom-meta-plugin', \n get_template_directory_uri(). '\/assets\/js\/gutenberg\/plugin-awp-custom-postmeta.js', \n [ 'wp-edit-post' ],\n false,\n false\n );\n} );<\/code><\/pre>\nSupongo que est\u00e1 familiarizado con la forma de poner en cola los scripts y puede reemplazar los valores con los suyos. Como segundo par\u00e1metro, proporciono la ruta al archivo de compilaci\u00f3n (no el archivo fuente). Para garantizar que nuestro script no se cargue demasiado pronto, configur\u00e9 ‘ wp-edit-post<\/code>‘ como una dependencia. Ese es el paquete que necesitamos para manejar la publicaci\u00f3n meta.<\/p>\nAhora pasemos a la parte de Javascript.<\/p>\n
Primero necesitamos llamar [registerPlugin](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-plugins\/#registerPlugin)()<\/code>y pasar nuestro componente para renderizar el panel en la barra lateral del Documento Gutenberg. Esta funci\u00f3n est\u00e1 disponible en el wp.plugins<\/code>paquete, as\u00ed que la desestructurar\u00e9 en la parte superior. Me gusta mantener mis archivos ordenados, as\u00ed que creo otro archivo; "awp-custom-postmeta-fields.js" para contener el componente representado e importarlo.<\/p>\nconst { registerPlugin } = wp.plugins;\n\u00a0\nimport AWP_Custom_Plugin from '.\/awp-custom-postmeta-fields';\n\u00a0\nregisterPlugin( 'my-custom-postmeta-plugin', {\n render() {\n return(<AWP_Custom_Plugin \/>);\n }\n} );<\/code><\/pre>\nEscribiendo nuestro componente<\/h2>\n
Empecemos a crear un componente b\u00e1sico que no haga nada m\u00e1s que sentarse all\u00ed en el lugar correcto, as\u00ed que lo eliminamos primero. Para renderizar un componente en la barra lateral Documento de Gutenberg, usamos el [PluginDocumentSettingPanel](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-document-setting-panel\/)<\/code>componente. Podemos establecer atributos como a title<\/code>, icon<\/code>y className<\/code>. Y lo que haya dentro se representar\u00e1 en la barra lateral del Documento. Por ahora, solo estoy enviando un mensaje de texto "Hola".<\/p>\nconst { __ } = wp.i18n;\nconst { PluginDocumentSettingPanel } = wp.editPost;\nconst { PanelRow } = wp.components;\n\u00a0\nconst AWP_Custom_Plugin =() => {\n return(\n <PluginDocumentSettingPanel title={ __( 'My Custom Post meta', 'txtdomain') } initialOpen=\"true\">\n <PanelRow>\n Hello there.\n <\/PanelRow>\n <\/PluginDocumentSettingPanel>\n );\n}\n\u00a0\nexport default AWP_Custom_Plugin;<\/code><\/pre>\nCon el c\u00f3digo anterior (compilado), obtenemos esto:<\/p>\n