Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Primer Vistazo a WordPress Gutenberg

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

La nueva interfaz de edición, Gutenberg, constituirá un gran cambio este año cuando se lance WordPress 5, y afectará tanto a los desarrolladores de plugins y los diseñadores de temas para WordPress como a los creadores de sitios web.

En este vídeo te mostraré cómo configurar Gutenberg en forma de plugin en tu actual sitio y cómo empezar a usar su editor para crear contenido.

Continúa leyendo y conocerás algunas de las nuevas características de Gutenberg de primera mano.

Primer Vistazo a WordPress Gutenberg

Introducción a WordPress Gutenberg

Un lugar por el que empezar a aprender sobre Gutenberg es la página dedicada a Gutenberg en el Codex de WordPress. Te proporcionará un visión global sobre qué es Gutenberg y también te explicará cómo puedes ayudar a mejorarlo y contribuir en su futuro. Puedes hacerlo enviando feedback a través del cuestionario creado a tal efecto, a través del cual también podrás solicitar ayuda.

También podrás consultar los requisitos para testear Gutenberg. Es importante seguirlos de manera que todos lo que lo prueben lo hagan de manera consistente, y así ayudar al equipo que lo está desarrollando para lograr que Gutenberg sea tan bueno como sea posible.

Gutenberg todavía no forma parte del núcleo de WordPress, pero lo hará en el lanzamiento de una futura versión. Ten en cuenta que hasta entonces podría sufrir cambios, en parte derivados del feedback, y por otro lado debido a que todavía es un proyecto sobre el que se está trabajando para conseguir que sea tan bueno como sea posible. Mientras tanto, echemos un vistazo a cómo puedes usar Gutenberg en tu sitio ya mismo para que te hagas una idea de su aspecto.

Cómo Instalar el Plugin Gutenberg

La forma en la que puedes usar Gutenberg ya mismo es a través de un plugin. Así que instálalo como harías con cualquier otro plugin, Plugins > Añadir nuevo, busca "Gutenberg", y cuando lo hayas encontrado, pulsa Instalar y después Activar.

Ahora que has instalado el plugin, el editor de Gutenberg estará activo en tu sitio.

Cómo Funciona el Editor Gutenberg

Voy a abrir una entrada existente en mi sitio para mostrarte el aspecto que tiene la pantalla de edición de Gutenberg.

Editing a post in the Gutenberg editor

Como puedes comprobar, tiene un aspecto bastante distinto al que solía tener. Cuando sitúo el puntero sobre los elementos, aparecen iconos con tres puntos en el lado derecho, indicándome que cada elemento de mi contenido se ha convertido en un bloque.

Si hago clic sobre un bloque, obtendré algo que tiene un aspecto un poco más familiar, se parece a la "cocina" del clásico editor. Pero como puedes ver no dispones de las pestañas superiores para ver tanto el código como la vista estándar.

Kitchen sink editing options

En el lateral derecho, tengo un conjunto de metaboxes ligeramente distinto a las que teníamos antes, en el antiguo editor aparecían más separadas entre sí. Se parece más a la interfaz del Personalizador del tema. Por tanto, si ya has trabajado con el Personalizador de WordPress, este diseño te resultará familiar. Puedes hacer clic en cada título para expandir la sección correspondiente. En conjunto, hace que las cosas estén más organizadas y reducen la necesidad de desplazamiento.

Cómo Añadir y Mover Bloques

Puedes añadir más bloques haciendo clic sobre el icono en forma de signo "+" situado abajo a la izquierda, aparecerá un menú mostrándote las distintas opciones.

Add a block

Si eres un usuario con experiencia en WordPress, especialmente si eres un desarrollador de WordPress, es posible que estés alzando tus manos horrorizado por esto. Pero creo que para los usuarios con menos experiencia y la gente con una mentalidad más visual, esto hará que las cosas parezcan un poco más sencillas.

Gutenberg también hace que sea más fácil mover elementos de un lado a otro. Por ejemplo, voy a crear un bloque de párrafo a partir de un fragmento de contenido preexistente en mi entrada. Tras hacer esto, podré seleccionar mis bloques y desplazarlos hacia arriba o hacia abajo pulsando sobre las flechas de la izquierda.

Moving blocks

Esto te proporcionará mucha flexibilidad a la hora de mover elementos en tu sitio y de gestionar cosas de una manera visual.

Trabajar con Listas y Código en Gutenberg

También existen otros tipos de bloques. Una lista, por ejemplo, se convierte en un bloque por sí sola.

Voy a empezar a convertir mi contenido en bloques haciendo clic en el icono de control y seleccionando Convertir en bloques desde el menú que aparece.

Convert to blocks

Después Gutenberg separa mis titulares y párrafos individuales, y también crea bloques independientes para cada lista. De manera que resulta muy sencillo y rápido convertir tus actuales entradas a contenido compatible con Gutenberg.

Recordarás que al principio, comenté que no existían pestañas en la parte superior para ver el contenido como texto ni en forma de código. En lugar de eso, ahora puedes trabajar en el código de cada bloque de forma independiente. De manera que hago clic sobre el icono de control situado a la derecha, podré seleccionar Editar como HTML. Después mostrará el bloque en forma de código, y podré editar el código de ese bloque concreto.

Editing code in a block

Si te pareces a mi, y tienes que tocar el código de una larga entrada, puede resultar confuso tener que encontrar el fragmento de texto en el que hayas estado trabajando, por tanto, esto hace que sea mucho, mucho más fácil trabajar con una parte específica del código.

De manera que los bloques hacen que Gutenberg sea lo que es, y espero que esto te haya dado alguna una noción sobre qué son y cómo funcionan los bloques. Un bloque es básicamente el equivalente a un elemento en tu HTML. Si echases un vistazo al código de salida de tu archivo, verías que cada uno de ellos está al mismo nivel. Por tanto, tendrás titulares, párrafos, y listas, y todos están dentro del mismo nivel en tu HTML.

También puedes dividir y combinar bloques usando este mismo menú de control que aparece desde el icono con los tres puntos, y además hay un botón Deshacer en la parte superior, que es realmente útil. Y con las listas, podrás cambiar fácilmente entre diferentes niveles de indentación, o entre estilo de listas con viñetas y o numeradas, basta que uses el menú que aparece sobre el bloque correspondiente.

Indenting a list

Configuración del Bloque

Ahora que he convertido mi contenido en bloques individuales, puedo pulsar sobre Bloque en la columna lateral de la derecha y cambiar los ajustes de cada bloque.

Changing block settings

También puedes mostrar y ocultar la barra de herramientas de los ajustes pulsando el control de menú situado junto a un bloque y seleccionando Mostrar ajustes avanzados u Ocultar ajustes del bloque. Si los ocultas, tendrás una experiencia de edición más clara y diáfana.

Hiding settings

Conclusión

De manera que esto te proporciona una visión general de las principales cosas que puedes hacer con los bloques en Gutenberg. Puedes añadir bloques, cambiar qué tipo de bloque es cada uno, y podrás editar también el código tras el mismo. Puedes duplicar bloques, combinarlos, dividirlos, y moverlos dentro del documento.

No he usado todavía Gutenberg en una configuración en vivo, pero tras haber realizado este curso, estoy entusiasmado por la forma en la que funciona y en cómo me puede ayudar a editar contenido en mi propio sitio WordPress.

Espero que Gutenberg también te resulte útil a tí, y que hayas disfrutado con este rápido repaso de sus principales características.

Aprende WordPress

Aprende a usar WordPress o aprende a desarrollar para WordPress con nuestras completas guías. Todos los cursos de estas guías están disponibles gratuitamente a través de una suscripción a Envato Elements. Por una única y pequeña cuota mensual tendrás acceso ilimitado a nuestra creciente biblioteca con más de 1.000 vídeos tutoriales e eBooks de Envato Tuts+ que son líderes en el sector.

Además ahora obtienes también descargas ilimitadas de la inmensa biblioteca de Envato Elements con más de 500.000 recursos creativos. Creados con fuentes, fotografías, gráficos y plantillas únicas, para que realices y entregues mejores proyectos y con mayor celeridad.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.