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

Aprenda a crear bloques instrumentados para su uso con el editor universal en la creación WYSIWYG 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 WYSIWYG 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 de creación WYSIWYG con proyectos de Edge Delivery Services, así como del 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:

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

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:

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 creó en la guía de Guía de introducción para desarrolladores para la creación WYSIWYG con Edge Delivery Services y ábralo en un editor de su elección.

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.

Ejemplo de JSON

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

Captura de pantalla

3. Edite el archivo component-models.json en la raíz del proyecto y agregue la siguiente definición de modelo para su nuevo bloque de comillas y guarde el archivo.

Ejemplo de JSON

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

Captura de pantalla

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

Ejemplo de JSON

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

Captura de pantalla

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

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.

Aplicar estilo al bloque style-block

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

1. Vuelva al editor de su proyecto.

2. Crear una carpeta quote en la carpeta blocks.

3. En la nueva carpeta quote, agregue un archivo quote.js para implementar la decoración de bloques agregando la siguiente JavaScript y guarde el archivo.

Ejemplo de JavaScript

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); }

Captura de pantalla

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

Ejemplo de CSS

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

Captura de pantalla

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

6. Vuelva a la pestaña de su navegador del editor universal donde estaba editando la página de su proyecto y vuelva a cargar la página para ver el bloque con estilo.

7. Consulte el bloque de comillas ahora diseñado en la página.

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

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.

Opciones de bloque block-options

Si necesita que un bloque tenga un aspecto o un comportamiento ligeramente diferente en función de determinadas circunstancias, pero no lo suficientemente diferente como para convertirse en un nuevo bloque en sí mismo, puede permitir que los autores elijan entre opciones de bloque.

Añadiendo una propiedad classes al bloque, la propiedad se representa en el encabezado de tabla para bloques simples o como lista de valores para elementos en un bloque de contenedor.

{
  "id": "simpleMarquee",
  "fields": [
    {
      "component": "text",
      "valueType": "string",
      "name": "marqueeText",
      "value": "",
      "label": "Marquee text",
      "description": "The text you want shown in your marquee"
    },
    {
      "component": "select",
      "name": "classes",
      "value": "",
      "label": "Background Color",
      "description": "The marquee background color",
      "valueType": "string",
      "options": [
        {
          "name": "Red",
          "value": "bg-red"
        },
        {
          "name": "Green",
          "value": "bg-green"
        },
        {
          "name": "Blue",
          "value": "bg-blue"
        }
      ]
    }
  ]
}

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 WYSIWYG con proyectos de Edge Delivery Services para conocer cómo funciona el modelado de contenido para la creación de WYSIWYG con proyectos de Edge Delivery Services.