Cómo usar WordPress Block Editor: Guía esencial de Gutenberg

¿Estás confundido por el editor de WordPress? Seré el primero en admitir: se necesita algo para acostumbrarse. Las cosas que siempre ha hecho fácilmente podrían ser repentinamente difíciles. Por ejemplo, es posible que se pregunte:
¿Cómo agrego nuevos bloques?
¿Cómo puedo mover los bloques?
¿Cómo elimino un bloque?
Todas estas preguntas y muchas más recibirán una respuesta a este tutorial para el editor de WordPress.
Se esconde el contenido
¿Qué es Gutenberg?
¿Cómo consigo al editor de Gutenberg?
Es un editor de bloques, no un editor de texto
¿Cuáles son los bloques?
Cómo usar el editor de bloques de WordPress de manera efectiva
Cómo agregar nuevos bloques
Cómo seleccionar y copiar contenido
Cómo moverse y reorganizar los bloques
Cómo eliminar los bloques
Cómo convertir los tipos de bloques
Cómo personalizar las apariencias de bloque
Cómo colocar los bloques uno al lado del otro
Cómo obtener más bloques
Cómo personalizar el editor de bloques
Si quiero que el editor clásico vuelva?
¡Eres un experto en el editor de bloques!
Antes de llegar a los detalles sobre cómo usar el editor de WordPress, aquí hay una explicación rápida de por qué puede ver diferentes editores en WordPress en línea y cuál es el editor “Gutenberg”.
¿Qué es Gutenberg? Durante más de una década, WordPress usó un editor de texto que se veía así, ahora considerado el “editor clásico”:

Luego, la versión de WordPress 5.0 apareció el 6 de diciembre de 2018 y pasó todos los sitios en el nuevo editor, que llamaron “Gutenberg” después de la primera impresión. Ahora que han pasado casi dos años, el nombre de Gutenberg se usa menos raramente, porque las personas se refieren a él como editor o editor de bloque. Entonces, si ve a alguien en línea hablando sobre el editor de “Gutenberg”, se refiere solo al editor que ahora se usa en todos los sitios de WordPress (a diferencia del editor clásico). ¿Cómo consigo el editor de Gutenberg? Debería tenerlo por defecto. No tiene que “cambiar” al editor de Gutenberg para activarlo. Si visita una publicación o página en la Junta Administrativa, debe verse así:
Si no, asegúrese de usar al menos WordPress versión 5.0. Puede verificar su versión de WordPress en la esquina inferior derecha del tablero.

Además, verifique el menú de complementos para ver si se instaló el complemento del editor clásico, lo que devolvería su sitio al antiguo editor. Si se instala, puede deshabilitarlo y eliminarlo. No tiene que instalar el complemento para el editor de Gutenberg. Este es un complemento beta para los usuarios que desean probar nuevas funciones antes de ser incluidos en el núcleo de WordPress.

