Creación de bloques instrumentados para su uso con el editor universal create-block

Aprenda a crear bloques instrumentados para utilizarlos con el editor universal en la creación de AEM con proyectos de Edge Delivery Services.

Requisitos previos prerequisites

Esta guía proporciona instrucciones paso a paso para crear bloques instrumentados para el editor universal en la creación de AEM con proyectos de Edge Delivery Services. Abarca la adición de componentes, la carga de definiciones de componentes en el editor universal, la publicación de páginas, la implementación de decoración y estilos de bloque, la introducción de los cambios en la producción y su verificación. Al completar esta guía, puede crear e implementar un nuevo bloque para su propio proyecto.

Esta guía requiere necesariamente conocimientos existentes sobre la creación de AEM con proyectos de Edge Delivery Services, así como con el editor universal. Antes de comenzar esta guía, ya debería tener acceso a Edge Delivery Services y estar familiarizado con sus conceptos básicos, incluidos los siguientes:

Ha completado el Tutorial del servicio de envío de Edge.

Esta guía se basa en el trabajo realizado en la guía Guía de introducción para desarrolladores para la creación de contenido con Edge Delivery Services de AEM.

Adición de un nuevo bloque al proyecto add-block

En esta guía, creará un bloque para incluir una cita memorable en su página.

Para simplificar este ejemplo, se realizan todos los cambios en la rama main del repositorio del proyecto. Por supuesto, para su proyecto real, debe seguir las prácticas recomendadas de desarrollo al elaborar en una rama diferente y revisar todos los cambios mediante una solicitud de extracción antes de fusionarlo en main.

Adobe recomienda desarrollar bloques en un enfoque de tres fases:

  1. Cree la definición y el modelo para el bloque, revíselo y llévelo a producción.
  2. Cree contenido con el nuevo bloque.
  3. Implemente la decoración y los estilos para el nuevo bloque.

El siguiente ejemplo de bloque de comillas sigue este enfoque.

Crear la definición y el modelo del bloque create-block-model

  1. Clone el proyecto de GitHub localmente que ha creado en la Guía de introducción para desarrolladores para la creación de contenido con Edge Delivery Services de AEM y ábrala en un editor de su elección.

    • El código Microsoft se utiliza aquí con fines ilustrativos.

    Clonación del proyecto

  2. Edite el archivo component-definition.json en la raíz del proyecto, agregue la siguiente definición para el nuevo bloque de comillas y guarde el archivo.

    code language-json
    {
      "title": "Quote",
      "id": "quote",
      "plugins": {
        "xwalk": {
          "page": {
            "resourceType": "core/franklin/components/block/v1/block",
            "template": {
              "name": "Quote",
              "model": "quote",
              "quote": "<p>Think, McFly! Think!</p>",
              "author": "Biff Tannen"
            }
          }
        }
      }
    }
    

    Edición del archivo component-definitions.json para definir el bloque de comillas

  3. Edite el archivo component-models.json en la raíz del proyecto y añada la siguiente definición de modelo para el nuevo bloque de presupuesto; guarde el archivo.

    code language-json
    {
      "id": "quote",
      "fields": [
         {
           "component": "text-area",
           "name": "quote",
           "value": "",
           "label": "Quote",
           "valueType": "string"
         },
         {
           "component": "text-input",
           "valueType": "string",
           "name": "author",
           "label": "Author",
           "value": ""
         }
       ]
    }
    

    Edición del archivo component-models.json para definir el modelo del bloque de comillas

  4. Edite el archivo component-filters.json en la raíz del proyecto y añada el bloque de comillas a la definición de filtro para permitir que el bloque se añada a cualquier sección y guardar el archivo.

    code language-json
    {
      "id": "section",
      "components": [
        "text",
        "image",
        "button",
        "title",
        "hero",
        "cards",
        "columns",
        "quote"
       ]
    }
    

    Edición del archivo component-filters.json para definir los filtros del bloque de comillas

  5. Con git, confirme estos cambios en su rama main.

    • El compromiso con main sólo tiene fines ilustrativos. Siga las prácticas recomendadas y utilice una solicitud de extracción para el trabajo real del proyecto.

Creación de contenido con el bloque create-content

