Los bloques dinámicos en WordPress nos ofrecen una capacidad avanzada para personalizar y manejar el contenido de nuestras páginas web de una manera más flexible y eficiente. A diferencia de los bloques estáticos, los bloques dinámicos delegan la responsabilidad del renderizado a una función PHP especial. Esto significa que el contenido no se compara de manera directa en la función de edición y publicación, lo cual otorga mayor dinamismo y adaptabilidad. Este enfoque es especialmente útil en el caso de contenidos que necesitan actualizarse automáticamente o que deben ser regenerados en diferentes contextos.
¿Cómo se crea una función de renderizado en PHP para bloques dinámicos?
Para trabajar con bloques dinámicos, un paso crucial es la implementación de una función PHP que se encargue de renderizar el contenido. Aquí tienes una guía básica para crearla:
Definir la función PHP: Por ejemplo, crearemos una función llamada pg_render_dynamic_block.
Configurar los atributos: Esta función recibe dos parámetros: $attributes y $content. Los atributos son los datos que definen el comportamiento y la estructura del bloque, mientras que el contenido puede incluir otros bloques anidados.
Renderizar el contenido: Usamos las variables para construir nuestro HTML, por ejemplo, integrando los atributos en una etiqueta HTML específica.
¿Cómo se registra e interactúa con un bloque dinámico?
El siguiente paso es decirle a nuestro bloque que use esta nueva función para el renderizado:
Registrar el bloque con un callback de renderizado: Al registrar el bloque, debes incluir el atributo render_callback, indicándole la función PHP que se debe usar.
Desactivar la comparación de la función de edición: Es importante definir que la función edit no se comparará directamente, permitiendo que la renderización en frontend sea manejada por la función PHP que definimos.
Ejemplo práctico y corrección de errores: Durante el desarrollo, los errores como incompatibilidades se pueden resolver modificando cómo se inicializa el valor de retorno, asegurándonos de que la función de renderizado funcione correctamente.
¿Cuáles son las ventajas de los bloques dinámicos?
Los bloques dinámicos superan algunas limitaciones de los bloques estáticos, ofreciendo ventajas significativas:
Automatización del contenido: Ideal para contenidos que deben actualizarse continuamente, como listas de las últimas publicaciones.
Flexibilidad y control: Permite personalizar intensamente donde y cómo se presentan diferentes segmentos de contenido.
Escalabilidad: Adecuado para desarrollar themes o plugins que requieren múltiples instancias del mismo tipo de contenido, cada uno con su propia configuración y apariencia adaptativa.
En la próxima clase, exploraremos métodos eficientes para mejorar la creación y personalización de los bloques, lo que facilitará la construcción de complejos sitios web en menos tiempo. Mientras tanto, sigue practicando con bloques dinámicos para familiarizarte con sus posibilidades y ganar confianza en su uso. ¡El potencial es inmenso!
Y dentro del JS, en la función save tenemos que colocar null.
save:()=>null})
Hola, no se si más adelante se explica este tema, pero con este ejemplo, no se entiende muy bien la diferencia entre el bloque estático y el bloque dinámico,
¡pero de ahí, todo bien con el curso!
Hola césar! Cómo estás?
En las lecturas que siguen hay más ejemplos de bloques dinámicos.
La diferencia fundamental es que los bloque estáticos realizan una validación en la que el renderizado y lo que se almacenó en la base de datos debe coincidir, mientras que los bloques dinámicos no tienen dicha validación y se renderizan desde el servidor utilizando un archivo PHP.
Cualquier duda que tengas, escribila en los comentarios y trataré de despejarla.
Saludos!
Perfectamente claro. Gracias
Hola, ya he realizado como 5 bloques personalizados en sitios profesionales para clientes, y siempre los creo como bloques dinamicos, es decir, utilizando render callbacks.
Lo hago así incluso para bloques que no tienen contenido tradicionalmente dinámico, p. ej, he creado bloques llamados "Special Heading" que simplemente tienen un <span> en el medio, el cuál tiene diferentes estilos.
La razon es que no quiero que se rompan los bloques a la hora de la validación, si en algún momento necesito hacer un cambio en el código fuente.
¿Está bien hacer esto? La desventaja de los bloques dinámicos es que se debe manejar una lógica en JavaScript y otra en PHP, pero considero que lo vale si no trae problemas a la larga... con eso de la validación de la función save().
Hola Natali, cómo estás?
Para eso, hay un par de opciones extra de los bloques que son deprecated y transforms.
Estas sirven para que al modificar un bloque no dinámico, pueda mantener la funcionalidad sin romperse.
No está mal lo que hacés, pero tal vez te sirva conocer estas otras opciones para no tener que desarrollar alguna lógica compleja dos veces.
Saludos!
Lo revisaré, gracias por la información. Te felicito por siempre estar atento a los comentarios y así ayudar a los estudiantes, pocos lo hacen.
¡Consulta! Alguien sabe si se puede crear un slider de imagenes modificable en el editor de gutemberg?
Hola Julio, cómo estás?
Sí en un bloque se puede hacer todo lo que puedas hacer con React y JS, por ende se puede hacer un Slider.
Incluso se pueden utilizar librerías externas para crearlo.
Es cuestión de ponerse y experimentar.
En unas semanas saldrá un curso nuevo de WordPress, exclusivamente sobre bloques para Gutenberg, así que te recomiendo tomarlo para profundizar en este tema.
Saludos!
Buenas noches, una consulta, es válido hacer un slider con WP_Query y librería externa solamente en plantilla sola, o Wordpress requiere que se haga con React.?
Buenas estoy teniendo un inconveniente, paso la imagen y códigos para alguna sugerencia.
<import{ registerBlockType }from'@wordpress/blocks';import{InspectorControls}from'@wordpress/block-editor';import{TextControl,PanelBody,PanelRow}from'@wordpress/components';registerBlockType('pg/basic',{title:"Basic Block",description:"Este es nuestro primer Bloque",icon:"smiley",category:"layout",keywords:['wordpress','gutenberg','platzigift'],attributes:{content:{type:"string",default:"Hello World"}},edit:(props)=>{const{attributes:{content}, setAttributes, className}= props;consthandlerOnChangeTextControl=(newContent)=>{setAttributes({content: newContent})}return<><InspectorControls><PanelBody title="Modificar texto del Bloque Básico" initialOpen={false}><PanelRow><TextControl label="Complete el campo" value={ content } onChange={ handlerOnChangeTextControl }/></PanelRow></PanelBody></InspectorControls><h3>{content}</h3></>},save:()=>null,});>
Hola Diego, cómo estás?
En el código se ven varios errores, pero creo que son por cómo los reproduce el MD.
El error está dentro del JS, pero para poder revisarlo, tendrías que subirlo a un repo para acceder directo a los archivos.
Saludos!
No entendí la diferencia entre el render estático y dinámico :¿
Hola Edgar!
El render estático se genera completo en JS y el código generado en la función "edit" debe dar siempre como resultado el mismo código que generamos en la vista, dentro de la función "save'.
El bloque dinámico no hace está validación y delega el renderizado a una función PHP que se procesa y se renderiza por medio de SSR (Server Side Render).
Es por eso que si el contenido va a tener elementos variables que no puedan configurarse desde el bloque de forma estática (por ejemplo, la últimas entradas, que van a cambiar cada vez que se publique una nueva), el bloque debe ser dinámico.
Espero haber aclarado la duda, sino me vuelves a escribir.
Saludos!
Entiendo que, a menos que se trate de información fija e invariable (como un shortcode), los bloques deberían ser dinámicos por defecto.
Hola Rodrigo, cómo estás?
Lo que determina si un bloque es dinámico o no es el tipo de información que maneja.
Si la misma es estática y se puede modificar desde el admin, puede no serlo. Siempre que requieras un loop o una API, debe ser dinámico.
Saludos!
Muy claro @whoisnegrello ... Aunque me hubiera gustado ver el ejemplos como los que mencionabas con contenido dentro del contenido, a lo siguiente!!
Hola. Yo intento replicar tus pasos, y me imprime es una array vacio.
De hecho muestro que contiene attribute y el array esta complemente vacio. Tienes alguna sugerencia como puedo arreglarlo?
Hola Danilo, cómo estás?
Si subís el código a un repositorio puedo revisarlo para ver dónde pudés tener el error. El array vacío puede producirse por multiples factores.
Dejame el enlace a tu repo y lo veo sin problemas.
Saludos!
Para crear un nuevo bloque, tenemos que registrar con Gutenberg llamando registerBlockType() y pasando el nombre de bloque más un objeto de configuración. Este objeto tiene bastantes propiedades que requieren de explicación adecuada.
add_react
Aquí añadimos el script que webpack nos habrá compilado, en /build/index.js, y con la dependencia wp-element que incluye React
expose_data
Aquí devolvemos un objeto que en este caso solo contiene un dato que es la dirección del directorio (que nos puede ser útil para utilizar imágenes, por ejemplo)
Aquí es donde configuraríamos el exportar datos de las entradas, de los bloques, de lo que sea que queramos exponer para luego consumir con React
Con esto ya lo tenemos todo para empezar el desarrollo con React.
