{"id":233853,"date":"2023-02-24T13:39:00","date_gmt":"2023-02-24T10:39:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233853"},"modified":"2022-11-11T12:48:40","modified_gmt":"2022-11-11T09:48:40","slug":"crear-bloque-de-gutenberg-personalizado-parte-3-accesorios-y-componentes-de-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/crear-bloque-de-gutenberg-personalizado-parte-3-accesorios-y-componentes-de-wordpress\/","title":{"rendered":"Crear bloque de Gutenberg personalizado – Parte 3: accesorios y componentes de WordPress"},"content":{"rendered":"\n

El paso anterior<\/a> de esta serie de tutoriales fue c\u00f3mo registrar un bloque personalizado, tanto en Javascript como en PHP. En este paso, aprenderemos c\u00f3mo usar los componentes de WordPress para agregar diferentes tipos de campos y configuraciones.<\/p>\n

Para utilizar los componentes de WordPress en nuestro bloque, primero debemos conocer los accesorios.<\/p>\n

Accesorios<\/h2>\n

Props es una caracter\u00edstica importante en React y es b\u00e1sicamente una forma de pasar variables o funciones a otros componentes. Si no est\u00e1 familiarizado con los accesorios de React, puede leer el tutorial oficial de React<\/a> sobre esto.<\/p>\n

WordPress proporciona algunos apoyos para las funciones edit<\/code>y en. Dentro de estos accesorios tenemos acceso a cosas cr\u00edticas, como atributos y un m\u00e9todo para actualizar nuestros atributos. \u00a1Repasaremos los atributos en detalle en el siguiente paso<\/a>! save``registerBlockType()<\/code><\/a><\/p>\n

Hasta ahora en nuestro bloque escribimos la funci\u00f3n for edit<\/code>y save<\/code>as\u00ed:<\/p>\n

edit:() => { \n    return <div>:)<\/div> \n},<\/code><\/pre>\n
Deber\u00eda acostumbrarse a agregar el par\u00e1metro props<\/code>a ambos edit<\/code>y save<\/code>, as\u00ed:<\/p>\n
edit: (props) => { \n    return <div>:)<\/div> \n},<\/code><\/pre>\n
Ahora tiene acceso completo a la variable props<\/code>y todo lo que contiene desde dentro edit<\/code>y save<\/code>. Si tiene curiosidad, puede agregar un console.log(props);<\/code>en la edit<\/code>funci\u00f3n antes de la return<\/code>declaraci\u00f3n. Deber\u00eda ver qu\u00e9 accesorios est\u00e1n disponibles en el depurador de la consola.<\/p>\n
Usando los componentes de WordPress<\/h2>\n
Como se mencion\u00f3 antes, tenemos acceso a una enorme biblioteca de componentes y funciones \u00fatiles dentro del paquete global wp<\/code>. Encontrar\u00e1 componentes listos para usar para cualquier tipo de componente relacionado con la entrada que se le ocurra. Los ejemplos incluyen entradas de texto, entradas de texto enriquecido, men\u00fas desplegables, alternar, casillas de verificaci\u00f3n, botones en diferentes estilos, cargador de medios y selectores de color. Tambi\u00e9n hay funciones y componentes para una funcionalidad m\u00e1s avanzada. Como consultar el contenido de WordPress (publicaciones, categor\u00edas, etc.) con funciones integradas o buscar con la API REST.<\/p>\n
Es m\u00e1s f\u00e1cil y recomendable usar los componentes de la interfaz de usuario de WordPress. Esto es para asegurarse de que el dise\u00f1o y la funcionalidad sean lo m\u00e1s eficientes posible para no confundir ni molestar a los usuarios.<\/p>\n
Pero desafortunadamente al momento de escribir esto la documentaci\u00f3n de Gutenberg es muy escasa. Encontr\u00e9 que la mejor manera de aprender sobre lo que existe dentro del wp<\/code>paquete y c\u00f3mo funcionan los componentes es mirar en su repositorio oficial de Gutenberg Github<\/a>. Algunos de los paquetes (carpetas) tienen un texto L\u00e9ame que ofrece un poco de documentaci\u00f3n. Eche un vistazo al archivo L\u00e9ame de un bot\u00f3n<\/a> o la palanca<\/a>, por ejemplo.<\/p>\n
El repositorio de Github debe corresponder a lo que hay dentro del wp<\/code>paquete (seg\u00fan la versi\u00f3n que tenga y la rama que est\u00e9 viendo en Github). Esto significa que cada carpeta que ve en el packages<\/code>directorio ra\u00edz de Github reside en el wp<\/code>paquete global. Como ejemplo, recuerde que la funci\u00f3n que usamos en el paso anterior registerBlockType()<\/code>, estaba dentro wp.blocks<\/code>de, lo que significa que encontrar\u00e1 el c\u00f3digo fuente de esta funci\u00f3n exportado dentro de packages\/blocks\/<\/code>.<\/p>\n
A medida que desarroll\u00e9 varios bloques de Gutenberg personalizados y busqu\u00e9 un poco en el repositorio de Github, descubr\u00ed que hay algunos paquetes que contienen la funcionalidad m\u00e1s com\u00fan utilizada para crear bloques personalizados. Los incluir\u00e9 a continuaci\u00f3n.<\/p>\n
Para obtener una descripci\u00f3n m\u00e1s completa de los componentes disponibles, recomiendo descargar mi libro electr\u00f3nico gratuito que cubre los componentes disponibles en Gutenberg. Contiene los componentes m\u00e1s comunes y \u00fatiles con documentaci\u00f3n sobre accesorios y ejemplos de c\u00f3digo:<\/p>\n
Una descripci\u00f3n general r\u00e1pida de los paquetes m\u00e1s comunes que usar\u00e1 para los bloques<\/h3>\n
Obviamente hay muchos m\u00e1s disponibles, pero lo siguiente es lo m\u00e1s com\u00fan para el desarrollo de bloques. Usaremos la mayor\u00eda, si no todos, de estos en esta serie de tutoriales. Siempre que desee utilizar un componente, debe saber en qu\u00e9 paquete se encuentra.<\/p>\n
wp.components<\/h4>\n
Encontrar\u00e1 la mayor\u00eda de los componentes de entrada de la interfaz de usuario dentro de wp.components<\/code>. Los ejemplos son diferentes entradas de texto, selecci\u00f3n, casillas de verificaci\u00f3n, botones de radio, componentes que se pueden arrastrar, botones, selector de color, selector de fecha, etc. Tambi\u00e9n encontrar\u00e1 componentes de la interfaz de usuario que puede usar para la barra de herramientas de bloque y el contenido de la barra lateral de configuraci\u00f3n (llamada InspectorControls) en el editor.<\/p>\n
Echa un vistazo a las carpetas en el repositorio de Github<\/a>.<\/p>\n
wp.blockEditor y wp.editor<\/h4>\n
En estos dos paquetes, encontrar\u00e1 componentes \u00fatiles para texto enriquecido, manejo de im\u00e1genes\/cargador de medios y componentes para agregar barras de herramientas o paneles de Inspector (barra lateral) personalizados.<\/p>\n
Al final de esta serie, veremos la creaci\u00f3n de bloques din\u00e1micos en los que usaremos PHP para representar la salida del bloque, y para eso usaremos un componente de wp.editor<\/code>.<\/p>\n
Seg\u00fan tengo entendido, la mayor\u00eda de los componentes comenzaron en wp.editor<\/code>los primeros d\u00edas de Gutenberg, pero especialmente despu\u00e9s de WordPress 5.3, muchos de ellos se trasladaron a wp.blockEditor<\/code>. Si usa un componente en wp.editor<\/code>el que WordPress planea mudarse a wp.blockEditor<\/code>\u00e9l, no fallar\u00e1 a partir de ahora, pero en el depurador de la consola recibir\u00e1 advertencias de que ha quedado obsoleto y que debe cambiarlo wp.blockEditor<\/code>cuando pueda. Y de manera reversible, si est\u00e1 siguiendo esta serie con una versi\u00f3n anterior de WordPress por alguna raz\u00f3n, es posible que encuentre errores al llamar a componentes que a\u00fan no se wp.blockEditor<\/code>han movido.<\/p>\n
\"Crear<\/a><\/p>\n
elemento wp<\/h4>\n
Dentro wp.element<\/code>encontrar\u00e1s componentes que corresponden a los componentes de React. Por ejemplo Component<\/code>(que corresponde a React.Component<\/code>) y Fragment<\/code>( React.Fragment<\/code>). Los usaremos cuando comencemos a dividir nuestro c\u00f3digo en componentes separados.<\/p>\n
wp.i18n<\/h4>\n
Como su nombre lo indica, el wp.i18n<\/code>paquete contiene funciones para manejar la traducci\u00f3n. Contiene las mismas funciones de traducci\u00f3n que conocemos en PHP; por ejemplo __()<\/code>y _e()<\/code>. Veremos esto en detalle en <<<>>>> cuando aprendamos a traducir nuestro bloque.<\/p>\n
wp.datos<\/h4>\n
El wp.data<\/code>paquete es para consultar WordPress por datos fuera del editor. Hay componentes para enviar mensajes, withSelect<\/code>y select<\/code>que usaremos m\u00e1s adelante en esta serie para consultar publicaciones dentro de nuestro bloque.<\/p>\n
wp.componer<\/h4>\n
El paquete anterior y wp.compose<\/code>son para la construcci\u00f3n de bloques m\u00e1s avanzada. Dentro de este paquete encontraremos componentes y funciones para crear los llamados componentes de orden superior. Los componentes de orden superior<\/a> son una t\u00e9cnica de patr\u00f3n en React para reutilizar componentes y l\u00f3gica, y usaremos esto en combinaci\u00f3n con wp.data<\/code>para consultar publicaciones.<\/p>\n
Basta de hablar: \u00bfc\u00f3mo se utilizan algunos de estos componentes en la pr\u00e1ctica?<\/h2>\n
Como se mencion\u00f3 anteriormente; para poder usar los componentes de WordPress necesitas saber d\u00f3nde est\u00e1n. Con suerte, mi descripci\u00f3n general anterior combinada con el repositorio de Github<\/a> le dar\u00e1 una idea de d\u00f3nde obtenerlos.<\/p>\n
No olvide que siempre puede agregar cualquier etiqueta HTML normal, como div, span, encabezados, etc. Solo recuerda seguir las pautas de React<\/a> en atributos. Por ejemplo class<\/code>, es una palabra clave reservada en React (para crear componentes basados \u200b\u200ben clases), por lo que si desea agregar una clase a un elemento HTML, debe usar className<\/code>.<\/p>\n
Nota: Mientras desarrolla, no olvide iniciar npm run start<\/code>para compilar su c\u00f3digo.<\/p>\n
Como un ejemplo simple, probemos algunos componentes para ver c\u00f3mo se ven. Los desestructuramos de sus paquetes correspondientes y los usamos en nuestra edit<\/code>funci\u00f3n.<\/p>\n
const { registerBlockType } = wp.blocks;\nconst { RichText } = wp.blockEditor;\nconst { TextControl, TextareaControl } = wp.components;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n    ...\n    edit: (props) => { \n        return (<div>\n                Text input:\n                <TextControl \/> \n                Textarea:\n                <TextareaControl \/>\n                Richtext:\n                <RichText \/>\n            <\/div>\n        );\n    },\n    ...\n});<\/code><\/pre>\n
Esto, por ejemplo, har\u00e1 que nuestro bloque se vea as\u00ed en el editor.<\/p>\n
\"Crear<\/a><\/p>\n
Notar\u00e1s que recibir\u00e1s mensajes de error en la Consola cuando los escribas, y que no guardar\u00e1 lo que escribas al actualizar la publicaci\u00f3n (y refrescar). Esto se debe a que nos faltan accesorios en los componentes, que es la conexi\u00f3n a los atributos, donde se almacenan todos nuestros datos de bloque. Los props se encargan de pasar los valores guardados y las funciones se encargan de actualizar nuestros atributos cuando algo cambia en nuestras entradas. Esto es lo que haremos en el pr\u00f3ximo paso, donde finalmente comenzaremos a escribir c\u00f3digo de verdad.<\/p>\n
Fuente de grabaci\u00f3n:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
En el paso anterior registramos un bloque personalizado de Gutenberg. En este paso, aprenderemos c\u00f3mo usar los componentes de WordPress para agregar configuraciones de diferentes tipos.<\/p>\n","protected":false},"author":1,"featured_media":151761,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[892,892,810,716,716,935,935,1110,810,840,840,861,861],"tags":[1172],"class_list":["post-233853","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-complementos","category-desarrollador","category-gutenberg-2","category-n-a","category-tutoriales","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233853","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=233853"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233853\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/151761"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=233853"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=233853"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=233853"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}