{"id":228305,"date":"2022-10-16T09:19:00","date_gmt":"2022-10-16T06:19:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228305"},"modified":"2022-11-09T01:47:08","modified_gmt":"2022-11-08T22:47:08","slug":"cree-cajas-meta-personalizadas-con-el-editor-de-bloques-de-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/cree-cajas-meta-personalizadas-con-el-editor-de-bloques-de-wordpress-gutenberg\/","title":{"rendered":"Cree cajas meta personalizadas con el editor de bloques de WordPress (Gutenberg)"},"content":{"rendered":"\n<p>La primera pregunta que podr\u00eda tener es &quot;\u00bfpor qu\u00e9 necesitar\u00eda crear metacuadros personalizados con el Editor de bloques (Gutenberg)?&quot;, A\u00fan puede implementar metacuadros con PHP y agregar controles al bloque, publicaci\u00f3n o incluso una barra lateral personalizada. en Gutenberg.<\/p>\n<p>Hay algunas razones por las que es posible que desee hacer esto, que incluyen:<\/p>\n<ul>\n<li>Algunos bloques tienen configuraciones complejas, y ver un cuadro meta cuando est\u00e1 en modo de edici\u00f3n puede hacer que sea m\u00e1s f\u00e1cil de usar para un cliente<\/li>\n<li>Porque es posible que desee cambiar un cierto aspecto del dise\u00f1o de la publicaci\u00f3n, como el encabezado. Puede ocultar el campo del t\u00edtulo de la publicaci\u00f3n y reemplazarlo con un cuadro de metadatos personalizado en la parte superior de la p\u00e1gina, y poder controlar todos los metadatos de la publicaci\u00f3n que se relacionan con \u00e9l.<\/li>\n<li>Porque puede usar <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">plantillas de bloques<\/a> para colocar los metacuadros personalizados donde desee, para que tengan m\u00e1s sentido en contexto<\/li>\n<li>Porque puede aplicar este aprendizaje a otros aspectos del desarrollo del editor de bloques (Gutenberg)<\/li>\n<\/ul>\n<p>En esta gu\u00eda vamos a ampliar lo que ya hemos construido en nuestra <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">gu\u00eda Post Meta Fields<\/a>. Puede usar atributos de bloque; sin embargo, debido a la naturaleza de los metaboxes, usaremos post metacampos en esta gu\u00eda.<\/p>\n<h2>requisitos previos<\/h2>\n<ul>\n<li>Familiar\u00edcese con <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la creaci\u00f3n de complementos para WordPress Gutenberg<\/a><\/li>\n<li>Sea familiar <a href=\"https:\/\/wholesomecode.ltd\/guides\/php-render-block-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">con los bloques din\u00e1micos y la representaci\u00f3n del lado del servidor<\/a><\/li>\n<li>Familiar\u00edcese con el uso <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">de metacampos de publicaci\u00f3n en WordPress Gutenberg<\/a><\/li>\n<\/ul>\n<p>Debido a que estamos siguiendo 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 Post Meta Fields<\/a>, ya lo habremos utilizado <code>register_meta<\/code>para crear nuestro meta campo de publicaci\u00f3n, asegur\u00e1ndonos de haberlo establecido <code>show_in_rest<\/code>en verdadero y tambi\u00e9n habremos establecido la fuente de nuestro atributo de JavaScript <code>meta<\/code>y definido la meta clave.<\/p>\n<p>Todo lo que queda es implementar la interfaz.<\/p>\n<p>Edite el <code>\/src\/edit.js<\/code>archivo, reemplazando la <code>@wordpress\/components<\/code>importaci\u00f3n con lo siguiente:<\/p>\n<pre><code>import { Panel, PanelBody, TextControl } from '@wordpress\/components';\n<\/code><\/pre>\n<p>Luego reemplace el bloque de c\u00f3digo de edici\u00f3n con lo siguiente:<\/p>\n<pre><code>export default function Edit( { attributes, setAttributes }) {\n    const { blockText } = attributes;\n    return (&lt;div { ...useBlockProps() }&gt;\n            &lt;Panel&gt;\n                &lt;PanelBody\n                    title={ __( 'Example Meta Box', 'wholesome-plugin') }\n                    icon=\"admin-plugins\"\n                &gt;\n                    &lt;TextControl\n                        label={ __( 'Example Meta', 'wholesome-plugin') }\n                        help={ __( 'This is an example meta field.', 'wholesome-plugin') }\n                        onChange={ (blockText) =&gt; setAttributes( { blockText }) }\n                          value={ blockText }\n                    \/&gt;\n                &lt;\/PanelBody&gt;\n            &lt;\/Panel&gt;\n        &lt;\/div&gt;\n    );\n}\n<\/code><\/pre>\n<p>Ahora tenemos a <code>Panel<\/code>, a <code>PanelBody<\/code>y a <code>TextControl<\/code>. Tenga en cuenta que he agregado <code>admin-plugins<\/code>al par\u00e1metro del \u00edcono <code>PanelBody<\/code>para mantenerlo consistente con el \u00edcono del complemento.<\/p>\n<h3>Aplicar los estilos<\/h3>\n<p>Reemplace el SCSS <code>\/src\/editor.scss<\/code>con lo siguiente:<\/p>\n<pre><code>.wp-block.wp-block-wholesomecode-wholesome-plugin {\n    color: unset;\n    background: unset;\n    padding: unset;\n\n    p {\n        all: unset;\n    }\n}\n<\/code><\/pre>\n<p>Si est\u00e1 utilizando un Meta Box personalizado creado en Gutenberg, recomendar\u00eda colocarlo con una <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">plantilla de bloque<\/a>, sin embargo, puede insertarlo de la manera normal de la siguiente manera:<\/p>\n<p>Uso de un metabox personalizado de Gutenberg<\/p>\n<p>Una vez que haya creado su metabox, no hay l\u00edmite para lo que puede agregar en \u00e9l. La biblioteca completa de componentes de WordPress Gutenberg React est\u00e1 disponible para usted, junto con una amplia biblioteca de componentes React externos (<a href=\"https:\/\/wholesomecode.ltd\/blog\/select2-as-inspectorcontrol-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">vea mi art\u00edculo sobre c\u00f3mo agregar select2 a su proyecto<\/a> ).<\/p>\n<p>El siguiente ejemplo es la punta del iceberg de lo que puedes lograr:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169030-61e7fb6b454ff.png\" alt=\"Cree cajas meta personalizadas con el editor de bloques de WordPress (Gutenberg)\" \/>Metabox personalizado con metacampos adicionales<\/p>\n<p>Para construir esto, aqu\u00ed est\u00e1 el c\u00f3digo que necesita:<\/p>\n<h3>Registre sus metacampos de publicaci\u00f3n en PHP<\/h3>\n<p>Abra el archivo PHP ra\u00edz del complemento (en este caso <code>wholesome-plugin.php<\/code>) y actualice el <code>register_meta<\/code>que agregamos en la gu\u00eda anterior con lo siguiente:<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_register_post_meta() {\n    register_meta(\n        'post',\n        '_wholesomecode_wholesome_plugin_example_select',\n        [\n            'auth_callback' =&gt; '__return_true',\n            'default'       =&gt; '',\n            'show_in_rest'  =&gt; true,\n            'single'        =&gt; true,\n            'type'          =&gt; 'string',\n        ]\n    );\n\n    register_meta(\n        'post',\n        '_wholesomecode_wholesome_plugin_example_text',\n        [\n            'auth_callback' =&gt; '__return_true',\n            'default'       =&gt; '',\n            'show_in_rest'  =&gt; true,\n            'single'        =&gt; true,\n            'type'          =&gt; 'string',\n        ]\n    );\n\n    register_meta(\n        'post',\n        '_wholesomecode_wholesome_plugin_example_text_2',\n        [\n            'auth_callback' =&gt; '__return_true',\n            'default'       =&gt; '',\n            'show_in_rest'  =&gt; true,\n            'single'        =&gt; true,\n            'type'          =&gt; 'string',\n        ]\n    );\n\n    register_meta(\n        'post',\n        '_wholesomecode_wholesome_plugin_example_text_3',\n        [\n            'auth_callback' =&gt; '__return_true',\n            'default'       =&gt; '',\n            'show_in_rest'  =&gt; true,\n            'single'        =&gt; true,\n            'type'          =&gt; 'string',\n        ]\n    );\n\n    register_meta(\n        'post',\n        '_wholesomecode_wholesome_plugin_example_toggle',\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<h3>Actualizar los atributos de JavaScript<\/h3>\n<p>Abra <code>\/src\/index.js<\/code>y reemplace los atributos que agregamos en la gu\u00eda anterior con lo siguiente:<\/p>\n<pre><code>attributes: {\n    exampleSelect: {\n        meta: '_wholesomecode_wholesome_plugin_example_select',\n        source: 'meta',\n    },\n    exampleText: {\n        meta: '_wholesomecode_wholesome_plugin_example_text',\n        source: 'meta',\n    },\n    exampleText2: {\n        meta: '_wholesomecode_wholesome_plugin_example_text_2',\n        source: 'meta',\n    },\n    exampleText3: {\n        meta: '_wholesomecode_wholesome_plugin_example_text_3',\n        source: 'meta',\n    },\n    exampleToggle: {\n        meta: '_wholesomecode_wholesome_plugin_example_toggle',\n        source: 'meta',\n    },\n},\n<\/code><\/pre>\n<h3>Importar los componentes<\/h3>\n<p>Edite el <code>\/src\/edit.js<\/code>archivo, reemplazando la <code>@wordpress\/components<\/code>importaci\u00f3n con lo siguiente:<\/p>\n<pre><code>import {\n    Panel,\n    PanelBody,\n    PanelRow,\n    SelectControl,\n    TextControl,\n    ToggleControl,\n} from '@wordpress\/components';\n<\/code><\/pre>\n<h3>Actualizar el m\u00e9todo de edici\u00f3n<\/h3>\n<p>Contin\u00fae editando el <code>\/src\/edit.js<\/code>archivo, reemplazando <code>Edit<\/code>el bloque de c\u00f3digo con lo siguiente:<\/p>\n<pre><code>export default function Edit( { attributes, setAttributes }) {\n    const {\n        exampleSelect,\n        exampleText,\n        exampleText2,\n        exampleText3,\n        exampleToggle,\n    } = attributes;\n\n    return (&lt;div { ...useBlockProps() }&gt;\n            &lt;Panel&gt;\n                &lt;PanelBody\n                    title={ __( 'Example Meta Box', 'wholesome-plugin') }\n                    icon=\"admin-plugins\"\n                &gt;\n\n                        &lt;SelectControl\n                            help={ __( 'An example dropdown field.', 'wholesome-plugin') }\n                            label={ __( 'Example Select','wholesome-plugin') }\n                            onChange={ (exampleSelect) =&gt; setAttributes( { exampleSelect }) }\n                            options={ [\n                                {\n                                    label: __( 'Please Select...', 'wholesome-plugin' ),\n                                    value: '',\n                                },\n                                {\n                                    label: __( 'Option 1', 'wholesome-plugin' ),\n                                    value: 'option-1',\n                                },\n                                {\n                                    label: __( 'Option 2', 'wholesome-plugin' ),\n                                    value: 'option-2',\n                                },\n                            ] }\n                            value={ exampleSelect }\n                        \/&gt;\n\n                        &lt;TextControl\n                            help={ __( 'This is an example text field.', 'wholesome-plugin') }\n                            label={ __( 'Example Text', 'wholesome-plugin') }\n                            onChange={ (exampleText) =&gt; setAttributes( { exampleText }) }\n                            value={ exampleText }\n                        \/&gt;\n\n                    &lt;PanelRow&gt;\n                        &lt;TextControl\n                            help={ __( 'Use PanelRow to place controls inline.', 'wholesome-plugin') }\n                            label={ __( 'Example Text 2', 'wholesome-plugin') }\n                            onChange={ (exampleText2) =&gt; setAttributes( { exampleText2 }) }\n                            value={ exampleText2 }\n                        \/&gt;\n                        &lt;TextControl\n                            help={ __( 'This control is inline.', 'wholesome-plugin') }\n                            label={ __( 'Example Text 3', 'wholesome-plugin') }\n                            onChange={ (exampleText3) =&gt; setAttributes( { exampleText3 }) }\n                            value={ exampleText3 }\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n\n                        &lt;ToggleControl\n                            checked={ exampleToggle }\n                            help={ __( 'An example toggle.', 'wholesome-plugin') }\n                            label={ __( 'Example Toggle', 'wholesome-plugin') }\n                            onChange={ (exampleToggle) =&gt; setAttributes( { exampleToggle }) }\n                        \/&gt;\n\n                &lt;\/PanelBody&gt;\n            &lt;\/Panel&gt;\n        &lt;\/div&gt;\n    );\n}\n<\/code><\/pre>\n<h3>Agregar algunos SCSS<\/h3>\n<p>Finalmente abra el <code>\/src\/editor.scss<\/code>archivo y reemplace su contenido con lo siguiente:<\/p>\n<pre><code>.wp-block.wp-block-wholesomecode-wholesome-plugin {\n    color: unset;\n    background: unset;\n    padding: unset;\n\n    .components-base-control {\n        margin-bottom: 1rem;\n\n        select {\n            height: 2rem;\n            min-height: 2rem;\n        }\n    }\n\n    p {\n        all: unset;\n    }\n}\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\/options-settings-data-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">uso de configuraciones para almacenar datos en la tabla de opciones en Gutenberg<\/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>La primera pregunta que podr\u00eda tener es \u00ab\u00bfpor qu\u00e9 necesitar\u00eda crear metaboxes personalizados con el Editor de bloques (Gutenberg)?\u00bb, Todav\u00eda puede implementar metaboxes con PHP y agregar control&#8230;<\/p>\n","protected":false},"author":1,"featured_media":223619,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[892,716,935,914,840,861],"tags":[1172,1172],"class_list":["post-228305","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-desarrollador","category-gutenberg-2","category-otro","category-tutoriales","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/228305","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=228305"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/228305\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/223619"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=228305"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=228305"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=228305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}