La versión 5.4 de WordPress se aproxima, y como viene haciendo desde la 5.0, permitirá editar con Gutenberg. En esta segunda parte de nuestro artículo dedicado al lanzamiento de WordPress 5.4 daremos un vistazo a las particularidades de Gutenberg y a cómo editar nuestras entradas y páginas con él. ¿Quieres saber más?
El editor de WordPress 5.4 es una herramienta muy útil e intuitiva; fomenta el correcto flujo de la información dentro de una página o entrada, y ayuda a mantener una jerarquía definida.
Lo primero que tenemos que entender a la hora de editar con Gutenberg es que «todos los elementos son bloques«. Así, como si de un puzzle se tratara, cada párrafo, encabezado, lista o imagen, se comportará como un elemento independiente si así lo deseamos.
Por ejemplo, con cada salto de línea se crea un párrafo automáticamente. De esta manera podemos seleccionar los párrafos escritos y «arrastrarlos» para ordenarlos cuantas veces queramos. También podemos ordenar los bloques paso a paso con las flechas de selección que acompañan a cada bloque. Un funcionamiento fácil y sencillo que no tardaremos en comprender por lo intuitivo que resulta.
Cuando comenzamos una entrada o página, lo primero que observaremos son los dos bloques esenciales; el título y un bloque de párrafo vacío para comenzar a escribir.
Como en versiones anteriores de WordPress, escribir el título hará que se cree automáticamente el «Enlace permanente» o «Permalink», que podremos editar a placer en el menú lateral. Es precisamente ese menú lateral unas de las claves a la hora de editar con Gutenberg, ya que albergará los menús contextuales que variarán en función de la herramienta de bloque seleccionada.
Así, al editar el encabezado se despliega un menú especifico para dicho bloque, permitiendo configurarlo de manera más concisa. De esta manera contamos con un menú de ajustes básicos del bloque al seleccionarlo, y el menú contextual lateral.
Cada bloque cuenta con su menú de edición rápida con las opciones más básicas propias de cada tipo. Además incluye un botón que despliega opciones comunes a todos los bloques:
En Gutenberg podemos observar la aparición de un icono, tanto en la parte superior izquierda como en los espacios entre bloques. Este icono con un «+» inscrito en una circunferencia sirve para añadir un nuevo bloque, por defecto al final de la entrada o página. Al pulsarlo se despliega el menú de selección de bloques donde podremos observar que se encuentran ordenados en los siguientes grupos.
Aquí se encuentran a modo de acceso directo los bloques más comunes y utilizados. De esta manera, si nos encontramos editando una página y recurrimos a textos e imágenes las tendremos más a mano.
Este grupo contiene los bloques más básicos y elementales. Bloques de texto, imágenes y archivos multimedia, listas, citas, fondos o enlaces a archivos, entre otros.
El bloque más básico y elemental para crear texto corrido. Se crea por defecto al escribir en el editor y posee las opciones de configuración más habituales en editores de texto.
Una de las particularidades de este bloque respecto a la escritura de texto de WordPress 4.9 es la posibilidad de añadir clases CSS adicionales al párrafo de manera independiente o capitalizarlo con un solo click.
Este bloque de Gutenberg contiene los encabezados y títulos indispensables para jerarquizar la información. Se distribuyen en niveles de la etiqueta HTML «h» (H1, H2, H3, …). Con opciones similares a los párrafos, cuenta con la peculiaridad de incorporar la opción de insertar anclas a los distintos encabezados.
Similar al botón de «Insertar Objeto» de WordPress 4.9 pero con un editor algo más completo. Su menú básico contiene varios botones de formato para determinar el alineamiento de la imagen y su comportamiento.
Uno de los bloques que cuenta con mayor tirón entre los usuarios de WordPress. Si bien es cierto que sigue teniendo margen de mejora, la posibilidad de incorporar galerías de Gutenberg hace plantearse la opción de dejar atrás algún que otro plugin en pos de este módulo.
Aseveramos esto porque el funcionamiento de la galería es sencillo, rápido, y con un acabado muy bien ejecutado. Las imágenes se alinean en las columnas especificadas, y si estas no son regulares y hay alguna imagen sobrante, se alinea por sí sola para mantener una retícula impecable.
Las habituales listas ordenadas y desordenadas de HTML. Quizá el bloque más pobre de los vistos hasta ahora. Seguimos echando en falta más opciones avanzadas para usuarios sin conocimientos de CSS.
Este bloque nos permite insertar la típica cita correspondiente a la etiqueta «blockquote» de HTML. Gutenberg incorpora una opción para alternar entre un formato de cita simple y otro mucho mayor y más vistoso.
Aunque son bloques distintos van juntos de la mano en cuanto a comportamiento. El mayor fuerte de este bloque es sin duda la interfaz del reproductor multimedia que resulta bastante fresca y actual.
Uno de los bloques que supuso un salto de calidad con respecto a versiones anteriores a WordPress 5.0. Fondo nos permite insertar un bloque con el ancho completo de la página (si la plantilla del tema lo permite, puesto que por el momento no todas están preparados para ello). El bloque puede incluso contener un vídeo de la biblioteca, de una URL o una imagen.
Este bloque permite insertar un archivo, como por ejemplo, un archivo PDF. Nos ofrece la posibilidad de insertar un enlace simple o un botón que acompañe al enlace para facilitar la descarga.
Para concluir nuestro artículo con motivo de la llegada de WordPress 5.4 continuaremos con el repaso a su editor visual. Hablaremos del resto de bloques para editar con Gutenberg y os daremos las claves y novedades que incorporará la próxima actualización. Os esperamos.
En este artículo, aprenderás qué es el Lazy Loading y cómo implementarlo fácilmente en tu… Leer más
En esta guía práctica, te explicamos qué es el presupuesto de rastreo, por qué es… Leer más
¿Alguna vez te has encontrado con un mensaje que te invita a actuar, ya sea… Leer más
Una de las preguntas más comunes entre los desarrolladores web que comienzan a usar JavaScript… Leer más
Descubre qué es y para qué sirve la preimpresión digital para conseguir una buena impresión… Leer más
Ampliamos información para las redes sociales. Descubre cómo gestionar correctamente los consentimientos necesarios en las… Leer más
Ver comentarios
Buenas, tengo una duda con wordpress Gutenberg,cuando pico en un enlace dirigido a un PDF siempre me va a la
carpeta descarga y lo que quiero es abrir el enlace en una pestaña nueva. ¿como puedo hacerlo?. Gracias
Hola Oscar,
Cuando insertas un archivo pdf, el sistema introduce el título del archivo (1º línea de código) si lo tiene en medios y un botón de descarga (2º línea de código).
Cuando haces clic en el título se verá en la misma página con el visualizador de pdfs del navegador, si lo que necesitas es que se habrá en otra página distinta añade el atributo target="_blank", editando como html.
Cuando haces clic en el botón se descarga automáticamente porque tiene el atributo download. Si te das cuenta la diferencia entre la primera línea y la segunda es simplemente este atributo.
a href="https://carontestudio.com/blog/wp-content/uploads/2020/10/archivo.pdf" target="_blank">titulo
a href="https://carontestudio.com/blog/wp-content/uploads/2020/10/archivo.pdf" download>Descargar
Un saludo