Desarrollo de un bloque con opciones

Este tutorial muestra cómo utilizar un tipo de entrada select (desplegable) para permitir que los autores elijan una sola opción de bloque, que luego se aplica como una sola clase CSS correspondiente.

{align="center"}

Modelo de bloque

La opción Predeterminado está representada por una cadena vacía (""), mientras que la opción En paralelo usa "side-by-side". El nombre y valor de la opción no tienen por qué ser iguales, pero el valor determina las clases CSS aplicadas al HTML del bloque. Por ejemplo, el valor de la opción en paralelo podría ser layout-10 en lugar de side-by-side. Sin embargo, es mejor utilizar nombres semánticamente significativos para las clases CSS, lo que garantiza la claridad y coherencia en los valores de las opciones.

[/blocks/teaser/_teaser.json]{class="badge neutral" title="Nombre de archivo del ejemplo de código siguiente."}

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

Bloquear HTML

Cuando el autor selecciona una opción, el valor correspondiente se añade como clase CSS a la HTML del bloque:

• Si se selecciona Predeterminado:

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

• Si se selecciona en paralelo:

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

Esto permite aplicar diferentes estilos y JavaScript condicional según la apertura elegida.

Este método no se usa en este tutorial, pero ilustra un método alternativo y opciones de bloque avanzadas.

El tipo de entrada select permite a los autores elegir una sola opción de bloque, que puede asignarse opcionalmente a varias clases CSS. Para conseguirlo, enumere las clases CSS como valores delimitados por espacios.

{align="center"}

Modelo de bloque

Por ejemplo, la opción en paralelo puede admitir variaciones en las que la imagen aparece a la izquierda (side-by-side left) o a la derecha (side-by-side right).

[/blocks/teaser/_teaser.json]{class="badge neutral" title="Nombre de archivo del ejemplo de código siguiente."}

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

Bloquear HTML

Cuando el autor selecciona una opción, el valor correspondiente se aplica como un conjunto de clases CSS separadas por espacios en la HTML del bloque:

• Si se selecciona Predeterminado:

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

• Si se selecciona En paralelo con la imagen a la izquierda:

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

• Si se selecciona En paralelo con la imagen a la derecha:

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

Esto permite aplicar diferentes estilos y JavaScript condicional según la opción elegida.

Este método no se usa en este tutorial, pero ilustra un método alternativo y opciones de bloque avanzadas.

El tipo de entrada de "component": "multiselect" permite al autor seleccionar varias opciones simultáneamente. Esto permite permutaciones complejas del aspecto del bloque al combinar varias opciones de diseño.

{align="center"}

Modelo de bloque

Por ejemplo, En paralelo, Imagen a la izquierda e Imagen a la derecha pueden admitir variaciones en las que la imagen se coloque a la izquierda (side-by-side left) o a la derecha (side-by-side right).

[/blocks/teaser/_teaser.json]{class="badge neutral" title="Nombre de archivo del ejemplo de código siguiente."}

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

Bloquear HTML

Cuando el autor selecciona varias opciones, los valores correspondientes se aplican como clases CSS separadas por espacios en la HTML del bloque:

• Si se seleccionan En paralelo e Imagen a la izquierda:

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

• Si se seleccionan En paralelo e Imagen a la derecha:

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

Aunque la selección múltiple ofrece flexibilidad, introduce complejidad en la administración de permutaciones de diseño. Sin restricciones, las selecciones conflictivas pueden provocar experiencias rotas o fuera de la marca.

Por ejemplo:

• Imagen a la izquierda o Imagen a la derecha sin seleccionar En paralelo los aplica implícitamente a Predeterminado, que siempre establece la imagen como fondo, por lo que la alineación izquierda y derecha son irrelevantes.
• Seleccionar tanto Imagen a la izquierda como Imagen a la derecha es contradictorio.
• Seleccionar En paralelo sin Imagen a la izquierda o Imagen a la derecha puede considerarse ambiguo, ya que la posición de la imagen no está especificada.

Para evitar problemas y confusión de autores al utilizar la selección múltiple, asegúrese de que las opciones estén bien planificadas y que todas las permutaciones se hayan probado. La selección múltiple funciona mejor para mejoras sencillas y sin conflictos, como "grande" o "resaltado", en lugar de para opciones que modifican el diseño.

Este método no se usa en este tutorial, pero ilustra un método alternativo y opciones de bloque avanzadas.

Las opciones de bloque se pueden establecer como predeterminadas al añadir una nueva instancia de bloque a una página en el editor universal. Esto se hace estableciendo el valor predeterminado de la propiedad classes en la definición del bloque.

Definición de bloque

En el ejemplo siguiente, la opción predeterminada se establece en En paralelo al asignar la propiedad value del campo classes a side-by-side. La entrada de la opción de bloque correspondiente en el modelo de bloque es opcional.

También puede definir varias entradas para el mismo bloque, cada una con un nombre y una clase diferentes. Esto permite al Editor universal mostrar distintas entradas de bloque, cada una preconfigurada con una opción de bloque específica. Aunque estos aparecen como bloques independientes en el editor, la base de código contiene un solo bloque que se procesa dinámicamente en función de la opción seleccionada.

[/blocks/teaser/_teaser.json]{class="badge neutral" title="Nombre de archivo del ejemplo de código siguiente."}

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

El siguiente es el DOM del bloque Teaser, con la opción de bloque En paralelo seleccionada, que es el destino a decorar usando JavaScript y 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>
...

Para encontrar el DOM para decorar, abra la página con el bloque en su entorno de desarrollo local, seleccione el bloque con las herramientas para desarrolladores del explorador web e inspeccione el DOM. Esto le permitirá identificar los elementos relevantes para decorar.

{align="center"}