Een blok met opties ontwikkelen

In deze zelfstudie wordt getoond hoe u een invoertype select (vervolgkeuzelijst) kunt gebruiken om auteurs één blokoptie te laten kiezen. Deze wordt vervolgens toegepast als één corresponderende CSS-klasse.

{align="center"}

Blokmodel

De Standaard optie wordt vertegenwoordigd door een leeg koord (""), terwijl zij aan zij optie gebruikt "side-by-side". De naam van de optie ​ ​en waarde moet niet het zelfde zijn, maar de waarde bepaalt de CSS klasse(n) die op HTML van het blok worden toegepast. Bijvoorbeeld, kon de zij aan zij waarde van de optie layout-10 in plaats van side-by-side zijn. Het is echter het beste om semantisch betekenisvolle namen te gebruiken voor CSS-klassen, zodat de optiewaarden duidelijk en consistent zijn.

[​ /blocks/teaser/_teaser.json]{class="badge neutral" title="Bestandsnaam van codevoorbeeld hieronder."}

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

HTML blokkeren

Wanneer de auteur een optie selecteert, wordt de bijbehorende waarde als CSS-klasse toegevoegd aan de HTML van het blok:

• Als Gebrek wordt geselecteerd:

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

• Als zij aan zij wordt geselecteerd:

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

Op deze manier kunnen verschillende stijlen en voorwaardelijke JavaScript worden toegepast, afhankelijk van de gekozen opening.

deze benadering wordt niet gebruikt in dit leerprogramma maar illustreert een alternatieve methode en geavanceerde blokopties.

Met het invoertype select kunnen auteurs één blokoptie kiezen, die optioneel aan meerdere CSS-klassen kan worden toegewezen. Hiervoor geeft u de CSS-klassen op als door spaties gescheiden waarden.

{align="center"}

Blokmodel

Bijvoorbeeld, kan de zij aan zij optie variaties steunen waar het beeld op de linkerzijde (side-by-side left) of het recht (side-by-side right) verschijnt.

[​ /blocks/teaser/_teaser.json]{class="badge neutral" title="Bestandsnaam van codevoorbeeld hieronder."}

...
"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 blokkeren

Wanneer de auteur een optie selecteert, wordt de corresponderende waarde toegepast als een set CSS-klassen met spaties in de HTML van het blok:

• Als Gebrek wordt geselecteerd:

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

• Als zij aan zij met Beeld op linkerzijde wordt geselecteerd:

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

• Als zij aan zij met Beeld op recht wordt geselecteerd:

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

Hierdoor kunnen verschillende stijlen en voorwaardelijke JavaScript worden toegepast, afhankelijk van de gekozen optie.

deze benadering wordt niet gebruikt in dit leerprogramma maar illustreert een alternatieve methode en geavanceerde blokopties.

Met het invoertype van "component": "multiselect" kan de auteur meerdere opties tegelijk selecteren. Dit maakt complexe permutaties van de weergave van het blok mogelijk door meerdere ontwerpkeuzes te combineren.

{align="center"}

Blokmodel

Bijvoorbeeld, kan het zij aan zij, Beeld op linkerzijde, en Beeld op recht variaties steunen waar het beeld op de linkerzijde (side-by-side left) of op het recht (side-by-side right) wordt geplaatst.

[​ /blocks/teaser/_teaser.json]{class="badge neutral" title="Bestandsnaam van codevoorbeeld hieronder."}

...
"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 blokkeren

Wanneer de auteur meerdere opties selecteert, worden de bijbehorende waarden toegepast als CSS-klassen met spaties in de HTML van het blok:

• Als zij aan zij en Beeld op linkerzijde worden geselecteerd:

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

• Als zij aan zij en Beeld op recht worden geselecteerd:

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

Multiselect biedt flexibiliteit, maar het zorgt voor complexiteit bij het beheren van ontwerppermutaties. Zonder beperkingen kunnen conflicterende selecties leiden tot verbroken of buitenmerkse ervaringen.

Bijvoorbeeld:

• Beeld op verlaten of Beeld op recht zonder te selecteren zij aan zij impliciet toepast hen op Gebrek, dat altijd het beeld als achtergrond plaatst, zodat linker en juiste groepering irrelevant zijn.
• Het selecteren van zowel Beeld op verlaten en Beeld op recht is tegenstrijdig.
• Het selecteren van zij aan zij zonder Beeld op verlaten of Beeld op recht kan als dubbelzinnig worden beschouwd, aangezien de positie van het beeld niet gespecificeerd is.

Om problemen te voorkomen en verwarring tussen auteurs te voorkomen bij het gebruik van multi-select, zorgt u ervoor dat de opties goed zijn gepland en dat alle permutaties zijn getest. Multi-select werkt het beste voor eenvoudige, niet-conflicterende verbeteringen, zoals 'groot' of 'hooglicht', in plaats van lay-outveranderende keuzes.

deze benadering wordt niet gebruikt in dit leerprogramma maar illustreert een alternatieve methode en geavanceerde blokopties.

Blokopties kunnen als standaardopties worden ingesteld wanneer u een nieuwe blokinstantie aan een pagina in de Universal Editor toevoegt. Dit wordt gedaan door de standaardwaarde van het classes bezit in de definitie van het blokte plaatsen.

Blokdefinitie

In het voorbeeld hieronder, wordt de standaardoptie geplaatst aan zij aan zij door het value bezit van het classes gebied aan side-by-side toe te wijzen. De invoer van de bijbehorende blokoptie in het blokmodel is optioneel.

U kunt ook meerdere items voor hetzelfde blok definiëren, elk met een andere naam en klasse. Dit staat Universele Redacteur toe om verschillende blokingangen te tonen, elk pre-gevormd met een specifieke blokoptie. Terwijl deze als afzonderlijke blokken in de redacteur verschijnen, bevat codebase één enkel blok dat dynamisch teruggeeft gebaseerd op de geselecteerde optie.

[​ /blocks/teaser/_teaser.json]{class="badge neutral" title="Bestandsnaam van codevoorbeeld hieronder."}

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

Het volgende is DOM van het blok van het Taser, met de zij aan zij geselecteerde blokoptie, die het doel is om het gebruiken van JavaScript en CSS te versieren.

...
<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>
...

Als u het DOM voor decoratie wilt zoeken, opent u de pagina met het blok in uw lokale ontwikkelomgeving, selecteert u het blok met de ontwikkelaarsgereedschappen van uw webbrowser en inspecteert u het DOM. Zo kunt u de relevante elementen identificeren die u wilt versieren.

{align="center"}