Crea un nuovo blocco

Questa scheda illustra il modo corretto per modellare il blocco teaser.

Il teaser è costituito da due aree logiche: immagine e testo. Per semplificare il codice necessario per visualizzare Edge Delivery Services HTML come esperienza web desiderata, il modello a blocchi deve riflettere questa struttura.

• Raggruppa image e image alt text utilizzando field collapse.
• Raggruppa i campi di contenuto di testo utilizzando raggruppamento di elementi e compressione del campo per CTA.

Se non hai familiarità con compressione campo, raggruppamento elementi o inferenza tipo, prima di continuare controlla la documentazione collegata, in quanto sono essenziali per creare un modello di blocco ben strutturato.

Nell’esempio seguente:

• L'inferenza dei tipi viene utilizzata per creare automaticamente un elemento HTML <img> dal campo image. La compressione del campo viene utilizzata con i campi image e imageAlt per creare un elemento HTML <img>. L'attributo src è impostato sul valore del campo image, mentre l'attributo alt è impostato sul valore del campo imageAlt.
• textContent è un nome di gruppo utilizzato per categorizzare i campi. Deve essere semantico, ma può essere qualsiasi cosa specifica di questo blocco. Questo comunica all'Editor universale di eseguire il rendering di tutti i campi con questo prefisso all'interno dello stesso elemento <div> nell'output finale di HTML.
• La compressione del campo viene applicata anche nel gruppo textContent per l'invito all'azione (CTA). Il CTA viene creato come <a> tramite inferenza di tipo. Il campo cta viene utilizzato per impostare l'attributo href dell'elemento <a> e il campo ctaText fornisce il contenuto di testo per il collegamento all'interno dei tag <a ...>.

/blocks/teaser/_teaser.json

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

Questo modello definisce gli input di authoring nell’Editor universale per il blocco.

Il HTML Edge Delivery Services risultante per questo blocco inserisce l'immagine nel primo div e i campi del gruppo di elementi textContent nel secondo div.

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

Come dimostrato nel prossimo capitolo, questa struttura HTML semplifica lo stile del blocco come unità coesiva.

Per capire le conseguenze del mancato utilizzo della compressione dei campi e del raggruppamento di elementi, vedi la scheda Nel modo sbagliato qui sopra.

Questa scheda illustra un modo non ottimale per modellare il blocco teaser ed è solo una giustapposizione al modo giusto.

Definire ogni campo come campo autonomo nel modello di blocco senza utilizzare compressione del campo e raggruppamento di elementi può sembrare interessante. Tuttavia, questo scostamento complica la creazione del blocco come un'unità coesiva.

Ad esempio, il modello teaser potrebbe essere definito senza compressione di campo o raggruppamento di elementi come segue:

/blocks/teaser/_teaser.json

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

Il HTML Edge Delivery Services per il blocco esegue il rendering del valore di ogni campo in un div separato, complicando la comprensione del contenuto, l'applicazione dello stile e le regolazioni della struttura del HTML per ottenere la progettazione desiderata.

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

Ogni campo è isolato nel proprio div, rendendo difficile formattare l'immagine e il contenuto di testo come unità coesive. È possibile ottenere la progettazione desiderata con impegno e creatività, ma utilizzare il raggruppamento di elementi per raggruppare i campi di contenuto di testo e la compressione dei campi per aggiungere valori creati come attributi di elemento è più semplice, semplice e corretto dal punto di vista semantico.

Consulta la scheda Modalità di scrittura per informazioni su come modellare meglio il blocco teaser.