Utveckla ett block med alternativ

I den här självstudien visas hur du använder en select-indatatyp (listruta) för att låta författarna välja ett blockalternativ, som sedan tillämpas som en enda motsvarande CSS-klass.

{align="center"}

Blockmodell

Alternativet Standard representeras av en tom sträng (""), medan alternativet Sida vid sida använder "side-by-side". Alternativets namn och värde behöver inte vara samma, men värde avgör vilka CSS-klasser som tillämpas på blockets HTML. Värdet för alternativet Sida vid sida kan till exempel vara layout-10 i stället för side-by-side. Det är dock bäst att använda semantiskt meningsfulla namn för CSS-klasser för att se till att alternativvärdena är tydliga och konsekventa.

[/blocks/teaser/_teaser.json]{class="badge neutral" title="Filnamn på kodexemplet nedan."}

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

Blockera HTML

När författaren väljer ett alternativ läggs motsvarande värde till som en CSS-klass i blockets HTML:

• Om Standard är markerat:

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

• Om Sida vid sida är markerat:

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

På så sätt kan olika format och villkorliga JavaScript användas beroende på vilket alternativ som har valts.

Den här metoden används inte i den här självstudiekursen, men visar en alternativ metod och avancerade blockalternativ.

Med indatatypen select kan författare välja ett blockalternativ som kan mappas till flera CSS-klasser. För att uppnå detta anger du CSS-klasserna som blankstegsavgränsade värden.

{align="center"}

Blockmodell

Alternativet Sida vid sida kan t.ex. ha stöd för variationer där bilden visas till vänster (side-by-side left) eller till höger (side-by-side right).

[/blocks/teaser/_teaser.json]{class="badge neutral" title="Filnamn på kodexemplet nedan."}

...
"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"
            }
        ]
    }
]
...

Blockera HTML

När författaren väljer ett alternativ används motsvarande värde som en blankstegsavgränsad uppsättning CSS-klasser i blockets HTML:

• Om Standard är markerat:

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

• Om Sida vid sida med bild till vänster är markerat:

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

• Om Sida vid sida med bild till höger är markerat:

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

På så sätt kan olika format och villkorliga JavaScript användas beroende på vilket alternativ du väljer.

Den här metoden används inte i den här självstudiekursen, men visar en alternativ metod och avancerade blockalternativ.

Indatatypen för "component": "multiselect" gör att författaren kan välja flera alternativ samtidigt. Detta möjliggör komplexa permutationer av blockets utseende genom att kombinera flera designalternativ.

{align="center"}

Blockmodell

Sida vid sida, Bild till vänster och Bild till höger kan t.ex. ha stöd för variationer där bilden är placerad till vänster (side-by-side left) eller till höger (side-by-side right).

[/blocks/teaser/_teaser.json]{class="badge neutral" title="Filnamn på kodexemplet nedan."}

...
"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"
            }
        ]
    }
]
...

Blockera HTML

När författaren väljer flera alternativ används motsvarande värden som mellanseparerade CSS-klasser i blockets HTML:

• Om Sida vid sida och Bild till vänster är markerade:

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

• Om Sida vid sida och Bild till höger är markerade:

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

Flervalsfunktionen ger flexibilitet, men det ger en ökad komplexitet när det gäller att hantera designpermutationer. Utan begränsningar kan motstridiga markeringar leda till varumärkesbrutna eller varumärkesanpassade upplevelser.

Till exempel:

• Bild till vänster eller Bild till höger utan att markera Sida vid sida tillämpar dem implicit på Standard som alltid anger bilden som bakgrund, vilket innebär att justeringen till vänster och höger inte är relevant.
• Att markera både Bild till vänster och Bild till höger är motsägelsefullt.
• Att välja sida vid sida utan Bild till vänster eller Bild till höger kan anses tvetydigt eftersom bildens position inte har angetts.

För att förhindra problem och skapa förvirring när du använder flera alternativ måste du se till att alternativen är väl planerade och att alla ändringar testas. Flerval fungerar bäst för enkla, icke-motstridiga förbättringar som"stor" eller"högdager" i stället för layoutändrade alternativ.

Den här metoden används inte i den här självstudiekursen, men visar en alternativ metod och avancerade blockalternativ.

Blockalternativ kan anges som standard när du lägger till en ny blockinstans på en sida i Universal Editor. Detta görs genom att ange standardvärdet för egenskapen classes i blockets definition.

Blockdefinition

I exemplet nedan är standardalternativet Sida vid sida genom att tilldela egenskapen value för fältet classes till side-by-side. Motsvarande blockalternativ i blockmodellen är valfria.

Du kan också definiera flera poster för samma block, vart och ett med olika namn och klass. På så sätt kan Universell redigerare visa olika blockposter, var och en förkonfigurerad med ett visst blockalternativ. Dessa visas som separata block i redigeraren, men kodbasen innehåller ett enda block som dynamiskt återges baserat på det valda alternativet.

[/blocks/teaser/_teaser.json]{class="badge neutral" title="Filnamn på kodexemplet nedan."}

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

Nedan följer Teaser-blockets DOM, med blockalternativet Sida vid sida markerat, som är målet att dekorera med JavaScript och 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>
...

Om du vill hitta det DOM som ska dekoreras öppnar du sidan med blocket i den lokala utvecklingsmiljön, markerar blocket med hjälp av webbläsarens utvecklingsverktyg och inspekterar DOM. På så sätt kan du identifiera de relevanta elementen som ska dekoreras.

{align="center"}