La API de Bloques en WordPress es el principal mecanismo mediante el cual los desarrolladores pueden registrar su propia funcionalidad en el editor de bloques de WordPress. Los bloques representan la unidad fundamental del editor y permiten la extensión de capacidades a través de plugins y temas. Esta guía proporciona una explicación detallada de cada sección de la API y su aplicación en el desarrollo de bloques personalizados.
Las anotaciones permiten a los desarrolladores agregar información adicional a los bloques sin modificar directamente su contenido. Son útiles para proporcionar herramientas de edición o comentarios dentro del editor.
Ejemplo: Agregar anotaciones a un bloque de texto para resaltar cambios o sugerencias.
A lo largo del tiempo, se han introducido varias versiones de la API de bloques para mejorar su compatibilidad y funcionalidad con las actualizaciones del editor de bloques. Es importante asegurarse de que los bloques sean compatibles con la versión actual del editor de WordPress.
Los atributos permiten almacenar datos dentro de los bloques y son esenciales para su personalización.
Ejemplo: Un bloque de botón puede tener atributos como color, texto y enlace.
registerBlockType('my-plugin/button', {
attributes: {
text: { type: 'string', default: 'Haga clic aquí' },
color: { type: 'string', default: '#000' },
},
edit({ attributes, setAttributes }) {
return <button style={{ color: attributes.color }}>{attributes.text}</button>;
},
save({ attributes }) {
return <button style={{ color: attributes.color }}>{attributes.text}</button>;
}
});
Permiten la vinculación de valores entre bloques y otras entidades, como configuraciones globales o contextos compartidos.
Facilita el paso de información entre bloques, permitiendo que un bloque hijo herede datos de su bloque padre.
Ejemplo: Un bloque padre que establece un color de fondo y los bloques hijos que lo utilizan.
registerBlockType('my-plugin/parent', {
providesContext: { color: 'color' },
edit({ attributes, setAttributes }) {
return <div style={{ backgroundColor: attributes.color }}><InnerBlocks /></div>;
}
});
El manejo de versiones antiguas de bloques es crucial para evitar problemas de compatibilidad cuando los desarrolladores actualizan sus bloques.
Define los métodos edit y save, que controlan la interfaz de edición y el código HTML final del bloque.
block.jsonEl archivo block.json permite definir información clave sobre un bloque, como su nombre, categoría y atributos.
Ejemplo:
{
"name": "my-plugin/button",
"title": "Botón Personalizado",
"category": "design",
"attributes": {
"text": { "type": "string" },
"color": { "type": "string" }
}
}
Los patrones permiten definir diseños predefinidos de bloques que pueden ser reutilizados en distintas partes del sitio.
El proceso de registro permite a los desarrolladores definir nuevos bloques con configuraciones personalizadas.
import { registerBlockType } from '@wordpress/blocks';
registerBlockType('my-plugin/example', {
title: 'Ejemplo de Bloque',
icon: 'smiley',
category: 'common',
edit: () => <p>Editor del Bloque</p>,
save: () => <p>Bloque Guardado</p>
});
Los selectores permiten extraer información de bloques de manera eficiente para su manipulación en el editor.
Define reglas CSS y configuraciones de diseño específicas para los bloques.
supports)Permite activar o desactivar ciertas características de los bloques, como alineación, colores y tipografía.
Facilitan la conversión de un bloque a otro sin perder contenido o configuraciones.
Permiten predefinir estructuras de bloques que pueden ser utilizadas en distintas secciones del sitio.
Definen diferentes configuraciones y presentaciones de un mismo bloque para optimizar su uso.
La API de Bloques en WordPress permite a los desarrolladores personalizar y extender el editor de una manera flexible y modular. Al aprovechar estas herramientas, es posible mejorar la experiencia de edición y ofrecer nuevas funcionalidades a los usuarios finales. Con esta guía detallada, los desarrolladores pueden comprender cómo aprovechar al máximo la API de bloques para crear soluciones innovadoras dentro del ecosistema de WordPress.
Referencia: Desarrolladores WordPress
