Een nieuw blok maken

In dit hoofdstuk wordt beschreven hoe u met de Universal Editor een nieuw, bewerkbaar teasblok voor een Edge Delivery Services-website maakt.

In het blok met de naam teaser worden de volgende elementen weergegeven:

De inhoud van het teaser -blok kan worden bewerkt in de Universal Editor, zodat u op de hele website gemakkelijk kunt gebruiken en opnieuw kunt gebruiken.

Het blok teaser is vergelijkbaar met het blok hero van de bouwsteen. Het blok teaser is dus alleen bedoeld als eenvoudig voorbeeld ter illustratie van ontwikkelingsconcepten.

Een nieuwe Git-vertakking maken

Om een schone en georganiseerde werkstroom te handhaven, creeer een nieuwe tak voor elke specifieke ontwikkelingstaak. Dit helpt problemen met de implementatie van onvolledige of niet-geteste code voor productie te voorkomen.

# ~/Code/aem-wknd-eds-ue

$ git fetch origin
$ git checkout -b teaser origin/main

Wanneer de teaser -vertakking is gemaakt, kunt u beginnen met het ontwikkelen van het laserblok.

Blokmap

Maak een nieuwe map met de naam teaser in de map blocks van het project. Deze map bevat de JSON-, CSS- en JavaScript-bestanden van het blok, waarbij de bestanden van het blok op één locatie worden gerangschikt:

# ~/Code/aem-wknd-eds-ue

/blocks/teaser

De naam van de blokmap fungeert als de id van het blok en wordt gebruikt om tijdens de ontwikkeling naar het blok te verwijzen.

Block JSON

Het blok JSON definieert drie belangrijke aspecten van het blok:

Maak een nieuw bestand bij /blocks/teaser/_teaser.json met de volgende initiële structuur, in de exacte volgorde. Als de toetsen niet op de juiste wijze zijn, kunnen ze niet goed worden gemaakt.

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

{
    "definitions": [],
    "models": [],
    "filters": []
}

Blokmodel

Het blokmodel is een kritiek deel van de configuratie van het blok, aangezien het bepaalt:

De modellen worden toegewezen een id die aan de ​ definitie van het blok ​ beantwoordt en een fields serie omvat om de editable gebieden te specificeren.

Elk veld in de array fields heeft een JSON-object dat de volgende vereiste eigenschappen bevat:

Voor een uitvoerige lijst van eigenschappen, met inbegrip van facultatief, herzie de ​ Universele de gebiedsdocumentatie van de Redacteur ​.

Blokontwerp

Het teasblok bevat de volgende bewerkbare elementen:

Het ontwerp van het teasblok is opgedeeld in deze twee logische componenten (afbeelding en tekstinhoud) en zorgt voor een gestructureerde en intuïtieve ontwerpervaring voor gebruikers.

Velden blokkeren

Definieer de velden die nodig zijn voor het blok: afbeelding, alternatieve afbeeldingstekst, tekst, CTA-label en CTA-koppeling.

{
    "definitions": [],
    "models": [
        {
            "id": "teaser",
            "fields": [
                {
                    "component": "reference",
                    "valueType": "string",
                    "name": "image",
                    "label": "Image",
                    "multi": false
                },
                {
                    "component": "text",
                    "valueType": "string",
                    "name": "imageAlt",
                    "label": "Image alt text",
                    "required": true
                },
                {
                    "component": "richtext",
                    "name": "textContent_text",
                    "label": "Text",
                    "valueType": "string",
                    "required": true
                },
                {
                    "component": "aem-content",
                    "name": "textContent_cta",
                    "label": "CTA",
                    "valueType": "string"
                },
                {
                    "component": "text",
                    "name": "textContent_ctaText",
                    "label": "CTA label",
                    "valueType": "string"
                }
            ]
        }
    ],
    "filters": []
}

<div>
    <div>
        <!-- This div contains the field-collapsed image fields  -->
        <picture>
            ...
            <source .../>
            <img src="..." alt="The authored alt text"/>
        </picture>
    </div>
    <div>
        <!-- This div, via element grouping contains the textContent fields -->
        <h2>The authored title</h2>
        <p>The authored body text</p>
        <a href="/authored/cta/link">The authored CTA label</a>
    </div>
</div>

{
    "definitions": [],
    "models": [
        {
            "id": "teaser",
            "fields": [
                {
                    "component": "reference",
                    "valueType": "string",
                    "name": "image",
                    "label": "Image",
                    "multi": false
                },
                {
                    "component": "text",
                    "valueType": "string",
                    "name": "alt",
                    "label": "Image alt text",
                    "required": true
                },
                {
                    "component": "richtext",
                    "name": "text",
                    "label": "Text",
                    "valueType": "string",
                    "required": true
                },
                {
                    "component": "aem-content",
                    "name": "link",
                    "label": "CTA",
                    "valueType": "string"
                },
                {
                    "component": "text",
                    "name": "label",
                    "label": "CTA label",
                    "valueType": "string"
                }
            ]
        }
    ],
    "filters": []
}

