Développer un bloc avec des options

Ce tutoriel explique comment utiliser un type d’entrée select (liste déroulante) pour permettre aux personnes chargées de la création de choisir une option de bloc unique, qui est ensuite appliquée comme une classe CSS unique correspondante.

{align="center"}

Modèle de bloc

L’option Par défaut est représentée par une chaîne vide (""), tandis que l’option Côte à côte utilise "side-by-side". Les nom et valeur de l’option ne doivent pas nécessairement être identiques, mais la valeur détermine la ou les classes CSS appliquées au code HTML du bloc. Par exemple, la valeur de l’option Côte à côte peut être layout-10 au lieu de side-by-side. Cependant, il est préférable d’utiliser des noms à la signification sémantique pour les classes CSS, afin d’assurer la clarté et la cohérence des valeurs d’option.

[/blocks/teaser/_teaser.json]{class="badge neutral" title="Nom de fichier de l’exemple de code ci-dessous."}

...
"fields": [
    {
        "component": "select",
        "name": "classes",
        "value": "",
        "label": "Teaser options",
        "valueType": "string",
        "options": [
            {
                "name": "Default",
                "value": ""
            },
            {
                "name": "Side-by-side",
                "value": "side-by-side"
            }
        ]
    }
]
...

HTML de bloc

Lorsque la personne chargée de la création sélectionne une option, la valeur correspondante est ajoutée en tant que classe CSS au code HTML du bloc :

• Si l’option Par défaut est sélectionnée :

  code language-html
  <div class="block teaser"> <!-- Block content here --> </div>

• Si l’option Côte à côte est sélectionnée :

  code language-html
  <div class="block teaser side-by-side"> <!-- Block content here --> </div>

Cela permet d’appliquer un style différent et un JavaScript conditionnel en fonction de l’ouverture choisie.

Cette approche n’est pas utilisée dans ce tutoriel, mais elle illustre une autre méthode et des options de bloc avancées.

Le type d’entrée select permet aux personnes chargées de la création de choisir une option de bloc unique, qui peut éventuellement être mappée à plusieurs classes CSS. Pour ce faire, répertoriez les classes CSS comme valeurs délimitées par des espaces.

{align="center"}

Modèle de bloc

Par exemple, l’option Côte à côte peut prendre en charge les variations dans lesquelles l’image s’affiche à gauche (side-by-side left) ou à droite (side-by-side right).

[/blocks/teaser/_teaser.json]{class="badge neutral" title="Nom de fichier de l’exemple de code ci-dessous."}

...
"fields": [
    {
        "component": "select",
        "name": "classes",
        "value": "",
        "label": "Teaser options",
        "valueType": "string",
        "options": [
            {
                "name": "Default",
                "value": ""
            },
            {
                "name": "Side-by-side with Image on left",
                "value": "side-by-side left"
            },
            {
                "name": "Side-by-side with Image on right",
                "value": "side-by-side right"
            }
        ]
    }
]
...

HTML de bloc

Lorsque la personne chargée de la création sélectionne une option, la valeur correspondante est appliquée sous la forme d’un ensemble de classes CSS séparées par des espaces dans le code HTML du bloc :

• Si l’option Par défaut est sélectionnée :

  code language-html
  <div class="block teaser"> <!-- Block content here --> </div>

• Si l’option Côte à côte avec image sur la gauche est sélectionnée :

  code language-html
  <div class="block teaser side-by-side left"> <!-- Block content here --> </div>

• Si l’option Côte à côte avec image sur la droite est sélectionnée :

  code language-html
  <div class="block teaser side-by-side right"> <!-- Block content here --> </div>

Cela permet d’appliquer un style différent et un JavaScript conditionnel en fonction de l’option choisie.

Cette approche n’est pas utilisée dans ce tutoriel, mais elle illustre une autre méthode et des options de bloc avancées.

Le type d’entrée "component": "multiselect" permet à la personne chargée de la création de sélectionner plusieurs options simultanément. Cela permet des permutations complexes de l’aspect du bloc en combinant plusieurs choix de conception.

{align="center"}

Modèle de bloc

Par exemple, les options Côte à côte, Image à gauche et Image à droite peuvent prendre en charge des variations où l’image est positionnée à gauche (side-by-side left) ou à droite (side-by-side right).

[/blocks/teaser/_teaser.json]{class="badge neutral" title="Nom de fichier de l’exemple de code ci-dessous."}

...
"fields": [
    {
        "component": "multiselect",
        "name": "classes",
        "value": [],
        "label": "Teaser options",
        "valueType": "array",
        "options": [
            {
                "name": "Side-by-side",
                "value": "side-by-side"
            },
            {
                "name": "Image on left",
                "value": "left"
            },
            {
                "name": "Image on right",
                "value": "right"
            }
        ]
    }
]
...

HTML de bloc

Lorsque la personne chargée de la création sélectionne plusieurs options, les valeurs correspondantes sont appliquées en tant que classes CSS séparées par des espaces dans le code HTML du bloc :

• Si les options Côte à côte et Image à gauche sont sélectionnées :

  code language-none h-1
  <div class="block teaser side-by-side left"> <!-- Block content here --> </div>

