Crear un bloque nuevo

Esta pestaña ilustra la manera correcta de modelar el bloque de teaser.

El teaser consta de dos áreas lógicas: imagen y texto. Para simplificar el código necesario para mostrar Edge Delivery Services HTML como la experiencia web deseada, el modelo de bloques debe reflejar esta estructura.

• Agrupe la imagen y el texto alternativo de la imagen mediante contracción del campo.
• Agrupe los campos de contenido de texto mediante agrupación de elementos y contracción de campos para CTA.

Si no está familiarizado con la contracción de campos, la agrupación de elementos o la inferencia de tipos, revise la documentación vinculada antes de continuar, ya que son esenciales para crear un modelo de bloques bien estructurado.

En el siguiente ejemplo:

• Inferencia de tipo se usa para crear automáticamente un elemento HTML <img> a partir del campo image. La contracción de campos se usa con los campos image y imageAlt para crear un elemento HTML <img>. El atributo src se establece en el valor del campo image, mientras que el atributo alt se establece en el valor del campo imageAlt.
• textContent es un nombre de grupo que se usa para categorizar campos. Debería ser semántico, pero puede ser cualquier cosa exclusiva de este bloque. Esto indica al editor universal que procese todos los campos con este prefijo dentro del mismo elemento <div> en la salida final de HTML.
• El colapso de campos también se aplica dentro del grupo textContent para la llamada a la acción (CTA). El CTA se creó como <a> mediante inferencia de tipo. El campo cta se usa para establecer el atributo href del elemento <a>, y el campo ctaText proporciona el contenido de texto para el vínculo dentro de las etiquetas <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": []
}

Este modelo define las entradas de creación en el editor universal para el bloque.

El Edge Delivery Services HTML resultante para este bloque coloca la imagen en el primer div y los campos del grupo de elementos textContent en el segundo 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>

Como se muestra en el siguiente capítulo, esta estructura de HTML simplifica el estilo del bloque como una unidad cohesiva.

Para comprender las consecuencias de no usar la contracción de campos y la agrupación de elementos, vea la ficha De forma incorrecta que se muestra arriba.

Esta pestaña ilustra una manera subóptima de modelar el bloque de teaser y es solo una yuxtaposición a la manera correcta.

Definir cada campo como un campo independiente en el modelo de bloque sin usar contraer el campo y agrupar elementos puede parecer tentador. Sin embargo, esta omisión complica el diseño del bloque como una unidad cohesiva.

Por ejemplo, el modelo de teaser se podría definir sin contraer el campo o agrupar elementos de la siguiente manera:

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

El HTML de Edge Delivery Services para el bloque procesa el valor de cada campo en un(a) div independiente, lo que complica la comprensión del contenido, la aplicación de estilo y los ajustes de estructura de HTML para lograr el diseño deseado.

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

Cada campo está aislado en su propio div, lo que dificulta aplicar estilo a la imagen y al contenido del texto como unidades coherentes. Lograr el diseño deseado con esfuerzo y creatividad es posible, pero el uso de agrupación de elementos para agrupar campos de contenido de texto y contracción de campos para agregar valores creados como atributos de elementos es más sencillo, sencillo y semánticamente correcto.

Consulte La ficha Forma de escritura anterior para ver cómo modelar mejor el bloque de teaser.