TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

Editor de WordPress de Gutenberg – La primera revisión

11

WordPress es la plataforma de publicación y publicación de blogs de primer nivel para muchos de nosotros. Pero el mayor problema es el conocimiento técnico necesario para ejecutar un sitio de WordPress. De lo contrario, necesitará gastar mucho tiempo y dinero para modificar las cosas básicas. Incluso la simple tarea de crear y publicar una publicación o página en WordPress no es tan fácil de tener diferentes diseños y columnas. Esto conduce al crecimiento de cientos de empresas y sitios web que ofrecen servicios de creación de páginas. Buenos ejemplos incluyen Visual Composer, SiteOrigin Page Builder, Beaver Page Builder, etc. Estos creadores de páginas se hicieron populares solo por la razón por la que WordPress por defecto tiene un editor torpe.

Editor de publicaciones clásico de WordPress

El editor de publicaciones clásico de WordPress parece aburrido y está basado en texto sin formato. Puede modificar cosas mínimas, como cambiar al modo ‘Texto’ y agregar algo de HTML / CSS en línea. No es posible agregar diseño de columna o agregar bloques. Por ejemplo, si tiene un cuadro de texto como una oferta de productos o una descarga gratuita de libros electrónicos, debe agregar el mismo contenido en todas las páginas manualmente. De lo contrario, es posible que deba modificar los archivos PHP o escribir algún código personalizado, que no son opciones para usuarios de nivel principiante.

Gutenberg – El camino del futuro

Si lo ha notado, WordPress muestra una notificación en la versión 4.9.8 para instalar y probar el editor Gutenberg. En este punto, debe instalar Gutenberg como complemento para cambiar el editor. Pero pronto a partir de la versión 5.0, WordPress por defecto tendrá el editor Gutenberg. Si tiene algún problema con la compatibilidad o aún le gusta usar el editor anterior, debe instalar el complemento del editor clásico para continuar con el editor anterior.

Dado que el diseño del editor cambia con Gutenberg, todos los complementos y temas que usan metaboxes en el editor de publicaciones / páginas deben rediseñarse para que funcionen con el editor de Gutenberg. Los complementos como Yoast SEO ya ofrecen la versión compatible y creemos que todos los demás desarrolladores deberían seguir el ejemplo sin otras opciones. A continuación se muestra el mensaje emergente que aparece en WooCommerce para probar con el editor de Gutenberg.

Editor de WordPress de Gutenberg - La primera revisión

Widget de WooCommerce Gutenberg

¿Qué es Gutenberg?

Si alguna vez ha trabajado en el creador de sitios Bootstrap o en el editor Weebly, se sorprenderá. Sí, Gutenberg es un creador de sitios de arrastrar y soltar basado en el concepto de bloques. Simplemente puede hacer clic en el bloque para agregar en la página y comenzar a crear su contenido. Esto es similar al editor Bootstrap o Weebly

El uso de Gutenberg puede parecer un proceso largo para publicaciones / páginas de texto simples. Pero para aquellos que quieran tener diferentes diseños y bloques reutilizables en varias páginas, Gutenberg es la solución simple.

Bloques de Gutenberg

Puede agregar los siguientes bloques con el editor de Gutenberg:

Editor de WordPress de Gutenberg - La primera revisión

Bloques de Gutenberg

  • Bloques comunes: párrafo, imagen, encabezado, galería, lista, cita, audio, imagen de portada, subtítulo, video.
  • Bloques de formato: código, HTML clásico, personalizado, preformateado, pullquote, tabla, verso.
  • Elementos de diseño: botón, columnas, más, salto de página, separador, espaciador.
  • Widgets: código corto, archivos, categorías, comentarios más recientes, publicaciones más recientes.
  • Incrustaciones: incruste desde casi cualquier sitio de redes sociales como Twitter, YouTube, Facebook, Instagram, etc.
  • La sección de bloques más usados ​​enumerará los bloques a los que se accede con frecuencia para un acceso rápido.
  • Bloques reutilizables: como se explicó anteriormente, cuando desee que el mismo contenido forme parte de muchas páginas, guárdelo como un bloque reutilizable.

Comprensión del diseño del editor Gutenberg

A continuación se muestra cómo se verá el editor de Gutenberg cuando cree una publicación.

Editor de WordPress de Gutenberg - La primera revisión

