Conçu pour les personnes qui modifient le contenu
Un panneau de champs plus large, des commandes de barre d’outils, des règles d’édition et un inventaire dans l’admin, définis dans block.json et blockstudio.json.
De la place pour chaque champ
Les répéteurs, les champs de code et les groupes imbriqués sont à l’étroit dans la barre latérale. L’en-tête du bloc comporte un bouton Open Expanded Editor qui ouvre les mêmes champs dans un panneau plus large à droite. Le bouton Terminé, l’arrière-plan ou la touche Échap ferme le panneau, et le bloc reste sélectionné.
Le même moteur de rendu des champs écrit les mêmes attributs : l’aperçu se met donc à jour pendant la saisie, sans nécessiter de réglage block.json. Les champs qui doivent se trouver à côté du contenu peuvent être déplacés dans la barre d’outils du bloc avec "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"
}
]
}
}Saisie semi-automatique depuis votre CSS
Répertoriez les URL des feuilles de style dans blockEditor.cssClasses et cssVariables ; les champs des classes et du code indiquent ce que ces fichiers définissent.
Repères au survol et à la sélection
Définissez blockEditor.enhance pour ajouter à l’éditeur les repères de survol et de sélection de Blockstudio.
Qui peut accéder à l’éditeur
users.ids et users.roles dans blockstudio.json désignent les ID utilisateur et les rôles disposant d’un accès éditeur via Blockstudio.
Dans la langue de votre client
Les contrôles des champs, l’écran d’administration et le canevas utilisent la langue du site ou celle du profil de chaque utilisateur, à partir des traductions incluses.
Ressources réservées à l’éditeur
editor.assets dans blockstudio.json répertorie les ressources supplémentaires à charger dans l’éditeur.
Médias dans la charge utile initiale
Les champs de fichiers lisent les données des pièces jointes dans la charge utile initiale de l’éditeur, y compris dans les groupes imbriqués, les onglets et les répéteurs, avant de solliciter le point de terminaison des médias.
Une seule requête d’aperçu à la fois
Une nouvelle requête d’aperçu pour un bloc annule la précédente dans le navigateur, tandis que l’aperçu actuel reste affiché.
Chaque bloc conserve ses valeurs
Les blocs sélectionnés simultanément conservent leurs propres valeurs, et les opérations d’annulation et de rétablissement prennent en compte RichText et les champs de la barre latérale.
Désactivez un champ, conservez sa valeur
Un éditeur peut désactiver un champ depuis l’inspecteur : survolez son bord gauche jusqu’à l’apparition de la bordure bleue, puis cliquez. Le champ devient translucide, sa valeur reste enregistrée et le bloc cesse de l’afficher jusqu’à ce qu’une personne le réactive.
La même chose est possible pour les éléments individuels d’un champ de fichiers : une image peut être masquée tandis que les autres restent visibles. Définissez "switch": true pour afficher un bouton de bascule sur un champ, et lisez $a['_disabled'] lorsqu’un modèle doit le savoir.
{
"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; ?>Un aperçu dans l’outil d’insertion
Ajoutez une clé example à block.json pour que le bloc affiche un aperçu lorsque l’éditeur le survole dans l’outil d’insertion de blocs. Un objet vide suffit pour un bloc dont les valeurs par défaut conviennent.
Donnez à example.attributes des exemples de valeurs pour vos propres champs, ou à example.innerBlocks un arbre de départ pour un bloc qui en englobe d’autres.
{
"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>Règles d’édition dans un seul fichier
Définissez les options proposées par l’outil d’insertion sans code de liaison au thème. blockEditor.blocks accepte des listes d’autorisation et de refus avec des caractères génériques tels que core/*, renomme et réorganise les catégories, supprime les styles de blocs enregistrés dans PHP, masque les anciens widgets et peut désactiver le répertoire de blocs.
blockEditor.patterns active ou désactive les sources de motifs principales, distantes, du thème et Blockstudio, et filtre leurs catégories. blockEditor.media désactive Openverse et limite les tailles d’image proposées aux éditeurs.
{
"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"] }
}
}
}Un premier affichage rapide
Les blocs Blockstudio sont rendus sur le serveur. L’éditeur précharge le rendu des blocs déjà présents dans l’article, y compris les blocs imbriqués dans les compositions synchronisées, puis le réutilise pour le premier affichage au lieu d’envoyer une requête de rendu pour chaque bloc enregistré.
Le code, les classes, les attributs et les commandes WYSIWYG sont téléchargés à leur première apparition, de sorte que les blocs non sélectionnés ne les chargent jamais. Un bloc qui n’a pas besoin d’un aperçu dynamique peut définir disableLoading et afficher un espace réservé, tout en gardant chaque champ modifiable.
{
"name": "my-theme/map",
"title": "Map",
"blockstudio": {
"blockEditor": {
"disableLoading": true
}
}
}{
"blockEditor": {
"disableLoading": true
}
}Des aperçus fidèles à la page
Interactivity API se charge dans l’iframe de l’éditeur, ce qui permet à data-wp-context, aux liaisons, aux gestionnaires d’événements et aux actions de votre magasin de s’exécuter sur le canevas. Les composants bsui/* intégrés s’appuient dessus : une boîte de dialogue s’ouvre et une liste déroulante se déploie pendant la modification.
Les liens d’un aperçu ne mènent jamais ailleurs, qu’on clique dessus, qu’on les ouvre avec une touche de modification ou qu’on les active au clavier, et le clic sélectionne toujours le bloc. Avec assets.reset.enabled, les classes du corps du thème sont copiées dans le canevas, afin que les sélecteurs tels que .brand-a .site-card y correspondent aussi.
{
"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 inventaire dans Tools > Blockstudio
L’écran d’administration répertorie ce que Blockstudio a enregistré depuis le système de fichiers : blocs, extensions, champs, pages et leur état de synchronisation, ainsi que schémas db.php, dans les tableaux DataViews natifs de WordPress. Une vue Databases permet de parcourir les enregistrements de chaque schéma, récupérés et paginés via REST API.
Lorsque le blocks.json du thème nomme des registres, une vue Registry répertorie leurs blocs et les importe dans votre répertoire de blocs depuis wp-admin. L’écran est accessible aux utilisateurs disposant de manage_options, et le filtre blockstudio/admin/enabled permet de le désactiver.
{
"$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');Le kit d’extension officiel
Modèles de site premium, instructions système pour l’IA et communauté privée Discord. Achat unique, mises à jour à vie.
- 500+ modèles de sites
- Instructions système de l’IA
- Mises à jour à vie
- Communauté privée Discord