Si estás leyendo esto, es porque usas o estás pensando usar WordPress ¿no?. Pues bien, debes saber que la forma en la que se crea contenido con WordPress está a punto de cambiar… ¡Este año!
Quédate en este artículo y aprende todo lo relacionado con el proyecto Gutenberg, el nuevo editor por defecto que el equipo que desarrolla WordPress implementará en la próxima versión 5.0 prevista para este año.
¡Hola! ¿Qué quieres aprender?
Estadísticas de uso de Gutenberg ACTUALIZADAS
Tutorial editor Gutenberg WordPress 5.0 →
Desactivar Editor y aviso de actualización (4.9.8) →
¿Qué es Gutenberg y que significa para WordPress?
El nuevo editor visual Gutenberg pretende revolucionar la forma en que publicamos el contenido a través de WordPress, con el fin de que todo el mundo, incluso personas sin apenas habilidades técnicas puedan no sólo publicar si no construir sitios web y blogs con facilidad sin necesidad de comprar y usar temas o plugins de terceros.
Si descargas ahora el manual WordPress pdf en español y gratuito de TutorialWP recibirás una copia totalmente gratis en cuanto lo actualice a la versión 5.0 ya con el nuevo editor.
Editor actual de WordPress
Gutenberg Editor WordPress 5.0
Datos y estadísticas ACTUALIZADAS del editor Gutenberg + WordPress en 2019
Después del boom en el lanzamiento oficial del proyecto del nuevo editor Gutenberg, podría parecer que se ha perdido interés en el proyecto y que ya no se habla de él.
Al menos no tanto como al principio.
Es por eso que me he decidido a recolectar algunas cifras y estadísticas sobre cómo está siendo la evolución y adopción de esta nueva forma de crear contenido en WordPress.
¡Vamos allá!
- En septiembre de 2019, el editor Gutenberg está siendo utilizado en más de 200.000 sitios según datos oficiales de WordPress.org.
- Hasta hoy, Gutenberg fue descargado 61.274.358 veces desde el repositorio oficial.
- Gutenberg fue lanzado oficialmente en diciembre de 2018 con un nuevo tema de bloques «Veintinueve» y más tarde se lanzan muchos Astra Theme basados en bloques.
- Más de 400 colaboradores están trabajando de forma altruista en el desarrollo y mejora de la «versión Gutenberg» de WordPress a través de Github.
- Numerosos desarrolladores de empresas de terceros comenzaron desde el principio a construir plugins de bloques para mejorar la experiencia en el uso de Gutenberg.
- WooCommerce Blocks es un plugin desarrollado exclusivamente para sitios que utilicen este nuevo editor y en abril de 2019, ya tenía 170.000 instalaciones activas.
- Twenty Twenty es el próximo tema de WordPress (actualmente en desarrollo) que va a ser 100% compatible con Gutenberg y que será lanzado junto con la versión 5.3 del CMS.
- Themeforest, el famoso marketplace de temas y plantillas WP ya pidió a los desarrolladores que sus temas debían ser actualizados y ser totalmente compatibles con el nuevo modo de edición.
- Actualmente el proyecto sigue en modo de desarrollo, con una fase 2 ya en marcha. Además, ya están planteadas las fases 3 y 4 en la que se dará prioridad a la colaboración/edición multi usuario y a multi lenguaje respectivamente.
- Los problemas más comunes reportados por los usuarios de Gutenberg son el mal funcionamiento de los enlaces permanentes personalziados y los shortcodes que a priori no funcionan con los encabezados, lo que requiere de pequeños trabajos extra para que todo funcione como debería.
- Quizás por esto último, según datos de WordPress.org, aunque la adopción de Gutenberg va en aumento, también hay una tendencia creciente de personas que instalan plugins para restaurar el editor clásico.
Cómo funciona el nuevo editor Gutenberg en WordPress 5.0
A continuación vamos a repasar juntos la nueva interfaz del editor Gutenberg en WordPress
Después de conocer cada sección, veremos también cada área de la interfaz para que puedas sacarle el máximo partido a Gutenberg, el nuevo editor visual de WordPress.
La interfaz de Gutenberg se compone de tres áreas principales:
- 01. Barra de Herramientas →Zona superior de la pantalla
- 02. Área de Contenido →Parte principal en la zona central
- 03. Configuración Avanzada →Barra lateral derecha
Cada una de estas áreas contiene secciones adicionales con diferentes configuraciones.
01. Barra de Herramientas
Ubicada en la parte superior de la pantalla, la barra de herramientas de edición permite lo siguiente:
- Añadir un nuevo bloque al área de contenido
- Deshacer / Rehacer cambios
- Resumen de la estructura del contenido
- Guardado de cambios automáticamente
- Previsualizar el contenido de la página / post
- Ajustes de publicación: Visibilidad, fecha y ahora
- Mostrar / Ocultar ajustes avanzados en barra lateral
- Intercambiar los editores entre estilo visual y de código
- Fijar las herramientas de bloques en la parte superior
- Copiar todo el contenido
Novedades Gutenberg:
El nuevo editor de WordPress 5.0 Gutenberg, incluye un resumen la estructura del contenido que incluye número de palabras, párrafos, bloques, encabezados y una tabla de contenidos.
02. Área de contenido
El área de contenido es (obviamente) donde añadimos el contenido a nuestra página o post.
Esta parte es exactamente igual que con el editor clásico TinyMCE, sólo que ahora usaremos los bloques de Gutenberg para añadir el contenido.
Novedades Gutenberg:
Si tu tema está adaptado a Gutenberg, mostrará los estilos de los bloques dentro del área de contenido (back-end) de igual forma que se verán en la parte frontal de la web (front-end).
Si el tema utilizado no soporta esta funcionalidad, simplemente mostrará los estilos por defecto del editor.
Herramientas para bloques
En el editor visual Gutenberg, cada bloque, cuenta con una pequeña barra de herramientas que aparece justo encima.
Esta barra de herramientas aparecen al hacer clic dentro del bloque que queremos editar y nos muestra las posibilidades de edición para el bloque seleccionado.
Cada tipo de bloque cuenta con sus propias herramientas ya que las necesidades de edición son diferentes.
Por ejemplo, las herramientas disponibles para el bloque de párrafos son negrita, cursiva, tachado, enlaces y alineación.
Sin embargo, el bloque de shortcodes, no tiene opciones, ya que depende de cada código usado.
03. Ajustes avanzados (Barra Lateral)
El área de ajustes avanzados del nuevo editor de WordPress se encuentra en la barra lateral derecha y consta de dos subsecciones distintas: Documento y Bloque
Documento
Son los ajustes que se aplican a la página o post que estás editando.
El apartado de configuración del documento contiene la mayoría de la información situada en la barra lateral derecha del editor clásico de WordPress:
- Estado y visibilidad
- Fecha de publicación
- Revisiones
- Formato de publicación
- Imagen destacada
- Orden de la página
- Categorías
- Etiquetas
- Trackbacks y pingbacks
- Autor
- Des/Habilitar comentarios
- Extracto
Bloque
Aquí aparece la configuración avanzada de cada bloque.
La mayoría de ajustes que necesitarás, los tienes disponibles en la barra de herramientas del propio bloque, pero si algún bloque tuviese ajustes adicionales, estos aparecerían y se configurarían en este apartado.
Novedades Gutenberg:
No todos los bloques tienen ajustes avanzados.
La mayoría de veces no aparecerá nada en este área.
Bloques de Gutenberg
Como ya hemos visto, con Gutenberg los bloques son nuestros nuevos mejores amigos y han venido para quedarse y es que son uno de los mayores cambios introducidos con el nuevo editor visual de WordPress.
Por definirlos de alguna manera, los bloques de Gutenberg son fragmentos de contenido que se insertan en los posts o páginas de WordPress y su función es hacer que editar y añadir diferentes tipos de contenido sea mucho más fácil y rápido.
Con Gutenberg, estos bloques de contenido se pueden copiar, pegar, duplicar y más importante, desplazar a diferentes puntos de la página, de forma que puedas personalizar la estructura y diseño de tu contenido fácilmente.
Haciendo clic en los tres puntos pequeños que verás junto a cada bloque, también podrás ver más opciones para editar tu contenido, incluyendo opciones como los siguientes:
En Gutenberg, los bloques no sólo están formados por texto, sino que hay una gran selección de aspectos y tipos de contenido dónde elegir. A continuación veremos un listado completo de todos los bloques de Gutenberg que vienen por defecto con el nuevo editor hasta la fecha.
Pincha en los que más te interesen para ampliar la información.
¡Vamos allá!
Elementos de diseño
Bloques comunes del editor Gutenberg
Son los bloques que normalmente se utilizan más a menudo, sirven para añadir texto, imágenes y añadir contenido multimedia.
Vamos a verlos más en detalle:
Bloque Párrafo (Paragraph)
Función: Agrega texto simple a un post o página de WordPress.
Formatos disponibles: negrita, cursiva, alineación, tamaño de fuente, color, color de fondo y otros ajustes.
Descripción: El bloque párrafo sirve para añadir un solo párrafo de contenido.
La mayor parte del contenido general que añadimos a nuesto sitio utilizará este bloque.
Ajustes disponibles para los bloques Párrafo
Estos son los ajustes disponibles a la hora de usar el bloque para crear párrafos:
- Negrita
- Cursiva
- Tachado
- Enlaces
- Alineación del texto
- Letra capital (Drop cap)
- Tamaño de fuente
- Color de la fuente
- Color de fondo
- Clase CSS Adicional
Cómo personalizar el bloque de párrafos
Todos estos ajustes que hemos visto son individualmente configurables para cada uno de los bloques de tu contenido mediante los siguientes métodos:
Herramientas para modificar el contenido en los bloques de párrafos
Estos ajustes aparecen directamente encima del bloque seleccionado, una vez que haga clic dentro de él.
Configuración avanzada de párrafos
Estos ajustes permiten modificar el bloque de párrafo como un todo.
Los ajustes avanzados de párrafos se dividen en secciones y se encuentran en el panel Configuración del bloque (también llamado «Ajustes avanzados») en el lado derecho de la pantalla de edición.
Herramientas de edición para los bloques de párrafo
El nuevo editor Gutenberg pone a tu algunas herramientas de edición dentro de los bloques de párrafo.
Aunque son muy similares a las herramientas disponibles en TinyMCE el editor clásico de WordPress, vamos a ver un rápido repaso por si no conocías alguna:
Alinear texto
Puedes alinear los párrafos a la izquierda, derecha o centro de la página.
En la mayoría de los casos, la alinéación por defecto, a la izquierda, será la única que necesites; pero es bueno conocer todas las posibilidades.
Por ejemplo, si quieres resaltar alguna acción o contenido puntual, puedes valorar la alineación de texto centrada.
Negrita, cursiva y tachado
Estas opciones ya estaban disponibles en el editor clásico de WordPress y se usan del mismo modo en el nuevo editor Gutenberg:
- B – Negrita
- I – Cursiva
- ABC – Tachado de texto
Enlaces
De igual forma, la forma en la que añadir enlaces dentro del texto no ha cambiado en el editor Gutenberg de WordPress:
- Seleccionar el texto que deseas enlazar
- Pinchar en el icono del enlace (en forma de cadena)
- Escribir o pegar la URL
- Aceptar
Configuración avanzada de bloques de párrafos
Estos son los ajustes avanzados disponibles para editar los bloques de párrafos en Gutenberg:
Ajutes del texto
Tamaño de fuente
Como no podía ser de otra forma, con Gutenberg también puedes ajustar el tamaño de la fuente fácilmente.
A diferencia del editor clásico, con esta nueva versión es muy fácil variar el tamaño para cada párrafo por separado.
Además, con Gutenberg hay dos maneras de cambiar el tamaño de la fuente de un párrafo:
- Usar un deslizador
- Introducir un tamaño de fuente (en píxeles)
- Actualizado: Desde la versión 2.5 de Gutenberg, ahora también es posible seleccionar el tamño de fuente mediante 4 botones (S – L – M – XL)
Por supuesto, podrás eliminar cualquier tamaño de fuente personalizado usando el enlace Restablecer.
Esto forzará los estilos csss del párrafo para que herede el tamaño de fuente que el tema establece por defecto.
Capitalizar (Drop Cap)
Si añades el estilo de letra capital a tu texto, se enfatizará la primera letra de la primera palabra.
Los estilos aplicados cambiarán en función del tema, pero normalmente son:
- El tamaño de la primera letra será mayor que el resto del párrafo
- Se mostrará con un grosor de fuente más ancho
- El texto circundante se envuelve alrededor de la letra capitalizada
Color de fondo
El nuevo editor Gutenberg ofrece una forma sencilla de hacer que nuestros textos destaquen añadiendo cualquier color de fondo.
Podrás seleccionar cualquiera de los colores existentes en tu tema o utilizar la rueda de colores para seleccionar un nuevo color.
Al igual que hemos visto con el tamaño de fuente, también podrás eliminar cualquier color utilizando el botón Restablecer.
Color de texto
Cambiar el color del texto es otra forma de hacer que un bloque de párrafo destaque.
Al igual que con el color de fondo, con Gutenbreg podrás elegir un color predeterminado o crear uno completamente nuevo.
Novedades Gutenberg:
Con el nuevo editor 5.0 de WordPress llega una nueva característica muy interesante, y es que nos aparecerá un mensaje de aviso si los colores de fondo y texto que hemos escogido para nuestro tema no constrastan lo suficiente para leerse con facilidad.
Alineación de Bloques
En Gutenberg, la alineación de bloques no es lo mismo que la alineación de texto.
La función de la alineación de bloques es mover todo el párrafo en relación con el contenido que lo rodea.
Por ejemplo, si alineas un bloque de párrafo a la izquierda, cualquier bloque que tenga debajo flotará para colocarse a su derecha hasta llenar el ancho de la pantalla del dispositivo que estés utilizando.
El nuevo editor Gutenberg ofrece tres posibilidades para alinear los bloques:
- Alinear a la izquierda
- Alinear al centro
- Alinear a la derecha
La alineación a la izquierda y derecha colocará ese bloque al lado correspondiente.
El alineado central, moverá el bloque o bloques de párrafos al centro de la página dejando el espacio sobrante a los dos lados equitativamente.
Clases adicional CSS
Gutenberg ofrece la posibilidad de añadir clases de CSS adicionales para que puedas personalizar al máximo el estilo visual y diseño de tus bloques.
Para añadir más de una clase CSS a la vez, separa cada nombre con un espacio.
Transformar un bloque de párrafo
Otra nueva posibilidad que viene de la mano del editor Gutenberg para WordPress es la posibilidad de transformar el tipo de bloque de un bloque ya creado.
Cómo cambiar el tipo de bloque en Gutenberg
Cada bloque que creamos, tiene ciertas posibilidades a las que se pueda transformar.
Por resumir, cualquier bloque de texto (Párrafo, versículo, cita, listas etc) se puede convertir a cualquier otro bloque de texto.
Los bloques del tipo imagen que veremos más adelante, se pueden convertir en cualquier otro bloque de imagen y así respectivamente.
En el nuevo editor de WordPress, puedes cambiar un bloque de párrafo a los siguientes tipos que verás a continuación. para hacer el cambio, sólo hay que pulsar en el primer icono del desplegable de herramientas.
Bloque listas (List)
El bloque para listas es un bloque simple, que permite añadir listas. Pueden ser ordenadas (con números) o desordenadas (normalmente con puntos o guiones).
Su único propósito es mostrar el contenido en formato de listado ya sea o no enumerado.
Ajustes disponibles para los bloques Párrafo
Hasta el momento, el nuevo editor visual Gutenberg permite personalizar los siguientes ajustes para los bloques de creación de listados:
- Tipo: Lista ordenada o desordenada
- Reducir sangría al elemento
- Añadir sangría al elemento
- Negrita
- Cursiva
- Striketrough o efecto tachado
- Añadir enlace
- Cambiar tipo de bloque
Herramientas del bloque lista
Como has visto, y al igual que con los bloques de párrafo, en Gutenberg seguimos disponiendo de un conjunto de herramientas a las que ya estamos habituados con TinyMCE, el editor clásico de WordPress.
Éstos aparecen directamente encima del bloque al seleccionarlo con el ratón.
Cambiar tipo de bloque
Un bloque de tipo lista sólo se puede convertir en un párrafo (Paragraph) o una cita (Quote).
Antes de realizar este cambio, hay que tener en cuenta cómo se comportará el contenido ya incluido en el bloque:
Cambiar una Lista a un bloque párrafo
Al convertir una lista en un párrafo, cada elemento de la lista se convierte en su propio bloque de párrafos individual.
Cambiar una Lista a un bloque de cita
Cuando se cambia de una lista a una cita, cada elemento de dicha lista, pasa a convertirse en un párrafo individual dentro de una única cita.
Lista Desordenada
Una lista desordenada, equivale a la etiqueta HTML <ul>.
Se utiliza cuando el orden de los elementos de la lista no importa o no afecta al significado de la lista.
Lista Ordenada
Crear una lista numerada u ordenada, es lo mismo que usar la etiqueta HTML <ol>.
Se utiliza cuando el orden de los elementos son necesario para comprender el significado de la lista, por ejemplo en un tutorial, receta, etc.
Reducir o añadir Sangría
Con las 2 opciones siguientes podrás crear listas más complejas añadiendo distintos niveles a los elementos.
Es ideal para facilitar visualmente la comprensión de listas complejos, añadiendo o reduciendo sangría para los subelementos de algún item superior por ejemplo.
Esta es una ventaja del nuevo editor Gutenberg para WordPress, ya que con el editor normal, sólo se podía conseguir este efecto pulsando la tecla tabulador.
Negrita, cursiva y tachada
Estas opciones también estaban disponibles en el editor clásico de WordPress, y se usan de la misma manera en Gutenberg.
Simplemente debes hacer clic en B para negrita, en I para cursiva, y en ABC para tachar el texto.
Enlaces
Como sabes, el icono de la cadena, permite añadir enlaces a nuestros textos.
Esta parte también funciona de la misma manera en Gutenberg que con el editor clásico:
- Destaca con el ratón el texto que deseas enlazar
- Pulsa el icono del ancla o enlace
- Escribe o pega la dirección web (URL) que quieras enlazar
- Pulsa enter
Configuración Avanzada
Recuerda que para acceder a funciones de configuración avanzada, debes seleccionar el bloque que deseas editar y pulsar la opción de «Bloque» en la barra lateral derecha.
Ahí te aparecerán todas las opciones avanzadas disponibles para ese bloque en cuestión.
En el caso del bloque para listas, Gutenberg sólo dispone de una única opción de configuración avanzada.
Se trata de añadir una clase CSS adicional a esa lista para adaptarla al diseño de tu tema o añadir alguna función específica.
A diferencia del bloque párrafo, aquí no podrás cambiar ni el tamaño o color de fuente ni el color de fondo de las listas.
Bloque Encabezado
Seguramente, este bloque es uno de los que más usarás junto con el de párrafo.
Como dice el título, se trata del bloque que nos permite añadir titulares o encabezado o lo que es lo mismo, las etiquetas HTML h2, h3, h4, etc.
Bloque Imagen
Como podrás imaginar, el bloque de imagen es el que permite añadir contenido gráfico a nuestros artículos.
Tan sólo tienes que añadir este bloque y se desplegará el recuadro que acabamos de ver para permitirnos cargar la imagen que queramos de 3 formas diferentes:
- Subir una imagen nueva desde nuestro ordenador
- Utilizar una imagen ya usada de nuestra biblioteca
- Utilizar una imagen externa a través de su URL
Bloque Galería
Con la llegada del nuevo editor de WordPress 5.0, crear una galería de imágenes es mucho más sencillo.
Utiliza el insertador para añadir un bloque de Galería, dentro de la pestaña de bloques comunes para que se dspliegue el recuadro que nos permite añadir las diferentes imágenes que queramos usar.
Al igual que con la antigua galería de WordPress, con el nuevo editor de la versión 5.0 en adelante podrás elegir el número de columnas de imágenes que desees modificando los ajustes avanzados, sin embargo,Gutenberg organiza las fotos en un formato más fácil de usar y visualmente más atractivo.
Bloque Cita
El bloque cita, es el que reemplaza al elemento blockquote de HTML.
Sirve para añadir de forma destacada una pequeña frase o apunte añadiendo además la fuente de esa oración.
Como puedes ver en la imagen, podrás editar el contenido usando negritas, alineación etc.
Bloque Cubrir (Cover Image)
El bloque cubrir, es un nuevo elemento que gracias al nuevo editor de WordPress podremos incluir en nuestros artículos o páginas de forma sencilla.
Se trata del tipo elemento que podemos ver en muchas webs en el que un titular grande, se muestra con el fondo de una imagen, normalmente a pantalla completa.
Como puedes ver, este bloque tiene varias opciones básicas como son la alineación de texto, pero también podrás alinear la imagen, cambiarla, editar como HTML, etc.
Bloque Audio y Video
Estos bloques permiten añadir nuestros propios archivos de audio y video de forma nativa a través de WordPress.
Más adelante veremos cómo incluir audio y videos de diferentes plataformas de terceros como YouTube o o SoundCloud, pero con estos bloques podrás añadir archivos .mp3, .mp4 o similares de una forma muy simple y rápida a través de nuestra biblioteca de medios.
Bloque Archivo
El bloque de archivo, como su propio nombre indica, es el que debemos utilizar si lo que queremos es poner a disposición de nuestros lectores un archivo, como por ejemplo un pdf.
La forma de cargar este tipo de archivos, una vez añadido el bloque, es similar al de una imagen o audio a través de la biblioteca de medios.
Bloques con Formatos para el editor 5.0 de WordPress
Estos bloques son muy útiles para como su nombre indica, dar forma a ciertos elementos o contenido.
Están especialmente enfocados a elementos de código, pero también hay otras opciones como el bloque de verso o tablas.
Estas son todas las opciones disponibles:
Bloque Código
El bloque de código se utiliza para mostrar fragmentos de código, normalmente conocidos como snippets. Si no utilizas este bloque, el código que añadas, mostrará la funcionalidad del mismo, pero gracia a él, el código se mostrará tal cual lo escribas, por lo que tus lectores podrán leerlo o copiarlo fácilmente.
Este bloque soporta código HTML, CSS, JavaScript, PHP o cualquier otro código que puedas necesitar.
Bloque Clásico
Para los nostálgicos, el nuevo editor de WordPress, también permite añadir un bloque que nos permite utilizar el editor clásico utilizado hasta la versión 4.9 y comúnmente conocido como TinyMCE.
Este bloque no permite ningún ajuste adicional en la barra lateral, y con el tiempo irá perdiendo cada vez más valor, por lo que te recomiendo que sólo utilices este bloque como última opción y en su lugar, intenta aprender a realizar lo que necesites con Gutenberg.
Bloque HTML personalizado
Este bloque me encanta, ya que en lugar de tener que editar toda la entrada en HTML, ahora podemos editar bloques o «trozos» de contenido de forma individual, ahorrandonos así tener que desplazarnos por cantidades interminables de código HTML para encontrar lo que buscamos.
Pero es que además, si no conoces el lenguaje HTML a fondo, también te puedes ayudar del modo visual para ver el resultado del código añadido.
Adicionalmente al uso de este bloque, Gutenberg también nos ofrece la posibilidad de editar cualquier otro tipo de bloque en formato HTML.
Tan sólo hay que seleccionar el bloque que quieras editar y marcar la opción en «Editar como HTML».
Bloque Preformateado
El bloque de contenido preformateado es muy similar al de HTML personalizado que acabamos de ver, pero con algunas ligeras diferencias.
La función de los bloques preformateados es mantener los espacios, saltos de línea y en definitiva, mostrar el texto al usuario final tal y como tú lo escribes en el nuevo editor de WordPress.
Para los perfiles más técnicos, debéis saber que a la hora de pintar este bloque en tu web, no se utiliza la etiqueta <code>, pero a diferencia del bloque HTML, cuenta con algunas opciones de más, como la posibilidad de añadir negritas, cursivas, enlaces etc.
Bloque Tabla
Con el editor de WordPress 5.0 y este bloque, podrás añadir tablas dentro del contenido de una forma tan sencilla como añadir el número de columnas y filas que queremos crear.
Podrás usar el bloque de tablas para mostrar datos numéricos, comparaciones o cualquier otro tipo de contenido que puedas necesitar.
Por el momento, este bloque está muy limitado en cuanto a opciones disponibles, pero no se echa en falta ninguna opción principal como añadir o quitar columnas y filas una vez creada la tabla, diferentes opciones de alineación y formato de texto.
Bloque Verso
El bloque de versos está pensado para escribir poesía u otros elemtos literarios.
La única diferencia respecto a un bloque de párrafo cualquiera, es que con este bloque, el texto permanece tal cual se introduce, respetando los espacios y saltos de línea, además de que según el tema que utilices, lo más probable es que los estilos CSS con los que se muestre al usuario en tu web, serán diferentes.
Si la poesía no es lo tuyo, puedes utilizar este bloque para mostrar ciertas partes de contenido como por ejemplo, conclusiones, recursos o consejos rápidos de una forma diferenciada del contenido normal.
Elementos de diseño
El siguiente listado de bloques es una de las principales novedades del nuevo editor de WordPress 5.0 Gutenberg.
Entre ellos destaca algunos muy importantes como el botón, las columnas o el bloque de medios y texto.
Vamos a verlos con más detalle:
Bloque Salto de Página
Como su propio nombre indica, este bloque permite añadir el punto exacto en el que queremos que comience la paginación de nuestro contenido.
Una vez incluido, y si nuestro tema lo permite, para acceder al contenido añadido posteriormente, será necesario ir a la siguiente página para seguir viendo el contenido.
Más allá de los botones de paginación, este bloque no será visible para el usuario.
Bloque Separador
Este bloque añade una línea que como su nombre indica, separa el contenido.
A nivel de código, este bloque añade un elemento <hr>> en el HTML de tu web.
Bloque Espaciador
Este simple, pero efectivo bloque añade como indica su nombre un amplio espacio de varios saltos de línea que te ayudará a mejorar el diseño de tu web. Úsalo con el separador para diferenciar las secciones de tu web por ejemplo.
Bloque Botón
El bloque Botón permite añadir botones de llamada a la acción también conocidos como CTA (Call to Action) en cualquier parte del contenido. Por supuesto podrás editar el texto del botón y vincularlo a cualquier URL.
El diseño de dicho botón dependerá del código CSS utilizado por cada tema de WordPress.
Bloque Columnas
Gracias al nuevo editor de WordPress 5.0, tenemos a nuestra disposición el bloque Columnas que nos permite dividir el contenido en diferentes columnas hasta un máximo de 4 columnas por bloque.
Cada columna puede ser editada independientemente, lo que significa que ya no es necesario utilizar ningún plugin de shortcodes o maquetador visual para dar un aspecto más profesional a tus artículos.
Esto sin duda es una de las grandes mejoras que veremos con el nuevo editor de WordPress 5.0, sobre todo para usuarios principiantes o que no quieren depender de plugins con cientos de funciones sólo para esta finalidad.
El bloque columnas aún está algo limitada en cuanto a funcionalidades, pero seguro que según avance el desarrollo de Gutenberg, irá cobrando más protagonismo.
Bloque (Leer) Más
Este bloque que no es visible para el usuario, si no que su funcionalidad es marcar el límite entre el contenido que se va a mostrar en las categorías de tu blog.
El contenido añadido a partir de esta etiqueta no se mostrará en los extractos o ‘excerpts’ de tus entradas.
Bloque Medios y Texto
Este nuevo elemento es otra de las grandes joyas que el nuevo editor Gutenberg para WordPress trae bajo el brazo.
Se trata de un elemento muy común en la mayoría de páginas webs y no es otro que el que en inglés se conoce como el elemento ‘Media’.
Este bloque incluye una imagen (puede ser un icono por ejemplo) y justo debajo o en un lateral, un titular y/o texto y todo el bloque en sí, se adapta en función del espacio disponible en cada diseño.
Seguro que si te paras a revisar tu web, tendrás varios elementos media ya sea en la página de inicio o en el las categorías del blog.
Widgets disponibles para el editor Gutenberg en WordPress
El siguiente grupo de bloques disponibles para el editor de WordPress 5.0 es el de Widgets, que incluye el bloque necesario para incluir shortcodes además de otros widgets muy útiles para introducir ciertos tipos de contenido.
Sigue leyendo para más información:
Bloque Shortcode
Entramos ya en la sección de bloques de la categoría widgets, donde encontramos el bloque de shortcode.
Como podrás imaginar si ya llevas tiempo usando WordPress, este bloque permite añadir el código corto o shortcode que quieras que se muestre en tu web.
Si estás empezando, debes saber que un shortcode es una abreviatura que añadido de forma exacta en tu web permite añadir diferentes funcionalidades para los que éstos han sido creados.
Bloque Archivo
Este bloque muestra las entradas de tu web organizar por meses y año.
Dentro de las opciones avanzadas de configuración podrás decidir si prefieres mostrarlo en forma de desplegable o si queires o no añadir el núnero de entradas disponibles en cada fecha.
Bloque Categorías
El bloque de categorías es similar al anterior.
Si lo usas, podrás mostrar un listado de las categorías de tus entradas, y además de las opciones de mostrar en formato desplegable y añadir o no el número de entradas, también puedes decidir si mostrarlo guardando o no la jerarquía.
Bloque Últimos Comentarios
Muestra un listado con los últimos comentarios y configura cómo y qué quieres que se muestre según las diferentes opciones:
- Mostrar o no Avatar
- Mostrar o no Fecha
- Mostrar o no Extracto
- Número de comentarios
Bloque Últimos Entradas
Con este bloque, podrás añadir un listado de tus útlimas entradas con configuraciones como:
- Vista en formato lista o en cuadrícula
- Orden de visualización (Alfabéticamente, antiguedad..)
- Filtrar por categorí
- Número de entradas
- Mostrar fecha
Bloques Incrustados para el nuevo editor de WordPress
Dentro de esta colección de bloques tienes a tu disposición una gran lista de fuentes externas de las que incluir contenido en tu web.
¡Vamos allá!
Bloque Contenido Incrustado (Embeds)
Con la llegada de este nuevo editor a WordPress, tenemos toda una serie de opciones de incrustación con las que añadir contenido externo es ahora más fácil que nunca.
Como hasta ahora, puedes simplemente añadir la URL del contenido que quieras añadir o añadir el código de incrustación (normalmente etiqueta iframe de HTML) en el bloque correspondiente.
Algunos de los sitios de los que puedes incrustar contenido de forma sencilla son:
- Youtube
- WordPress
- Soundcloud
- Spotify
- Flickr
- Vimeo
- Animoto
- Cloudup
- CollegeHumor
- Dailymotion
- Funny or Die
- Hulu
- Imgur
- Issuu
- Kickstarter
- Meetup.com
- Mixclou
- Photobucket
- Polldaddy
- ReverbNation
- Screencast
- Scribd
- Slideshare
- SmugMug
- Speaker Deck
- TED
- Tumbl
- VideoPress
- WordPress.tv
Bloques de plugins para Gutenberg
Además de las opciones por defecto citadas anteriormente, también puedes tener disponibles otros bloques según los plugins que se instalen en la web.
Por ejemplo, instalando el clásico plugin de SEO by Yoast, podremos añadir un bloque que nos permite añadir microdatos Schema para ciertos elementos como un listado de tareas a realizar o el típico apartado de preguntas frecuentes.
De hecho, este es uno de los principales temas que preocupan a la comunidad WordPress actualmente y es por eso que recientemente, se ha anunciado que el editor clásico de WordPress recibirá soporte oficial hasta el 31 de diciembre de 2021.
Ya que si bien, se espera que el editor Gutenberg sea totalmente funcional antes de su lanzamiento, no se puede decir lo mismo de todos los plugins, cuyos respectivos desarrolladores deberán adaptar (por su cuenta) al nuevo (y cambiante) editor.
Por este motivo, se prevee que pueda llevar algún tiempo hasta que todos los plugins sean totalmente compatibles con la nueva interfaz.
Por suerte, los creadores, desarrolladores y toda una legión de voluntarios de la comunidad de WordPress están trabajando duro para que la mayoría de los plugins más populares y utilizados por los usuarios estén listos para el lanzamiento de la versión 5.0 y el nuevo editor Gutenberg.
¿Cuándo reemplazará Gutenberg al editor clásico de WordPress?
Hoy en día, todos los que tenemos un sitio web en WordPress y sabemos la que se nos viene encima, estamos pendientes de cuando se lanzará la nueva versión 5.0 de WordPress y más en concreto el lanzamiento del nuevo editor Gutenberg.
Fecha de lanzamiento de Gutenberg para remplazar al editor clásico actual
La fecha del lanzamiento no es 100% definitiva, de hecho, es probable que no se sepa hasta una o dos semanas antes de que WordPress 5.0 esté completamente listo para ver la luz.
No obstante, en este post del blog oficial de WordPress hay algunas fechas objetivo:
- 19 de octubre de 2018 – Primera versión beta
- 30 de octubre de 2018 – Candidato para la primera versión
- 19 de noviembre de 2018 – Lanzamiento
- 6 de diciembre de 2018 – Lanzamiento
¿Son seguras estas fechas? ¿Y si no está listo?
El equipo que está trabajando en el proyecto, reconoce que sus fechas iniciales son una propuesta y que no son del todo fijas:
«Sabemos que existe la posibilidad de que la versión 5.0 necesite tiempo adicional, por lo que estas fechas se pueden retrasar hasta 8 días si es necesario.”
Según este comentario, las fechas pueden sufrir un cambio importante (a mejor en mi opinión), ya que la primera versión candidata no estaría hasta enero.
Estas son las fechas que el equipo central ha identificado como «Fechas secundarias»:
- 8 de enero de 2019 – Candidato para la versión secundaria
- 22 de enero de 2019 – Publicación secundaria
Como decía, estamos todos pendientes de esta gran e importante cambio para el ecosistema WordPress, pero con más de 1300 puntos abiertos en Github, de los cuales más de 300 están identificados como bugs, parece poco probable que la versión Beta no está aún del todo lista para su lanzamiento.
Además, algo que se debe tener muy en cuenta, es que de cumplirse la primera propuesta de fechas, esta se realizaría justo antes del Black Friday, lo que, en el estado actual del proyecto, podría ser desastroso para muchos proyectos.
Por este motivo, mi recomendación es que empiezas ya con las pruebas necesarias para asegurarte que tu página web es totalmente compatible con el nuevo editor Gutenberg, o de lo contrario, tengas todo listo para desactivarlo tras su lanzamiento.
¿No sabes hacerlo? No te preocupes, sigue leyendo.
Actualizado 7 noviembre 2018
Desde WordPress.org se ha anunciado que el editor clásico de WordPress recibirá soporte oficial hasta el 31 de diciembre de 2021.
Cómo desactivar el nuevo editor de WordPress llamado Gutenberg y volver a la versión anterior del editor clásico?
El editor Gutenberg será lanzado con WordPress 5.0. La fecha de lanzamiento sigue siendo desconocida, pero una vez que vea la luz, se aplicará en todas las webs y blogs que se gestionen con este CMS.
Por supuesto, WordPress 5.0 incluirá muchas otras características además del nuevo editor Gutenberg, pero sin duda, esta será la más destacada.
Como ya sabrás, siempre se recomienda mantener WordPress actualizado a la última versión, pero esta vez, si no has hecho las pruebas necesarias y te has asegurado que tu web es totalmente compatible, es mejor que esperes unos días hasta ver reacciones de otros webmasters.
Cómo desactivar el editor Gutenberg con el plugin Classic Editor para WordPress
Si es demasiado tarde, y ya has actualizado a la versión 5.0 de WordPress, aún puedes desactivar Gutenberg y volver al editor clásico (también conocido como TinyMCE).
Para ello, tendrás que descargar e instalar el plugin Classic Editor plugin.
¿Ya lo tienes? Actívalo como de costumbre y sigamos.
Al desactivar Gutenberg, tiene dos modos diferentes para elegir:
- Usar siempre el editor clásico (elimina completamente Gutenberg)
- Alternar entre Gutenberg y el editor clásico (usando diferentes enlaces para usar cada uno)
Alternar entre Gutenberg y Classic Editor
Esta es la opción por defecto.
Si quieres seguir usando el editor clásico de WordPress mientras aprendes cómo funciona Gutenberg, esta opción también es válida. Si seleccionas esta opción, podrás alternar entre un editor y otro a tu gusto según cada ocasión.
Cómo editar con Gutenberg
Para usar Gutenberg, simplemente haga clic en el título de una entrada/página, o utilice el enlace «Editar» o «Añadir nuevo».
Es decir, haz lo mismo que siempre has hecho para crear o editar tu contenido, pero a partir de ahora, con el editor Gutenberg.
Cómo usar el editor clásico
Para usar el editor clásico, tendrás que hacer clic en el enlace «Editar (Clásico)» situado en la parte superior de la barra de administración.
Esta acción te llevará a la experiencia de edición anterior que ya conoces con el editor TinyMCE a la que estamos acostumbrado.
Desactivar Gutenberg y utilizar siempre Classic Editor
Para desactivar Gutenberg por completo y seguir utilizando el editor clásico por defecto debes ir a:
Ajustes > Escritura > Ajustes del editor clásico
Pulsa guardar cambios un poco más abajo y Gutenberg se desactivará por completo.
Todas las pantallas de edición de posts y páginas se verán como hasta ahora en la versión 4.9 de WordPress o anteriores.
¿Esperabas algo más?
¡Olvídate! Eso es todo lo que tienes que hacer para seguir utilziando WordPress como hasta ahora.
¿Es aconsejable desactivar Gutenberg?
Ya no hay marcha atrás. Gutenberg es el futuro presente de WordPress.
Y es que esto no se va a quedar en la edición de posts y páginas, si no que con el tiempo, Gutenberg será empleado para editar y modificar también no sólo la estructura, si no también el aspecto y diseño de tus plantillas en WordPress.
Por este motivo, si tienes una web o blog en WordPress, tarde o temprano tendrás que hacer frente al nuevo editor Gutenberg y es por eso que te animo a que te familiarices con la nueva interfaz y comiences cuanto antes a utilizarla.
No obstante, está claro que no es tarea sencilla aprender WordPress de nuevo de un día para otro, y es por eso que espero que este mini tutorial para desactivar Gutenberg y volver al editor clásico de WordPress te sea de ayuda.
ACTUALIZADO:
Cómo desactivar el aviso para actualizar a Gutenberg introducido en WordPress 4.9.8
Ya está aquí. Es una realidad
Como ya hemos dicho, el editor Gutenberg se integrará con WordPress en la versión 5.0 dentro de unos meses.
Este nuevo editor o constructor reemplazará a su editor actual (TinyMCE)a menos que instales el plugin Classic Editor.
No obstante, a partir de la actualización 4.9.8 de WordPress ya disponible, se incluirá una gran ventana de notificación en el panel de administración que anima a probar Gutenberg ya mismo (además de corregir varios errores claro como es habitual).
Si trabajar con páginas webs de clientes y no quieres que nadie vea este aviso para evitar desastres técnicos durante el verano, aquí te dejo un snippet para deshabilitar esta ventana del panel de administración de tu web.
Simplemente pega el siguiente código en el archivo functions.php del tema activo:
remove_action('try_gutenberg_panel','wp_try_gutenberg_panel');
Documentación oficial y recursos para Gutenberg
Tienes toda la información acerca del editor Gutenberg para WordPress, en el repositorio oficial del proyecto en github, incluyendo el código, componentes y una guía sobre cómo contribuir con Gutenberg o si lo prefieres, también dispones de documentación oficial en WordPress.org
Si bien es un gran cambio para el editor que todos conocemos y amamos, es sin duda un paso en la dirección correcta para hacer que la plataforma sea de fácil acceso y fácil de usar. ¿Qué opinas?
Gutenberg tutorial en español: El próximo editor de WordPress
Video de Francisco Aguilera G.
Registrar una paleta de colores personalizada para adaptar tu tema al editor Gutenberg
Como hemos visto, con el nuevo editor Gutenberg, será posible registrar una paleta de colores personalizada para añadir los colores corporativos de tu web a los diferentes bloques de contenido.
A continuación, veremos paso a paso como registrar y crear esta paleta.
¡Vamos allá!
Ajustes de color en el nuevo editor Gutenberg
Los nuevos bloques de Gutenberg para párrafos y botones ofrecen la posibilidad de seleccionar libremente el texto y los colores de fondo. Los bloques personalizados también suelen utilizar los componentes de Gutenberg para implementar opciones de color similares.
Por defecto, el editor de Gutenberg presenta una paleta de colores con once colores definidos y la opción de seleccionar sus propios colores con un selector de colores.
Por suerte, para agilizar el trabajo y no tener que seleccionar los colores que quieras cada vez, es posible sustituir esta paleta de colores predeterminada y definir una paleta de colores personalizada en línea con los colores de nuestra plantilla de WordPress.
Define tu paleta de colores personalizados para WordPress Gutenberg
Los colores personalizados para el nuevo editor Gutenberg se pueden registrar con add_theme_support( 'editor-color-palette').
La función add_theme_support() pasa una array con todos los colores junto a la característica ‘editor-color-palette’.
Es necesario un array para cada color en el que se debe especificar nombre, el slug y el valor de color.
/**
* Añadir soporte para las funcionalidades de Gutenberg
*/
function theme_slug_gutenberg_support() {
// Añadir soporte en el Theme para paletas de colores personalizadas
add_theme_support( 'editor-color-palette', array(
array(
'name' => esc_html__( 'Primario', 'theme-slug' ),
'slug' => 'primario',
'color' => '#006699',
),
array(
'name' => esc_html__( 'Contraste', 'theme-slug' ),
'slug' => 'contraste',
'color' => '#f4e08a',
),
array(
'name' => esc_html__( 'Gris Claro', 'theme-slug' ),
'slug' => 'gris-claro',
'color' => '#e5e5e5',
),
array(
'name' => esc_html__( 'Gris Oscuro', 'theme-slug' ),
'slug' => 'gris-oscuro',
'color' => '#5a5a5a',
),
) );
// Desabilitar soporte para colores personalizados
add_theme_support( 'disable-custom-colors' );
}
add_action( 'after_setup_theme', 'theme_slug_gutenberg_support' );Este ejemplo de código crea una paleta de cuatro colores: Primario, Contraste, y dos tipos de gris como has podido ver.
El nombre que especifiquemos para el color, se muestra mediante un tooltip en el editor.
El slug se utiliza para generar clases CSS. Con add_theme_support( 'disable-custom-colors') se puede desactivar el selector de colores, de forma que sólo se podrán utilizar los colores definidos (ideal para clientes ‘creativos‘).
Debes tener en cuenta que los colores personalizados que se registren, no se añaden al tema que usemos, si no que sustituyen a la paleta de colores estándar de Gutenberg.
Te recomiendo añadir nombres fáciles de identificar y recordar, y escribir tanto el nombre del color como sobre todo los slugs.
Añadir clases CSS para la paleta de colores del editor Gutenberg
Los colores personalizados a través de selectores de color siempre se añaden como estilos en línea en los bloques.
Para nuestros colores definidos en la paleta de colores, sin embargo, se generan clases CSS que siguen los patrones.
Por esta razón, no es suficiente registrar la paleta de colores sólo en el archivo functions.php, si no que como segundo paso tenemos que añadir los clases CSS y estilos correspondientes en los archivos .css de nuestro tema.
Es decír, deberíamos insertar el código CSS necesario en el archivo style.css del tema.
Sólo hace falta añadir el código CSS correspondiente mediante las clases .has-$slug-color y .has-$slug-background-color, cambiando $slug en cada caso por su correspondiente nombre.
Recuerda que cada color se puede utilizar en los bloques como color de texto o de fondo.
Por lo tanto, debes definir una clase CSS para el color de texto y otra para el color de fondo o ‘background’ para cada color añadido.
Siguiendo con el ejemplo anterior de la paleta de 4 colores, para ver cómo quedaría el código, procedemos a sustituirlo por nuestros propios nombres y valores hexadecimales para cada color:
/* Colores de texto en Gutenberg */
.has-primario-color {
color: #006699;
}
.has-contraste-color {
color: #f4e08a;
}
.has-gris-claro-color {
color: #e5e5e5;
}
.has-gris-oscuro-color {
color: #5a5a5a;
}
/* Colores de fondo en Gutenberg */
.has-primario-background-color {
background-color: #006699;
}
.has-contraste-background-color {
background-color: #f4e08a;
}
.has-gris-claro-background-color {
background-color: #e5e5e5;
}
.has-gris-oscuro-background-color {
background-color: #5a5a5a;
}Una vez añadamos este código CSS a nuestro tema, ya podríamos utilizar nuestra paleta de colores personalizada en nuestro editor Gutenberg.
No obstante, si quieremos ir un paso más allá, recordarás si has leído el artículo completo que una de las características de Gutenberg para WordPress es la posibilidad de mostrar el contenido en el editor, tal y como se mostrará en la web.
Para eso, debemos añadir los estilos y códigos necesarios.
En este caso, para que los colores personalizados se muestren correctamente en el editor, debemos añadir el siguiente snippet para hacer una llamada a la hoja de estilos donde tengamos estos estilos aplicables al editor:
/* Añadir estilos personalizados visibles en el editor */
function theme_slug_block_editor_assets() {
wp_enqueue_style( 'theme-slug-editor-styles', get_theme_file_uri( '/assets/css/editor.css' ) );
}
add_action( 'enqueue_block_editor_assets', 'theme_slug_block_editor_assets' );Ahora sí, seleccionando un color en el editor, los estilos CSS personalizados se añadirán con el correspondiente slug tanto en el editor como en el ‘front end‘ o parte visible de nuestra web.
Desactivar completamente la paleta de colores de Gutenberg
Antes de terminar, vamos a ver cómo desactivar completamente las opciones de color en Gutenberg por si quieres evitar que clientes o editores ‘metan mano‘ al diseño de la web, ocultando completamente la posibilidad de ajustar los colores de los diferentes bloques en el editor.
Tan sólo debes pegar este código tal cual está (sin cambiar nada) en el archivo functions.php de tu tema o en tu plugin personalizado de funciones:
function theme_slug_disable_colors() {
// Desabilitar paleta de colores
add_theme_support( 'editor-color-palette' );
// Desabilitar selector de color
add_theme_support( 'disable-custom-colors' );
}
add_action( 'after_setup_theme', 'theme_slug_disable_colors' );Próximos pasos de Gutenberg en WordPress 5.0
A pesar de los desafíos, Gutenberg tiene un inmenso potencial para aquellos que estamos en esto de la creación de la world wide web.
Entre otras cosas, algunas de las funciones más destacadas son:
Tecnologías modernas para aplicaciones avanzadas: La API Rest
El editor Gutenberg es el primer proyecto que se incluirá en el core de WordPress que utiliza la API REST, recientemente fusionada.
Esta tecnlogía está cambiando la forma en que los desarrolladores construyen en WordPres y seguro que nos traerá muchas gratas sorpresas.
Una poderosa herramienta de diseño y desarrollo
Gutenberg pretende dar a los editores el poder de añadir y editar su contenido de forma intuitiva, pero al hacerlo, también se centra en dar a los desarrolladores herramientas para que todos crezcamos juntos.
Lo que antes requería un conjunto complejo de abstracciones usando shortcodes, widgets y metaboxes, ahora se puede hacer directamente en un bloque.
Pero eso no es todo, ya que además de los bloques de cara al usuario, Gutenberg y WordPress 5.0 ponen a disposición de los desarrolladores las herramientas necesarias para crear cualquier cosa que puedan imaginar.
Edición colaborativa
La individualidad y semántica de cada bloque es lo que hace que estén disponibles características como la revisión de la jerarquía de encabezados o titulares.
Pero lo más importante, es que esto también prepara el camino para una futura edición colaborativa, proporcionando a los editores herramientas más potentes para la edición y control del contenido.
Esto no estará disponible para el lanzamiento de Gutenberg en WordPress 5.0, pero está incluido en la hoja de ruta del proyecto Gutenberg a largo plazo.
WordPress 5.1 y Gutenberg: Avances de la Fase 2
Con la próxima versión 5.1 de WordPress, que se espera que salga a vio la luz en febrero, los usuarios dispondremos de nuevo de unos cambios muy interesantes que no pasarán desapercibidos.
Vamos a verlos un poco más en detalle:
Versión PHP y WordPress
Ahora WordPress comprobará la versión de PHP utilizada por tu servidor e informará en el panel de administración en caso de que debas actualizar a una más reciente.
Por el momento, la advertencia es para instalaciones cuya versión de PHP es < 5.6. A medio plazo, sin embargo, las instalaciones con versiones superiores de PHP también recibirán este aviso.
Este es el anuncio oficial:
En vista de ello, me gustaría proponer que en abril de 2019, el requisito mínimo de la versión PHP sea 5.6. Los sitios que elijan permanecer en la versión 5.5 o inferior seguirán recibiendo actualizaciones de seguridad y posiblemente correcciones de errores, pero no podrán actualizarse a la última versión principal de WordPress hasta que se actualicen a una versión compatible de PHP.
Make WordPress Core Team
Si en tu caso te aparece este aviso de que debes actualizar, debes saber que a día de hoy, es recomendable que al menos tengas la versión 7.3 de PHP lo que mejorará mucho el rendimiento y seguridad de tu sitio.
Si tu proveedor de alojamiento web o hosting no dispone de esta versión, simplemente, cámbiate a otro.
Versión PHP y Plugins
En relación a lo anterior, ahora también se muestra si la versión PHP cumple los requisitos mínimos de un plugin. De lo contrario, no podrás (nunca más) instalar este plugin.
Otra razón más para actualizar PHP a la última versión.
Aunque la versión 7.3 de PHP es estable y es probable que no tengas ningún problema, recuerda que después de una actualización siempre debes revisar tu sitio web de nuevo, ya que es posible que surjan problemas debido a plugins y temas obsoletos, que ya no son compatibles con esta nueva versión.
Normalmente estos problemas se resuelven rápidamente actualizando todo a su última versión, pero en caso contrario, siempre es posible volver a bajar la versión de PHP a una compatible mientras buscas alternativas que sí funcionen correctamente.
Una vez más, por si aún te quedase alguna duda de porqué debes actualizar a una versión actual de PHP, recuerda que las versiones antiguas de PHP ya no reciben actualizaciones de seguridad y por otro lado, una nueva versión de PHP también significa mejoras considerables en el rendimiento de tu sitio.
Nuevos Bloques de Gutenberg disponibles
La nueva versión de WordPress 5.1 también trae mejoras en el nuevo editor Gutenberg.
Vamos a verlas:
Bloque RSS
Este nuevo bloque permite insertar fuentes RSS en el contenido de las páginas o entradas.
Después de introducir la URL de la fuente, podremos seleccionar si el autor, la fecha de publicación y un extracto del contenido vinculado deben mostrarse además de los títulos.
También podemos elegir cuántos elementos deben mostrarse y asignar una clase CSS a este bloque.
El contenido extraído a través de las RSS se podrá mostrar en formato listado o en cuadrícula.
Bloque Amazon Kindle
Con este nuevo bloque del editor, tenemos la posibilidad de integrar libros Kindle de Amazon con tan sólo incluir su URL.
La portada del libro se muestra automáticamente e incluye un enlace directo a Amazon con la posibilidad de que sea de afiliado.
Enfocar la imagen de portada
La imagen de la portada no es un bloque nuevo, pero en esta versión se ha mejorado con una característica importante, ya que ahora es posible establecer un punto de enfoque de la imagen, lo que permite encuadrar mejor y optimizar el resultado.
Hasta aquí las novedades de WordPress 5.1 y la Fase 2 de Gutenberg
Tal y como ya sabíamos, la implementación del editor Gutenberg en la versión WP 5.0 fue sólo el comienzo de un desarrollo a largo plazo que ahora continúa con la fase 2 en la versión 5.1, pero por supuesto no acaba aquí.
En las próximas versiones futuras, habrá más widgets que podrán ser insertados como un bloque en un post o en una página y también se está trabajando en el diseño del menú de navegación gestionado por bloques por lo que si aún no has dado el paso al nuevo editor, ves pensándotelo ya que cada vez avanza más rápido.
WordPress 5.2 – Mejores y actualizaciones en editor Gutenberg
Como ya es habitual, cada futura actualización de WordPress, también traerá nuevas características para el editor de bloques Gutenbergr.
Además de otras optimizaciones más pequeñas, WordPress 5.2 ofrece dos nuevas posibilidades destacadas:
Gestor de bloques (Block Manager)
Los bloques individuales se podrán desactivar u ocultar en el Administrador o gestor de bloques que se encuentra en Herramientas con un solo clic del ratón.
Este nuevo block manager o gestor de bloques funciona de forma similar a las opciones de pantalla situadas en la parte superior del panel de administración, donde como sabrás, se puede mostrar u ocultar elementos del dashboard de inicio o del apartado donde te encuentres.
Con el gestor de bloques o block manager, también podrás ocultar grupos de bloques enteros, por ejemplo, todos los bloques de widgets o todos los bloques para embeds.
Por supuesto, si ocultas algún bloque o grupo, no afectará a los bloques con esas características que ya estén cargados en tu contenido.
Mejoras en el bloque ‘Fondo’ (Cover Block)
Hasta el momento, el bloque fondo o cover block, además de la imagen, sólo permite insertar un texto a modo de título, formatearlo (negrita, cursiva) y enlazarlo.
A partir de la versión 5.2 de WordPress, podrás insertar varios bloques adicionales, como otros títulos o botones ofreciendo aún más posibilidades a la hora de sacar más partido a este interesante bloque.
Nuevos y mejorados bloques de Gutenberg para WordPress 5.3+
El desarrollo de WordPress 5.3 está todavía en su infancia y no es posible decir con certeza qué innovaciones de Gutenberg se incorporarán a la próxima versión de WordPress, pero si te animas a revisar el planning del proyecto verás que es de lo más interesante.
En principio, estas son las características nuevas que a priori podrían introducirse con en Gutenberg con WordPress 5.3, pero en caso de que no lleguen a tiempo, se incorporarán en futuras versiones:
Nuevo bloque: Grupo
Con el nuevo bloque de grupo se pueden combinar varios bloques y asignarles un fondo de color común. Por lo tanto, también están agrupados ópticamente. Incluso es posible crear grupos en un grupo.
Mejorado: Bloque columnas
En el futuro, el bloque «Columnas» será mucho más cómodo y útil de usar. Hasta ahora, sólo se puede dividir el área de contenido en dos columnas de igual tamaño, que se pueden rellenar con otros bloques.
En el futuro será posible ajustar el ancho de columna individualmente. También puede especificar la alineación de las columnas individuales (superior, central, inferior).
Mejorado: Bloque tablas
Aunque las tablas todavía no tienen etiquetas especiales, en el futuro Gutenberg se podrá definir un encabezado y un pie de página. Por lo tanto, las tablas pueden diseñarse extensivamente utilizando CSS.
El futuro del proyecto Gutenberg
El editor visual Gutenberg se encuentra aún en una primera fase de un plan más amplio que cuyo objetivo es modificar cómo se construyen y editan las páginas web en WordPress.
Con el tiempo, los bloques se convertirán en la base de la personalización y no se necesitarán temas como Divi o plugins como Elementor para construir webs y blogs con diseños elaborados y atractivos.
En el momento de escribir estas líneas, Gutenberg está actualmente disponible en versión beta (disponible para descarga como plugin en WordPress.org) y será el elemento clave de la próxima versión 5.0 de WordPres prevista para abril de 2018.
Entrevista a Matías Ventura sobre WordPress y el nuevo editor Gutenberg
Video de Mauricio Gelves para GoDaddy España
Esta versión ofrecerá una experiencia de edición y un modelo de contenido completamente renovados, con total compatibilidad para versiones anteriores, y la posibilidad de volver al Editor clásico con un solo clic.
La llegada del proyecto Gutenberg supondrá en cierto modo un peligroso, pero importantísimo paso adelante para la transformación y el futuro de WordPress.
Y es que el uso de los ya conocidos bloques de contenido permiten crear y editar contenido con mucho menos trabajo y mejores resultados.
Muchas de las cosas que el editor visual Gutenberg ya hace de forma nativa, requerirían hasta la fecha de shortcodes o HTML y CSS personalizado, dejando al usuario estándar de WordPress fuera de juego.
Con la llegada de WordPress 5.0, se creará una experiencia mucho más fluida y rápida no sólo para los que crean sitios web si no también para los editores que las llenan de contenido.
El plugin del editor visual Gutenberg ha hecho una entrada más que dramática en la comunidad WordPress, y es que ha sido un cambio de rumbo radical que para muchos parece muy nuevo.
Las posibilidades de mejora, son infinitas, pero como siempre, cualquier cambio es difícil.
Por suerte, el enfoque del proyecto Gutenberg como nuevo editor visual ha supuesto un gran impulso para el CMS que todos conocíamos.
Y lo ha hecho con una visión clara de quiénes deben ser los destinatarios:
Los millones de personas que crean y escriben sus propios sitios web utilizando WordPress y que son los principales beneficiarios de la misión de «democratizar la publicación», lema que el proyecto Gutenberg ha adoptado desde el principio de sus días.
Pero la visión de Gutenberg es lo suficientemente amplia, y la ambición técnica lo suficientemente profunda, como para que todos nos beneficiemos de este salto al futuro.
Las capacidades de WordPress han crecido orgánicamente y lo siguen haciendo tras cada nueva actualización.
Y es que el nuevo editor visual de WordPress está rediseñando la generación de contenidos para alejarse de los shortcodes y del HTML en la que ya es sin duda la actualización más dramática desde el nacimiento del CMS más popular del mundo.
Prepárate para una nuevo WordPress, una nueva forma de pensar, un nuevo futuro.
Prepárate para el editor visual Gutenberg.
Gutenberg vs Page Builders
En los últimos años, varios plugins de Page Builder para WordPress han aparecido con éxito en el mercado:
Divi Builder, Beaver Builder, Elementor, Page Builder por SiteOrigin, Conductor, Themify Builder, Visual Composer y Thrive son sólo algunos de los más populares.
Millones de sitios web se han construido utilizando creadores de páginas.
Muchos temas exitosos se integraron con un creador de páginas o crearon los suyos propios. Por ejemplo, Avada y su Fusion Builder.
Los creadores de páginas redujeron las barreras de entrada al negocio de desarrollo de sitios web para diseñadores que no tenían conocimientos de codificación.
También aumentaron el número de usuarios de WordPress exponencialmente.
Todas estas son señales claras de que WordPress necesitaba su propio generador de páginas por defecto. Especialmente para proporcionar un estándar para los usuarios, sino también para los desarrolladores de temas y plugins.
He leído muchos artículos y notas sobre cómo Gutenberg afectará al mercado de los creadores de páginas.
La mayoría de la gente está de acuerdo en que Page Builders se quedará por un tiempo, después de que Gutenberg sea liberado. Porque Gutenberg no puede competir actualmente con sus características.
En mi opinión, no están viendo el panorama general y les faltan 4 puntos en particular:
- Gutenberg se instalará por defecto en millones de sitios web cuando WP 5.0 sea lanzado.
- Hay un sinnúmero de desarrolladores de código abierto dispuestos a contribuir al éxito de Gutenberg (y obtener su parte del pastel).
- Los desarrolladores de plugins TODOS integrarán sus plugins con Gutenberg, mientras que NINGUNO realmente hizo lo mismo con otros creadores de páginas.
- Los desarrolladores de temas crearán temas orientados a Gutenberg
Los constructores de páginas más pequeños se irán muy pronto. Los jugadores más grandes resistirán más tiempo, antes de ver una gran caída en los ingresos.
Después de eso, no tendrá sentido continuar desarrollando y apoyando sus productos.
O portarán sus características únicas a Gutenberg, o desaparecerán.
Esto sucederá en 4 etapas:
Etapa 1 – Resistencia
Cuando Matt Mullenweg anunció Gutenberg y el primer lanzamiento de la BETA, la comunidad reaccionó con mucho drama. El drama continúa y yo personalmente creo que la resistencia al cambio es la razón principal de ello.
Algunos usuarios no quieren aprender una nueva interfaz y nuevas formas de hacer las cosas.
Algunos desarrolladores no quieren aprender ReactJS o JavaScript en general.
Muchos se quejan de UX, pero en mi opinión su juicio es ofuscado por el prejuicio.
Gutenberg es un trabajo en progreso. Se puede mejorar y se mejorará. Dar una revisión de 1 estrella después de darle sólo unas pocas horas (o minutos) de prueba es muy poco profundo.
La mayoría de los comentarios negativos parecen ser inmerecidos, porque todos los problemas que se han planteado pueden solucionarse y lo más probable es que se solucionen.
La gran mayoría de los usuarios, sin embargo, son silenciosos. Muchos probablemente ni siquiera saben lo que está pasando.
De +8000 instalaciones activas del plugin BETA de Gutenberg, sólo 415 usuarios han enviado un comentario hasta el momento. 203 de ellos lo calificaron como 1 estrella.
Muchos negocios de WordPress están trabajando duro para estar listos para el lanzamiento de Gutenberg (como nosotros).
Aquellos que no lo son, perderán la mayor oportunidad de ser relevantes, en la historia reciente de WordPress.
Todavía estamos en la Etapa 1, pero nos estamos acercando rápidamente a la Etapa 2.
Etapa 2 – Aceptación
Gutenberg, aunque todavía está en fase BETA, ya está creciendo más rápido en términos de características, que cualquier constructor de páginas comerciales.
Cada nueva versión trae muchas mejoras. No pasará mucho tiempo antes de que sea tan bueno como cualquier otro creador de páginas.
Algunos de los mejores desarrolladores de esta comunidad están trabajando en Gutenberg.
Un ejército de desarrolladores de código abierto pronto comenzará a publicar su contribución al desarrollo de Gutenberg también.
Crearán plugins para extenderlo. Ellos desarrollarán Temas construidos con Gutenberg en mente y veremos más recursos para desarrollar bloques Gutenberg personalizados.
Varios plugins de Gutenberg ya han sido lanzados y nuevos plugins son añadidos al repositorio de plugins de WordPress diariamente.
La primera plancha de calderas para los bloques Gutenberg es Create Guten Block de Ahmad Awais. Otras herramientas seguirán.
Durante esta fase, el número de revisiones positivas presentadas comenzará a ser igual al número de revisiones negativas. Ya estamos viendo muchos más comentarios positivos que hace unos meses. Por eso creo que estamos muy cerca de entrar en esta fase.
Etapa 3 – Adopción
Cuando Gutenberg sea finalmente lanzado, será casi tan bueno como la mayoría de los Page Builders comerciales.
Lo que sea que falte, será visto por los desarrolladores como una oportunidad para llenar un vacío.
Sin embargo, la mayor diferencia con los creadores de páginas comerciales será el nivel de integración que los principales plugins ofrecerán espontáneamente con Gutenberg.
Veo esto como la ventaja competitiva más grande.
Por ejemplo, nunca tuvimos el tiempo ni el deseo de ofrecer algún tipo de integración con ningún Creador de Páginas. El mayor nivel de integración que ofrecemos son los shortcodes.
Puede usarlos con cualquier creador de páginas, pero tiene que escribir los atajos en bloques de texto.
Tan pronto como Gutenberg ha sido anunciado, inmediatamente empezamos a pensar en la mejor manera de integrar GeoDirectory con Gutenberg.
Aquí puede ver una descripción de lo que estamos haciendo: GeoDirectory V2 Roadmap para la integración de Gutenberg.
No sólo creamos un bloque personalizado para cada uno de los elementos frontales de GeoDirectory. Hacemos posible diseñar y personalizar las plantillas de GeoDirectory, utilizando Gutenberg.
Estoy seguro de que muchos desarrolladores de WordPress están trabajando en esa dirección.
Después del lanzamiento de WordPress 5.0, Gutenberg se instalará por defecto en millones de sitios web.
La mayoría de los desarrolladores de plugins habrán creado bloques personalizados para cada bit de sus plugins, haciendo de Gutenberg el Constructor de Páginas más completo y deseable de todos.
Esto ocurrirá con bastante rapidez.
Etapa 4 – Dominación
1 año después del lanzamiento oficial de WordPress 5.0, los autores de la mayoría de los Page Builders menores habrán dejado de desarrollar sus plugins.
Gutenberg tendrá cientos si no miles de extensiones construidas por la miríada de desarrolladores que gravitan alrededor de WordPress.
Algunos serán excelentes, otros serán realmente malos. Algunos serán gratis, otros serán premium.
Una nueva economía crecerá alrededor de Gutenberg. Revitalizará la economía de WordPress, abriendo nuevas oportunidades para aquellos que son lo suficientemente inteligentes como para aprovecharlas.
En un par de años, sólo los fanáticos de los creadores de páginas comerciales seguirán usándolas, mientras que la gran mayoría de la comunidad se habrá cambiado a Gutenberg.
Porque ofrecerá mucho más y los constructores comerciales no podrán seguir el ritmo.
La caída de los ingresos obligará a sus propietarios a frenar su desarrollo y apoyo hasta que finalmente pierdan todas sus cuotas de mercado y desaparezcan.
La única forma de verlos sobrevivir es que usen su experiencia para construir lo que los usuarios quieran ver en términos de características premium de Gutenberg.
Preguntas frecuentes del nuevo editor Gutenberg para WordPress 5.0
ACTUALIZADO:
Ya es oficial.
El próximo 6 de diciembre de 2018, el nuevo editor Gutenberg verá la luz junta con la actualización 5.0 de WordPress.
Por ese motivo, hoy voy a dar respuesta a las principales y más comunes preguntas que me habéis hecho llegar durante este tiempo.
¡Vamos allá!
01. ¿Qué es Gutenberg?
Aunque ya hemos dado respuesta previamente a esta duda, creo que lo mejor es empezar esta serie de preguntas desde el inicio.
Como ya sabrás si estás leyendo esto, Gutenberg es el nuevo editor de WordPress. Disponible durante su desarrollo como plugin, se convertirá en parte del núcleo o core de WordPress a partir de la versión 5.0 del próximo 6 de diciembre.
Se caracteriza por ofrecer una experiencia de edición basada en bloques.
Cada bloque es un tipo de contenido – texto, imagen, galería, tabla, código abreviado, etc. – que se puede personalizar fácilmente gracias al editor visual, sin tener que tener conocimientos de código o programación.
02. ¿Cuándo sale WordPress 5.0 y el Gutenberg?
Como te decía antes, el plugin ya está disponible desde hace varios meses, pero la fecha prevista de lanzamiento de la versión WordPress 5.0 con Gutenberg incluido es el 6 de diciembre de 2018.
03. ¿Qué son los bloques y para qué sirven?
Los bloques son las piezas de contenido que conformarán una página o entrada.
En lugar de tener un único espacio para insertar textos, imágenes, atajos y todo lo que forma parte de tu contenido como teníamos hasta ahora, tendrás bloques de contenido individuales que podrás organizar a tu gusto y que serán independientes entre sí.
El propósito del uso de bloques es hacer más intuitiva y fácil la creación de un sitio web y de páginas, así como dar la posibilidad de hacer el contenido más atractivo para el lector sin necesidad de utilizar maquetadores visuales como Elementor, Divi o Thrive Architect.
04. ¿Funcionará Gutenberg en mi web?
Aunque los desarrolladores del proyecto han hecho todo lo posible para prevenir las incompatibilidades, puede haber una remota posibilidad de que algo salga mal.
Un sitio construido con WordPress consta de innumerables elementos de terceros, temas, plugins, códigos personalizados, etc.
Por lo tanto, es posible que se produzcan algunos problemas de incompatibilidad.
Mi recomendación es que pruebes en un entorno de desarrollo local antes de actualizar WordPress y activar Gutenberg en su sitio web.
05. ¿Afectará el cambio al contenido ya creado?
No te preocupes.
Todo el contenido creado hasta la fecha permanecerá intacto, ya que para eso se ha creado un bloque específico llamado Classic para que todo el contenido creado con el editor clasico pueda seguir visualizandose con normalidad.
Eso sí, el contenido actual no se convertirá en los nuevos bloques automáticamente, por lo que los futuros cambios o efectos que apliques sobre estos no modificarán los textos actuales.
Puedes convertirlos manualmente página a página, o dejar las cosas como están.
06. ¿El editor Gutenberg es compatible con los plugins que uso?
Una de las ventajas de WordPress es que, sea cual sea la funcionalidad que quieras añadir a tu sitio, habrá varios plugins que satisfagan tus necesidades.
Una de las desventajas, sin embargo, es que no es posible probar todas las combinaciones posibles para asegurarse de que no hay problemas de compatibilidad.
Mi consejo es usar plugins que se actualizan con frecuencia. Esto es un indicador de un buen mantenimiento de los plugins y de la voluntad de los desarrolladores de adaptarse a las actualizaciones.
Contestando a la pregunta, es imposible saber a ciencia cierta si tu web será 100% compatible con el editor ya que hay millones de combinaciones posibles.
Tal y como te comemtaba antes, mi recomendación es que exportes tu web a un entorno local y hagas pruebas.
En caso de encontrar alguna incomatibilidad, deberás buscar un sustituto, pedir al desarrollador que lo actualice y/o comunicar esa incompatibilidad al equipo de desarrollo del proyecto para que lo tengan en cuenta.
07. ¿Funcionará el nuevo editor con el tema que uso?
En teoría, WordPress 5.0 debería funcionar con los temas de WordPress más extendidos, pero el conflicto es similar al de los plugins.
Si los desarrolladores están listos para intervenir, ellos mismos identificarán cualquier problema y lo resolverán lo antes posible.
De lo contrario, es posible que tengas que hacer alguna modificación por ti mismo, contratar a un desarrollador que lo haga por ti, o valorar cambiar de tema.
08. ¿Qué navegadores soportan Gutenberg?
Gutenberg es compatible con todos los principales navegadores actualizados al menos a la penúltima versión.
También se puede utilizar con Internet Explorer 11.
09. ¿Se puede desactivar el editor Gutenberg?
Sí. Existe la posibilidad de configurar Gutenberg para que deshabilite algunas funciones y puede utilizar el bloque Classic que reproduce el antiguo editor.
Además, puedes elegir usa un plugin llamado Classic Editor que permite conservar ambos editores e ir intercambiando entre uno y otro según tus preferencias.
No obstante, la pregunta que deberías hacerte, es más bien si es recomendable desactivar Gutenberg, y la respuesta es que no, ya que a partir de ahora, todos los desarrollos y novedades vendrán enfocados únicamente a este editor y podrías quedarte obsoleto rápidamente.
10. ¿Cómo es la experiencia de escritura en Gutenberg?
Dado que el objetivo de Gutenberg es mejorar la experiencia del usuario, la experiencia del editor está diseñada para automatizar la inserción de bloques, permitiendo a los escritores centrarse en el contenido más que en los aspectos técnicos.
Por ejemplo, en el caso del blqoue de párrafo (el más usado probablemente) no tendrás que añadir manualmente un bloque cada vez que quieras insertarlo, si no que valdrá con pulsar la tecla enter.
Escribe el texto que quieras y los bloques de párrafo se crearán automáticamente.
11. ¿Gutenberg permite la edición front-end como un maquetador visual?
Todavía no.
Gutenberg utiliza un editor que le permite ver en tiempo real cómo será la página, pero no la modifica directamente (todavía).
El futuro del proyecto en su fase dos es sin duda poder sustituir todos los maquetadores visuales con una solución nativa gracias a este nuevo editor.
12. ¿Seguirán funcionando los shortcodes?
Los shortcodes seguirán funcionando como de costumbre, sólo que es recomendable que se inserten usando el bloque correspondiente, ya que tendrás más control sobre su configuración y permite su visualización.
13. ¿Existen atajos de teclado como en el editor clásico (TinyMCE)?
Hay muchos atajos de teclado para utilizar Gutenberg.
Con la combinación Shift+Alt+H (⌃⌥H en el Mac) verás la lista completa de comandos, dividida por funcionalidades:
- Comandos de edición globales
- Comandos de selección
- Comandos de bloque
- Comandos de formato de texto
Por ejemplo, podrás guardar cambios con Ctrl+S, abrir el menú de bloques con Mayúsculas+Alt+O (letra en mayúscula ), o convertir el texto en enlaces con Ctrl+K.
14. ¿Cómo aprender a usar el editor Gutenberg?
Esta es fácil.
Aunque al principio vayas más despacio, escribe todo lo que puedas en WordPress, en lugar de crear tus textos en un documento aparte y luego copiarlos en la web.
Con el tiempo, ganarás en rapidez y podrás sacarle el máximo partido a las nuevas funcionalidades del editor.
Experimenta, sé creativo, añade, modifica, mueve y rompe.
Necesitarás tiempo para acostumbrarte y descubrir todas las características de Gutenberg, pero con el tiempo, el viaje merecerá la pena.
15. ¿Afectará Gutenberg al posicionamiento web o SEO en Google?
En términos generales, no habrá consecuencias para el SEO en el traslado a Gutenberg, ya que de cara a los buscadores, el contenido se mostrará como hasta ahora.
Si entramos en detalle, por las pruebas que he hecho, es cierto que en una misma web con contenido idéntico, Gutenberg es un poco más lento, pero estoy seguro que es algo que se solventará con el tiempo.
Eso sí, tendrás que tener cuidado con cualquier posible error causado por la actualización, como por ejemplo problemas de compatibilidad de los plugins, por lo que deberás hacer una revisión a fondo nada más pasar a la nueva versión.
16. ¿Se puede utilizar con tecnología de asistencia?
Gutenberg, desafortunadamente, todavía no es totalmente accesible, de hecho esto casuó bastantes que varias personalidades de la comunidad abandonarán el proyecto.
Aunque WordPress.org ha declarado que la accesibilidad no debe ser una opción, en realidad esta vez es justo lo que parece.
Si estás usando un lector de pantalla u otro tipo de ayudas, te recomiendo que mantengas el editor clásico hasta que se resuelvan todos los problemas.
17. No quiero cambiar ahora. ¿Puedo esperar?
Sí, puedes esperar y mientras tanto consultar los comentarios y reacciones de aquellos que ya han hecho la transición.
No hay necesidad de actualizar inmediatamente.
Ten en cuenta eso sí, que con el tiempo, será algo inevitable por lo no esperes demasiado o podrías quedarte obsoleto.
18. ¿Qué pasa si realmente me niego a cambiar a Gutenberg?
Entiendo que con todo lo que has podido leer sobre este nuevo editor tengas tus dudas, pero la tecnología, en cualquier campo, está en constante evolución y WordPress no puede ser menos si queremos que siga siendo tan útil como hasta ahora.
El editor «viejo» era precisamente eso, viejo y aunque todos estábamos acostumbrados a él, era obvio que necesitaba una actualización.
Por supuesto, todos necesitaremos tiempo para adaptarnos, algunos más otros menos, pero al final, tarde o temprano, tendremos que cambiar si queremos seguir avanzando y aprovechar todas las novedades que vendrán en los próximos meses y años.
Noticias y novedades sobre el desarrollo del proyecto Gutenberg para WordPress 5.0
Para terminar os traigo algunos consejos rápidos para principiantes (Actualizado: Y no tan principiantes) sobre cómo usar Gutenberg, el nuevo editor de WordPress.
Antes de empezar, debes saber que en sus primeras versiones, Gutenberg no será un remplazo para los editores de texto enriquecidos, theme builders como Divi o constructures como el plugin Elementor.
Este nuevo editor, mejorará la experiencia de edición del editor que viene por defecto en WordPress, pero no será un remplazo para estos recursos… Aún.
Vamos allá:
- El nuevo editor Gutenberg utiliza bloques, que son pedazos de contenido independientes que pueden ser usados en el editor.
- ¿Te gusta un bloque? Con Gutenberg uedes convertirlo en un bloque reutilizable para usarlo en todo tu sitio.
- El editor Pre-WordPress 5.0 es llamado “Editor Clásico” y durante la beta, estará disponible para su uso
- Si quieres continuar usando el «Editor Clásico” después de que se publique la versión 5.0, ¡no tengas miedo! Habrá un plugin que te permitirá hacerlo.
- Si abres un post creado con el editor clásico en Gutenberg, el contenido será creado como un solo gran bloque. Tú puedes convertir el contenido en múltiples bloques.
- Si copias y pegas contenido en Gutenberg, cada elemento (cabeceras, párrafos, imágenes) se convertirán en un bloque independiente.
- Si arrastras múltiples imágenes en Gutenberg, el automáticamente creará un bloque de galería con esas imágenes.
- No estas seguro acerca de que puedes “incrustar» automáticamente con el editor clásico? Con Gutenberg hay un bloque especifico para cada tipo de “embed».
- Puedes crear fácilmente de 2 a 4 columnas de texto con el bloque de columnas de texto.
- Cualquier bloque puede ser convertido en un bloque de HTML, si lo que deseas es tener un poco más de control.
- ¿Haces tus pinitos en CSS? Puedes añadir clases CSS a cualquier bloque para personalizar su estilo.
- Gutenberg por si solo no añade mucho CSS, asegurate de seleccionar un tema que tenga plantilla de ancho completo y estilos para bloques.
- ¿Estas buscando el resto de ajustes de las entradas y páginas? Mira en el panel de la derecha en los “Ajustes Extendidos”.
- ¿Te gusta Markdown? ¡A Gutenberg también! Simplemente copia y pega tu markdown en el editor y Gutenberg automáticamente lo interpretará por ti.
- ¿Tienes feedback para el equipo que desarrolla Gutenberg? En el escritorio de WordPress, ve a Gutenberg > Feedback y rellena el formulario.
- ¿Escribes textos muy extensos en WordPress? Una super característica de Gutenberg es la Tabla de Contenidos que muestra tus cabeceras en el panel derecho.
- El nuevo editor finalmente trae una buena experiencia nativa creando tablas.
- Si deseas cambiar la condición de un bloque reutilizable, ¡no hay problema! Sepáralo y edítalo por separado.
- ¿Deseas mostrar entradas relacionadas en el medio de una entrada de tu blog? Prueba estos ajustes usando el bloque de últimas entradas.
- Otro gran bloque que ha sido añadido, es el bloque Botón. Nunca más necesitareis un shortcode u otro plugin para añadir botones a entradas y páginas.
- Junto con el bloque botón (y cualquier bloque que te permita combinar colores), el nuevo editor te advertirá cuando elijas una combinación que sea difícil de leer.
- Añade más personalidad a tus párrafos con letra inicial capital y fondos personalizados
- ¿Donde está mi meta? No te preocupes – Los desarrolladores de plugins pueden “conectar» con Gutenberg para mostrar sus meta boxes en el nuevo editor.
- Existen meta boxes especialmente complejas, los desarrolladores de plugins también pueden hacerlas, el editor clásico es la de por defecto.
- Los desarrolladores de plugins ahora pueden crear bloques anidados con áreas de bloques internos para poner otros bloques dentro de ellos.
- Gutenberg es retro compatible de dos maneras. La primera es que no cambia como el contenido es almacenado. Así el contenido antiguo no necesitará pasar por un proceso de actualización.
- La otra forma en que el nuevo editor Gutenberg es compatible con versiones anteriores es nunca abrir contenido antiguo en el editor y así nada cambia. Esa entrada con tres años que va genial en el SEO no cambiará.
- Teniendo la compatibilidad con versiones anteriores en mente, deberías hacer pruebas. Haz una copia de tu sitio e instala el plugin de Gutenberg, para probar que todo funciona como debe.
- ¡Los bloques anidados ya están aquí!. Eso significa que con Gutenberg tendrás diseño de columnas en tus páginas.
- Usa la función ‘enqueue_block_editor_assets’ para conectar el javascript de un bloque personalizado con Gutenberg
- wp.element es la capa de abstracción de WordPress sobre React y ReactDOM
- Puedes utilizar los iconos (dashicons) cargados por defecto en WordPress como bloques de iconos. Además, también es posible usar iconos SVG personalizados.
- Dentro de los ajustes de los bloques, en el apartado de palabras clave, puedes añadir ‘keywords’ para que se muestre un bloque determinado aunque esta palabra no aparezca en el nombre del bloque.
- Ya está disponible el repositorio oficial de paquetes NPM de WordPress para ayudar al desarrollo del editor Gutenberg.
- Los desarrolladores de plugins, contarán con soporte nativo para la gestión de estados en Redux para sus bloques personalizados. (Si, es una buena noticia).
- Además, los creadores de plugins también podrán hacer bloques anidados (‘nested blocks’) con áreas internas de bloques (‘inner blocks’) compuestas por otros bloques.
- El componente <Editable /> ha sido sustituido por <RichText />
- Para interactuar con los metaboxes, alguna opción de un plugin, o algún elemento de tu base de datos, lo ideal es que utilices llamadas desde la API JavaScript del bloque en cuestión
- Ya hay disponible un tema Gutenberg Friendly. Puedes descargar este Gutenberg Starter Theme ¿twentyeighteen? desde el perfil oficial de WordPress en github
- Ya disponibles varios comandos de wpcli para tus bloques
- Dentro de ajustes, la descripción opcional de registerBlockType permite mostrar una descripción traducible del blqoue en cuestión.
- ¿Quieres hacer llamadas a la API desde Gutenbrg sin usar React? Prueba wp.apiRequest()
- ¿Prefieres usar React? No hay problema, sólo tienes que usar try withAPIData() en tus componentes
- A la hora de crear la interfaz de usuario (UI) de tus bloques, usa JSX para obtener un código más limpio y legible
- Por el momento hay 5 categorías de bloques en Gutenberg para elegir a la hora de crear bloques personalizados: Común, Fomrato, Estructura o Layout, Widgets y Embed
- Aunque los temas creados para Gutenberg podrán enriquecerse gracias a los nuevos bloques, idealmente, los bloques personalizados deben usarse para enriquecer los plugins, no los temas, manteniendo así las funcionalidades alejadas del diseño
- El componente <Tooltip> de Gutenberg es una forma fácil de añadir accesibilidad y fluidez a los bloques personalizados
- Gutenberg incluye en su actualziación 2.5 dos nuevos botones para «ver entrada» y «copiar enlace» tras publicar contenido por primera vez.
- Si quieres añadir <BlockAlignmentToolbar />a tu bloque, usa getEditWrapperProps() para establecer «data-align» en el editor. Después usa un «attribute» para establecer la clase en el frontend.
- Ya está disponible un novedoso proyecto para usar el editor visual Gutenberg fuera de WordPress, como editor en solitario. Si te interesa, busca el repositorio de github a nombre de Youknowriad con el nombre Standalone Gutenberg.
- La nueva versión de Gutenberg (aún en desarrollo) ya incluye la funcionalidad Drag & Drop (arrastrar y soltar) así que es posible que esté disponible para la nueva versión 2.6.0.
La mayoría de estos consejos son una recopilación de tweets de Joe Casabona (@jcasabona) y Zac Gordon (@zgordon), junto con las traducciones de Jose Angel Vidania (@JAVidania).
Si te ha gustado este artículo, te invito a compartirlo en redes sociales para que ayude a más gente.
Por último, puedes dejar tu email en el formulario que verás debajo para recibir gratis nuestra Guía Completa de Wordpress en PDF. También te informaremos de nuevos artículos, recursos y ofertas útiles para tu Wordpress.
