• Saltar a la navegación principal
  • Saltar al contenido principal
SiliCodeValley

SiliCodeValley

Cursos online de diseño y desarrollo WordPress

  • Newsletter
  • Acceder
  • Suscribirme

El editor Gutenberg y sus bloques

Como ya te prometí en el anterior artículo «Gutenberg: Estado del Arte» donde analizamos el editor desde un punto de vista más teórico, ha llegado el momento de seguir avanzando y probarlo para ver cómo se desenvuelve realmente.

Para ello he creado un conjunto de vídeos donde te mostraré el uso de los distintos bloques.

Ten en cuenta que Gutenberg todavía está en fase de desarrollo y es posible que alguna de las cosas que te mostraré acaben siendo distintas, ya que por ejemplo su interfaz ha ido evolucionando en cuestión de semanas.

Asimismo, estaré utilizando una instalación de WordPress local, cosa que tú  también deberías hacer si decides testear Gutenberg. Y para esta ocasión he utilizado la herramienta gratuita Local que te permite crear instalaciones locales de una forma bestialmente simple.

¡Empezamos!

Instalando los plugins Gutenberg y Editor Clásico

Empezamos por el principio: instalando el plugin Gutenberg y el plugin Editor Clásico. Éste último te dará el margen de tiempo que necesitas para asegurarte de que el tema y los plugins actuales de tu sitio web son compatible con Gutenbergs.

Bloques comunes

Vamos ya a analizar el funcionamiento de los distintos bloques y empezaremos con los bloques comunes, que son: Párrafo, Subtítulo, Encabezado, Imagen, Imagen de portada (cover image), Galería, Lista y Cita.

Donde el subtítulo y la cover image son una novedad incorporada en Gutenberg.

Bloques de formato

Continuamos con los bloques de formato, que son: Código, Clásico, HTML personalizado, Texto preformateado, Citas «pullquote», Tablas y Versos.

Además te mostraré qué pasa con todas esas entradas que creaste previamente a la llegada de Gutenberg 🙂

Bloques de elementos de diseño

Vamos ahora con un conjunto de bloques bastante interesantes que son los elementos de diseño. Estos parecen estar todavía en una fase experimental, pero vale la pena echarles un ojo para hacernos una idea de lo que se avecina.

Estos bloques son: Botones, Columnas de texto, Separador, Opción de leer más y Columnas de diseño

Bloques para incrustar contenido

Hasta este momento si pegábamos un enlace, de por ejemplo un vídeo de Youtube, en el editor clásico, éste se incrustaba automáticamente sin necesidad de hacer nada más. Pero al parecer no todos los usuarios conocían esta funcionalidad y por eso se decidió crear bloques que faciliten dicha tarea.

Gracias a Gutenberg ahora es mucho más sencillo saber las distintas opciones que WordPress ofrece a la hora de incrustar contenido de terceros.

Bloques compartidos

Otra de las novedades de Gutenberg es que podemos crear bloques reusables. Por ejemplo imagínate que creas una cita con un testimonio de un cliente que quieres usar en varias entradas o páginas. Ahora gracias a los bloques compartidos podrás hacerlo. Aprende cómo en el siguiente vídeo:

Bloques de widgets

Como ya vimos en este artículo, uno de los objetivos de Gutenberg es acabar unificando los distintos elementos que giran entorno a WordPress, como los widgets y los shortcodes. Por esa razón supongo que de momento han creado una categoría de bloques llamada «widgets» que nos permite:

  • Listar las categorías de nuestro blog.
  • Mostrar un listado con las últimas entradas del blog.
  • Insertar un shortcode.

[intro]Este artículo no termina aquí y seguirá creciendo con los futuros bloques y novedades que se incluyan en Gutenberg.[/intro]

Únete al boletín: Diario de un desarrollador web freelance

Importante: envío correos con frecuencia y en cada uno además de contarte historias, consejos y marrones de mi día a día, ofrezco mis productos y servicios. Si esto te supone un problema, no te suscribas. Y si te cansas, podrás darte de baja y tan amigos.

Responsable: David Perálvarez Fernández. Finalidad: Gestionar el envío de información y prospección comercial y dar acceso a los productos online. Legitimación: Consentimiento del interesado. Destinatarios: Empresas proveedoras nacionales y encargados de tratamiento acogidos a privacy shield. Derechos: Acceder, rectificar y suprimir los datos, así como otros derechos como se explica en la información adicional.

¡Ya casi estamos! Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción.

Interacciones con los lectores

Comentarios

  1. Sergio dice

    30 de marzo de 2018 a las 11:14

    Hola David, interesante artículo sobre Gotengberg.

    La verdad es que todavía no me he puesto a probar sus funcionalidades pero parece que por fin podremos pasar más allá de los encabezados y negritas para editar el contenido de nuestros posts.

    Por cierto, esa imagen destacada me ha molado ejeje #thuggutengberg

    ¡Un saludo!

    Responder
    • David Perálvarez dice

      30 de marzo de 2018 a las 11:34

      Hola Sergio jajaja, muchas gracias por tu comentario. Pues sí ya era hora de que el editor dejara de estar más obsoleto que MySpace 🙂 Veremos lo que está aún por venir. ¡Abrazo!

      Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

  • Blog
  • Acerca
  • Contacto
  • Privacidad
  • Términos
  • Aviso Legal
  • Cookies

Utilizamos cookies propias y analíticas para darte la mejor experiencia en nuestra web.

Puedes informarte más sobre qué cookies estamos utilizando o desactivarlas en los .

Resumen de privacidad
SiliCodeValley

Esta web utiliza cookies propias y analíticas para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Cookies analíticas

Esta web utiliza Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

Dejar esta cookie activa nos permite mejorar nuestra web.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Política de cookies

Más información sobre nuestra política de cookies