Ahora que comprende de dónde proviene el nombre “Gutenberg” y cómo obtener acceso al editor, hablemos de bloques. Él es un editor de bloques, no un editor de texto que pueda pensar en el editor de bloques como un tipo especial de editor de texto. La principal diferencia es que, en lugar de todo el texto, se almacena en un solo área de texto, cada bloque es como si fuera su propio área de texto. Esto puede parecer extraño al principio, pero está mucho mejor adaptado al contenido multimedia, como esta publicación de blog, que está llena de imágenes y GIF. En lugar de colocar imágenes embarazosas en el texto, tiene bloques que separan perfectamente las imágenes y los párrafos. Para apreciar completamente estas diferencias, necesita saber exactamente qué es un bloque. ¿Cuáles son los bloques? Un bloque de WordPress es una sola unidad de contenido. Esa unidad de contenido puede ser un párrafo, título, imagen o variedad de otros tipos de contenido. Por ejemplo, este párrafo que lee en este momento es un bloque de párrafo, y el título anterior se ha agregado con un bloque de título. Cada pieza de contenido que agregue a una página en WordPress está contenida en un bloque. Por lo tanto, un bloque no es un elemento visual: no ve bloques rectangulares en la página, un bloque es solo un término que significa una unidad de contenido. Es un contenedor.
Todo en el editor es un bloque, aunque creo que es extremadamente útil comprender esta terminología, sé que no es la verdadera razón por la que estás aquí. Lo que necesita saber es cómo adaptar sus técnicas de escritura habituales al editor de bloques. Puede ser frustrante luchar con cosas simples, como copiar y pegar, cuando lo has hecho toda tu vida. Lo que sigue son todos los consejos y trucos para el flujo de trabajo que necesita para ser efectivo con el editor de WordPress. Cómo usar el editor de bloques de WordPress de manera efectiva hay algunas cosas que hacen que el editor de bloques se sienta diferente de un editor de texto normal. Acercemos a cada uno de ellos uno por uno. Lo primero que debe saber es cómo agregar bloques. Cómo agregar nuevos bloques que cada contenido que agrega está contenido en un bloque y hay cuatro formas diferentes en que puede agregar nuevos bloques a sus publicaciones. Use la tecla ENTER para el editor de bloques es prácticamente la misma que un editor de texto normal. Puede escribir con placer utilizando la tecla ENTER para crear nuevos párrafos, pero aquí está la información clave: al presionar ENTER, cree un nuevo bloque, no un nuevo párrafo. El nuevo bloque puede convertirse en cualquier tipo de bloque (como una imagen o video). Se convierte en un párrafo solo después de entrar en palabras.
El uso de la clave Enter es definitivamente la forma más rápida de crear un nuevo bloque, pero los otros métodos tienen un cierto mérito. Use el botón Agregar bloque ahora, el botón Agregar bloque está bastante confundido. Espero que lo cambien pronto, porque ya lo han cambiado mucho en los últimos dos años. Si presiona la tecla ENTER para crear un bloque vacío, verá este botón Plus en el lado derecho del editor: al hacer clic en él, aparecerá la ventana selectora emergente, lo que le permitirá insertar cualquier tipo de contenido. Encuentro esta opción de confusión, porque no siempre aparece incluso cuando pasa el mouse entre los bloques. Por esta razón, recomendaría principalmente usar el otro botón que siempre está disponible en la parte superior de la pantalla:

Le brinda una ventana mucho más grande y más fácil de navegar para seleccionar su tipo de bloque.
Si eres nuevo en el editor de bloques, date tiempo para navegar por el menú y familiarizarse con los diferentes tipos de bloques disponibles. Una vez que sepa qué bloques tiene a mano, puede actualizar al método superior de inserción rápida … el método de introducción rápida agrego bloques a mis publicaciones. Después de presionar la tecla ENTER para crear un bloque nuevo y vacío, escriba una barra oblicua “/” para abrir el menú de selección rápida. Luego comience a escribir el nombre del bloque que desea agregar. Aparecerá inmediatamente en el menú.

Aunque puede usar el mouse para seleccionar un bloque, es más rápido simplemente hacer flechas hacia arriba/hacia abajo y presione Entrar nuevamente. Este método de agregar imágenes y otros elementos es mucho más rápido que cualquier cosa que pueda hacer con un editor de texto tradicional. Para agregar una imagen, simplemente escriba “/IMA” y presione Entrar. Es mi bloque favorito del editor de bloques. Ahora que sabe cómo agregar bloques, hablar sobre selección y copia. Cómo seleccionar y copiar el contenido de seleccionar el texto en el editor de bloques es muy diferente de un editor de texto normal, pero funciona muy bien una vez que conoce el mejor enfoque. Aquí están las tres formas de seleccionar el texto en el editor de bloques. Haga clic y dibuje el cursor más común sobre cómo las personas seleccionan el texto es hacer clic y extraer palabras. Esto funciona bien en los bloques, pero descubrirá que si desea seleccionar ciertas palabras entre los párrafos, el editor resalta automáticamente los bloques completos después de liberar el mouse.