• Si les options Côte à côte et Image à droite sont sélectionnées :

  code language-none h-1
  <div class="block teaser side-by-side right"> <!-- Block content here --> </div>

Bien que la sélection multiple offre de la flexibilité, elle ajoute de la complexité à la gestion des permutations de conception. Sans restriction, les sélections en conflit peuvent entraîner des expériences interrompues ou compromettant l’image de marque.

Par exemple :

• Sélectionner les options Image à gauche ou Image à droite sans sélectionner l’option Côte à côte les applique implicitement à l’option Par défaut, qui définit toujours l’image comme arrière-plan. Par conséquent, l’alignement à gauche et à droite n’est pas pertinent.
• Les options Image à gauche et Image à droite sont contradictoires.
• Sélectionner l’option Côte à côte sans les options Image à gauche ou Image à droite peut être considéré comme ambigu, car la position de l’image n’est pas spécifiée.

Pour éviter les problèmes et la confusion de la personne chargée de la création lors de l’utilisation de la sélection multiple, assurez-vous que les options sont bien planifiées et que toutes les permutations sont testées. La sélection multiple fonctionne mieux pour des améliorations simples et sans conflit, comme les options « gras » ou « mise en surbrillance », que pour les choix de modification de la disposition.

Cette approche n’est pas utilisée dans ce tutoriel, mais elle illustre une autre méthode et des options de bloc avancées.

Les options de bloc peuvent être définies par défaut lors de l’ajout d’une nouvelle instance de bloc à une page dans l’éditeur universel. Pour ce faire, définissez la valeur par défaut de la propriété classes dans la définition du bloc.

Définition du bloc

Dans l’exemple ci-dessous, l’option par défaut est définie sur Côte à côte en attribuant la propriété value du champ classes à side-by-side. L’entrée d’option de bloc correspondante dans le modèle de bloc est facultative.

Vous pouvez également définir plusieurs entrées pour le même bloc, chacune avec un nom et une classe différents. Cela permet à l’éditeur universel d’afficher des entrées de bloc distinctes, chacune préconfigurée avec une option de bloc spécifique. Bien qu’ils apparaissent en tant que blocs distincts dans l’éditeur, la base de code contient un seul bloc dont le rendu est effectué dynamiquement en fonction de l’option sélectionnée.

[/blocks/teaser/_teaser.json]{class="badge neutral" title="Nom de fichier de l’exemple de code ci-dessous."}

{
    "definitions": [{
      "title": "Teaser",
      "id": "teaser",
      "plugins": {
        "xwalk": {
          "page": {
            "resourceType": "core/franklin/components/block/v1/block",
            "template": {
              "name": "Teaser",
              "model": "teaser",
              "classes": "side-by-side",
              "textContent_text": "<h2>Enter a title</h2><p>...and body text here!</p>",
              "textContent_cta": "/",
              "textContent_ctaText": "Click me!"
            }
          }
        }
      }
    }],
    "models": [... from previous section ...],
    "filters": []
}

Vous trouverez ci-dessous le DOM du bloc Teaser, avec l’option de bloc Côte à côte sélectionnée, qui est la cible à mettre en forme à l’aide de JavaScript et CSS.

...
<body>
    <header/>
    <main>
        <div>
            <!-- Start block HTML -->
            <div class="teaser block side-by-side" data-block-name="teaser" data-block-status="loaded">
                <div>
                    <div>
                    <picture>
                        <source type="image/webp" srcset="./media_15ba2b455e29aca38c1ca653d24c40acaec8a008f.jpeg?width=2000&format=webply&optimize=medium" media="(min-width: 600px)">
                        <source type="image/webp" srcset="./media_15ba2b455e29aca38c1ca653d24c40acaec8a008f.jpeg?width=750&format=webply&optimize=medium">
                        <source type="image/jpeg" srcset="./media_15ba2b455e29aca38c1ca653d24c40acaec8a008f.jpeg?width=2000&format=jpeg&optimize=medium" media="(min-width: 600px)">
                        <img loading="eager" alt="Woman looking out over a river." src="./media_15ba2b455e29aca38c1ca653d24c40acaec8a008f.jpeg?width=750&format=jpeg&optimize=medium" width="1600" height="900">
                    </picture>
                    </div>
                </div>
                <div>
                    <div>
                    <h2 id="wknd-adventures">WKND Adventures</h2>
                    <p>Join us on one of our next adventures. Browse our list of curated experiences and sign up for one when you're ready to explore with us.</p>
                    <p>Terms and conditions: By signing up, you agree to the rules for participation and booking.</p>
                    <p class="button-container"><a href="/" title="View trips" class="button">View trips</a></p>
                    </div>
                </div>
            </div>
            <!-- End block HTML -->
        </div>
    </main>
    <footer/>
</body>
...

Pour trouver le DOM à mettre en forme, ouvrez la page avec le bloc dans votre environnement de développement local, sélectionnez le bloc à l’aide des outils de développement de votre navigateur web et inspectez le DOM. Cela vous permettra d’identifier les éléments pertinents à mettre en forme.

{align="center"}