Introducción
Gutenberg es el editor nativo de WordPress, basado en bloques.
Dadas las limitaciones del editor clásico de WordPress en los inicios de PortalEdu; se decidió añadir Beaver Builder como editor al proyecto.
Ahora, gracias al gran crecimiento en funcionalidad experimentado por el editor nativo de WordPress, dada su mejor integración con la plataforma, que se traduce en un mejor rendimiento y mayor compatibilidad con futuras actualizaciones, es el momento de realizar la transición por parte de aquellos usuarios que aún utilizan Beaver Builder en Portaledu.
Con este artículo se quiere ofrecer información sobre cómo crear contenidos con Gutenberg, para aquellos usuarios habituados a utilizar Beaver Builder, o incluso migrar contenidos realizados con el editor Beaver Builder a Gutenberg. .
Pasos para convertir un «Post sencillo»
Por «un post sencillo» nos referimos a entradas/páginas que no hacen uso de los módulos más elaborados de diseño de Beaver como son Contenido deslizante, Acordeón, Barra lateral y Pestañas. Ni tampoco de los elementos dinámicos englobados dentro de la pestaña «Entradas» del editor y que son Carrusel de entradas, Control deslizante y Entradas.
Para convertir este tipo de posts, es suficiente con pulsar en Editar desde el listado de páginas o entradas y en la siguiente pantalla hacer click sobre «Usar el editor estándar» en vez de sobre «Launch Editor Visual». Al hacer esto se cargará el editor Gutenberg que intentará migrar los contenidos automáticamente.
Advertencia: Al hacer esto y darle a guardar, la entrada original creada con el editor visual será reemplazada con la nueva versión en Gutenberg, y no habrá vuelta atrás. Así pues, si se quiere mantener la entrada original mientras se hacen pruebas de conversión del contenido, habría que hacerlo siguiendo los pasos que a continuación se detallan:
En caso de querer mantener la copia original creada con el editor visual, es suficiente con copiar los contenidos de la entrada desde el editor visual (en visualización, no en edición), pegar éstos en un post nuevo creado con el editor estándar y retocar/maquetar lo copiado. Estos son los pasos:
- Crear un Nuevo Post en Gutenberg
- Ve a «Entradas» en WordPress y crea un nuevo post (o página, según corresponda).
- Por defecto, las nuevas páginas y posts se crean con el editor estándar.
- Copiar el Contenido desde Beaver Builder
- En una pestaña del navegador, abre el post de Beaver Builder que deseas convertir.
- Selecciona y copia el contenido relevante que desees convertir.
- Pegar y Reestructurar el Contenido
- Pega el contenido copiado en el nuevo post Gutenberg.
- Convierte cada parte en su bloque nativo correspondiente (párrafo, encabezado, imagen, etc.). La mayoría de estas conversiones serán realizadas automáticamente por Gutenberg para los bloques que sean equivalentes dentro de este editor.
- Reemplazo de Elementos Visuales no compatibles
- Sustituye los módulos de Beaver Builder con los bloques equivalentes de Gutenberg (ver tabla abajo).
- Asegúrate de que los estilos y formatos se mantengan.
- Ajustar el Diseño
- Gutenberg permite columnas, encabezados, imágenes y botones sin necesidad de un constructor externo.
- Utiliza bloques avanzados de Gutenberg como «Grupo«, «Columa» , «Cuadrícula«, «Fondo» para un mejor diseño.
- Revisión y Publicación
- Una vez completada la conversión, revisa que el diseño y los formatos sean correctos.
- Publica el post en Gutenberg cuando estés satisfecho con la conversión.
Tabla guía para el punto 4.
| Elemento | Módulo de Beaver Builder | Bloque de Gutenberg |
|---|---|---|
| Texto | Editor de texto | Párrafo |
| Encabezado | Encabezado | Encabezado |
| Imagen | Módulo de Imagen | Imagen |
| Botón | Botón | Generate Blocks / Botón |
| Video | Video | Video |
| Carrusel de imágenes | Galería | Galería o Real Media Galería |
| Columnas | Fila con columnas | Columnas / Cuadrícula |
| Fondo con texto | Fila con fondo + Texto | Fondo / Contenedor |
| Separador | Separador | Separador |
| Espaciado | Margen/Padding | Espaciador |
Pasos para convertir un post con elementos de diseño o dinámicos
La conversión de posts más elaborados que incluyan módulos de diseño o dinámicos, aunque sencilla, no es tan directa como la migración de posts más sencillos.
En este caso en vez de partir de una copia del contenido del post original en Beaver, habrá que ir creando con Gutenberg un post nuevo replicando el post a migrar. Para ello se irán añadiendo los bloques de Gutenberg que proporcionan la misma funcionalidad que los elementos utilizados en Beaver siguiendo la tabla de conversión mostrada a continuación.
| Elemento | Módulo de Beaver Builder | Bloque de Gutenberg |
|---|---|---|
| Carrusel de contenido propio | Medios / Contenido deslizante | Texto / MetaSlider |
| Acordeón | Diseño / Acordeón | GVA Bloques / Acordeón |
| Barra lateral | Diseño / Barra lateral | Columnas o Tabla o Cuadrícula |
| Pestañas | Diseño / Pestañas | GVA Bloques / Pestañas (próximamente) |
| Carrusel de entradas | Entradas / Carrusel de entradas | GVA Bloques / Carrusel de Entradas |
| Visualizador de entradas | Entradas / Entradas | GenerateBlocks / Bucle de consulta |
| Slider | Entradas / Control deslizante | GVA Bloques / Visor deslizante de Entradas |