{"id":233952,"date":"2023-02-27T12:54:00","date_gmt":"2023-02-27T09:54:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233952"},"modified":"2022-11-11T13:22:54","modified_gmt":"2022-11-11T10:22:54","slug":"crear-bloque-personalizado-de-gutenberg-parte-4-atributos","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/crear-bloque-personalizado-de-gutenberg-parte-4-atributos\/","title":{"rendered":"Crear bloque personalizado de Gutenberg – Parte 4: Atributos"},"content":{"rendered":"\n

En esta parte, veremos c\u00f3mo definir atributos, obtener sus valores y actualizarlos. Con los atributos podemos aceptar la entrada del editor, guardarla y generarla como elijamos. En el paso anterior<\/a> vimos los componentes de WordPress, d\u00f3nde encontrarlos y c\u00f3mo implementarlos. En esta publicaci\u00f3n, agregaremos accesorios para hacer la conexi\u00f3n con los atributos: los datos guardados.<\/p>\n

Definici\u00f3n de atributos<\/h2>\n

Los atributos se agregan como objetos en una matriz a la attributes<\/code>propiedad en registerBlockType()<\/code>. La clave de cada atributo es el nombre del atributo, y debe tener la propiedad type<\/code>como m\u00ednimo.<\/p>\n

La type<\/code>propiedad puede ser cualquiera de las siguientes; null<\/code>, boolean<\/code>, object<\/code>, array<\/code>, number<\/code>, string<\/code>, o integer<\/code>.<\/p>\n

Opcionalmente, puede proporcionar la propiedad default<\/code>para definir el valor inicial de su atributo. Si no proporciona un valor predeterminado, el atributo ser\u00e1 null<\/code>.<\/p>\n

Otra propiedad de atributo es source<\/code>que funciona junto con la selector<\/code>propiedad, pero estas son cosas delicadas que veremos en detalle m\u00e1s adelante.<\/p>\n

Por ejemplo, definir dos atributos; exampleText<\/code>como cadena y postIds<\/code>como matriz, se ver\u00eda as\u00ed:<\/p>\n

const { registerBlockType } = wp.blocks;\nregisterBlockType('awp\/firstblock', {\n    title: 'My first block',\n    category: 'common',\n    attributes: {\n        exampleText: {\n            type: 'string',\n            default: ''\n        },\n        postIds: {\n            type: 'array'\n            default: []\n        }\n    },\n    edit: (props) => { \n    ...<\/code><\/pre>\n
Cualquier cosa que necesite guardar para su bloque (entrada del usuario\/editor) requiere un atributo<\/strong>. Depende de usted c\u00f3mo estructura sus datos, definiendo atributos separados para cada uno o agrup\u00e1ndolos todos en un objeto. Solo ser\u00e1 una diferencia en c\u00f3mo obtienes sus datos y c\u00f3mo los actualizas.<\/p>\n
Obtener valores de atributo<\/h2>\n
Los atributos est\u00e1n disponibles como accesorios para sus bloques edit<\/code>y save<\/code>funciones. Si ha seguido esta serie del paso anterior<\/a>, recuerde que actualizamos las funciones para pasar props como par\u00e1metro.<\/p>\n
Es com\u00fan desestructurar<\/strong> los atributos de los accesorios, ya que normalmente se refiere a ellos con frecuencia. Por ejemplo, la salida de un atributo llamado exampleText<\/code>se ver\u00eda as\u00ed:<\/p>\n
edit: (props) => { \n    const { attributes } = props;\n    return <div>{attributes.exampleText}<\/div>\n},<\/code><\/pre>\n
Actualizar valores de atributos<\/h2>\n
Para actualizar atributos tenemos un m\u00e9todo disponible en props, llamado setAttributes()<\/code>. Esta funci\u00f3n acepta un objeto donde puede agregar cualquier atributo que desee actualizar. Puede actualizar solo un atributo, m\u00e1s o todos a la vez. Si tiene varios atributos definidos y llama setAttributes()<\/code>para actualizar solo uno de ellos, los otros no se tocan.<\/p>\n
Si tiene experiencia con React, probablemente reconocer\u00e1 inmediatamente las similitudes entre setAttributes()<\/code>y setState()<\/code>. Funcionan exactamente igual, pero la diferencia es que el estado en React es simplemente algo almacenado localmente en ese componente, y los atributos en realidad se guardan como datos fuera del componente.<\/p>\n
Para actualizar un atributo, generalmente destruir\u00eda la funci\u00f3n de accesorios y la llamar\u00eda as\u00ed: A continuaci\u00f3n, actualizamos exampleText<\/code>el atributo para que sea "Hola".<\/p>\n
const { setAttributes } = props;\nsetAttributes({ exampleText: 'Hi' });<\/code><\/pre>\n
Naturalmente, ejecutar\u00eda setAttributes()<\/code>desde dentro alguna acci\u00f3n. Un ejemplo com\u00fan est\u00e1 dentro de la onChange<\/code>propiedad en alg\u00fan tipo de campo de entrada que se usa para almacenar el valor del exampleText<\/code>atributo.<\/p>\n
Aseg\u00farese de guardar los atributos en el tipo que ha definido en el atributo. No tendr\u00e1 suerte tratando de guardar objetos en un atributo de cadena, por ejemplo.<\/p>\n
\u00a1Prob\u00e9moslo en la pr\u00e1ctica! Inicie npm run start<\/code>si a\u00fan no lo ha hecho.<\/p>\n
Mostrar un atributo en una entrada de texto personalizada y actualizar el valor del atributo<\/h2>\n
En el paso anterior, agregamos algunos componentes edit<\/code>, por ejemplo, una entrada de texto, pero no se almacen\u00f3 nada. Agreguemos un atributo y una entrada de texto en nuestro bloque. Ambos nos aseguraremos de que la entrada de texto muestre el valor actual, y cada vez que se cambie la entrada, actualizaremos el atributo.<\/p>\n
Agregar la entrada de texto y su onChange<\/code>accesorio<\/h3>\n
const { registerBlockType } = wp.blocks;\nconst { TextControl } = wp.components;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n    title: 'My first block',\n    category: 'common',\n    attributes: {\n        exampleText: {\n            type: 'string',\n            default: ''\n        }\n    },\n    edit: (props) => { \n        const { attributes, setAttributes } = props;\n        return (<div>\n                <TextControl \n                    value={attributes.exampleText}\n                    onChange={(newtext) => setAttributes({ exampleText: newtext })}\n                \/> \n            <\/div>\n        );\n    },\n    save:() => { \n        return <div>:)<\/div> \n    }\n});<\/code><\/pre>\n
Desestructuramos attributes<\/code>y setAttributes<\/code>de props<\/code>como usaremos ambos. Luego usamos un componente del paquete TextControl<\/code>de WordPress. wp.components<\/code>Le pasamos dos puntales; value<\/code>establecer\u00e1 el valor de la entrada (tanto inicialmente como mientras escribimos) y una acci\u00f3n en el evento de la entrada onChange<\/code>.<\/p>\n
En value<\/code>lo fijamos al valor de nuestro atributo; attributes.exampleText<\/code>. En el onChange<\/code>caso de que ejecutemos una funci\u00f3n, pasando el valor escrito de nuestra entrada como par\u00e1metro newtext<\/code>(el valor de entrada es un accesorio que se devuelve desde el componente). En esa funci\u00f3n llamamos setAttributes()<\/code>y actualizamos el atributo exampleText<\/code>a lo que se escribi\u00f3 en la entrada.<\/p>\n
Esto es React b\u00e1sico, aparte del hecho de que trabajamos con atributos y no con estados. Si lo anterior te confundi\u00f3, te recomiendo que consultes un tutorial r\u00e1pido en React, \u00a1ya que probablemente te lo explicar\u00e1n mejor que yo!<\/p>\n
\u00a1Actualiza tu editor y mira c\u00f3mo funciona el bloque! Deber\u00eda obtener una entrada de texto est\u00e1ndar para escribir cosas, y se guardar\u00e1 cada vez que presione Guardar\/Actualizar en la edici\u00f3n posterior.<\/p>\n
El resultado en frontend y en la base de datos.<\/h3>\n
Si ve su publicaci\u00f3n en la interfaz, a\u00fan deber\u00eda hacer eco de un div con ":)" porque eso es lo que todav\u00eda tenemos en nuestra save<\/code>funci\u00f3n. \u00a1Pero algo ha sucedido detr\u00e1s de escena! El bloque de comentarios de nuestro bloque ahora contiene el valor de nuestro atributo en JSON.<\/p>\n
\"Crear<\/a><\/p>\n
No puede ver los bloques de comentarios en una plantilla que realiza una the_content()<\/code>llamada normal. Para ver los bloques de comentarios tienes dos opciones. O mire en la post_content<\/code>tabla de la base de datos de publicaciones. O agregue echo get_the_content()<\/code>la plantilla y m\u00edrela en la herramienta Inspeccionar\/depurar.<\/p>\n
Obviamente, tambi\u00e9n tenemos acceso a los atributos save<\/code>, desde props.<\/p>\n
Mostrar el valor de la entrada ensave<\/code><\/h3>\n
Mostremos el valor del atributo dentro de un div en nuestra save<\/code>funci\u00f3n:<\/p>\n
save: (props) => { \n    const { attributes } = props;\n    return <div>{attributes.exampleText}<\/div>\n}<\/code><\/pre>\n
Nota: Despu\u00e9s de hacer este cambio, obtendr\u00e1 un bloque roto en la publicaci\u00f3n a la que ya ha agregado este bloque. Esto sucede porque el editor encuentra una salida diferente a la save<\/code>que hemos definido ahora. Retire el bloque y vuelva a agregarlo. Ingrese algo en su entrada de texto, actualice la publicaci\u00f3n y visual\u00edcela en la interfaz.<\/p>\n
Y esta es la esencia de esto en realidad. T\u00fa decides qu\u00e9 atributos necesitas para guardar lo que quieras en tu bloque. En edit<\/code>\u00e9l, presentar\u00e1 formas para que el usuario ingrese, teniendo cuidado de que se muestren los valores actuales y actual\u00edcelos cada vez que cambien. Y save<\/code>extrae los atributos guardados y renderiza la salida como quieras.<\/p>\n
Abordaremos muchos m\u00e1s componentes y atributos diferentes a medida que avanzamos en esta serie de tutoriales. Pero veamos otro componente en esta publicaci\u00f3n para ver de qu\u00e9 source<\/code>se trata la propiedad de atributo.<\/p>\n
RichText y la propiedad de atributosource<\/code><\/h2>\n
El componente de WordPress RichText<\/code>le brinda un \u00e1rea de texto "sin bordes" con soporte para formato de texto. Es posible que prefiera usar esto en lugar de una entrada de texto est\u00e1ndar o un \u00e1rea de texto (\u00bffeo?). Pero tenga en cuenta que RichText<\/code>debe manejarse de manera un poco diferente, ya que hay varios accesorios que debe tener en cuenta, y hay una diferencia en la forma en que obtenemos el valor en nuestra save<\/code>funci\u00f3n.<\/p>\n
Agregar un RichText<\/code>componente<\/h3>\n
La forma m\u00e1s simple de RichText<\/code>implementarlo es como lo har\u00edas con una entrada de texto:<\/p>\n
const { registerBlockType } = wp.blocks;\nconst { RichText } = wp.blockEditor;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n    ...\n    attributes: {\n        myRichText: {\n            type: 'string',\n            default: ''\n        }\n    },\n    edit: (props) => { \n        const { attributes, setAttributes } = props;\n        return (<div>\n                <RichText \n                    value={attributes.myRichText}\n                    onChange={(newtext) => setAttributes({ myRichText: newtext })}\n                \/> \n            <\/div>\n        );\n    },\n    ...<\/code><\/pre>\n
Desestructuramos el RichText<\/code>componente del wp.blockEditor<\/code>paquete, pero por lo dem\u00e1s, lo anterior es id\u00e9ntico a lo que hicimos con la entrada de texto est\u00e1ndar.<\/p>\n
Manejo save<\/code>conRichText<\/code><\/h3>\n
Sin embargo, en la save<\/code>funci\u00f3n, debe usar el RichText<\/code>componente nuevamente para obtener el valor del atributo. Llamamos RichText.Content<\/code>y configuramos el accesorio value<\/code>a nuestro atributo:<\/p>\n
save: (props) => { \n    const { attributes } = props;\n    return (<div>\n            <RichText.Content \n                value={attributes.myRichText}\n            \/>\n        <\/div>\n    );\n}<\/code><\/pre>\n
Esto generar\u00e1 lo que se haya escrito en el RichText<\/code>editor directamente sin ning\u00fan c\u00f3digo HTML.<\/p>\n
Cuando trabaja con RichText<\/code>usted, lo m\u00e1s probable es que desee controlar el contenedor HTML alrededor del texto, por ejemplo, a <p><\/code>o a <h2><\/code>, tanto en la interfaz como en el editor. Para eso podemos usar un accesorio llamado tagName<\/code>.<\/p>\n
El componente RichText<\/code>tambi\u00e9n permite varios otros accesorios. Puede definir un texto de marcador de posici\u00f3n que se muestra (desvanecido) cuando est\u00e1 vac\u00edo con la placeholder<\/code>propiedad. El componente tambi\u00e9n le permite controlar qu\u00e9 opciones de formato permite el campo (qu\u00e9 botones muestra en la barra de herramientas).<\/p>\n
RichText<\/code>contagName<\/code><\/h3>\n
Con el accesorio tagName<\/code>, puede predefinir en qu\u00e9 etiqueta HTML se envuelve su salida. Cuando lo use tagName<\/code>, debe usar el mismo tagName<\/code>accesorio y valor en ambos edit<\/code>y save<\/code>.<\/p>\n
Digamos que desea poner el valor de su atributo en a <h2><\/code>, lo que en el editor forzar\u00e1 que cualquier entrada sea h2. En edit<\/code>puedes hacer:<\/p>\n
<RichText \n    tagName=\"h2\"\n    placeholder=\"Write your heading here\"\n    value={attributes.myRichText}\n    onChange={(newtext) => setAttributes({ myRichText: newtext })}\n\/><\/code><\/pre>\n
Y en save<\/code>:<\/p>\n
<RichText.Content \n    tagName=\"h2\"\n    value={attributes.myRichText}\n\/><\/code><\/pre>\n
Lo anterior ahora generar\u00e1 lo que se haya escrito en el RichText<\/code>\u00e1rea dentro de una <h2><\/code>etiqueta.<\/p>\n
Usandosource<\/code><\/h3>\n
Obviamente, puede combinar varios textos enriquecidos para un bloque, por ejemplo, uno para encabezado y otro para p\u00e1rrafo. Solo recuerda que cada uno necesitar\u00e1 su propio atributo. Por ejemplo:<\/p>\n
attributes: {\n    myRichHeading: {\n        type: 'string'\n    },\n    myRichText: {\n        type: 'string'\n    }\n},\nedit: (props) => { \n    const { attributes, setAttributes } = props;\n    return (<div>\n            <RichText \n                tagName=\"h2\"\n                placeholder=\"Write your heading here\"\n                value={attributes.myRichHeading}\n                onChange={(newtext) => setAttributes({ myRichHeading: newtext })}\n            \/>\n            <RichText\n                tagName=\"p\"\n                placeholder=\"Write your paragraph here\"\n                value={attributes.myRichText}\n                onChange={(newtext) => setAttributes({ myRichText: newtext })}\n            \/>\n        <\/div>\n    );\n},\nsave: (props) => { \n    const { attributes } = props;\n    return (<div>\n            <RichText.Content \n                tagName=\"h2\"\n                value={attributes.myRichHeading}\n            \/>\n            <RichText.Content \n                tagName=\"p\"\n                value={attributes.myRichText}\n            \/>\n        <\/div>\n    );\n}<\/code><\/pre>\n
Sin embargo, ahora comenzar\u00e1 a encontrar algunos problemas. Aunque puede formatear texto en el editor, no se guardar\u00e1 nada (o parte) de su formato. Cuando vea la publicaci\u00f3n en la interfaz, simplemente aparecer\u00e1 como h2<\/code>y un p<\/code>, sin ning\u00fan formato que haya hecho (cursiva, negrita, enlace). Ni siquiera el bloque de comentarios de su bloque contiene el formato. Esto es lo complicado con RichText<\/code>. Para solucionar esto necesitamos trabajar con el atributo property source<\/code>.<\/p>\n
La source<\/code>propiedad que permite a WordPress extraer e interpretar el contenido directamente del contenido de la publicaci\u00f3n. Si un atributo no est\u00e1 source<\/code>configurado, se guardar\u00e1 y se extraer\u00e1 del bloque de comentarios HTML.<\/p>\n
Cuando trabajamos con RichText<\/code>, generalmente establecemos, source<\/code>que html<\/code>usa la biblioteca de WordPress para analizar el marcado HTML. La propiedad source<\/code>funciona junto con otra propiedad de atributo; selector<\/code>que define de qu\u00e9 etiqueta HTML se debe extraer.<\/p>\n
Como ejemplo, establecemos source<\/code>como html<\/code>en nuestro p\u00e1rrafo RichText<\/code>y establecemos selector<\/code>como p<\/code>(de lo contrario, el valor predeterminado es root o block the block).<\/p>\n
attributes: {\n    ...\n    myRichText: {\n        type: 'string',\n        source: 'html',\n        selector: 'p'\n    }\n},<\/code><\/pre>\n
Ahora nuestro segundo RichText<\/code>deber\u00eda guardar con \u00e9xito todo su formato de texto. Tambi\u00e9n notar\u00e1 que el bloque de comentarios ahora solo muestra el myRichHeading<\/code>atributo en JSON. El atributo myRichText<\/code>ha desaparecido por completo del bloque de comentarios. Esto se debe a que source<\/code>WordPress ahora analiza el contenido de la publicaci\u00f3n en lugar del bloque de comentarios para el valor del atributo.<\/p>\n
\"Crear<\/a><\/p>\n
Para ser completamente honesto, no he trabajado tanto con el source<\/code>atributo y recomendar\u00eda evitarlo si puede. La documentaci\u00f3n de WordPress explica algo m\u00e1s sobre la fuente y los atributos<\/a> que desea comprobar por s\u00ed mismo.<\/p>\n
En esta publicaci\u00f3n, hemos aprendido los conceptos b\u00e1sicos sobre los atributos; c\u00f3mo definirlos, actualizarlos y generar sus valores. En los pr\u00f3ximos pasos, veremos m\u00e1s componentes diferentes y c\u00f3mo agregar configuraciones fuera del contenido del bloque en s\u00ed; en la barra de herramientas y la barra lateral del editor (llamada Inspector).<\/p>\n
Fuente de grabaci\u00f3n:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
En esta lecci\u00f3n de bloque de Gutenberg para principiantes, veremos c\u00f3mo definir atributos, obtener sus valores y actualizarlos.<\/p>\n","protected":false},"author":1,"featured_media":151358,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[810,935,935,1110,810,840,840,861,861],"tags":[1172],"class_list":["post-233952","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-complementos","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\/233952","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=233952"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233952\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/151358"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=233952"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=233952"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=233952"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}