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:
- Ha completado el Tutorial del servicio de envío de Edge.
- Tiene acceso a una Zona protegida de AEM Cloud Service.
- Ha habilitado el Editor universal en el mismo entorno de zona protegida.
- Ha completado la guía de introducción para desarrolladores de para la creación de WYSIWYG con Edge Delivery Services.
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:
- Cree la definición y el modelo para el bloque, revíselo y llévelo a producción.
- Cree contenido con el nuevo bloque.
- 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 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.
- El código Microsoft se utiliza aquí con fines ilustrativos.
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 |
---|
|
![Edición del archivo component-definitions.json para definir el bloque de comillas](./media_12f63a902371d6926c5c1950434cbf25339b6b64f.png?width=750&format=png&optimize=medium)
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.
- Consulte el documento Modelado de contenido para la creación WYSIWYG con proyectos de Edge Delivery Services para obtener más información acerca de lo que es importante tener en cuenta al crear modelos de contenido.
code language-json |
---|
|
![Edición del archivo component-models.json para definir el modelo del bloque de comillas](./media_18334ef0af1b01e98602aed351afad482e8e3d261.png?width=750&format=png&optimize=medium)
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.
code language-json |
---|
|
![Edición del archivo component-filters.json para definir los filtros del bloque de comillas](./media_12ef5576ab3ca41ac9f9b8b312ee7c8f3653ded76.png?width=750&format=png&optimize=medium)
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.
-
En un explorador, inicie sesión en AEM as a Cloud Service. Con la consola Sites, vaya al sitio que creó en la guía de introducción para desarrolladores de para la creación WYSIWYG con Edge Delivery Services y seleccione una página.
- En este caso,
index
se utiliza con fines ilustrativos.
- En este caso,
-
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.
-
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.
-
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.
-
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.
-
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
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.
code language-javascript |
---|
|
![Añadir JavaScript para decorar el bloque](./media_1585dbe4b86cec96da01e6566c033df4f1ed4770f.png?width=750&format=png&optimize=medium)
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.
code language-css |
---|
|
![Añadir CSS para definir el estilo del bloque](./media_1402c14ef0479f2f69b3b29bcaff6d7664f469a6a.png?width=750&format=png&optimize=medium)
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 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.