Editor de Gutenberg

  1. El primer elemento es siempre un título para tu publicación. No puede eliminar este elemento.
  2. Tienes el área de contenido donde puedes agregar bloques.
  3. Haga clic en el botón + dentro del editor de publicaciones o en la esquina superior izquierda del editor para comenzar a agregar bloques.
  4. Mueva el cursor a la izquierda de cualquier elemento para ver las flechas hacia arriba y hacia abajo. Haga clic en la flecha para mover todo el elemento hacia arriba o hacia abajo.
  5. Pase el mouse sobre el lado derecho del elemento para ver el botón de tres puntos que ofrece más opciones. Haga clic en eso para editar el bloque como HTML o verlo visualmente. Desde aquí puede agregar el bloque a la lista reutilizable.
  6. Haga clic en el elemento de bloque para ver más opciones en línea como el formato y la alineación del contenido de texto.
  7. La barra superior contiene opciones de alto nivel como: deshacer, rehacer, previsualizar, publicar, guardar borrador, mostrar u ocultar la barra lateral, configuraciones para alternar el editor visual y de código y otras pocas opciones.
  8. La barra lateral tiene dos secciones: una es para el nivel de publicación como ‘Documento’. Tiene opciones para agregar imagen destacada, categoría, etiquetas, formato de publicación, autor, etc.
  9. La pestaña ‘Bloque’ contiene opciones específicas para el elemento de bloque seleccionado.

Agregar bloques en la publicación

Creemos una publicación con algunos elementos para ver qué tan fácil o difícil de usar el editor de Gutenberg.

  • Agregue un título en el espacio de título predeterminado.
  • Haga clic para agregar HTML personalizado y agregar contenido.
  • Agregue un elemento de diseño de columna agregue texto y cite dentro de dos columnas.

Editor de WordPress de Gutenberg - La primera revisión

Agregar bloques y comprobar estadísticas

Actualmente, si desea tener un diseño con columnas, necesita un código abreviado personalizado del tema o usar un complemento por separado.

Metaboxes

Como puede ver en el diseño, tenemos muchas metaboxes en el editor de publicaciones debido al tema y los complementos que tenemos en el sitio de demostración. Ahora que hay algunos metaboxes que todavía se adhieren a la barra lateral y algunos se mueven debajo del contenido de la publicación. Así que asegúrese de probar su tema y complementos antes de comenzar a usar el editor de Gutenberg. De lo contrario, es posible que deba instalar el complemento del editor de publicaciones clásico para tener compatibilidad con versiones anteriores e informar a su desarrollador que actualice el tema / complemento.

Características adicionales

  • Haga clic en el ícono de información en la barra superior para verificar las estadísticas del contenido de la publicación, como el número de palabras, oraciones, encabezados, etc.
  • Puede obtener los consejos para familiarizarse con el editor. Haga clic en el botón de tres puntos en la esquina superior derecha de la barra superior y seleccione la opción ‘Mostrar consejos’.
  • Haga clic en el elemento de bloque y vaya a la pestaña ‘Bloquear’ en la barra lateral derecha. En la sección ‘Avanzado’, puede agregar clases CSS personalizadas que afectarán solo a ese elemento en el cuadro de texto ‘Clase CSS adicional’. Debe definir la clase CSS en su hoja de estilo principal o en la sección ‘Apariencia> Personalizar> CSS adicional’.

Mejoras

WordPress lanzó múltiples mejoras al editor inicial de Gutenberg. Ahora, puede agregar enlaces al botón con nofollow, el bloque de la tabla responde mostrando una barra horizontal en los dispositivos móviles, puede administrar bloques reutilizables y deshabilitar los bloques y metacajas no utilizados en el editor de publicaciones. La versión 5.8 también introdujo la función de edición completa del sitio que puede cambiar el panorama completo de la creación de sitios web con WordPress como sistema de gestión de contenido. Con todas estas cosas, es una buena idea intentarlo si todavía está usando el editor clásico.

Resumen

Ya sea que el editor de WordPress de Gutenberg mejore su productividad o no, es hora de deshacerse del viejo y aburrido editor. Aunque ahora cada acción necesita dos clics, ese es el camino a seguir. Por otro lado, esto terminará con la locura de los complementos de creación de páginas dedicados y abrirá opciones para agregar bloques personalizados como parte del núcleo de WordPress.

Pros

  • Fácil de agregar diferentes bloques. Estoy bastante seguro de que aparecerán muchos complementos para agregar bloques personalizados en el futuro.
  • Puede crear cualquier tipo de diseño y tener un diseño diferente en diferentes páginas de su sitio.
  • Reorganizar los bloques es fácil y puede crear bloques reutilizables.

Contras

  • En el nombre de la experiencia del usuario, ahora debe hacer clic dos veces que antes se hacía con un solo clic. Por ejemplo, con el editor clásico, simplemente puede hacer clic en la ‘Imagen destacada’ y cargar una imagen. Ahora, con Gutenberg, primero debe hacer clic en el menú desplegable ‘Imagen destacada’ y luego hacer clic en el enlace para cargar la imagen.
  • No pudimos ver ‘Opciones de pantalla’ para personalizar el editor. Parece que deberías tomar lo que se muestra.
  • El nuevo editor invalidará todos los tutoriales existentes y hará un gran esfuerzo para los documentos de miles de editores y desarrolladores.

Fuente de grabación: www.webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More