Sviluppare un blocco con opzioni

Questo tutorial illustra come utilizzare un tipo di input select (a discesa) per consentire agli autori di scegliere un’opzione di blocco singolo, che viene quindi applicata come una singola classe CSS corrispondente.

{align="center"}

Modello di blocco

L’opzione predefinita è rappresentata da una stringa vuota (""), mentre l’opzione affiancata utilizza "side-by-side". Il nome e il valore dell’opzione non devono essere uguali, ma il valore determina le classi CSS applicate all’HTML del blocco. Ad esempio, il valore dell’opzione affiancata potrebbe essere layout-10 invece di side-by-side. Tuttavia, è meglio utilizzare nomi significativi dal punto di vista semantico per le classi CSS, che garantiscono chiarezza e coerenza nei valori delle opzioni.

[/blocks/teaser/_teaser.json]{class="badge neutral" title="Nome file dell’esempio di codice riportato di seguito."}

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

HTML del blocco

Quando l’autore seleziona un’opzione, il valore corrispondente viene aggiunto all’HTML del blocco come classe CSS:

• Se è selezionato Predefinito:

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

• Se è selezionato Affiancato:

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

Questo consente di applicare stili e JavaScript condizionali diversi a seconda dell’opzione scelta.

Questo approccio non viene utilizzato in questo tutorial, ma illustra un metodo alternativo e opzioni di blocco avanzate.

Il tipo di input select consente agli autori di scegliere un’opzione di blocco singolo, che può, facoltativamente, mappare più classi CSS. Per ottenere questo risultato, elenca le classi CSS come valori delimitati da spazi.

{align="center"}

Modello di blocco

Ad esempio, l’opzione Affiancato può supportare varianti in cui l’immagine viene visualizzata a sinistra (side-by-side left) o a destra (side-by-side right).

[/blocks/teaser/_teaser.json]{class="badge neutral" title="Nome file dell’esempio di codice riportato di seguito."}

...
"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 del blocco

Quando l’autore seleziona un’opzione, il valore corrispondente viene applicato come un set di classi CSS separate da spazi nell’HTML del blocco:

• Se è selezionato Predefinito:

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

• Se è selezionato Affiancato con immagine a sinistra:

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

• Se è selezionato Affiancato con immagine a destra:

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

Questo consente di applicare stili e JavaScript condizionali diversi a seconda dell’opzione scelta.

Questo approccio non viene utilizzato in questo tutorial, ma illustra un metodo alternativo e opzioni di blocco avanzate.

Il tipo di input "component": "multiselect" consente all’autore di selezionare più opzioni contemporaneamente. Ciò consente permutazioni complesse dell’aspetto del blocco, combinando più scelte di progettazione.

{align="center"}

Modello di blocco

Ad esempio, Affiancato, Immagine a sinistra e Immagine a destra possono supportare varianti in cui l’immagine è posizionata a sinistra (side-by-side left) o a destra (side-by-side right).

[/blocks/teaser/_teaser.json]{class="badge neutral" title="Nome file dell’esempio di codice riportato di seguito."}

...
"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 del blocco

Quando l’autore seleziona più opzioni, i valori corrispondenti vengono applicati come classi CSS separate da spazi nell’HTML del blocco:

• Se sono selezionate le opzioni Affiancato e Immagine a sinistra:

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

• Se sono selezionate le opzioni Affiancato e Immagine a destra:

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

La selezione multipla offre flessibilità, ma introduce complessità nella gestione delle permutazioni di progettazione. Senza restrizioni, le selezioni in conflitto possono causare esperienze non funzionanti o non in linea con il brand.

Ad esempio:

• Con Immagine a sinistra o Immagine a destra, se non si seleziona Affiancato viene implicitamente applicata l’opzione Predefinito, che imposta sempre l’immagine come sfondo, rendendo irrilevante l’allineamento a sinistra e a destra.
• Se si seleziona sia Immagine a sinistra sia Immagine a destra si verifica una contraddzione.
• Se si seleziona Affiancato senza selezionare Immagine a sinistra o Immagine a destra, si verifica una situazione ambigua, poiché la posizione dell’immagine non è specificata.

Per evitare problemi e confusione nell’authoring quando si utilizza una selezione multipla, assicurati che le opzioni siano ben pianificate e che vengano testate tutte le possibile permutazioni. La selezione multipla è ideale per apportare miglioramenti semplici e non in conflitto, come “grande” o “evidenziazione”, più che per le scelte che modificano il layout.

Questo approccio non viene utilizzato in questo tutorial, ma illustra un metodo alternativo e opzioni di blocco avanzate.

Le opzioni di blocco possono essere impostate come predefinite quando si aggiunge una nuova istanza di blocco a una pagina nell’editor universale. Questa operazione viene eseguita impostando il valore predefinito della proprietà classes nella definizione del blocco.

Definizione del blocco

Nell’esempio seguente, l’opzione predefinita è impostata su Affiancato assegnando la proprietà value del campo classes a side-by-side. L’input dell’opzione di blocco corrispondente nel modello di blocco è facoltativo.

Puoi anche definire più voci per lo stesso blocco, ciascuna con un nome e una classe diversi. Questo consente all’editor universale di visualizzare voci di blocco distinte, ciascuna preconfigurata con un’opzione di blocco specifica. Anche se questi vengono visualizzati come blocchi separati nell’editor, la base di codice contiene un singolo blocco che esegue dinamicamente il rendering in base all’opzione selezionata.

[/blocks/teaser/_teaser.json]{class="badge neutral" title="Nome file dell’esempio di codice riportato di seguito."}

{
    "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": []
}

Di seguito è riportato il DOM del blocco teaser, con l’opzione di blocco Affiancato selezionata, che è il target da arricchire utilizzando JavaScript e 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>
...

Per trovare il DOM da arricchire, apri la pagina con il blocco nell’ambiente di sviluppo locale, seleziona il blocco utilizzando gli strumenti di sviluppo del browser web e ispeziona il DOM. Questo consentirà di identificare gli elementi rilevanti da arricchire.

{align="center"}