Creación de Bloque Nativo con Renderizado del Lado del Servidor (SSR)
La construcción de un bloque nativo con SSR (Server Side Render) lleva algunos pasos:
Modificar los atributos del componente
Agregar los componentes necesarios para poder editar todos los campos del bloque
Crear las funciones necesarias para establecer los atributos de cada componente
Modificar la función PHP de registro para que espere todos los atributos
Modificar la función PHP de renderizado dinámico
Abórdalo paso a paso.
Modificar los atributos del componente
Tu componente debe tener dos atributos, el texto del titular y la imagen de portada. En el ejemplo "Basic Block" solo habías generado el atributo content (que te va a servir para el título), pero no tenías ningún lugar donde guardar la imagen.
Para seguir las buenas prácticas, vas a agregar 2 atributos. Uno para la URL de la imagen y el otro para el texto alternativo de la misma, para colaborar con el SEO y la accesibilidad.
Ahora vamos a nuestro archivo index.js y modifiquemos los atributos de la siguiente manera:
attributes:{content:{type:'string',// Definimos el tipo de dato que debe esperar el componente. En este caso es un texto, por eso lo declaramos como string.default:'Hello world'// Definimos el valor por defecto.},mediaURL:{type:'string'// Definimos el tipo de dato que debe esperar el componente. En este caso es un texto (URL de la imagen), por eso lo declaramos como string.},mediaAlt:{type:'string'// Definimos el tipo de dato que debe esperar el componente. En este caso es un texto (Texto Alternativo de la imagen), por eso lo declaramos como string.}}
Como vemos, agregamos mediaURL y mediaAlt con las características que sirven para que el componente sepa que tipo de dato esperar.
Agregar los componentes necesarios para poder editar todos los campos del bloque
Ahora que ya configuraste los nuevos atributos, tienes que analizar qué componentes vas a utilizar. En este caso, es un componente que se denomina MediaUpload y que te permitirá elegir la imagen de portada.
Para ello vamos a importarlo desde el paquete @wordpress/block-editor de la siguiente manera:
import{InspectorControls,MediaUpload}from'@wordpress/block-editor';// Esta librería está disponible desde que instalamos el paquete "wordpress/scripts" desde NPM
Por otro lado, necesitas un botón que pueda desencadenar el evento para elegir la imagen, por eso importaremos el componente Button desde el paquete @wordpress/components.
Luego vas a modificar la UI en la sidebar para incorporar el elemento dentro de la clave edit:
<InspectorControls><PanelBody title="Modificar texto del Bloque Básico" initialOpen={true}><PanelRow><TextControl label="Complete el campo"// Indicaciones del campo value={ content }// Asignación del atributo correspondiente onChange={ handlerOnChangeInput }// Asignación de función para gestionar el evento OnChange/></PanelRow></PanelBody><PanelBody title="Seleccioná una imagen" initialOpen={true}><PanelRow><MediaUpload onSelect={ handlerOnSelectMediaUpload }// Asignación de función para gestionar el evento OnSelect type="image"// Limita los tipos de archivos que se pueden seleccionar// Se envía el evento open y el renderizado del elemento que desencadenará la apertura de la librería, en este caso un botón render={({open})=>{//Agregamos las clases de los botones de WordPress habituales para que mantenga el estilo dentro del editorreturn<Button className="components-icon-button image-block-btn is-button is-default is-large" onClick={open}>Elegir una imagen</Button>;}}/></PanelRow></PanelBody></InspectorControls>
Crear las funciones necesarias para establecer los atributos de cada componente
Como puedes ver en el código anterior, vamos a crear la función handlerOnSelectMediaUpload para establecer los atributos del componente.
Por eso, vamos a crearla dentro de tu clave edit:
consthandlerOnSelectMediaUpload=(image)=>{setAttributes({mediaURL: image.sizes.full.url,// El objeto image cuenta con todas las propiedades de los archivos de la Media Library de WordPress, entre ellas los diferentes tamañosmediaAlt: image.alt// También cuenta con el Texto Alternativo definido en la Media Library para cada archivo})}
Dentro de image vas a poder acceder a todas las características de las imágenes de la galería de WordPress, es decir, a toda la información del archivo y a todos los metadatos.
Es por eso que vas a asignar el image.alt que es el campo que se completa en la librería de medios de WordPress. Por otro lado, asignamos el valor de la URL de la imagen del tamaño completo, por eso utilizamos image.sizes.full.url.
El código del tu clave edit quedará así:
edit:(props)=>{const{attributes:{content}, setAttributes, className, isSelected}= props;// Función para guardar el atributo contentconsthandlerOnChangeInput=(newContent)=>{setAttributes({content: newContent})}// Función para guardar el atributo mediaURL y mediaAltconsthandlerOnSelectMediaUpload=(image)=>{setAttributes({mediaURL: image.sizes.full.url,mediaAlt: image.alt})}return<><InspectorControls><PanelBody// Primer panel en la sidebar title="Modificar texto del Bloque Básico" initialOpen={true}><PanelRow><TextControl label="Complete el campo"// Indicaciones del campo value={ content }// Asignación del atributo correspondiente onChange={ handlerOnChangeInput }// Asignación de función para gestionar el evento OnChange/></PanelRow></PanelBody><PanelBody// Segundo panel en la sidebar title="Seleccioná una imagen" initialOpen={true}><PanelRow><MediaUpload onSelect={ handlerOnSelectMediaUpload }// Asignación de función para gestionar el evento OnSelect type="image"// Limita los tipos de archivos que se pueden seleccionar// Se envía el evento open y el renderizado del elemento que desencadenará la apertura de la librería, en este caso un botón render={({open})=>{//Agregamos las clases de los botones de WordPress habituales para que mantenga el estilo dentro del editorreturn<Button className="components-icon-button image-block-btn is-button is-default is-large" onClick={open}>Elegir una imagen</Button>;}}/></PanelRow></PanelBody></InspectorControls><ServerSideRender// Renderizado de bloque dinámico block="pg/basic"// Nombre del bloque attributes={ props.attributes}// Se envían todos los atributos/></>}
Modificar la función PHP de registro para que espere todos los atributos
Ahora que tu JS está listo, tienes que hacer los cambios necesarios en las funciones PHP. Para ello lo primero es anticiparle al servidores, cuales son los atributos que recibirá el bloque.
Para ello se debe modificar la función de registro del bloque de la siguiente manera en el archivo functions.php:
// Asignación de la función de registro del bloque al Hook "init"add_action('init','pgRegisterBlock');// Función de registro del bloquefunctionpgRegisterBlock(){// Tomamos el archivo PHP generado en el Build$assets=include_onceget_template_directory().'/blocks/build/index.asset.php';wp_register_script('pg-block',// Handle del Scriptget_template_directory_uri().'/blocks/build/index.js',// Usamos get_template_directory_uri() para recibir la URL del directorio y no el Path$assets['dependencies'],// Array de dependencias generado en el Build$assets['version']// Cada Build cambia la versión para no tener conflictos de caché);register_block_type('pg/basic',// Nombre del bloquearray('editor_script'=>'pg-block',// Handler del Script que registramos arriba'attributes'=>array(// Repetimos los atributos del bloque, pero cambiamos los objetos por arrays'content'=>array('type'=>'string','default'=>'Hello world'),'mediaURL'=>array('type'=>'string'),'mediaAlt'=>array('type'=>'string')),'render_callback'=>'pgRenderDinamycBlock'// Función de callback para generar el SSR (Server Side Render)));}
Como puedes ver, es la misma estructura que ya habías generado en tu JS.
Modificar la función PHP de renderizado dinámico
El último paso es modificar el renderizado dinámico del bloque para que tenga en cuenta todos los atributos.
Para ello vamos a utilizar de base el que generaste con ACF y vamos a reproducir esa misma estructura en la función de renderizado en el archivo functions.php. Haciendo esto, tu código debería quedar de la siguiente manera:
// Función de callback para el SSR (Server Side Render)functionpgRenderDinamycBlock($attributes,$content){return('<h1 class="my-3">'.$attributes['content'].'</h1>
<img src="'.$attributes['mediaURL'].'" alt="'.$attributes['mediaAlt'].'" />
<hr>');}
De esta forma, estás incorporando todos los atributos y componentes a tu bloque nativo.
Si todo salió bien, esto es lo que deberías ver en tu navegador al incorporar tu Basic Block:
Recuerda que siempre que hagas cambios en tu código JS tienes que volver a compilar o tienes que tener activado el comando npm run start para que cada vez que guardes compile nuevamente tu bloque.
Espectacular!! la ruta de cursos de WordPress me ayudó a entender, en un paneo general, cómo funciona el mundo de la web en general.
Está espectacular tener en un sola ruta de aprendizaje tanto cosas fundantes de los pilares del desarrollo web como lo son API REST, AJAX, JQuery y PHP (Tremenda introducción a los modelos cliente-servidor), como también tecnologías cuting-edge como React, Node y Javascript. Además de que te permite salir con un producto terminado para empezar a desarrollar tu portafolio con una perspectiva full stack simplificada (o quizás centrada en el frontend pero con una mínima idea de backend que desconocía por completo).
La escuela de WordPress queda recomendadísima para quien no entiende mucho de desarrollo web y quiere adquirir los conocimientos fundamentales.
Soberbio comentario el tuyo, Tomás. Empecé con el curso de GIT y no estaba seguro que agregar a mi ruta para crecer a lo ancho en este nuevo mundo del desarrollo web. Tu experiencia con el curso me convenció. Gracias por compartir tu experiecia. Nos leemos por ahí
Tener en cuenta que dentro de los 'components' debe incluirse ```
Button
Esta hermoso,
seria bueno un añadido de como crear galerías con post personalizados.
Tus comentarios en las dos lecturas me alegraron el día.
Creo que es de lo más valioso del curso y muchxs los saltean.
Gracias y saludos!
Hola Lucio!!
No veo donde se agrega el código de la sección "Modificar los atributos del componente", creí que iban dentro de
edit: (props) => { const { attributes: {content}, setAttributes, className, isSelected} = props;
Pero no veo que hayas incluido el codigo ahi. En el repo de github tampoco el código de esta clase, puedes actualizar el repo por favor para saber donde va este código?
Gracias!!
Hola esteban, cómo estás?
Si revisas el contenido de la nota vas a encotnrar una sección de código donde dice "El código del tu clave edit quedará así" y ahí se encuentra todo el contenido del código incluyendo las funciones para modificar los atributos del componente.
En el repo no está esta sección, porque aquí está el código completo y no se comprendería en el contexto del repo sin la explicación de que sirve para reemplazar los bloques hechos con ACF.
Revisalo y cualquier otra duda, quedo a disposición.
Saludos!
Hola Esteban, como estás?
Veo que no están los atributos mediaAlt y mediaURL, no se si es que falta actualizar el repo. Pero fijate que hay una función que actualiza la imagen y en la misma se actualiza el texto. En el código esta función se llama handlerOnSelectMediaUpload.
Por ahí viene el tema seguro. Avisame si lográs resolverlo.
Saludos!
Los bloques ACF son un marco PHP y no requieren JavaScript. Esto se diferencia de la API de bloques de WordPress, que se basa en gran medida en técnicas modernas de JavaScript, sintaxis y herramientas de compilación.
Todo clarísimo. Gracias
Respuesta:
SSR debería estar activado de forma predeterminada en las páginas AMP. Para verificar, eche un vistazo a la fuente de la página de una página AMP y debería ver el transformed="self;v=1"atributo en el <html>elemento.
Esto está demasiado bueno!!
...importaremos el componente Button desde el paquete @wordpress/components mediante:
