Créer des blocs instrumentés pour une utilisation avec l’éditeur universel create-block

Découvrez comment créer des blocs instrumentés pour une utilisation avec l’éditeur universel dans la création WYSIWYG avec des projets Edge Delivery Services.

Conditions préalables prerequisites

Ce guide fournit des instructions détaillées sur la création de blocs instrumentés pour l’éditeur universel dans la création WYSIWYG avec des projets Edge Delivery Services. Il aborde l’ajout de composants, le chargement de définitions de composants dans l’éditeur universel, la publication de pages, l’implémentation des décorations et des styles de bloc, l’application des modifications à l’environnement de production ainsi que la vérification de ces modifications. Quand vous aurez terminé ce guide, vous pourrez créer et déployer un nouveau bloc pour votre propre projet.

Ce guide nécessite nécessairement une connaissance existante de la création WYSIWYG avec des projets Edge Delivery Services ainsi que de l’éditeur universel. Avant de commencer ce guide, vous devez déjà avoir accès à Edge Delivery Services et connaître ses principes de base, notamment :

Ce guide s’appuie sur le travail effectué dans le guide Guide de prise en main du développeur pour la création WYSIWYG avec Edge Delivery Services .

Ajouter un nouveau bloc à votre projet add-block

Dans ce guide, vous allez créer un bloc pour afficher une citation mémorable sur votre page.

Pour simplifier cet exemple, toutes les modifications sont apportées à la branche main du référentiel du projet. Bien sûr, pour votre projet réel, vous devez suivre les bonnes pratiques en matière de développement en effectuant le développement sur une autre branche et en examinant toutes les modifications via une demande d’extraction avant de fusionner vers main.

Adobe vous recommande de développer des blocs selon une approche en trois étapes :

L’exemple de bloc de citation suivant suit cette approche.

Créer une définition et un modèle de bloc create-block-model

1. Cloner le projet GitHub local que vous avez créé dans le guide Guide de prise en main du développeur pour la création WYSIWYG avec Edge Delivery Services et ouvrez-le dans un éditeur de votre choix.

2. Modifiez le fichier component-definition.json à la racine du projet et ajoutez la définition suivante pour votre nouveau bloc de guillemet et enregistrez le fichier.

Exemple JSON

code language-json
{ "title": "Quote", "id": "quote", "plugins": { "xwalk": { "page": { "resourceType": "core/franklin/components/block/v1/block", "template": { "name": "Quote", "model": "quote", "quote": "<p>Think, McFly! Think!</p>", "author": "Biff Tannen" } } } } }

Capture d’écran

3. Modifiez le fichier component-models.json à la racine du projet et ajoutez la définition de modèle suivante pour votre nouveau bloc de guillemet et enregistrez le fichier.

Exemple JSON

code language-json
{ "id": "quote", "fields": [ { "component": "text-area", "name": "quote", "value": "", "label": "Quote", "valueType": "string" }, { "component": "text-input", "valueType": "string", "name": "author", "label": "Author", "value": "" } ] }

Capture d’écran

4. Modifiez le fichier component-filters.json à la racine du projet et ajoutez le bloc de guillemet à la définition de filtre pour permettre l’ajout du bloc à n’importe quelle section et enregistrez le fichier.

Exemple JSON

code language-json
{ "id": "section", "components": [ "text", "image", "button", "title", "hero", "cards", "columns", "quote" ] }

Capture d’écran

5. À l’aide de git, validez ces modifications dans votre branche main.

Créer du contenu avec le bloc create-content

Maintenant que votre bloc de citation de base est défini et validé dans l’exemple de projet, vous pouvez ajouter un bloc de citation à une page existante.

Appliquer un style au bloc style-block

Maintenant que vous avez un bloc de citation fonctionnel, vous pouvez lui appliquer un style.

1&point ; revenez à l’éditeur de votre projet.

2. Créez un dossier quote sous le dossier blocks.

3. Dans le nouveau dossier quote, ajoutez un fichier quote.js pour implémenter la décoration de bloc en ajoutant le JavaScript suivant et enregistrez le fichier.

Exemple JavaScript

code language-javascript
export default function decorate(block) { const [quoteWrapper] = block.children; const blockquote = document.createElement('blockquote'); blockquote.textContent = quoteWrapper.textContent.trim(); quoteWrapper.replaceChildren(blockquote); }

Capture d’écran

4. Dans le dossier quote, ajoutez un fichier quote.css pour définir le style du bloc en ajoutant le code CSS suivant et enregistrez le fichier.

Exemple CSS

code language-css

.block.quote { background-color: #ccc; padding: 0 0 24px; display: flex; flex-direction: column; margin: 1rem 0; } .block.quote blockquote { margin: 16px; text-indent: 0; } .block.quote > div:last-child > div { margin: 0 16px; font-size: small; font-style: italic; position: relative; } .block.quote > div:last-child > div::after { content: ""; display: block; position: absolute; left: 0; bottom: -8px; height: 5px; width: 30px; background-color: darkgray; }

Capture d’écran

5. À l’aide de git, validez ces modifications dans votre branche main.

6&point ; revenez à l’onglet de votre navigateur de l’éditeur universel dans lequel vous modifiez la page de votre projet et rechargez la page pour afficher votre bloc stylisé.

7&point ; voir le bloc de guillemet maintenant stylisé sur la page.

8&point; Vérifiez que les modifications ont été transférées en production en accédant à la page publiée. Le lien sera similaire à https://<branch>--<repo>--<owner>.hlx.page.

Félicitations. Vous disposez maintenant d’un bloc de citation entièrement fonctionnel et avec un style appliqué. Vous pouvez utiliser cet exemple comme base pour concevoir vos propres blocs spécifiques à des projets.

Options de bloc block-options

Si vous avez besoin d’un bloc pour un aspect ou un comportement légèrement différent selon certaines circonstances, mais pas assez différent pour devenir un nouveau bloc, vous pouvez permettre aux personnes chargées de la création de choisir parmi les options de bloc.

En ajoutant une propriété classes au bloc, la propriété est rendue dans l’en-tête du tableau pour les blocs simples ou sous la forme d’une liste de valeurs pour les éléments d’un bloc conteneur.

{
  "id": "simpleMarquee",
  "fields": [
    {
      "component": "text",
      "valueType": "string",
      "name": "marqueeText",
      "value": "",
      "label": "Marquee text",
      "description": "The text you want shown in your marquee"
    },
    {
      "component": "select",
      "name": "classes",
      "value": "",
      "label": "Background Color",
      "description": "The marquee background color",
      "valueType": "string",
      "options": [
        {
          "name": "Red",
          "value": "bg-red"
        },
        {
          "name": "Green",
          "value": "bg-green"
        },
        {
          "name": "Blue",
          "value": "bg-blue"
        }
      ]
    }
  ]
}

Utiliser d’autres branches de travail other-branches

Dans ce guide, vous avez validé vos modifications directement dans la branche main pour des raisons de simplicité. Dans le cadre d’une expérimentation dans un référentiel d’exemple, ce n’est généralement pas un problème. Dans le cadre d’un travail dans un projet réel, vous devez suivre les bonnes pratiques en matière de développement en effectuant le développement dans une autre branche et en vérifiant toutes les modifications via une demande d’extraction avant de fusionner vers main.

Lorsque vous ne développez pas dans la branche main, vous pouvez ajouter ?ref=<branch> dans la barre d’emplacement de l’éditeur universel pour charger la page à partir de votre branche. <branch> est le nom de la branche tel qu’il serait utilisé pour la prévisualisation de votre projet ou pour les URL actives, par exemple https://<branch>--<repo>--<owner>.hlx.page.

La publication de contenu avec un nouveau modèle n’est prise en charge que lorsque le modèle est fusionné avec la branche main.

Étapes suivantes next-steps

Maintenant que vous savez comment créer des blocs, il est essentiel de comprendre comment modéliser le contenu de manière sémantique pour optimiser l’expérience de développement.

Consultez le document Modélisation de contenu pour la création WYSIWYG avec des projets Edge Delivery Services pour découvrir comment la modélisation de contenu fonctionne pour la création WYSIWYG avec des projets Edge Delivery Services.