Descubre con este tutorial cómo mostrar un campo personalizado en el editor de bloques de WordPress, sin plugins ni bloques personalizados.
Una de las novedades de WordPress 6.5 es que incorpora una nueva API llamada Block Binding. Esta proporciona la opción de mostrar campos personalizados directamente en un bloque. Esto es una fantástica noticia ya que ahora no necesitas crear un bloque a medida sino que puedes usar uno ya existente.
Actualmente solo hay 4 bloques que permiten hacerlo:
- Párrafo
- Encabezado
- Botón
- Imagen
Esto ya permite hacer cosas muy interesantes y seguro que en próximas actualizaciones de WordPress esta característica se ampliará a más bloques.
Por el momento, la fuente de los campos personalizados son lo metadatos del post, pero en el próximo tutorial te explicaré como ampliar las fuentes.
Esta nueva opción abre una amplia gama de oportunidades.
En este tutorial te voy a explicar cómo puedes introducir el tiempo de lectura en un bloque de párrafo para que puedas mostrarlo donde quieras.
Pasos para mostrar un campo personalizado usando Block Binding
1. Registrar el metadato
Añade el siguiente snippet al fichero functions.php o a tu plugin de funcionalidades:
Para ver este código y los otros 2107 snippets de esta web,
identifícate o suscríbete aquí.
Con este código usas la función register_meta() para registrar el metadato reading_time.
2. Introduce el bloque donde desees
Una vez que has registrado el nuevo metadato, te aparecerá en el desplegable de la metabox que encontrarás al final de las entradas:
3. Introduce el bloque donde desees
WordPress 6.5 no incorpora una interfaz visual para gestionar el block binding, así que tienes que hacerlo desde el editor de código.
Para acceder al mismo ve al los 3 puntos de la esquina superior derecha del editor y selecciona «Editor de código»:
Pro tip: utiliza el atajo de teclado: Cmd + Alt + Shift + M para ir más rápido. 😉
Una vez en él, añade este HTML:
<!-- wp:paragraph {
"metadata":{
"bindings":{
"content":{
"source":"core/post-meta",
"args":{
"key":"reading_time"
}
}
}
}
} -->
<p></p>
<!-- /wp:paragraph -->En este caso, usas un bloque de párrafo para obtener el metadato reading_time a través de la API de Block Binding.
Una vez lo introduzcas puedes volver a pasar a la edición visual del contenido. Verás algo así:
Pero en la parte frontal se mostrará el valor del metadato.
La ventaja de tener un campo personalizado en un bloque es que puedes maquetarlo a tu gusto.
Por ejemplo, puedes mostrarlo antes del contenido de la página tanto de forma manual como dentro de una plantilla de página.
Conclusiones
Ya ves qué fácil es mostrar el campo personalizado que desees en cualquier punto de la web gracias a poder mostrarlo directamente en un bloque de párrafo.
Si tienes alguna duda te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.
Todo ventajas de ser suscriptor. 😉