<div>
    <div>
        <!-- This div contains the field-collapsed image  -->
        <picture>
            ...
            <source .../>
            <img src="/authored/image/reference"/>
        </picture>
    </div>
    <div>
        <p>The authored alt text</p>
    </div>
    <div>
        <h2>The authored title</h2>
        <p>The authored body text</p>
    </div>
    <div>
        <a href="/authored/cta/link">/authored/cta/link</a>
    </div>
    <div>
        The authored CTA label
    </div>
</div>

Blokdefinitie

De blokdefinitie registreert het blok in Universele Redacteur. Hier volgt een uitsplitsing van de JSON-eigenschappen die worden gebruikt in de blokdefinitie:

Hier is een voorbeeld van JSON voor de blokdefinitie:

[​ /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",
              "textContent_text": "<h2>Enter a title</h2><p>...and body text here!</p>",
              "textContent_cta": "/",
              "textContent_ctaText": "Click me!"
            }
          }
        }
      }
    }],
    "models": [... from previous section ...],
    "filters": []
}

In dit voorbeeld:

Deze structuur zorgt ervoor dat het blok in de Universele Redacteur met de juiste gebieden, inhoudsmodel, en middeltype voor het teruggeven wordt opgesteld.

Blokkeringsfilters

De serie van het blok filters bepaalt, voor ​ containerblokken ​, welke andere blokken aan de container kunnen worden toegevoegd. Filters definiëren een lijst met blok-id's (model.id) die aan de container kunnen worden toegevoegd.

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

{
  "definitions": [... populated from previous section ...],
  "models": [... populated from previous section ...],
  "filters": []
}

De lasercomponent is geen a ​ containerblok ​, betekenend kunt u geen andere blokken aan het toevoegen. Hierdoor blijft de array filters leeg. Voeg in plaats daarvan de teaser-id toe aan de filterlijst van het sectieblok, zodat het teaser-object aan een sectie kan worden toegevoegd.

In door Adobe verschafte blokken, zoals het sectieblok, worden filters opgeslagen in de map models van het project. Als u de instellingen wilt aanpassen, zoekt u het JSON-bestand voor het door Adobe opgegeven blok (bijvoorbeeld /models/_section.json ) en voegt u de id van het gummetje ( teaser ) toe aan de lijst met filters. De configuratie signaleert de Universele Redacteur dat de lasercomponent aan het blok van de sectiecontainer kan worden toegevoegd.

[​ /models/_section.json]{class="badge neutral" title="Bestandsnaam van codevoorbeeld hieronder."}

{
  "definitions": [],
  "models": [],
  "filters": [
    {
      "id": "section",
      "components": [
        "text",
        "image",
        "button",
        "title",
        "hero",
        "cards",
        "columns",
        "fragment",
        "teaser"
      ]
    }
  ]
}

De definitie-id van het teasblok teaser wordt toegevoegd aan de array components .

JSON-bestanden plaatsen

Zorg ervoor u ​ vaak ​ kleint uw veranderingen om het schoon en verenigbaar te verzekeren. Door regelmatig te koppelen worden problemen vroegtijdig afgevangen en neemt de totale ontwikkelingstijd af. Met de opdracht npm run lint:js kunt u ook JSON-bestanden koppelen en syntaxisfouten afvangen.

# ~/Code/aem-wknd-eds-ue

$ npm run lint:js

Het JSON-project bouwen

Nadat de JSON-blokbestanden (bijvoorbeeld blocks/teaser/_teaser.json , models/_section.json ) zijn geconfigureerd, worden deze automatisch gecompileerd in de component-models.json -, component-definitions.json - en component-filters.json -bestanden van het project. Deze compilatie wordt automatisch behandeld door a ​ Echtgenoot ​ precommit haak inbegrepen in het ​ AEM Boilerplate XWalk projectmalplaatje ​.

Bouwt kan ook manueel of programmatically worden teweeggebracht gebruikend de manuscripten JSON 🔗 NPM van het project bouwen.

Het blok JSON implementeren

Om het blok beschikbaar te maken in de Universele Redacteur, moet het project worden begaan en aan de tak van een bewaarplaats GitHub, in dit geval de teaser tak worden geduwd.

De exacte vertakkingsnaam die Universal Editor gebruikt, kan per gebruiker worden aangepast via de URL van de Universal Editor.

# ~/Code/aem-wknd-eds-ue

$ git add .
$ git commit -m "Add teaser block JSON files so it is available in Universal Editor"
# JSON files are compiled automatically and added to the commit via a husky precommit hook
$ git push origin teaser

Wanneer de Universele Redacteur met de vraagparameter ?ref=teaser wordt geopend, verschijnt het nieuwe teaser blok in het blokpalet. Merk op dat het blok geen het stileren heeft; het geeft de gebieden van het blok als semantische HTML terug, die slechts via ​ globale CSS ​ wordt gestileerd.