Tutorial de WordPress Gutenberg
Publicado: 2019-03-09Después de décadas de ganar popularidad como el CMS más versátil y fácil de usar, WordPress siempre ha sido capaz de impresionar a sus usuarios con actualizaciones técnicas frecuentes. En la última versión 5.0, WordPress ha presentado su nuevo editor visual “Gutenberg”. Entonces, desmitifiquemos a Gutenberg y Blocks. ¿Cómo funciona el nuevo sistema? ¿Es mejor que el editor que teníamos antes? Entraremos en Gutenberg y en un breve tutorial para ayudarlo a obtener todas las ventajas del editor de Gutenberg.
¿Qué es "Gutenberg"?
Matt Mullenweg ideó un nuevo enfoque para reemplazar el editor clásico de WordPress en WordCamp Europe 2018. Se llamó "Gutenberg", que se suponía que era un nombre de proyecto mientras estaba en desarrollo. Lanzado con WordPress 5.0, el proyecto de Gutenberg ahora se llamaba "Editor de WordPress" o "Editor de bloques" para ser más específicos. El editor clásico se había quedado un poco desactualizado de acuerdo con las tendencias actuales de los creadores web de arrastrar y soltar. El resultado fue WordPress Gutenberg y un editor de WordPress completamente nuevo que está diseñado para ser similar a las herramientas de creación de sitios web y páginas.
Temas que funcionan con Gutenberg
Hay miles de temas disponibles, pero muchos están desactualizados. Estas son algunas de las tiendas nuevas e increíbles que lanzan temas para Gutenberg.
Complementos que funcionan con Gutenberg
Hay un montón de complementos disponibles en el mercado de WordPress, pero no todos funcionan con el editor de Gutenberg. Aquí hay algunos que lo hacen.
¿Qué son los “Bloques”?
Los bloques son simplemente fragmentos de contenido. Puede ser un párrafo de texto, un archivo de audio, una foto o galería de fotos, o incluso un video. Es la base de la experiencia de edición de Gutenberg. Los bloques se utilizan para crear publicaciones y páginas web. Lo que los usuarios normalmente obtienen en WordPress son los bloques estándar construidos en Gutenberg y está disponible para cualquier sitio de WordPress que use el editor de Gutenberg. Gutenberg fue creado de tal manera que permite a los programadores extender y expandir los bloques disponibles. Los bloques se pueden agregar usando complementos o temas. Por lo tanto, los usuarios tienen acceso a bloques adicionales en lugar de estar limitados a bloques estándar.
Usar Gutenberg como editor de WordPress
Cuando esté en WordPress 5.0, obtendrá el "Editor de bloques" o el "Editor de Gutenberg" integrado como el editor de texto predeterminado para 5.0. Hoy lo ayudaremos a familiarizarse con el nuevo editor de bloques. Profundicemos. Lo primero es lo primero, para crear una nueva publicación, como de costumbre, presione "Agregar nuevo" en Publicaciones. Ahora tiene un nuevo bloque con el que trabajar.
Esto se ve muy diferente, ¿no? No hay ninguna barra de herramientas presente desde el editor clásico. Familiaricémonos con las funciones y esos botones.
Sección superior:
Usando esta sección superior, puede agregar nuevos bloques y también realizar acciones como deshacer y rehacer cualquier cambio de bloque. También puede ver la información de la estructura de su contenido, como la cantidad de palabras, encabezados, párrafos y bloques. Incluso puedes navegar por los bloques usando el botón "i".
Algunas de las funciones básicas de edición de publicaciones, como Guardar en borrador, Vista previa de la publicación y Publicar una publicación, se encuentran en la sección superior. El icono de la rueda dentada revela la configuración que se ve en la barra lateral derecha. Aquí puede cambiar entre la vista de configuración "Documento" y "Bloquear".
La vista de sección del documento es muy similar a los editores clásicos. Aquí también puede seleccionar el estado y la visibilidad, las categorías, las etiquetas, las imágenes destacadas y los atributos. La vista de sección de bloque le permite cambiar la configuración de cualquier bloque una vez que se agrega. Esta función hace que sea muy fácil cambiar la configuración de cualquier bloque y cambiar funciones como el tamaño de fuente, las letras capitulares y mucho más. Desde aquí se pueden agregar colores de fondo individuales para cada bloque e incluso habilitar clases CSS adicionales para cada bloque individualmente.
Por último, los tres puntos presentes en la sección superior revelan configuraciones adicionales. Desde aquí puede personalizar la apariencia de su editor de bloques. Puede elegir la vista de herramientas de los bloques. Incluso puede elegir entre "editor visual" y "editor de código". También hay algunas herramientas para administrar bloques reutilizables, hacer atajos de teclado y copiar contenido.
Agregar bloques
Aquí viene la idea principal del nuevo editor, es decir, agregar bloques. Como ya se mencionó anteriormente, los bloques son la parte central del nuevo editor de bloques. Mire la parte superior izquierda de la página del editor. Esto le dará un menú desplegable desde el que puede elegir el tipo de bloque deseado diseñado para propósitos específicos. Usando la barra de búsqueda, puede encontrar los bloques correctos que se ajusten a sus necesidades.
Además, desplácese hacia abajo en el menú y verá algunos bloques más según sus funciones básicas. Estos son bloques comunes, formato, widgets e incrustaciones, etc. Simplemente elija el bloque apropiado que desee con solo un clic.
A continuación, también se le presentará una pequeña barra de herramientas una vez que comience a agregar contenido en su bloque. La función de esta barra de herramientas depende del tipo de bloque que elija. Estas barras de herramientas están ahí para realizar la edición del estilo de los contenidos, como alineaciones, estilo, enlaces y más. El botón de cambio de tipo de bloque está ahí para cambiar el estilo de bloque actual. Por ejemplo, puede cambiar un bloque de párrafo a un encabezado, bloque preformateado, lista, cita o verso. Los últimos tres puntos le brindarán algunas opciones más, como ocultar la configuración del bloque, convertirlo en un duplicado, editarlo como HTML, agregarlo a bloques reutilizables y, por supuesto, eliminar el bloque. También puedes insertar más bloques usando las opciones insertar antes e insertar después. Esto es útil cuando necesita agregar contenido o hacer algunas correcciones rápidas. Dependiendo de la opción que elija, esto simplemente agregará un bloque antes o después de su bloque seleccionado. El sistema es muy intuitivo y tendrá sentido al instante.
Cambiar la configuración del bloque
Cada bloque se puede personalizar para cumplir con sus requisitos. Simplemente haciendo clic en el bloque que desea personalizar, se le darán varios ámbitos en los que puede personalizar su bloque en la barra lateral derecha. Recuerda que puedes mostrar u ocultar esta opción ya sea usando la rueda dentada en la parte superior o la barra de herramientas del bloque específico. La configuración del bloque también depende del tipo de bloque que elija. Por ejemplo, si está utilizando un bloque de párrafo, la configuración del bloque le permitirá elegir el tamaño de fuente, el tipo de fuente o el color de fondo. Tendrá todas las opciones para personalizar su bloque que normalmente supondría que estaría allí. Gutenberg es muy fácil de usar y fácil de aprender para los nuevos desarrolladores.
Terminando el tutorial de WordPress Gutenberg
Esperamos que este breve tutorial de WordPress Gutenberg lo haya ayudado a familiarizarse con el nuevo editor incluido con WordPress 5.0. Creemos firmemente que después de leer esta guía, ya no será un novato con "Gutenberg". El nuevo editor de bloques no solo es fácil de usar, sino también poderoso, ya que puede crear sitios muy rápido con tantas opciones. La creación de bloques personalizados y el uso de herramientas para personalizar la apariencia son características poderosas de este editor de bloques. También existe una interfaz fácil de usar para agregar nuevos bloques y agregar contenido. Si descubre que realmente le gusta más el antiguo editor y no le gusta el nuevo editor, entonces no se preocupe. Puede volver al editor clásico en cualquier momento. Esto es lo mejor de ambos mundos y permitirá que las personas usen el editor que los hace más productivos.