Aprenda a usar para principiantes (2020)
En este artículo, te diré qué es el editor de Gutenberg y te daré una descripción general rápida de cómo funciona. También te lo diré cuando veas el nuevo editor y compartiré algunos otros pequeños detalles.
La forma en que sus publicaciones de blog en WordPress cambiará drásticamente (Sin embargo, puede instalar complementos para continuar usando el editor actual (si es necesario).).
Esto lo ayudará a prepararse para los cambios que escribí en este artículo. Cómo utilizar el editor de WordPress Gutenberg...
Ese Completa una experiencia de edición rediseñada.
Le mostraré cómo usar un nuevo editor para publicar en un blog para que esté listo para cambiar a WordPress Gutenberg.
¿Qué es WordPress Gutenberg Editor?
Gutenberg es un editor completamente rediseñado destinado a reemplazar el actual editor TinyMCE que WordPress casi siempre usa.
El objetivo de Gutenberg es facilitar y facilitar a los usuarios ocasionales la creación de una estructura de contenido única utilizando. crear pieza (Te lo explicare mas tarde).
O en palabras del cofundador de WordPress Matt Mullenweg:
El editor trabajará arduamente para crear una nueva página y un proceso de creación de publicaciones que facilitará la escritura de publicaciones grandes e incluirá "bloques" que faciliten la búsqueda de códigos cortos, HTML personalizado o incrustar la "carne críptica" que tiene hoy. necesitar. ...
Si no está familiarizado con lo que yo llamo el editor TinyMCE, entonces el editor actual de WordPress TinyMCE se ve así:
A modo de comparación: así es como se ve el nuevo editor de WordPress Gutenberg:
Pero además del nuevo estilo de interfaz, El verdadero cambio que aporta Gutenberg es el método de edición basado en bloques.
Ver también:
¿Cómo funciona el editor de WordPress Gutenberg?
Si está utilizando WordPress, probablemente esté familiarizado con el funcionamiento del editor actual: tiene un cuadro separado donde puede escribir texto, agregar imágenes, insertar videos, etc.
Gutenberg cambia esto permitiéndole usar múltiples "bloques" para escribir mensajes.
Puede "bloquear" casi cualquier cosa. Por ejemplo, cuentan como un bloque:
- Párrafo de texto
- imagen
- Video incrustado
- Cita
- botón
Este es un ejemplo de cómo funcionan los diferentes bloques. En el GIF a continuación, puede ver que agregué cuatro bloques diferentes:
- Campos de texto con dos párrafos
- Bloque de imagen
- Bloque de video
Dado que cada bloque es un objeto separado, puede asignar fácilmente un fondo de color a un solo bloque:
Pero esa es la parte genial del bloque:
Los desarrolladores también podrán escribir sus propios bloques, lo que allana el camino para que se eliminen cosas como códigos cortos y códigos en línea.
Por ejemplo, no es necesario que incluyas un código abreviado para agregar una galería a tu publicación. Finalmente, puede usar el "bloque de galería" para insertar su galería y ver una vista previa en vivo en el propio editor.
En resumen, el nuevo editor de WordPress Gutenberg se encuentra entre el editor actual de TinyMCE y el creador de páginas más poderoso.
Esto le permite crear páginas más atractivas sin conocer el código. ¡Esto debería abrir muchas funciones nuevas útiles para tu blog!
Introducción a la interfaz del editor de WordPress Gutenberg
La primera vez que inicia una nueva publicación o página con Gutenberg, esto es lo que ve:
Algo parecido al actual Editor de WordPress TinyMCESin embargo, la mayor diferencia para usted es que no hay un solo cuadro de texto que utilice actualmente para escribir y formatear todo.
En cambio, tiene un área blanca grande que comienza con las palabras "escribe tu historia". Si lee mi publicación en el editor de WordPress Gutenberg, encontrará que tiene que ver con el hecho de que Gutenberg usa "bloques" para ayudarlo a crear contenido, en lugar de un área de entrada de texto única.
Para obtener más información sobre qué es un bloque, le sugiero que lea mi publicación anterior. Pero en resumen, los bloques pueden ser cualquier cosa. posible:
- Extracto del texto sin formato
- imagen
- Botón de llamada a la acción
- Video incrustado
Los desarrolladores de terceros también pueden escribir sus propios bloques para agregar funcionalidad adicional. Ya puede ver un ejemplo de este tipo a través de BlocksWP Social Share Block.
Cómo utilizar la interfaz del editor de Gutenberg
Las siguientes son las operaciones que puede realizar en cada área de la interfaz de Gutenberg:
- Haga clic en este botón para agregar un nuevo bloque.
- El botón Deshacer / Rehacer le permite avanzar o retroceder para editar fácilmente, como en Microsoft Word.
- Esta área de configuración contiene muchas de las mismas opciones que la barra lateral del editor de WordPress actual. Aquí puede agregar categorías / etiquetas, establecer imágenes destacadas, elegir fechas de lanzamiento y más.
- Cuando selecciona un bloque, esta área de configuración contiene la configuración para ese bloque. Aquí puede elegir colores, estilos y otros detalles importantes relacionados con el bloque.
- Estos dos botones le permiten obtener una vista previa o publicar el mensaje.
Cuando haces clic + Signo más El botón inserta un bloque y se abrirá una ventana donde podrá ver todos los bloques disponibles que puede usar en su contenido:
Ese el más joven con Guardado por La pestaña le da acceso a bloques de uso frecuente y pieza con Empotrar En la pestaña puede ver todos los bloques disponibles.
También puede usar el cuadro de búsqueda para encontrar rápidamente un bloque específico escribiendo el nombre del bloque.
Cómo escribir una publicación de blog con el editor de Gutenberg
Ahora que comprende cómo funciona la interfaz de usuario, de alguna manera le mostraré cómo puede usar Gutenberg para escribir publicaciones de blog para su sitio web.
Por ejemplo, digamos que desea escribir una publicación de blog que incluya:
Antes, es posible que necesite complementos separados o CSS personalizado para crear tablas y botones de CTA, pero ahora puede hacer lo que quiera con Gutenberg.
Paso 1: use bloques de párrafo para escribir su texto
Para escribir una publicación de blog, Gutenberg no requiere que agregue un nuevo bloque. En su lugar, simplemente haga clic en la página y comience a escribir así:
Todo es fácil hasta ahora, ¿no?
Todo lo que haces es escribir. Cada vez que presiona Enter para comenzar un nuevo párrafo, Gutenberg crea automáticamente un nuevo bloque.
Si desea agregar enlaces, cambiar la alineación o poner el texto en negrita o cursiva, simplemente haga clic en el bloque de texto y use la barra de menú flotante:
Paso 2. Agregar bloques de imágenes
Para agregar una imagen en cualquier lugar de una publicación de blog, todo lo que tiene que hacer es colocar el mouse sobre el lugar donde desea insertar la imagen.
Si lo hace, verá + Signo más Se muestra un ícono y al hacer clic en él se abre una lista negra para ayudarlo a elegir dibujo Obstruido.
Después de eso, puede cargar una nueva imagen o seleccionar una imagen de su biblioteca de medios, al igual que con el editor actual de WordPress:
Después de insertar el bloque de imagen, verá la imagen real en el editor.
Paso 3. Agrega un bloque de inserción de YouTube
Para insertar un video de YouTube, debe realizar casi el mismo proceso:
- Pase el mouse sobre el lugar donde desea incrustar el video de YouTube querer.
- prensa + Signo más Insignia
- Ir a Empotrar etiqueta
- Seleccione YouTube
Luego, todo lo que tienes que hacer es pegar la URL en el video y hacer clic EmpotrarVerá un video incrustado en el mensaje:
Paso 3. Agrega un bloque de tabla
El bloque de tabla facilita la inserción y edición de tablas en cualquier parte del contenido.
Para hacer esto, debe seguir el mismo proceso que el anterior. Una vez agregado, puede usar la barra de menú flotante para agregar o eliminar filas y columnas:
Paso 4. Agregar y diseñar bloques de botones
El bloque de botones es una de mis adiciones favoritas al editor de Gutenberg, ya que solía ser difícil agregar botones sin conocer el CSS personalizado. Pero para Gutenberg, usar botones es fácil.
Primero, puede insertar botones de la misma manera que inserta otros bloques. Para editar el texto del botón, todo lo que tiene que hacer es hacer clic y escribir:
Tu tambien puedes ir bloqueo Cambiar la pestaña del color del botón:
¡Eso es todo! Acaba de escribir una publicación de blog completa con el nuevo editor de WordPress Gutenberg. Es demasiado fácil.
Algunas otras cosas útiles que puede hacer con el editor de WordPress Gutenberg
Además del contenido que se muestra arriba, también puede usar Gutenberg para hacer otras cosas útiles.
Una característica útil es la capacidad de agregar un color de fondo único a cada bloque de párrafo en un mensaje:
También puedes usar elevado con descendencia El botón al lado de cada bloque puede cambiar rápidamente la posición del bloque, es decir, no existe una forma antigua de copiar y pegar:
Finalmente, si desea ahorrar tiempo insertando nuevos bloques, prefiero usar la función de sugerencia automática para insertar rápidamente en lugar de usarla + Signo más Icono Cada vez que desee insertar un nuevo bloque, puede empezar a escribir y utilizar este formato / Blockname...
A medida que escribe, Gutenberg sugiere automáticamente bloques adecuados:
Esta función le permite agregar bloques fácilmente usando el teclado, lo que lo mantendrá fluido.
Gutenberg puede tener dolores de crecimiento, pero las cosas deberían ir bien a largo plazo
Como mucha gente recuerda, WordPress usó casi el mismo editor, TinyMCE, así que creo que con el lanzamiento de WordPress 5.0, hay problemas de crecimiento que son inevitables.
Tienes que aprender una interfaz de usuario completamente nueva que obviamente requiere algunos ajustes.
Pero, en última instancia, esta nueva interfaz de usuario debería brindarle más oportunidades para crear contenido excelente.
Ahora quiero escuchar tu opinión. ¿Qué opinas del editor de Gutenberg? ¿Te gusta? ¿O todavía prefiere el editor de WordPress actual? ¡Házmelo saber en los comentarios!
Ver también:
Deja una respuesta