MI guía del editor visual de Gutenberg WordPress [WITH PICTURES]

Entonces, ¬Ņhas o√≠do hablar de Gutenberg, el nuevo editor visual para WordPress, que reemplaza al editor HTML convencional?

De lo contrario, lo tendrá pronto, porque cuando se lance la versión 5.0 de WordPress, Gutenberg reemplazará al editor actual.

Gutenberg es m√°s que una simple actualizaci√≥n de dise√Īo est√©tico.

El enfoque actual puede estar en la creación de contenido, pero el objetivo final es que Gutenberg ofrezca una personalización completa del sitio y compita con los grandes creadores de páginas.

Eventualmente, puede crear todo el sitio usando Gutenberg.

Tu guía de Gutenberg

¬ŅGutenberg te parece bien?

Estos son tiempos realmente emocionantes para convertirse en un blogger de WordPress.

Este artículo ofrecerá una guía Gutenberg muy simple que proporcionará algunos conceptos básicos para comenzar y le mostrará lo que está bien y lo que está mal en este momento con el nuevo editor.

Si no puede esperar a que Gutenberg bloquee una prueba de manejo, puede descargarla ahora mismo.

Cómo descargar Gutenberg

Vaya a su tablero dentro de WordPress y luego vaya a

  1. Complementos
  2. Seleccione “Agregar nuevo”
  3. Buscar Visual Gutenberg Editor
  4. Seleccione “Descargar” y active el complemento.

Ahora que tienes Gutenberg

Entonces, reunamos un artículo de la Guía de Gutenberg y le mostraremos lo que puede y no puede hacer con Gutenberg y, con suerte, descubra algunos consejos y trucos en el camino

Su guía de inicio de Gutenberg РComenzando con el bloque

Gutenberg tiene una sensación muy constructiva de las páginas cuando te pones a crear contenido.

Cada elemento que agregue a una p√°gina o publicaci√≥n ahora se conoce como “Bloquear”

Los bloques de Gutenberg le permiten crear dise√Īos m√°s complejos que los permitidos en el entorno actual del editor de WordPress

