Vamos a trabajar más en este diseño de lista de recetas más adelante.
Pero, vamos a hacer una cosa más ahora mismo.
Editar este diseño.
Quiero dar a nuestros usuarios administradores la flexibilidad de cambiar este título.
¡Genial! Vamos a añadir un nuevo bloque de título justo encima...
e introduzcamos algún texto.
Pulsa "Publicar y continuar editando"...
y luego ve al frontend.
Lo que estoy intentando hacer es replicar este título, o área "héroe",
para que podamos eliminarlo de nuestra plantilla Twig.
Pero cuando refrescamos, todavía no se ve bien.
Ve y mira esa plantilla.
Bien: para replicar esto, necesitamos una etiqueta h1 envuelta en un div hero-wrapper:
Ahora mismo, Layouts está simplemente renderizando un h1.
Y, por cierto, puedes, en las opciones del bloque de título, elegir entre h1, h2, o h3.
h1 es lo que necesitamos esta vez.
Entonces: ¿cómo podemos envolver esto en un div y darle una clase hero-wrapper?
La respuesta: añadiendo un ingenioso bloque "columna"...
y mover el título a esa columna.
Genial, ¿verdad?
Por último, al hacer clic en la columna, puedes añadir la clase que quieras.
Añade hero-wrapper.
¡Vamos a probarlo!
Pulsa "Publicar y continuar editando", refresca el frontend y...
¡mucho mejor!
¿Qué pasa con ese texto?
Cópialo, añade un nuevo bloque de "texto" justo debajo de nuestro "título" y...
pega. Publica y continúa editando de nuevo... prueba de
nuevo el frontend y... ¡mira
eso! ¡ Una
réplica perfecta! Para
celebrarlo, en la plantilla, podemos eliminar esa sección por completo: El
resultado final es el mismo que antes... excepto que
los usuarios administradores tienen ahora la posibilidad de cambiar el texto. Aunque,
probablemente te hayas dado cuenta de que esto me exigió ser un poco técnico:
tuve que conocer la clase CSS que necesitaba la columna. Si los usuarios administradores
que diseñan tus diseños son un poco técnicos, entonces esto podría no ser un problema. Pero
si tus editores son menos técnicos, podrías, en cambio, crear un tipo de bloque personalizado -como
un bloque héroe- en el que el usuario sólo tenga que escribir el texto y
tú lo renderices todo por él.
No vamos a crear bloques personalizados en este tutorial... pero
eso es principalmente porque, al final del tutorial,
sabrás todo lo que necesitas para seguir los documentos para ello.
Muy bien, volviendo al front-end, los diseños vienen con su propio icono de la barra de herramientas de depuración web. Y
si haces clic en esto, es muy bonito. Vamos a
usar esto un montón de veces.
Te muestra el diseño que se ha resuelto e incluso la razón por la que se ha elegido. Pero
lo realmente útil es la sección "Bloques renderizados". Esto
nos muestra todos los bloques de diseño que se renderizaron para construir esta página.
Puedes ver que hay uno llamado "Bloque Twig " para la navegación superior, una "Columna", luego el bloque "Título", "Texto",
"Vista completa" y finalmente el último bloque " Twig " para el pie de página. Esta
es una gran manera de ver todos los diferentes bloques que se están renderizando, así como
la plantilla que hay detrás de cada uno. Más adelante,
hablaremos de anular esas plan tillas, para
poder personalizar su aspecto. De vuelta al
administrador de Diseños, publica el diseño para volver a la página principal. Si
vas a /admin, verás que nuestra aplicación ya tiene EasyAdmin instalado. Vamos a
añadir un enlace desde el menú de aquí a Diseños para facilitarnos la vida. Abre
src/Controller/Admin/DashboardController.php... y
encuentra configureMenuItems(). Añade
otro con yield MenuItem::linkToUrl(), llámalo "Diseños" y
dale unos iconos: fas fa-list. Para
la url, utiliza this->generateUrl() y pasa el nombre de la ruta, que
resulta ser nglayouts_admin_layouts_index: ¡Perfecto! Es
un pequeño detalle, pero ahora, cuando estemos en /admin,
podemos hacer clic en "Diseños" para saltar directamente allí. Bien,
¡comprobación de estado!
Podemos representar los bloques Twig y mezclar títulos, texto, HTML, Google Maps y
otros bloques donde queramos.
Cuantos más bloques Twig tengamos en la plantilla, más flexibilidad tendremos. ¿Pero
qué pasa con la posibilidad de representar una colección de recetas de nuestra base de datos, como las
"Últimas recetas" que tenemos en la página de inicio? Esa es
una pieza importante de los diseños: así que empecemos a sumergirnos en ella a continuación