{"id":233620,"date":"2023-02-19T17:30:00","date_gmt":"2023-02-19T14:30:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233620"},"modified":"2022-11-11T00:40:52","modified_gmt":"2022-11-10T21:40:52","slug":"crear-bloque-de-gutenberg-personalizado-parte-9-bloques-dinamicos-y-php-render","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/crear-bloque-de-gutenberg-personalizado-parte-9-bloques-dinamicos-y-php-render\/","title":{"rendered":"Crear bloque de Gutenberg personalizado – Parte 9: bloques din\u00e1micos y PHP Render"},"content":{"rendered":"\n

Hasta ahora hemos renderizado la salida del bloque en Javascript. Sin embargo, con contenido din\u00e1mico como publicaciones recientes o mostrar una publicaci\u00f3n, debemos representar la salida del bloque en PHP. En este post aprenderemos c\u00f3mo y por qu\u00e9.<\/p>\n

\u00bfPor qu\u00e9 necesitamos manejar los bloques din\u00e1micos de manera diferente?<\/h2>\n

Algunos ejemplos son obvios; un bloque que muestra las \u00faltimas publicaciones en una categor\u00eda es din\u00e1mico porque las publicaciones cambiar\u00e1n con el tiempo. No eliges las publicaciones en el bloque; en su lugar, probablemente tendr\u00e1 configuraciones para elegir la categor\u00eda, qu\u00e9 informaci\u00f3n mostrar para cada publicaci\u00f3n, la cantidad de publicaciones, la cantidad de columnas, etc. Cada vez que WordPress carga una publicaci\u00f3n con este bloque, debe consultar a WordPress en ese momento para conocer las publicaciones m\u00e1s recientes. Ver la misma publicaci\u00f3n el mes siguiente puede arrojar resultados diferentes aunque la publicaci\u00f3n con el bloque en s\u00ed no se haya actualizado.<\/p>\n

Pero la necesidad de bloques din\u00e1micos a veces no es tan obvia. Puede imaginar un bloque de publicaciones destacadas en el que elige una publicaci\u00f3n espec\u00edfica para mostrarla, no es necesariamente din\u00e1mico. Pero podr\u00eda ser, y deber\u00eda serlo. Recuerde que la publicaci\u00f3n seleccionada podr\u00eda actualizar su t\u00edtulo, extracto o imagen destacada en cualquier momento, y eso deber\u00eda reflejarse en los bloques que presentan esta publicaci\u00f3n.<\/p>\n

Para crear un bloque no din\u00e1mico para mostrar una sola publicaci\u00f3n, deber\u00e1 guardar la ID de la publicaci\u00f3n, su URL, la URL de la imagen destacada, la cadena de extracto o lo que necesite para obtener una vista previa de la publicaci\u00f3n, en los atributos del bloque. Y aqu\u00ed radica el problema. Si actualiza la imagen destacada de la publicaci\u00f3n seleccionada, la publicaci\u00f3n con el bloque de publicaci\u00f3n destacada no actualizar\u00e1 autom\u00e1ticamente sus atributos. Permanecer\u00e1 guardado con la URL de la imagen destacada anterior. Solo cuando edite la publicaci\u00f3n con el bloque y se asegure de volver a guardar los atributos con la informaci\u00f3n actualizada, el bloque mostrar\u00e1 la informaci\u00f3n actualizada correcta.<\/p>\n

Entonces, cada vez que tratamos con contenido din\u00e1mico (publicaciones, categor\u00edas o cualquier cosa que pueda cambiar con el tiempo), estamos tratando con bloques din\u00e1micos. Y para los bloques din\u00e1micos necesitamos usar PHP (c\u00f3digo del lado del servidor) para renderizar nuestro bloque y asegurarnos de que recuperar\u00e1 informaci\u00f3n actualizada cada vez que se renderice.<\/p>\n

La naturaleza modificada de los bloques din\u00e1micos en el editor.<\/h2>\n

Cuando comience a desarrollar bloques din\u00e1micos, la naturaleza de su bloque dentro del editor cambiar\u00e1. La funci\u00f3n de su bloque a edit<\/code>menudo tambi\u00e9n debe ser din\u00e1mica. Por ejemplo, para un bloque de publicaciones destacadas, deber\u00e1 buscar publicaciones para elegir, o para un bloque de \u00faltimas noticias, deber\u00e1 recuperar una lista de categor\u00edas para que el usuario elija.<\/p>\n

Es completamente posible solicitar informaci\u00f3n de WordPress desde el editor haciendo solicitudes AJAX, ya sea utilizando paquetes y componentes o realiz\u00e1ndolos manualmente con la API REST de WordPress<\/a>. Independientemente del m\u00e9todo que elija, su bloque debe manejar el flujo de entrada as\u00edncrono: el per\u00edodo de tiempo mientras espera una respuesta.<\/p>\n

Existen m\u00faltiples m\u00e9todos y patrones para crear un bloque din\u00e1mico para Gutenberg. Lo m\u00e1s com\u00fan es que utilice un patr\u00f3n React llamado componentes de orden superior<\/a> en el que WordPress proporciona muchas funciones y componentes.<\/p>\n

Veremos c\u00f3mo obtener publicaciones y c\u00f3mo recuperar categor\u00edas en nuestro bloque en la siguiente parte del tutorial. Por ahora, necesitamos aprender c\u00f3mo hacer que PHP represente nuestro bloque.<\/p>\n

Preparando nuestro bloque para el renderizado de PHP<\/h2>\n

La parte principal que debemos hacer en Javascript es hacer que la save<\/code>funci\u00f3n del bloque regrese null<\/code>. Puede mantener la salida original, pero una vez que le digamos a WordPress que use PHP para representar el bloque, esto ser\u00e1 ignorado. Para que quede claro para nosotros y para los dem\u00e1s que la salida del bloque no se maneja en Javascript, cambiaremos la save<\/code>funci\u00f3n.<\/p>\n

registerBlockType('awp\/firstblock', {\n    title: __('My first block', 'awhitepixel'), \n    category: 'common',\n    ...\n    edit: FirstBlockEdit,\n    save:() => { return null }\n});<\/code><\/pre>\n
No olvide que cambiar la funci\u00f3n de guardar har\u00e1 que todos los bloques existentes se rompan. Vuelva a agregar el bloque. El bloque deber\u00eda funcionar como antes; con la configuraci\u00f3n y actualizando los atributos. Ahora simplemente no generar\u00e1 nada en la interfaz. El bloque de comentarios estar\u00e1 all\u00ed, almacenando todos los atributos en JSON, pero no se representa ning\u00fan HTML visible.<\/p>\n
Sin embargo; si alguno de sus atributos est\u00e1 usando la source<\/code>propiedad, debe cambiar esto. Esto no es compatible con los bloques que se procesan con PHP porque se analizan directamente desde la salida del guardado, que ahora volvemos null<\/code>. Usamos la fuente en el segundo RichText<\/code>de nuestro bloque, para el p\u00e1rrafo. En este punto, el editor no guardar\u00e1 lo que hayas puesto en esto RichText<\/code>.<\/p>\n
Entonces, si todav\u00eda est\u00e1 usando source<\/code>el myRichText<\/code>atributo, debemos eliminar las propiedades source<\/code>y selector<\/code>para asegurarnos de que los atributos se almacenen y no se analicen desde la save<\/code>funci\u00f3n:<\/p>\n
attributes: {\n    ...\n    myRichText: {\n        type: 'string',\n    },\n    ...<\/code><\/pre>\n
Despu\u00e9s de esto, nuestro bloque est\u00e1 listo para renderizarse en PHP. Podemos dejar los archivos Javascript (no olvides construirlo) y el resto se hace en PHP.<\/p>\n
Representaci\u00f3n de bloques en PHP<\/h2>\n
Para decirle a WordPress que renderice la salida del bloque en PHP, agregamos un nuevo argumento a la funci\u00f3n register_block_type()<\/code>. Necesitamos agregar la clave render_callback<\/code>a la matriz con un valor de la funci\u00f3n que debe ejecutar.<\/p>\n
add_action('init', function() {\n    register_block_type('awp\/firstblock', [\n        'editor_script' => 'awp-myfirstblock-js',\n        'render_callback' => 'awp_myfirstblock_render'\n    ]);\n});<\/code><\/pre>\n
La funci\u00f3n de renderizado de PHP<\/h3>\n
Definamos la funci\u00f3n awp_myfirstblock_render<\/code>m\u00e1s abajo functions.php<\/code>(o donde hayas puesto tu c\u00f3digo PHP). Nuestra funci\u00f3n obtendr\u00e1 dos par\u00e1metros; los llamaremos $attr<\/code>y $content<\/code>.<\/p>\n
function awp_myfirstblock_render($attr, $content) {\n    \/\/ return the block's output here\n}<\/code><\/pre>\n
El par\u00e1metro $attr<\/code>ser\u00e1 una matriz asociativa con todos los atributos guardados. El segundo par\u00e1metro, $content<\/code>, es para bloques dentro de nuestro bloque. Esto solo es relevante para los bloques que admiten bloques anidados, como, por ejemplo, Columnas o Cubierta.<\/p>\n
La funci\u00f3n nunca debe echo<\/code>salir nada. Toda la salida debe devolverse, por lo que debe crear una cadena y devolverla al final.<\/p>\n
Algo importante para recordar acerca de los atributos es que solo los atributos guardados aparecer\u00e1n en el primer par\u00e1metro de la funci\u00f3n. Si un atributo nunca se cambi\u00f3 ni se guard\u00f3, es decir, si solo se bas\u00f3 en su default<\/code>, el atributo no se incluir\u00e1 en absoluto para nuestra funci\u00f3n PHP.<\/p>\n
Debe manejar este problema verificando siempre if (isset($attr['...']))<\/code>o de la manera preferible: definiendo los atributos en nuestra register_block_type()<\/code>llamada. Podemos proporcionar otra clave, attributes<\/code>y establecer su valor en una matriz con todos los atributos que deseamos extraer de nuestro bloque. La estructura debe ser id\u00e9ntica a la que defini\u00f3 en Javascript, pero en lugar de un objeto Javascript, lo necesita en una matriz de PHP. Esto puede ser un poco engorroso para redefinir los mismos atributos, pero con un editor de c\u00f3digo inteligente deber\u00eda ser bastante r\u00e1pido copiar y pegar y editarlo en varias l\u00edneas en PHP.<\/p>\n
Agregar los atributos para nuestra funci\u00f3n de renderizado<\/h3>\n
Agreguemos el nuevo attributes<\/code>elemento register_block_type()<\/code>y peguemos exactamente los mismos atributos que definimos en nuestro archivo Javascript:<\/p>\n
add_action('init', function() {\n    register_block_type('awp\/firstblock', [\n        'editor_script' => 'awp-myfirstblock-js',\n        'render_callback' => 'awp_myfirstblock_render',\n        'attributes' => [\n            'myRichHeading' => [\n                'type' => 'string'\n            ],\n            'myRichText' => [\n                'type' => 'string'\n            ],\n            'textAlignment' => [\n                'type' => 'string',\n            ],\n            'toggle' => [\n                'type' => 'boolean',\n                'default' => true\n            ],\n            'favoriteAnimal' => [\n                'type' => 'string',\n                'default' => 'dogs'\n            ],\n            'favoriteColor' ==> [\n                'type' => 'string',\n                'default' => '#DDDDDD'\n            ],\n            'activateLasers' => [\n                'type' => 'boolean',\n                'default' => false\n            ],\n        ]\n    ]);\n});\n\u00a0\nfunction awp_myfirstblock_render($attr, $content) {\n    return '<div>'.$attr['favoriteColor'].'<\/div>';\n}<\/code><\/pre>\n
Tenga en cuenta que si define un default<\/code>para todos los atributos, el $attr<\/code>par\u00e1metro de su funci\u00f3n siempre debe contener todos los atributos. Por ejemplo, el atributo textAlignment<\/code>anterior solo existir\u00e1 $attr<\/code>si se modific\u00f3, y deber\u00e1 verificarlo isset($attr['textAlignment'])<\/code>.<\/p>\n
Desafortunadamente, en este momento, hay dos cosas que no obtendr\u00e1 con PHP Block Render<\/strong>. Uno es el className<\/code>accesorio, por lo que debe crear la clase de envoltura (si la desea) usted mismo. La otra es la support<\/code>propiedad para la alineaci\u00f3n de bloques. Por el momento, WordPress no admite esta propiedad en bloques din\u00e1micos. No obtendremos el valor de la alineaci\u00f3n del bloque elegido a menos que lo cambiemos a un atributo y lo manejemos manualmente en Javascript.<\/p>\n
En cuanto a la salida HTML de la funci\u00f3n, \u00a1esto depende totalmente de usted!<\/p>\n
Solicitud de procesamiento de PHP desde el editor interno<\/h2>\n
Es posible solicitar el render PHP de nuestro bloque dentro del editor. Esto es \u00fatil si desea poder obtener una vista previa de la salida del bloque en el editor. Podemos hacer esto con un componente llamado ServerSideRender<\/code>desde el wp.editor<\/code>paquete.<\/p>\n
Como accesorios ServerSideRender<\/code>, debe definir todos los atributos que desea transmitir. Como m\u00ednimo, debe proporcionar el nombre del bloque a la propiedad block<\/code>, para que WordPress sepa qu\u00e9 m\u00e9todo de renderizado buscar. Esto est\u00e1 disponible para usted en props.name<\/code>la edit<\/code>funci\u00f3n. Tambi\u00e9n debe proporcionar los atributos que necesita en el prop attributes<\/code>. Si lo desea, tambi\u00e9n puede agregar variables personalizadas fuera de los atributos aqu\u00ed. Solo tenga en cuenta que esto solo funcionar\u00e1 para el editor interno y no para la interfaz.<\/p>\n
No se puede utilizar ServerSideRender<\/code>en la funci\u00f3n del bloque save<\/code>. Su save<\/code>funci\u00f3n a\u00fan debe regresar null<\/code>.<\/p>\n
Implementemos ServerSideRender<\/code>en nuestro bloque para verlo en la pr\u00e1ctica.<\/p>\n
Uso de ServerSideRender para el modo de vista previa\/edici\u00f3n de bloques<\/h3>\n
Si sigui\u00f3 el paso anterior en el que creamos un conmutador de modo de vista previa\/edici\u00f3n para nuestro bloque, ahora podemos usarlo ServerSideRender<\/code>para renderizar la vista previa del bloque desde PHP cuando cambiamos al modo de vista previa.<\/p>\n
Primero debemos recordar desestructurar ServerSideRender<\/code>en la parte superior:<\/p>\n
const { ServerSideRender } = wp.editor;<\/code><\/pre>\n
Si recuerda del paso anterior, usamos los componentes Disabled<\/code>y\/o Placeholder<\/code>para mantener la vista previa. El problema con el uso Placeholder<\/code>es que obtenemos un estilo no deseado aplicado a nuestra salida. Reemplacemos Placeholder<\/code>con ServerSideRender<\/code>. Puede optar por mantener el Disabled<\/code>componente, para asegurarse de que no se pueda hacer clic ni arrastrar ninguno de sus contenidos.<\/p>\n
En el c\u00f3digo para renderizar el bloque cuando el atributo editMode<\/code>es falso, hacemos:<\/p>\n
...\n{!this.state.editMode && \n    <ServerSideRender\n        block={this.props.name}\n        attributes={{ \n            myRichHeading: attributes.myRichHeading, \n            myRichText: attributes.myRichText, \n            textAlignment: attributes.textAlignment, \n            toggle: attributes.toggle, \n            favoriteAnimal: attributes.favoriteAnimal, \n            favoriteColor: attributes.favoriteColor,\n            activateLasers: attributes.activateLasers\n        }}\n    \/>\n}\n...<\/code><\/pre>\n
Ahora nuestro bot\u00f3n personalizado en la barra de herramientas mostrar\u00e1 la salida de PHP cuando cambiemos al modo de vista previa. El resultado debe ser id\u00e9ntico al ver la publicaci\u00f3n en la interfaz. Este es un buen h\u00e1bito para garantizar que la salida sea id\u00e9ntica tanto en el editor como en la interfaz.<\/p>\n
Ejemplo: bloque din\u00e1mico que muestra una publicaci\u00f3n seleccionada<\/h2>\n
La salida en su funci\u00f3n de procesamiento de PHP puede ser cualquier cosa y tiene acceso completo a todas las funciones de WordPress. Suponga un bloque donde se guardar\u00e1 una ID de publicaci\u00f3n en un atributo. En la render_callback<\/code>funci\u00f3n PHP, puede consultar la publicaci\u00f3n desde el ID y generar su informaci\u00f3n. Deber\u00eda ser bastante autoexplicativo c\u00f3mo hacer esto, pero aqu\u00ed hay un ejemplo r\u00e1pido.<\/p>\n
NB<\/strong>: en este ejemplo, simplemente agregaremos una entrada de texto al editor para ingresar manualmente una ID de publicaci\u00f3n. Esta no es una soluci\u00f3n muy intuitiva y f\u00e1cil de usar para seleccionar una publicaci\u00f3n, pero esto es lo que aprenderemos en el siguiente paso. El enfoque aqu\u00ed est\u00e1 en la parte PHP de renderizar la publicaci\u00f3n seleccionada.<\/p>\n
Agreguemos un atributo selectedPostId<\/code>de tipo n\u00famero:<\/p>\n
attributes: {\n    selectedPostId: {\n        type: 'number'\n    }\n}<\/code><\/pre>\n
Y en alg\u00fan lugar dentro de la funci\u00f3n de nuestro bloque, edit<\/code>agregamos un TextControl<\/code>componente. Puede estar donde quieras: dentro del bloque o en el Inspector.<\/p>\n
<TextControl \n    label={__(\"Type in post ID\", 'awhitepixel')}\n    type=\"number\"\n    value={attributes.selectedPostId}\n    onChange={(newval) => setAttributes({ selectedPostId: parseInt(newval) })}\n\/><\/code><\/pre>\n
Tenga en cuenta que tengo mucho cuidado para asegurarme de que la entrada guarde el atributo correctamente como un n\u00famero al convertirlo en un n\u00famero entero con parseInt()<\/code>. Aunque configuramos el tipo prop type<\/code>para number<\/code>representar una entrada de n\u00famero, el valor modificado todav\u00eda se interpreta como una cadena. WordPress no guardar\u00e1 su atributo si est\u00e1 en el formato incorrecto.<\/p>\n
No olvide agregar el nuevo atributo a su ServerSideRender<\/code>componente si tiene uno:<\/p>\n
<ServerSideRender\n    block={this.props.name}\n    attributes={{ \n        selectedPostId: attributes.selectedPostId,\n        ...<\/code><\/pre>\n
La parte PHP<\/h3>\n
Eso deber\u00eda haberse ocupado de la parte de Javascript. Pasemos a PHP. Primero necesitamos agregar el nuevo atributo selectedPostId<\/code>a la attributes<\/code>matriz en register_block_type()<\/code>:<\/p>\n
register_block_type('awp\/firstblock', [\n    'editor_script' => 'awp-myfirstblock-js',\n    'render_callback' => 'awp_myfirstblock_render',\n    'attributes' => [\n        'selectedPostId' => [\n            'type' => 'number',\n            'default' => 0\n        ],\n        ...\n    ]\n]);<\/code><\/pre>\n
En la render_callback<\/code>funci\u00f3n, ahora podemos acceder al ID de la publicaci\u00f3n con $attr['selectedPostId']<\/code>. Con eso podemos realizar un simple get_post()<\/code>y generar los datos de la publicaci\u00f3n; su enlace y titulo:<\/p>\n
function awp_myfirstblock_render($attr, $content) {\n    $str = '';\n    if ($attr['selectedPostId'] > 0) {\n        $post = get_post($attr['selectedPostId']);\n        if (!$post) {\n            return $str;\n        }\n        $str = '<div class=\"awp-myfirstblock\">';\n        $str .= '<a href=\"'. get_the_permalink($post). '\">';\n        $str .= '<h3>'. get_the_title($post). '<\/h3>';\n        $str .= '<\/a>';\n        $str .= '<\/div>';\n    }\n    return $str;\n}<\/code><\/pre>\n
Este es un ejemplo muy b\u00e1sico pensado como un trampol\u00edn para que escriba c\u00f3digo m\u00e1s avanzado y personalizado.<\/p>\n
Ahora que sabemos c\u00f3mo manejar la representaci\u00f3n de bloques din\u00e1micos, el siguiente paso es aprender a hacer que la parte del editor tambi\u00e9n sea m\u00e1s intuitiva. En el siguiente paso, nos centraremos en c\u00f3mo consultar publicaciones desde el editor de bloques y en brindarle al usuario una mejor manera de seleccionar una publicaci\u00f3n.<\/p>\n
Fuente de grabaci\u00f3n:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Con contenido de bloque din\u00e1mico como publicaciones recientes o mostrar una publicaci\u00f3n, necesitamos representar la salida del bloque en PHP. En este post aprenderemos c\u00f3mo y por qu\u00e9.<\/p>\n","protected":false},"author":1,"featured_media":152680,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[892,892,935,935,1110,800,800,840,840,861,861],"tags":[1172],"class_list":["post-233620","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-gutenberg-2","category-n-a","category-php-2","category-tutoriales","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233620","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=233620"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233620\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/152680"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=233620"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=233620"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=233620"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}