Desafortunadamente, no hay forma de evitar esto, por lo que deberá seleccionar los bloques completos y eliminar las palabras no deseadas después de la unión. Si selecciona texto para reordinarlo, manténgase bien, porque pronto nos acercaremos al reordenamiento. El orden de velocidad del teclado “Seleccione todo”. La forma en que “seleccionar todo” funciona con el editor de bloques es en realidad mucho más hermoso que un editor de texto normal. Normalmente, en un editor de texto, presionaría CMD+A (Ctrl+A en Windows) para seleccionar todo el texto en todo el artículo. Si intenta esto en el editor de bloques, solo seleccionará todo el texto en el bloque actual. Sin embargo, puede volver a presionar CMD+A para seleccionar todos los bloques en la publicación. Cómo seleccionar múltiples bloques Hay dos formas de seleccionar más bloques en el editor. En primer lugar, puede hacer clic y tirar del cursor sobre los bloques, de la siguiente manera:

Funciona bien si puede ver todos los bloques en la pantalla, pero si selecciona una larga gama de bloques, deslizar el cursor en el borde de la pantalla para continuar puede ser desordenado y frustrante. Una mejor manera es hacer clic en el primer bloque que desea seleccionar, desplazarse al bloque más lejano que desea seleccionar, luego presionar la tecla de cambio y hacer clic, de la siguiente manera:

Esta técnica seleccionará ambos bloques en los que hizo clic y todos los bloques entre ellos. Cómo copiar su publicación completa Si tiene que copiar el contenido completo de una publicación, puede usar el pedido doble + un pedido de cortocircen o puede usar la opción de copia de todo el menú de contenido. Esta es una excelente manera de mover rápidamente una publicación de un sitio de WordPress en otro. Sin embargo, lo sé, sé que esto no aborda una de sus principales preocupaciones: cómo reorganizar el contenido. Vamos a profundizar esto ahora. Cómo mover y reorganizar los bloques como acaba de aprender, copiar y pegar no es la mejor manera de reorganizar sus párrafos. El editor de bloques ofrece dos formas de mover los bloques alrededor de la página. Mueva los bloques con las flechas si tiene que mover un pequeño bloque hacia arriba o hacia abajo a la publicación, puede usar los botones de flecha agregados a la barra de herramientas:

La barra de herramientas es visible cada vez que hace clic en un bloque es una forma rápida y limpia de reordinar los bloques sin la miseria para copiar y pegar. Esta técnica funciona para todo tipo de bloques, incluidas las imágenes.
Mueva bloques con arrastrar y soltar si tiene que mover un bloque mucho más, puede ser más fácil para usted deslizarlo y colocarlo que hacer clic en la flecha “hacia arriba” de los tiempos. Si se aferra a los iconos de flecha, la interfaz se actualiza, por lo que puede deslizar y colocar el bloque en una nueva posición.

Verá una línea azul donde se inserta el bloque. Personalmente, me parece difícil lanzar bloques en el lugar correcto, por lo que uso los botones de flecha la mayor parte del tiempo. Mueva más bloques simultáneamente si ha leído los consejos anteriores, ya sabe que puede mantener la tecla Shift para seleccionar una serie de bloques. Una vez que haya seleccionado varios bloques, verá la barra de herramientas que se muestra solo por encima del primer bloque. Luego puede usar los botones de flecha o tirar y colocar todo el grupo simultáneamente. Ahora, no hay forma de seleccionar más bloques que no sean consecutivos. Todavía puede copiar y pegar los botones de flecha son la forma más fácil de mover párrafos e imágenes en su publicación, pero aún puede usar la copia y la inserción si lo desea. Para hacer esto, utilizará CMD+A Acthut para copiar el contenido del bloque, luego use CMD+X para cortar el contenido, luego cree un nuevo bloque con la tecla ENTER y presione CMD+V para pegar el contenido copiado. Crear, copiar y reorganizar los contenidos cubren la mayoría de los elementos esenciales. La última técnica importante que necesita aprender es cómo eliminar los bloques. Cómo eliminar los bloques de eliminación de contenido es parte de la creación de contenido, por lo que debe saber cómo eliminar sus bloques. Hay tres formas de eliminar cualquier bloque en el editor. El pedido de eliminación del teclado del teclado siempre prefiere los atajos de teclado, por lo que le recomendaré primero. Haga clic en cualquier bloque y luego presione las siguientes teclas.

Mac: CTRL + Opción + Z

Windows: Alt + Shift + Z