Ahora que el bloque de comillas básico está definido y comprometido con el proyecto de muestra, puede agregar un bloque de comillas a una página existente.

  1. En un explorador, inicie sesión en AEM as a Cloud Service. Mediante la consola de Sites, vaya al sitio que creó en la Guía de introducción para desarrolladores para la creación de contenido con Edge Delivery Services de AEM y seleccione una página.

    • En este caso, index se utiliza con fines ilustrativos.

    Selección de la página de índice en la consola Sites

  2. Haga clic o pulse Editar en la barra de herramientas de la consola y se abre el editor universal.

    • Para cargar la página, es posible que tenga que tocar o hacer clic en Iniciar sesión con Adobe para autenticarse en AEM en el editor universal.
  3. En el Editor universal, seleccione una sección. En el carril de propiedades, pulse o haga clic en Añadir y, a continuación, seleccione el nuevo bloque Cita del menú.

    • El icono Añadir es un símbolo más.
    • Sabe que ha seleccionado una sección si el contorno azul del objeto seleccionado tiene una etiqueta Sección.
    • En este ejemplo, tocar o hacer clic ligeramente por encima del encabezado Lorem Ipsum selecciona una sección que contiene el encabezado y el texto de lorem ipsum.

    Seleccione una sección en el editor universal

  4. La página se vuelve a cargar y el bloque de cita se añade al final de la sección seleccionada con el contenido predeterminado especificado en el archivo component-definitions.json.

    • El bloque de cita se puede seleccionar y editar como cualquier otro bloque local o en el carril de propiedades.
    • El estilo se aplicará en un paso posterior.

    La página con el nuevo bloque de cita de la sección seleccionada

  5. Una vez que esté satisfecho con el contenido de su cita, puede publicar la página tocando o haciendo clic en el botón Publicar en la barra de herramientas del Editor universal.

  6. Compruebe que el contenido se haya publicado navegando a la página publicada. El vínculo es similar al siguiente https://<branch>--<repo>--<owner>.hlx.page

    La cita publicada

Aplicar estilo al bloque style-block

Ahora que tiene un bloque de cita de trabajo, puede aplicarle estilo.

  1. Vuelva al editor del proyecto.

  2. Cree una carpeta quote dentro de la carpeta blocks.

    Creación de una carpeta de cita

  3. En la nueva carpeta quote, añada un archivo quote.js para implementar la decoración de bloques añadiendo el siguiente JavaScript y guarde el archivo.

    code language-javascript
    export default function decorate(block) {
      const [quoteWrapper] = block.children;
    
      const blockquote = document.createElement('blockquote');
      blockquote.textContent = quoteWrapper.textContent.trim();
      quoteWrapper.replaceChildren(blockquote);
    }
    

    Añadir JavaScript para decorar el bloque

  4. En la carpeta quote, añada un archivo quote.css para definir el estilo del bloque añadiendo el siguiente código CSS y guarde el archivo.

    code language-css
    .block.quote {
        background-color: #ccc;
        padding: 0 0 24px;
        display: flex;
        flex-direction: column;
        margin: 1rem 0;
    }
    
    .block.quote blockquote {
        margin: 16px;
        text-indent: 0;
    }
    
    .block.quote > div:last-child > div {
        margin: 0 16px;
        font-size: small;
        font-style: italic;
        position: relative;
    }
    
    .block.quote > div:last-child > div::after {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        bottom: -8px;
        height: 5px;
        width: 30px;
        background-color: darkgray;
    }
    

    Añadir CSS para definir el estilo del bloque

  5. Con Git, confirme estos cambios en su rama main.

    • El compromiso con main sólo tiene fines ilustrativos. Siga las prácticas recomendadas y utilice una solicitud de extracción para el trabajo real del proyecto.
  6. Vuelva a la pestaña del explorador del editor universal donde estaba editando la página del proyecto y vuelva a cargar la página para ver el bloque con estilo.

  7. Vea el bloque de cita ahora con estilo en la página.

    El bloque de cita con estilo en el editor universal

  8. Compruebe que los cambios se hayan insertado en producción navegando a la página publicada. El vínculo es similar al siguiente https://<branch>--<repo>--<owner>.hlx.page

    El bloque de cita publicado y con estilo

Enhorabuena. Ahora tiene un bloque de cita completamente funcional y con estilo. Puede utilizar este ejemplo como base para diseñar sus propios bloques específicos de proyectos.

Uso de otras ramas de trabajo other-branches

Esta guía le indica que se ha comprometido directamente con la rama main en aras de la simplicidad. Para la experimentación en un repositorio de muestra, esto no suele ser un problema. Para el trabajo real del proyecto, debe seguir las prácticas recomendadas de desarrollo desarrollando en una rama diferente y revisando todos los cambios mediante una solicitud de extracción antes de combinar en main.

Cuando no esté desarrollando en la rama main, puede anexar ?ref=<branch> en la barra de ubicación del Editor universal para cargar la página desde la rama. <branch> es el nombre de la rama que se usaría para la vista previa del proyecto o las URL activas, p. ej. https://<branch>--<repo>--<owner>.hlx.page.

La publicación de contenido con un nuevo modelo solo se admite cuando el modelo se combina con la rama main.

Siguientes pasos next-steps

Ahora que sabe cómo crear bloques, es esencial comprender cómo modelar contenido de una manera semántica para lograr una experiencia de desarrollador ágil.

Consulte el documento Modelado de contenido para la creación de AEM con proyectos de Edge Delivery Services para saber cómo funciona el modelado de contenido para la creación de contenido de AEM con proyectos de Edge Delivery Services.

TIP
Para obtener una guía completa sobre la creación de un nuevo proyecto de Edge Delivery Services que está habilitado para la creación de contenido de AEM con AEM as a Cloud Service como un origen de contenido, consulte este seminario web de GEM de AEM.
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab