Editor Gutenberg y sus plugins imprescindibles

GUTENBERG

Gutenberg, el nuevo editor de bloques de WordPress, es una nueva forma de construir publicaciones con WordPress. En lugar de confiar en los plugins de creación de páginas, shortcodes y similares, WordPress está llevando la edición basada en bloques al editor central. El editor Gutenberg usa bloques para crear todo tipo de contenido, reemplazando una media docena de formas inconsistentes de personalizar WordPress, alineándolo con los estándares de codificación modernos y con las iniciativas de web abierta.

Gutenberg es más que un editor. Aunque el editor es donde está el enfoque ahora mismo, el proyecto impactará definitivamente en toda la experiencia de publicación, incluida la personalización.

Cuando nos referimos a “bloques” o “bloques de Gutenberg” estamos hablando de cualquier cosa que se pueda insertar en el nuevo editor para crear contenido. Básicamente, todo lo que inserte en el nuevo editor tendrá forma de bloque. El nuevo editor viene con un puñado de bloques predeterminados, como párrafo, imagen, galería y más, para ayudarte a crear entradas y páginas estándar. Los desarrolladores también podrán proporcionar bloques más avanzados para ayudar a crear entradas y páginas más dinámicas.

En este momento, para poder utilizar los plugins complementarios para Gutenberg, se debe instalar el plugin Gutenberg que está disponible a través del repositorio de WordPress.org. Más adeñamte. el plugin de Gutenberg no será necesario una vez que el nuevo editor se fusione con el núcleo de WordPress, que se espera suceda a partir del lanzamiento de la versión 5 de WordPress.

GUTENBERG MANAGER

Gutenberg Manager le permite habilitar/deshabilitar el editor en donde lo desee. ¿Por qué querrías deshabilitar el editor en las páginas? ¡Tal vez te gustaría usar un generador de páginas como Visual Composer o Elementor en su lugar!

Con el Manager también puedes decidir deshabilitar bloques específicos en el editor si no los necesitas.

CÓMO FUNCIONA
En la parte de abajo del menú de “Gutenberg”, se encontrará un nuevo botón “Gutenberg Manager”. Este es el Panel de opciones de nuestro complemento. Por ahora incluye 4 áreas de opciones:

  1. Settings
  2. Default Blocks
  3. Additional Blocks
  4. API/Hooks

Actualmente sólo tiene activados, y permite realizar acciones:

  • En ‘Settings‘, desactivar:
    – Globalmente.
    – Por el tipo de publicación:

    • Desactivar en la edición de Páginas.
    • Desactivar en la edición de Posts.
  • En ‘Default Blocks‘, desactivar en el editor cada tipo de de bloque de forma individualizada.

SETTINGS
Desde quí se puede desactivar globalmente el Editor Gutenberg o administrar la visibilidad del editor en los diferentes tipos de publicaciones (páginas y posts).

DEFAULT BLOCKS
Aquí se puede deshabilitar los bloques predeterminados en el editor.

ADDITIONAL BLOCKS
Desde aquí se puede habilitar nuestros bloques adicionales en el Editor.
Esta sección está bajo todavía en construcción

API/HOOKS
¡Aquí se encuentran una lista de Hooks para usar en su Tema/Plugin personalizado!
Nota: hay una acción para desactivar el Panel de opciones de Gutenberg Manager, por lo que este complemento estará oculto para el usuario final, pero el desarrollador del tema/complemento puede usar todas las funciones del complemento.

ADVANCED GUTENBERG

Este plugin como complemento a Gutenberg mejora del sistema de bloques nativo y adiciona nuevos bloques.


Bloques añadidos por Advanced Gutenberg

Bloques añadidos a bloques comunes:

  • Advanced List: Bloque lista de Gutenberg con multitud de estilos adicionales (hover, borde, color, relleno …)
  • +2 Count Up: Muestra estadísticas con un bloque de conteo ascendente que incluye símbolos, encabezado, texto y más.
  • Advanced Image. Agrega estilo y control en los banners e imágenes:
    – Tamaño personalizado avanzado de la imagen.
    – Título y texto desplegables personalizados: texto emergente, superposición, colores, enlace.
    – Lightbox o enlace personalizado.
    – Varias opciones de visualización.
  • Advanced Video: Carga y muestra vídeo local y remoto. Carga videos remotos (Youtube, Vimeo …) con multitud de opciones de visualización, incluido el ancho completo y el lightbox. Los videos locales, con control de video, pantalla completa y configuraciones de descarga.
  • Map: Carga Google Maps como bloque y controla el tamaño, la dirección, titulo, zoom. icono, información sobre herramientas …
  • Social Links: Añade flexibilidad, puedes usar un ícono del conjunto de íconos sociales predefinidos o uno personalizado, seleccionar tamaño, color y cualquier enlace social.
  • Testimonial: Exhibe los testimonios de clientes con un bloque dedicado. Define el recuento de testimonios, elección de un avatar, define el tamaño, el color del texto.

Bloques añadidos a Formatos:

  • Summary (Resumen del contenido): basado en el resumen predeterminado del Editor de Gutenberg, genera un resumen automático con enlaces basados en la estructura del título del contenido.
  • Advanced Table: Crea tablas con características añadidas de control de tamaño de tabla, color de celda y fuente, fondos, estilos de borde, rellenos.
  • Accordion: Todo el contenido y los elementos del texto del acordeón se pueden agregar/editar desde el propio bloque, mientras que todas las configuraciones de visualización están disponibles en el inspector de Gutenberg.
  • Tabs: Todas las pestañas de contenido de texto y elementos se pueden agregar/editar desde el bloque, mientras que todas las configuraciones de pantalla están disponibles en el inspector de Gutenberg.

Boques añadidos a Elementos de diseño:

  • Advanced Button: Basado en el bloque botón de Gutenberg con multitud de estilos adicionales (emergente, borde, relleno …)

Características adicionales agregadas por Advanced Gutenberg al plugin Gutenberg:

  • Crear perfiles de edición y asignar usuario o grupo de usuarios al perfil.
  • Seleccionar (activar/desactivar) cada herramienta de edición por perfil.
  • Exportar / Importar perfiles de usuario de un sitio web a otro.
  • Activa el efecto lightbox en las galerías de Gutenberg.
  • Mostrar información alt como subtítulo lightbox en las galerías.
  • Crear estilos CSS personalizados desde la configuración y aplicar en bloques de párrafo: Advanced Gutenberg tiene una herramienta dedicada para crear estilos CSS personalizados y ponerlos a disposición de los usuarios finales.
  • Mejora la herramienta separador con tamaño, color, espacios.

ATOMIC BLOCKS – GUTENBERG BLOCKS COLLECTION

Los siguientes bloques están actualmente disponibles en Atomic Blocks.

Hagamos un recorrido rápido por los bloques de Atomic Blocks y las configuraciones de bloque incluidas en el plugin.

  • Inline Notice Block: El bloque de aviso permite agregar un cuadro de aviso en línea a su página. Puede usarse para resaltar información en la página o llamar la atención sobre un mensaje especial. El bloque también viene con ajustes para el tamaño de la fuente, el color de aviso, el color del texto y si el bloque se puede descartar o no.
    El aviso descartable funciona al usar localStorage. Una vez que cierre el aviso en el front end del sitio, no volverá a aparecer a menos que elimine su localStorage. Tenga en cuenta que si cierra el aviso en el front end, aún verá el bloque en su editor hasta que lo elimine.
  • Testimonial Block: El bloque de testimonios le permite agregar un cuadro a su página con texto testimonial, un nombre de cita, título y avatar. El bloque también viene con ajustes para el tamaño de fuente, la alineación de citas, el color de fondo y el color del texto.
  • Author Profile Block: El bloque de perfil de autor permite agregar un cuadro de perfil de usuario a su página con un avatar, nombre, título, texto de perfil y enlaces de redes sociales. El bloque también viene con ajustes para el tamaño de fuente, la forma del avatar, el color de fondo, el color del texto, el color del enlace y las URL de las redes sociales.
  • Drop Cap Block: Permite agregar una letra capitalizada al principio de un párrafo. El bloque también viene con configuraciones para el tamaño de letra y el estilo de letra mayúscula (letra, cuadrado, borde).
  • Customizable Button Block: El bloque de botones permite agregar un botón personalizable a sus entradas o páginas. El bloque también incluye configuraciones para cambiar el destino del enlace, la forma, el tamaño y los colores de los botones.
  • Spacer and Divider Block: El bloque de división y espaciado agrega un espaciador ajustable entre sus bloques con un divisor opcional con opciones de estilo para cambiar la altura, el color y el estilo del divisor.
  • Accordion Block: Agrega un cambio de texto en acordeón con un título y texto descriptivo. Incluye opciones para cambiar el tamaño de fuente y una opción para alternar el acordeón abierto por defecto.
  • Post Grid Block: Agrega una sección llamativa, de ancho completo con un título grande, texto de párrafo y un botón personalizable. Brinda acceso rápido a una bonita cuadrícula de entradas y lista de entradas que se pueden agregar a cualquier entrda o página del sitio. La cuadrícula de entradas se puede configurar para alternar entre la imagen destacada de la entrada, el nombre del autor, la fecha, el extracto y los enlaces continuar leyendo .
  • Container Block:  Permite reunir varios bloques individuales en un contenedor primario, lo que ayuda a crear diferentes secciones de contenido en las entradas y páginas. Por ejemplo, es posible que desee crear una sección con columnas, imágenes y texto, y darle un relleno y un color de fondo específicos.
  • Call-To-Action Block: Agrega una sección llamativa, de ancho completo con un título grande, texto de párrafo y un botón personalizable. En el bloque se agrega un “call to action” compacto, de terminado ancho o de ancho completo en el sitio, y fácil de personalizar para ajustar a su contenido. El bloque Call-To-Action viene con la siguiente configuración:
  • Sharing Icons Block: Agrega iconos de redes sociales a su página con opciones de tamaño, forma, color y estilo.

ADVANCED GUTENBERG BLOCKS

Advanced Gutenberg Blocks es un plugin orientado a webs comerciales. Fuera de esto, su utilidad es bastante limitada. Por ahora solo tienen algunos bloques, pero el desarrollador asegyra que se agregarán muchos más.

Bloques añadidos

  • Notice (Aviso): muestre un aviso suave de Advice/Information/Warning/Avoid.
  • Post (Publicación): muestra el enlace a publicaciones (desde cualquier tipo de publicación).
  • WooCommerce Product: muestra el producto WooCommerce en tu publicación
  • WooCommerce Add to cart button (Botón añadir al carrito WooCommerce): Un botón agregar al carrito para comprar rápidamente un producto de WooCommerce
  • Banner Ad (Banner publicitario): monetice su sitio web insertando anuncios publicitarios en su contenido
  • Text + rectangle Ad (Anuncio de texto+rectángulo): monetice su sitio web insertando anuncios rectangulares en su contenido
  • WordPress Plugin Card (Tarjeta de complemento de WordPress): muestra información de un complemento desde el repositorio oficial de WordPress
  • Website Card preview (Vista previa de la tarjeta web): ¿Te gusta cómo Facebook, Twitter o Slack muestran una vista previa de un sitio web en una tarjeta? No seas celoso, ¡hemos hecho lo mismo para ti en WordPress!
  • Testimonial (Testimonio): muestra un testimonio con una imagen, texto, nombre y compañía
  • Google Map: muestra un mapa de Google personalizable en tu contenido

 


Puedes ver los efectos de edición y las características de sus bloques en los siguientes enlaces:


 

Deja un comentario

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