Puedes tener bloques para:

  • Texto
  • Im√°genes
  • V√≠deo
  • Widgets (s√≠, puede agregar el mismo widget de barra lateral a las p√°ginas y publicaciones)
  • Mesas
  • Etc.
  • Esto es lo que ves cuando comienzas una nueva publicaci√≥n o p√°gina.

    El editor visual / HTML con el que todos estamos familiarizados ahora favorecía un aspecto muy minimalista.

    Guía de inicio de My Gutenberg: primeros pasos

    Entonces, comencemos con mi simple guía de Gutenberg

    Creé esta guía completa que está leyendo con Gutenberg y, como se mencionó anteriormente, esta es la primera vez que uso el nuevo entorno de edición.

    Entonces, al instante, descubrir√°s conmigo lo que me gusta de los bloques de Gutenberg y lo que odio. Tambi√©n le transmitir√© consejos y trucos que descubra en el camino, as√≠ que aseg√ļrese de seguirlo.

    También mantendré esta publicación actualizada. Recuerde marcar o vincularnos para que pueda orientarse fácilmente.

    Vamos a empezar

    Entonces, cuando obtenga la pantalla de título anterior, agregue su título a su publicación,

    Usar√© el t√≠tulo de trabajo “Gutenberg Getting Started Guide”

    Luego, agregue su introducción inicial a su artículo en un bloque de texto, como se muestra en la imagen a continuación.

    My Gutenberg Simple Start Guide - Blocks

    Agregar im√°genes a Gutenberg

    Después de escribir una introducción, me gusta agregar una imagen para un visual, en este caso, la captura de pantalla que ves arriba.

    Hay tres métodos para agregar una imagen.

    1. Puede agregar su imagen a través de la barra de herramientas a la que accede haciendo clic en el botón más + y seleccionando un bloque de imagen.
    2. También puede agregar imágenes usando el botón de acceso directo ubicado debajo de su cuadro de texto.
    3. Y, por supuesto, puede agregar código fuente. Cambiar el editor de bloques a código.

    My Gutenberg Simple Start Guide - Images

    Después de agregar su imagen, puede hacer clic en ella para mostrar las opciones de alineación.

    Puede alinearse a la izquierda, mover la imagen hacia el centro o hacia la derecha.

    También existe la opción de editar su imagen a través de la biblioteca de medios y aquí es donde comienzan los problemas con Gutenberg.

    Entiendo que cuando edita una imagen a través de la biblioteca de medios, está editando la imagen tal como aparece en la página adjunta o, en otras palabras, donde se almacena la imagen. (Corrígeme si me equivoco sobre esto)

    La p√°gina de archivos adjuntos es una p√°gina de contenido muy delgada, b√°sicamente es solo la imagen y nada m√°s y, por razones de SEO, las p√°ginas de archivos adjuntos son muy malas para SEO cuando Google las nota.

    Yoast SEO recientemente tuvo un problema con archivos adjuntos Esto resultó ser un gran problema de SEO para algunos usuarios.

    Mientras trabajaba en el proceso de creación de un artículo con Gutenberg, todavía no pude encontrar una manera de agregar texto alternativo o atributo de título de imagen que no sea volver al código fuente para agregar el HTML necesario o volver al editor clásico.

    Nuestros amigos de WPBeginner explican las diferencias entre Image Alt Text y Image Title con un excelente artículo titulado:

    La adición de descripciones y etiquetas alt era una función de edición de imágenes que estaba disponible con solo hacer clic en un botón en el editor visual original.

    Estas no son buenas noticias para la optimización de imágenes SEO.

    Por el momento, tampoco hay una manera f√°cil de adjuntar un enlace a una imagen, por lo que se puede hacer clic en ella.

    Si desea agregar un banner, por ejemplo, deberá agregarlo como un bloque de imagen, como se muestra arriba, luego volver al código fuente y agregar la URL como código HTML.

    Agregar citas y enlaces

    Como puede ver arriba, me vinculé a un recurso (WPBeginner) en una cita en bloque.

    Las citas en bloque son excelentes para dividir grandes bloques de texto que hacen que un artículo sea más fácil de leer.

    Proporcionan un gran elemento visual para los artículos.

    Así lo hice:

    1. Haga clic en el botón + para abrir el área de bloqueo.
    2. Seleccione un bloque de presupuesto
    3. Agrega el texto de tu cotización
    4. Agregue un enlace, si es necesario

    Agregar mis citas simples Comenzar con Gutenberg

    Si eres un observador, notarás que el ejemplo de la imagen de captura de pantalla anterior es diferente del real que se muestra en esta publicación.

    La cita final tiene un texto de anclaje que tiene un encabezado h3 adjunto por razones de SEO.

    Para agregar la etiqueta h3, debe volver al código fuente sin procesar y aplicar la etiqueta h3 al texto de anclaje de la cita de bloque.

    Como puede ver en la captura de pantalla anterior, hay un botón de acceso directo H (encabezado), pero al hacer clic en él se abre un nuevo bloque para aplicar también el encabezado.

    Actualmente no puede aplicar un encabezado dentro de un bloque de presupuesto.

    Si crea un blog de texto, tampoco podrá agregar un encabezado en el medio de un bloque de texto, deberá crear un nuevo bloque de texto para agregar el encabezado al comienzo del nuevo bloque y continuar escribiendo el artículo.

    Todos los enlaces agregados por defecto son enlaces a la derecha, y actualmente no hay forma de evitar que contin√ļen sin agregar el atributo no seguir como c√≥digo.

    Tiene la opción de abrir un enlace en una nueva ventana agregando un enlace.

    Agregar bloques de contenido incrustado a Gutenberg

    Para agregar contenido incrustado a una publicación, haga clic en el área de bloqueo y desplácese hacia abajo hasta Incrustar. Luego verás la pantalla de bloqueo a continuación

    Guía de inicio simple de My Gutenberg - Opciones de inserción

    Haga clic en el tipo de incrustación que desea usar. Se proporciona un cuadro de enlace para agregar su código.

    Seleccioné la opción de YouTube, ya que esto es principalmente lo que usarías al crear contenido solo para mostrar el proceso de agregar un video.

    Agregar videos de YouTube Mi sencilla guía de inicio de Gutenberg

    Simplemente agregue la URL a su video de YouTube y tendrá la funcionalidad de video en su publicación.

    Entonces, ¬Ņqu√© pensamos de WordPress Gutenberg?

    Bueno, Gutenberg va a asustar a algunos bloggers a la luz del día. Pero cuanto más uso el sistema de bloques, más me gusta.

    Recientemente, he estado usando el sitio de curación de contenido Wakelet para crear artículos de blog muy simples para hacer una copia de seguridad de mi sitio Infobunny y lo que notas cuando usas Wakelet es que puedes crear blogs de una manera muy similar a la creada con bloques de Gutenberg .

    Con Wakelet Puede agregar enlaces de texto, video y autoridad para clasificar su contenido, im√°genes e incluso archivos PDF.

    Simplemente agregue todo como publicaciones individuales a Wakelet y luego vuelva a ordenar, si es necesario, para crear su artículo terminado y así es básicamente cómo funciona Guttenberg Lock.

    Aqu√≠ hay un ejemplo de uno de mis blogs de Wakelet: ¬ŅQu√© tan importantes son los seguidores de las redes sociales?

    Si est√°s acostumbrado a usar constructores de p√°ginas Al crear publicaciones y p√°ginas, no tendr√° problemas para usar Gutenberg.

    Sin embargo, Gutenberg no se convierte realmente en un creador de páginas, ya que no puede simplemente arrastrar y soltar bloques junto con otras características faltantes que proporcionan los creadores de páginas profesionales.

    Gutenberg Guide - El nuevo editor visual de WordPess (CON FOTOS)

    Para ser sincero, prefiero el antiguo editor HTML, pero eso es porque estoy acostumbrado.

    Afortunadamente, tendremos la opción de hacer clic entre Gutenberg y el actual editor HTML WYSIWYG, y poder acceder a ambos sistemas les daría a los webmasters lo mejor de ambos mundos.

    Al leer sobre Gutenberg, entiendo que el editor convencional estar√° disponible como complemento.

    Esta guía de Gutenberg fue creada para darme una idea de cómo funciona Gutenberg.

    Quería estar listo para el inevitable lanzamiento del nuevo sistema de bloques cuando llegue WordPress 5.0.

    Y así es como aprendes un nuevo sistema simplemente saltando primero.

    Gutenberg fue dise√Īado para facilitar la creaci√≥n de contenido.

    Y estoy seguro de que ser√° para aquellos que crean contenido simple. Pero para aquellos que quieran hacer un poco m√°s, habr√° una curva de aprendizaje m√°s larga y ciertamente habr√° algunas soluciones alternativas para aquellos que aman su SEO.

    Actualmente, la optimización de imágenes SEO es un problema.

    Afortunadamente, cuando Gutenberg lanzó el proceso de optimización de imágenes, será mucho más fácil.

    Y si el equipo de desarrollo de Gutenberg no proporciona una solución mejor, estoy seguro de que no habrá más desarrolladores externos listos para ofrecer algunas soluciones de widgets de bloques realmente geniales.

    Una gran pregunta que tengo es “las p√°ginas y publicaciones de Gutenberg son compatibles con AMP: p√°ginas m√≥viles aceleradas?

    O se agregar√° una funcionalidad m√°s complicada a favor de la velocidad.

    Eso es todo por ahora.

    Espero que haya encontrado √ļtil mi sencilla gu√≠a de Gutenberg y haya recibido algunos consejos en el camino.

    ¬ŅEst√°s listo para Gutengerg?

    ¬ŅTiene alg√ļn consejo de Gutenberg que le gustar√≠a agregar a esta publicaci√≥n u ofrece alguna soluci√≥n a los problemas descritos?

    Déjame saber en la sección de comentarios a continuación.

    Aseg√ļrese de suscribirse a los comentarios para que se le notifique cuando responda

    Atentamente

    ART√ćCULOS RELACIONADOS