FORMACIÓN

Tal como se ha informado en ocasiones anteriores (Gutenberg: el editor por defecto de Portaledu – Portaledu), el editor estándar en Portaledu es el editor estándar de WordPress, llamado también Gutenberg o Editor de bloques.

Se trata de un potente editor visual que se va reforzando constantemente con la incorporación de plugins y desarrollos que aportan nuevos bloques para enriquecer nuestras publicaciones.

Se recuerda a aquellos usuarios de Portaledu en cuyos sitios está todavía activo el editor Beaver Builder (también conocido como editor visual), que deben ir abandonando este editor. Este plugin fue incorporado en los inicios de Portaledu porque ofrecía una forma de edición visual que no aportaba en aquel momento el editor clásico de WordPress, en su versión 4.9. Este plugin ha continuado ofreciendo a algunos usuarios de Portaledu una edición visual y numerosos componentes de visualización, que han sido y son apreciados por ellos. Sin embargo, ese editor resulta excesivamente pesado para asegurar un funcionamiento óptimo de nuestra plataforma. A pesar de ello, se ha mantenido en Portaledu durante varios años, para dar tiempo a una transición paulatina a Gutenberg. Mientras tanto, el editor de bloques de WordPress ha ido evolucionado en funcionalidad.

En este momento, la funcionalidad que ofrece el editor de bloques resulta más que suficiente para satisfacer los requerimientos de cualquier web en Portaledu.

Os recordamos algunas funcionalidades (bloques) disponibles en el editor estándar:

Este post sobre cómo convertir contenidos confeccionados con Beaver Builder a Gutenberg puede resultar de utilidad:

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:

1. 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.
2. 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.
3. 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.
4. 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.
5. 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.
6. 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.

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.

Accesible desde la Mediateca, el plugin de reemplazo de ficheros permite sustituir un fichero manteniendo la URL del fichero original. Debido la naturaleza de esta operación, que puede afectar a cualquier documento publicado en la web, es una utilidad disponible sólo para los roles dirección y mantenimiento.

Esta funcionalidad puede resultar útil para actualizar documentación en la web de centro sin necesidad de modificar la entrada/página donde se ha publicado un enlace al documento.

Caso práctico: Si se dispone de un post informativo que enlaza o muestra el menú mensual del comedor (PDF o imagen), bastaría con reemplazar mensualmente el fichero para mantener actualizada la información, sin necesidad de editar la entrada.

Modo de empleo

• Acceder a la Mediateca
• Seleccionar el fichero a reemplazar haciendo click sobre él
• En el diálogo de edición, a la derecha, con los detalles del fichero ahora aparece un nuevo botón Reemplazar archivo.
• Tras pulsarlo, en la nueva pantalla, arrastrar o seleccionar el fichero que sustituirá al archivo actual.
• El plugin tiene la limitación de que tipo de fichero debe de ser el mismo. Por ejemplo, un fichero .jpg sólo puede ser reemplazado por otro fichero .jpg

Con esta funcionalidad se puede realizar una traducción automática con el servicio GVA Salt (salt.gva.es), tanto de castellano a valenciano, como de valenciano a castellano. El plugin habilita un cuadro metabox en la edición de contenido el cual inicia la traducción de las siguientes partes:

• Título
• Cuerpo
• Taxonomías
  • Categorías
  • Etiquetas

Funcionamiento

Una vez, o bien creando un contenido, debe haber sido guardado previamente, o bien cuando editamos un contenido ya creado, podremos ver un metabox (las opciones que aparecen en la columna derecha en la edición de contenidos) con el título : Traducciones Salt.

Si pulsamos en el botón Traducir aparecerá una ventana emergente pidiendo confirmación de la acción para verificar que todo el contenido se ha guardado previamente, en el caso contrario los cambios no guardados se perderían además de no ser traducidos.

Si confirmamos la acción, entonces procederá a realizar la acción de traducción de las partes comentadas en la introducción y nos redirigirá a la edición del contenido traducido para que lo podamos supervisar.

Puede ocurrir que si existe una traducción previa, nos aparezca una ventana emergente advirtiendo que ya existe una traducción y si la deseamos sobreescribir.

A tener en cuenta

• Las taxonomías (tanto categorías como etiquetas), son traducidas si la entrada tiene taxonomías asignadas. Es decir, si decidimos crear y asignar una categoría llamada «Evento» (en nuestra entrada de castellano), y traducimos con la herramienta, nos creará la categoría «Event» (en valenciano) asociada y con equivalencia con nuestra categoría original.
• Si hemos asignado una imagen destacada a nuestro entrada original, la entrada traducida tendrá también esta imagen destacada. Podemos cambiarla en la entrada traducida si lo consideramos conveniente.