Creado para quienes editan
Un panel de campos más amplio, controles en la barra de herramientas, políticas del editor e inventario administrativo, configurados en block.json y blockstudio.json.
Espacio para todos los campos
Los repetidores, los campos de código y los grupos anidados quedan apretados en la barra lateral. El encabezado del bloque incluye un botón Open Expanded Editor que abre los mismos campos en un panel más amplio desde la derecha. Al terminar, al hacer clic fuera o pulsar Esc se cierra, y el bloque permanece seleccionado.
Es el mismo generador de campos y escribe los mismos atributos, así que la vista previa se actualiza mientras escribes sin necesidad de configurar block.json. Los campos que deben estar junto al contenido pueden pasar a la barra de herramientas del bloque con "position": "toolbar".
{
"name": "my-theme/hero",
"title": "Hero",
"blockstudio": {
"attributes": [
{
"id": "alignment",
"type": "select",
"label": "Alignment",
"position": "toolbar",
"options": [
{ "value": "left", "label": "Left" },
{ "value": "center", "label": "Center" },
{ "value": "right", "label": "Right" }
]
},
{
"id": "title",
"type": "text",
"label": "Title"
}
]
}
}Autocompletado desde tu CSS
Enumera las URL de hojas de estilo en blockEditor.cssClasses y cssVariables; los campos de clases y código sugieren qué definen esos archivos.
Indicadores de selección y al pasar el cursor
Configura blockEditor.enhance para añadir al editor las indicaciones de Blockstudio al pasar el cursor y al seleccionar.
Quién tiene acceso al editor
users.ids y users.roles en blockstudio.json indican los ID de usuario y los roles con acceso al editor Blockstudio.
En el idioma de tu cliente
Los controles de los campos, la pantalla de administración y el lienzo usan el idioma del sitio o el idioma del perfil de cada usuario, mediante traducciones incluidas.
Recursos exclusivos del editor
editor.assets en blockstudio.json enumera recursos adicionales que se cargarán en el editor.
Medios en la primera carga útil
Los campos de archivos leen los datos de los adjuntos de la carga útil inicial del editor, a través de grupos anidados, pestañas y repetidores, antes de consultar el endpoint de medios.
Una solicitud de vista previa a la vez
Una solicitud de vista previa más reciente para un bloque cancela la anterior en el navegador, mientras la vista previa actual permanece en pantalla.
Cada bloque conserva sus valores
Los bloques seleccionados a la vez conservan sus propios valores, y deshacer y rehacer incluye RichText y los campos de la barra lateral.
Desactiva un campo y conserva su valor
Un editor puede desactivar un campo desde el inspector: pasa el cursor por su borde izquierdo hasta que aparezca el borde azul y haz clic. El campo se vuelve translúcido, su valor permanece guardado y el bloque deja de mostrarlo hasta que alguien lo vuelva a activar.
También funciona con elementos individuales de un campo de archivos, así que una imagen puede quedar oculta mientras se muestran las demás. Configura "switch": true para dar a un campo un interruptor visible, y consulta $a['_disabled'] cuando una plantilla necesite saberlo.
{
"name": "acme/card",
"title": "Card",
"blockstudio": {
"attributes": [
{
"id": "title",
"type": "text",
"label": "Title",
"switch": true
}
]
}
}<?php if (!empty($a['_disabled']) && in_array('title', $a['_disabled'])) : ?>
<p>No title on this one.</p>
<?php else : ?>
<h1><?php echo esc_html($a['title']); ?></h1>
<?php endif; ?>Una vista previa en el insertador
Añade una clave example a block.json y el bloque mostrará una vista previa cuando el editor pase el cursor sobre él en el insertador de bloques. Basta con un objeto vacío para un bloque que se vea bien con sus valores predeterminados.
Proporciona a example.attributes valores de ejemplo para tus propios campos, o example.innerBlocks un árbol inicial para un bloque que envuelva otros bloques.
{
"name": "my-theme/hero",
"title": "Hero",
"category": "text",
"example": {
"attributes": {
"title": "This title will be shown in the preview"
}
},
"blockstudio": true
}<h1><?php echo esc_html($a['title']); ?></h1>Política del editor en un solo archivo
Decide qué ofrece el insertador sin código auxiliar del tema. blockEditor.blocks acepta listas de permitidos y bloqueados con comodines como core/*, cambia los nombres y el orden de las categorías, elimina estilos de bloque registrados en PHP, oculta los widgets heredados y permite desactivar el directorio de bloques.
blockEditor.patterns activa o desactiva las fuentes de patrones del núcleo, remotas, del tema y Blockstudio, y filtra sus categorías. blockEditor.media desactiva Openverse y limita los tamaños de imagen que pueden elegir los editores.
{
"blockEditor": {
"blocks": {
"allow": ["core/*", "my-theme/*"],
"deny": ["core/embed", "core/freeform"],
"directory": false,
"categories": {
"rename": { "text": "Writing" },
"order": ["my-theme", "text", "media"]
},
"styles": {
"deny": { "my-theme/card": ["outline"] }
},
"legacyWidgets": { "hide": ["archives", "calendar"] }
},
"patterns": {
"core": false,
"remote": false,
"categories": { "deny": ["gallery"] }
},
"media": {
"openverse": false,
"imageSizes": { "allow": ["thumbnail", "large"] }
}
}
}Una primera visualización rápida
Los bloques Blockstudio se renderizan en el servidor. El editor precarga el resultado renderizado de los bloques que ya están en la entrada, incluidos los bloques anidados en patrones sincronizados, y lo reutiliza para la primera visualización en vez de enviar una solicitud al renderizador por cada bloque guardado.
El código, las clases, los atributos y los controles WYSIWYG se descargan cuando aparecen por primera vez, así que los bloques no seleccionados nunca los cargan. Un bloque que no necesite una vista previa en vivo puede configurar disableLoading y mostrar un marcador de posición, con todos los campos aún editables.
{
"name": "my-theme/map",
"title": "Map",
"blockstudio": {
"blockEditor": {
"disableLoading": true
}
}
}{
"blockEditor": {
"disableLoading": true
}
}Vistas previas que se comportan como la página
Interactivity API se carga dentro del iframe del editor, así que data-wp-context, los enlaces de datos, los controladores de eventos y las acciones del almacén se ejecutan en el lienzo. Los componentes bsui/* incluidos se basan en ello, para que un diálogo se abra y un menú desplegable se despliegue mientras editas.
Los enlaces de una vista previa nunca llevan a otra página, ya sea que se haga clic en ellos, se abran con una tecla modificadora o se activen desde el teclado, y el clic sigue seleccionando el bloque. Con assets.reset.enabled, las clases del cuerpo del tema se copian al lienzo, así que los selectores como .brand-a .site-card también coinciden allí.
{
"name": "my-theme/disclosure",
"title": "Disclosure",
"blockstudio": {
"interactivity": true
}
}<?php
add_filter('blockstudio/editor/canvas/body_class', function (array $classes) {
return array_values(array_diff($classes, ['logged-in']));
});Un inventario en Herramientas > Blockstudio
La pantalla de administración muestra lo que Blockstudio registró desde el sistema de archivos: bloques, extensiones, campos, páginas con su estado de sincronización y esquemas db.php, en tablas DataViews nativas de WordPress. Una vista de bases de datos permite explorar los registros de cada esquema, obtenidos y paginados mediante REST API.
Cuando el blocks.json del tema nombra registros, una vista de registros muestra sus bloques y los importa al directorio de bloques desde wp-admin. Los usuarios con acceso al editor manage_options pueden abrir la pantalla, y el filtro blockstudio/admin/enabled la desactiva.
{
"$schema": "https://blockstudio.dev/schema/blocks.json",
"directory": "blockstudio",
"registries": {
"ui": "https://blocks.example.com/registry.json"
}
}<?php
add_filter('blockstudio/admin/enabled', '__return_false');El kit oficial de extensiones
Plantillas de sitio prémium, instrucciones de sistema para IA y una comunidad privada de Discord. Compra única, actualizaciones de por vida.
- Más de 500 plantillas de sitios web
- Instrucciones del sistema de IA
- Actualizaciones de por vida
- Comunidad privada de Discord