Esto eliminará inmediatamente el bloque. Eliminar seleccionando el contenido si no desea aprender el comando de eliminación rápida, aquí hay otra forma rápida de eliminar párrafos y otros bloques: haga clic en el bloque en el bloque

Presione CMD+A (CTRL+A) para seleccionar el contenido completo

Presione Eliminar/Backspace para eliminar contenido

Presione Eliminar/Backspace nuevamente para eliminar el bloque

Para un bloque de imagen, simplemente puede hacer clic en la imagen y luego presionar Delete/Backspace para eliminarla. Use el botón de eliminación del bloque, aunque es más lento, hay momentos en que puede usar el botón de la barra de herramientas para eliminar un bloque. Para eliminar un bloque de esta manera:

Haga clic en el bloque
Haga clic en el icono más opciones
Haga clic en Bloqueo de extracción
Este método funciona para todo tipo de bloques. A veces, en lugar de limpiar un bloque, desea cambiarlo con otro tipo. El editor incluye una opción de transformación para esto. Cómo convertir los tipos de bloques Un beneficio del editor de bloques es que la mayoría de los bloques se pueden transformar rápidamente de un tipo a otro. Supongamos que escribes con ira con ira. Son chispas que vuelan del teclado y no tienes tiempo para jugar con el tipo de bloques, así que ingrese tus títulos como párrafos normales y continúe. No hay ningún problema. Puede hacer clic en cualquier bloque de párrafo y luego hacer clic en el icono del párrafo en la barra de herramientas para revelar los tipos de bloque en los que se puede transformar.
Esto también funciona para bloques basados ​​en imágenes. Por ejemplo, puede convertir una imagen en un bloque de “medios y texto”. Una nota rápida sobre los sustituyentes lo que comencé a hacer para mantener mi velocidad de escritura es simplemente insertar bloques de imágenes vacías donde agregaré mis imágenes más tarde. Usando el consejo de inserción temprana anteriormente, escriba “/IMA” y presione ENTER para insertar un bloque de imagen, luego presione la tecla ENTER para continuar escribiendo el siguiente párrafo. Deje atrás un hermoso sustituyente en el que cargará su imagen más tarde. Cómo personalizar las apariencias de los bloques en lugar del antiguo editor de texto, el editor de bloques puede brindarle muchas herramientas de personalización específicas para los bloques. Por ejemplo, si hace clic en un bloque de párrafo, verá opciones para cambiar el tamaño de la fuente, el color y más en la barra lateral. Haga clic en el icono de la rueda en la esquina superior derecha si no ve la barra lateral cada vez Hace clic en un bloque, las opciones de barra lateral se actualizarán para que coincidan con el bloque que seleccionó. Las imágenes contienen resultados completamente diferentes, como el texto alternativo y los controles de tamaño.
Si desea volver a la configuración principal, puede hacer clic en cualquier lugar fuera de los bloques o hacer clic en la pestaña del documento en la barra lateral.
Cómo colocar los bloques uno al lado del otro, una frustración común con el editor clásico era la forma de colocar texto y/o imágenes uno al lado del otro. El nuevo editor hace que esto sea mucho más fácil. Si desea poner una imagen al lado del texto, la mejor manera es usar el bloque de medios y el texto.
Si desea colocar imágenes uno al lado del otro, una opción es insertar un bloque de la galería. Esto es especialmente útil para colocar tres o cuatro imágenes seguidas. Finalmente, si desea colocar más columnas de texto una al lado de la otra, puede usar el bloque de columnas. Cuando lo inserte, puede decidir el ancho de las columnas, como sigue:

Administrar los bloques sin bloquear la columna puede confundirse, pero ciertamente es mejor que probar el mismo aspecto en el antiguo editor. En este momento, ha aprendido todos los conceptos básicos sobre cómo usar el editor de WordPress. A continuación, aprenderá algunas técnicas más importantes para beneficiarse del máximo por el editor de Gutenberg en su sitio web. Cómo obtener aún más bloques de WordPress incluyen docenas de bloques, pero probablemente necesitará más para ejecutar su sitio. Por ejemplo, querrá crear una página de contacto y esto requiere insertar un formulario de contacto en una página. No hay un bloque de formulario de contacto, por lo que tendrá que agregar uno al sitio. Hay dos formas de obtener más bloques para su sitio. Instale nuevos complementos La forma más común de obtener más bloques es agregar nuevos complementos a su sitio, por ejemplo, WPForms es un excelente complemento de formulación que incluye un generador de formulación de arrastre y droga . Incluye un bloque que le permite ingresar fácilmente los formularios en publicaciones y páginas.
Hoy en día, la mayoría de los complementos que agregan un nuevo tipo de contenido a su sitio (formularios/controles deslizantes/testimonios) incluirán un bloque. También hay muchos “complementos de bloqueo” que cargarán su sitio con docenas de nuevos tipos. Algunas de las opciones más populares son: bloques definitivos
Bloques de Gutenberg
Apilable

Le recomendaría que se acostumbres primero a los bloques predeterminados, pero cuando estás listo para ser más avanzado, esos complementos son maravillosos. Agregue bloques de WordPress 5.5 Block Director agregó un nuevo “Director de bloqueo”. Lo incluyo aquí para ser integral y porque probablemente se repita y se volverá más popular en el futuro. Sin embargo, a partir de ahora, no le recomendaría que lo use porque:

Todavía no hay muchos bloques disponibles, mientras que hay toneladas de complementos que agregan nuevos bloques

Los bloques tienen muy pocas revisiones de usuarios

En su lugar, puede instalar un solo complemento con docenas de bloques

Es más difícil buscar nuevos bloques que los complementos

No hay forma de eliminar bloques una vez que agregue (!)

Y la única forma en que puede encontrarlos incluso en primer lugar es si está buscando un bloque y no devuelve ningún resultado:

Esto significa que no puede encontrar nuevos bloques para palabras clave como “imagen” o “incorporación” porque producen bloques ya instalados. En general, es una experiencia bastante extraña e incompleta, por lo que es mejor esperar hasta que WordPress ofrezca esta función de manera completa antes de usarla en su sitio web. Por el momento, instale nuevos complementos para agregar bloques a su sitio. Cómo personalizar el editor de bloques en sí tiene algunas opciones de personalización, para que pueda cambiar la forma en que se ve. WordPress utiliza la pantalla Fullscreen predeterminada después de cada actualización, pero puede volver a la vista estándar cortando el modo de pantalla completa en el menú de opciones para deshabilitarla. Correcto.

Si activa el modo de pantalla completa y oculta la barra lateral derecha, se crea un espacio de escritura limpio. Si quiero que el editor clásico vuelva? Después de esta publicación, espero que comprenda cómo usar el editor de bloques. Dicho esto, es posible que no te vendan. En este caso, hay algunas opciones si desea deshabilitar el editor de Gutenberg o evitar su uso. En primer lugar, no debe usar el editor de bloques. Puede instalar el complemento Classic Editor.
Este complemento es gratuito, y el equipo de WordPress lo ha comprometido a apoyarlo hasta 2022. Según las revisiones, se podría pensar que es sorprendente, pero se evalúa principalmente (Gutenberg no se recibió inicialmente). Es cierto que es un editor de texto mediocre, sin nada especial que ofrecer. Y aquí hay algo en lo que pensar … no tienes que escribir tus publicaciones en WordPress. Puede escribir sus publicaciones en Google Docs o cualquier otro editor deseado y luego importarlas a WordPress. Para los editores como Google Docs, existen soluciones de importación dedicadas, que mantienen el formato, pero con otros editores basados ​​en el bloque, como la noción, simplemente puede copiar y pegar publicaciones en WordPress con todo el formato retenido. Al final del día, WordPress es el lugar donde publica su contenido, pero no tiene que ser el lugar donde crea su contenido. Ahora que ha aprendido mucho sobre el editor de bloques, estoy seguro de que está listo para usarlo, pero pensé en compartir una perspectiva adicional porque es un problema candente. ¡Eres un experto en el editor de bloques! En esta larga guía, ha aprendido todos los elementos fundamentales del editor de bloques, incluida la terminología básica, además de un poco de WordPress histórico. Aprendiste a: agregar bloques
Copiar y seleccionar bloques
Eliminar los bloques
Mover bloques
Turns Blocks
Obtenga nuevos tipos de bloques
Y personaliza tus bloques