{"id":206,"date":"2026-02-15T19:25:00","date_gmt":"2026-02-15T19:25:00","guid":{"rendered":"https:\/\/dosd.com.ar\/recursos-web\/?p=206"},"modified":"2026-04-15T19:46:54","modified_gmt":"2026-04-15T19:46:54","slug":"como-usar-el-editor-de-bloques-de-wordpress-tutorial-de-gutenberg","status":"publish","type":"post","link":"https:\/\/dosd.com.ar\/recursos-web\/como-usar-el-editor-de-bloques-de-wordpress-tutorial-de-gutenberg\/","title":{"rendered":"C\u00f3mo usar el editor de bloques de WordPress"},"content":{"rendered":"\n

FUENTE: <\/strong>Este Art\u00edculo es un resumen del original publicado aqu\u00ed<\/a><\/em><\/p>\n\n\n\n

El editor de bloques (Gutenberg) fue dise\u00f1ado espec\u00edficamente para que la creaci\u00f3n de p\u00e1ginas y publicaciones sea tan simple como arrastrar y soltar bloques en su lugar. No se requieren habilidades t\u00e9cnicas.<\/p>\n\n\n\n

Pi\u00e9nsalo como construir con bloques de Lego digitales. Cada pieza de contenido, ya sea texto, im\u00e1genes o botones, se convierte en un bloque que puedes mover y personalizar f\u00e1cilmente.<\/p>\n\n\n\n

Lo hemos estado usando durante a\u00f1os. Esto nos ha ayudado a guiar a miles de usuarios de WPBeginner a dominar este sistema.<\/p>\n\n\n\n

En este tutorial, te mostraremos exactamente c\u00f3mo funciona el editor de bloques de WordPress.<\/p>\n\n\n\n

Aprender\u00e1s t\u00e9cnicas sencillas que hacen que la creaci\u00f3n de contenido sea m\u00e1s r\u00e1pida. Adem\u00e1s, descubrir\u00e1s funciones que le dar\u00e1n a tu sitio web un aspecto pulido sin necesidad de conocimientos de codificaci\u00f3n.<\/p>\n\n\n\n

\"C\u00f3mo<\/figure>\n\n\n\n

Nota:\u00a0<\/strong>En este art\u00edculo, hablamos sobre el uso del editor de bloques, que est\u00e1 dise\u00f1ado para editar tus publicaciones y p\u00e1ginas. <\/p>\n\n\n\n

\u00bfCu\u00e1l es la diferencia entre el editor de bloques (Gutenberg) y el editor cl\u00e1sico?<\/h4>\n\n\n\n

La mayor diferencia radica en c\u00f3mo creas contenido. El\u00a0Editor Cl\u00e1sico\u00a0era un simple editor de texto, mientras que el Editor de Bloques es un creador de p\u00e1ginas moderno.<\/p>\n\n\n\n

Aqu\u00ed hay una comparaci\u00f3n r\u00e1pida de las diferencias clave:<\/p>\n\n\n\n

Caracter\u00edstica<\/th>Editor Cl\u00e1sico<\/th>Editor de Bloques (Gutenberg)<\/th><\/tr><\/thead>
Estructura del contenido<\/strong><\/td>Campo de texto \u00fanico (como MS Word)<\/td>Bloques individuales para cada elemento<\/td><\/tr>
Opciones de dise\u00f1o<\/strong><\/td>Limitado (necesita\u00a0plugins\u00a0para columnas)<\/td>Arrastrar y soltar columnas, grupos y filas<\/td><\/tr>
Manejo de medios<\/strong><\/td>Alineaci\u00f3n b\u00e1sica (izquierda, derecha, centro)<\/td>Im\u00e1genes de ancho completo, galer\u00edas y bloques de portada<\/td><\/tr>
Adaptabilidad m\u00f3vil<\/strong><\/td>A menudo requiere c\u00f3digo CSS personalizado<\/td>Los bloques se apilan autom\u00e1ticamente en dispositivos m\u00f3viles<\/td><\/tr>
Shortcodes<\/strong><\/td>Pegado directamente en el texto<\/td>Bloque de Shortcode dedicado para un c\u00f3digo m\u00e1s limpio<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

El Editor de Bloques te da m\u00e1s control sobre el aspecto y la sensaci\u00f3n de tu contenido. Puedes crear dise\u00f1os complejos que simplemente eran imposibles con el editor antiguo.<\/p>\n\n\n\n

\u00bfC\u00f3mo es el editor de bloques de WordPress mejor que el editor cl\u00e1sico?<\/h5>\n\n\n\n

El editor de bloques de WordPress ofrece una forma m\u00e1s r\u00e1pida y visual de crear contenido. Elimina la necesidad de muchos plugins de un solo prop\u00f3sito que sol\u00edan ralentizar los sitios web.<\/p>\n\n\n\n

Aqu\u00ed est\u00e1n los beneficios comprobados de cambiar al Editor de Bloques:<\/p>\n\n\n\n

    \n
  • Riqueza de medios:<\/strong>\u00a0Incluye potentes opciones de medios como el bloque de portada (para im\u00e1genes destacadas) y el bloque de medios y texto, que antes eran imposibles sin codificaci\u00f3n personalizada.<\/li>\n\n\n\n
  • Reduce la hinchaz\u00f3n de plugins:<\/strong>\u00a0Ya no necesitas plugins separados para\u00a0tablas, botones o columnas. Todos estos son ahora bloques principales integrados.<\/li>\n\n\n\n
  • Adaptable a m\u00f3viles por defecto:<\/strong>\u00a0En el editor cl\u00e1sico, los dise\u00f1os complejos a menudo se rompen en los tel\u00e9fonos. Las columnas de bloques se apilan autom\u00e1ticamente verticalmente en dispositivos m\u00f3viles, asegurando una experiencia fluida para los visitantes.<\/li>\n\n\n\n
  • Edici\u00f3n visual:<\/strong>\u00a0Puedes ver exactamente c\u00f3mo se ve tu contenido mientras editas. No hay necesidad de cambiar entre el editor y el bot\u00f3n \u00abVista previa\u00bb.<\/li>\n\n\n\n
  • Preparado para el futuro:<\/strong>\u00a0El Editor de Bloques es necesario para las funciones modernas de WordPress como la Edici\u00f3n de Sitio Completo (FSE) y los Temas de Bloques. El editor cl\u00e1sico no puede acceder a estas nuevas herramientas de dise\u00f1o.<\/li>\n<\/ul>\n\n\n\n

    Usando Gutenberg \u2013 El editor de bloques de WordPress<\/h4>\n\n\n\n

    El editor de bloques est\u00e1 dise\u00f1ado para ser intuitivo y flexible. Aunque se ve diferente al editor antiguo de WordPress, todav\u00eda hace todo lo que pod\u00edas hacer en el editor cl\u00e1sico.<\/p>\n\n\n\n

    Empecemos cubriendo las cosas b\u00e1sicas que hac\u00edas en el editor cl\u00e1sico y c\u00f3mo se hacen en el editor de bloques.<\/p>\n\n\n\n

    Creando una nueva entrada de blog o p\u00e1gina usando el editor de bloques<\/h4>\n\n\n\n

    Empezar\u00e1s a crear una nueva entrada de blog o p\u00e1gina como lo har\u00edas normalmente. Simplemente haz clic en el men\u00fa Entradas \u00bb A\u00f1adir Nueva Entrada<\/strong> en tu administrador de WordPress.<\/p>\n\n\n\n

    Si est\u00e1s creando una p\u00e1gina, ve al men\u00fa P\u00e1ginas \u00bb A\u00f1adir Nueva<\/strong> en su lugar.<\/p>\n\n\n\n

    \"Agregar<\/figure>\n\n\n\n

    Esto iniciar\u00e1 el editor de bloques.<\/p>\n\n\n\n

    C\u00f3mo agregar un bloque en el editor de bloques<\/h4>\n\n\n\n

    El primer bloque de cada entrada o p\u00e1gina es el t\u00edtulo.<\/p>\n\n\n\n

    Puedes usar el rat\u00f3n para moverte debajo del t\u00edtulo o presionar la tecla Tab en tu teclado para bajar el cursor y empezar a escribir.<\/p>\n\n\n\n

    \"El<\/figure>\n\n\n\n

    Por defecto, el siguiente bloque es un bloque de P\u00e1rrafo. Esto permite a los usuarios empezar a escribir de inmediato.<\/p>\n\n\n\n

    Sin embargo, si quieres agregar algo diferente, puedes hacer clic en el bot\u00f3n de a\u00f1adir nuevo bloque [+] en la esquina superior izquierda del editor, debajo de un bloque existente, o en el lado derecho de un bloque.<\/p>\n\n\n\n

    \"Botones<\/figure>\n\n\n\n

    Hacer clic en el bot\u00f3n mostrar\u00e1 el men\u00fa de a\u00f1adir bloque con una barra de b\u00fasqueda en la parte superior y los bloques de uso com\u00fan debajo.<\/p>\n\n\n\n

    Puedes hacer clic en las pesta\u00f1as para explorar categor\u00edas de bloques o escribir una palabra clave para buscar r\u00e1pidamente un bloque espec\u00edfico.<\/p>\n\n\n\n

    \"Animaci\u00f3n<\/figure>\n\n\n\n

    Si no quieres usar el rat\u00f3n para hacer clic en el bot\u00f3n, tambi\u00e9n puedes usar un atajo de teclado.<\/p>\n\n\n\n

    Empieza escribiendo \/ para buscar un bloque y luego ins\u00e9rtalo presionando la tecla Enter en tu teclado.<\/p>\n\n\n\n

    \"Agregar<\/figure>\n\n\n\n

    Trabajando con bloques en el nuevo editor<\/h4>\n\n\n\n

    Cada bloque tiene una barra de herramientas que aparece encima de \u00e9l. Los botones de la barra de herramientas cambian dependiendo del bloque que est\u00e9s editando.<\/p>\n\n\n\n

    Por ejemplo, en la captura de pantalla a continuaci\u00f3n, estamos trabajando en un bloque de P\u00e1rrafo que muestra botones de formato b\u00e1sico como alineaci\u00f3n de texto, negrita, cursiva, insertar enlace y m\u00e1s opciones que est\u00e1n disponibles en el men\u00fa de tres puntos.<\/p>\n\n\n\n

    \"Barra<\/figure>\n\n\n\n

    Adem\u00e1s de la barra de herramientas, cada bloque puede tener su propia configuraci\u00f3n de bloque, que aparece en la columna derecha de la pantalla de edici\u00f3n.<\/p>\n\n\n\n

    Estas configuraciones var\u00edan seg\u00fan el bloque que est\u00e9s editando. Por ejemplo, el bloque de P\u00e1rrafo te permite editar el\u00a0color del texto, del fondo y del enlace, as\u00ed como la tipograf\u00eda.<\/p>\n\n\n\n

    \"Configuraci\u00f3n<\/figure>\n\n\n\n

    Puedes mover los bloques hacia arriba y hacia abajo y reorganizarlos.<\/p>\n\n\n\n

    Si quieres hacer esto, simplemente haz clic para\u00a0arrastrar o soltar\u00a0o haz clic en los botones de arriba y abajo en la barra de herramientas del bloque.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Organizando bloques en grupos y columnas<\/h4>\n\n\n\n

    El editor de bloques viene con herramientas pr\u00e1cticas para administrar y organizar tus dise\u00f1os.<\/p>\n\n\n\n

    Puedes seleccionar varios bloques haciendo clic en ellos mientras mantienes presionada la tecla Shift de tu teclado.<\/p>\n\n\n\n

    \"Transforma<\/figure>\n\n\n\n

    Despu\u00e9s de eso, haz clic en el bot\u00f3n de tipo de bloque en la barra de herramientas para transformar los bloques seleccionados en Grupos o Columnas.<\/p>\n\n\n\n

    Luego puedes aplicar estilos a todo el\u00a0bloque de Grupo, como cambiar la alineaci\u00f3n o el espaciado.<\/p>\n\n\n\n

    Consejo profesional:<\/strong> Al trabajar con grupos y columnas, puede ser dif\u00edcil seleccionar el bloque exacto que deseas. Recomendamos usar la Vista de Lista.<\/p>\n\n\n\n

    Simplemente haz clic en el \u00edcono de tres l\u00edneas horizontales en la barra de herramientas superior. Esto te muestra un esquema claro de todos los bloques en tu p\u00e1gina, lo que facilita la selecci\u00f3n de grupos anidados y su reorganizaci\u00f3n.<\/p>\n\n\n\n

    \"Bloques<\/figure>\n\n\n\n

    El editor de bloques tambi\u00e9n te permite agregar un bloque de Grupo o Columnas vac\u00edo.<\/p>\n\n\n\n

    Despu\u00e9s de eso, puedes llenarlos con otros bloques.<\/p>\n\n\n\n

    \"Agregar<\/figure>\n\n\n\n

    Puedes agregar cualquier tipo de bloque en cada columna seg\u00fan sea necesario.<\/p>\n\n\n\n

    Esto te permite crear dise\u00f1os atractivos para diferentes casos de uso.<\/p>\n\n\n\n

    \"Configuraci\u00f3n<\/figure>\n\n\n\n

    Guardando y reutilizando contenido con patrones sincronizados (bloques reutilizables)<\/strong><\/h4>\n\n\n\n

    Una de las caracter\u00edsticas m\u00e1s potentes del editor de bloques es la capacidad de guardar y reutilizar contenido en todo tu sitio. Esto se hace usando Patrones Sincronizados (anteriormente conocidos como Bloques Reutilizables).<\/p>\n\n\n\n

    Un Patr\u00f3n Sincronizado es un bloque, o un grupo de bloques, que puedes usar en m\u00faltiples publicaciones y p\u00e1ginas.<\/p>\n\n\n\n

    La mejor parte es que cuando editas el patr\u00f3n, se actualiza autom\u00e1ticamente en todos los lugares donde lo has utilizado. Esto es perfecto para contenido que necesita permanecer consistente, como un cuadro de llamada a la acci\u00f3n o una divulgaci\u00f3n de afiliado.<\/p>\n\n\n\n

    Para crear uno, simplemente selecciona el bloque o los bloques que deseas guardar. Luego, haz clic en el \u00edcono del men\u00fa de tres puntos en la barra de herramientas del bloque y elige la opci\u00f3n ‘Crear Patr\u00f3n’.<\/p>\n\n\n\n

    \"Crear<\/figure>\n\n\n\n

    Aparecer\u00e1 una ventana emergente. Aqu\u00ed, puedes darle un nombre a tu patr\u00f3n y asignarlo a una categor\u00eda para mantener las cosas organizadas.<\/p>\n\n\n\n

    Lo m\u00e1s importante es que debes asegurarte de que la opci\u00f3n ‘Sincronizado’ est\u00e9 activada. Esto es lo que hace que el patr\u00f3n se actualice en todas partes a la vez.<\/p>\n\n\n\n

    \"Crear<\/figure>\n\n\n\n

    Nota<\/strong>\ud83d\udca1:<\/strong>\u00a0Tambi\u00e9n puedes usar grupos y columnas completos como\u00a0bloques reutilizables. Esto te permite guardar secciones enteras y usarlas cuando sea necesario.<\/p>\n\n\n\n

    Despu\u00e9s de hacer clic en ‘Crear’, tu nuevo Patr\u00f3n Sincronizado se guardar\u00e1.<\/p>\n\n\n\n

    Para usarlo en otra publicaci\u00f3n o p\u00e1gina, simplemente haz clic en el bot\u00f3n del insertador de bloques (+) y b\u00fascalo en la pesta\u00f1a \u2018Patrones\u2019, o simplemente b\u00fascalo por su nombre.<\/p>\n\n\n\n

    \"Insertar<\/figure>\n\n\n\n

    Los patrones facilitan a los propietarios de sitios web la adici\u00f3n de elementos de uso com\u00fan a sus dise\u00f1os, como llamadas a la acci\u00f3n, botones de redes sociales, banners y m\u00e1s.<\/p>\n\n\n\n

    Tu tema de WordPress o tus plugins pueden incluso venir con sus propios patrones, o puedes encontrar patrones creados por otros en la\u00a0biblioteca de patrones de bloques de WordPress.<\/p>\n\n\n\n

    Opciones de publicaci\u00f3n y administraci\u00f3n en el editor de bloques de Gutenberg<\/h4>\n\n\n\n

    Cada publicaci\u00f3n de WordPress contiene muchos metadatos. Esto incluye informaci\u00f3n como la fecha de publicaci\u00f3n,\u00a0categor\u00edas y etiquetas,\u00a0im\u00e1genes destacadas\u00a0y m\u00e1s.<\/p>\n\n\n\n

    Todas estas opciones est\u00e1n ordenadamente ubicadas en la columna derecha de la pantalla del editor.<\/p>\n\n\n\n

    \"Configuraci\u00f3n<\/figure>\n\n\n\n

    Opciones de plugin en Gutenberg<\/h4>\n\n\n\n

    Los plugins de WordPress pueden aprovechar la API del editor de bloques para integrar su configuraci\u00f3n dentro de la pantalla de edici\u00f3n.<\/p>\n\n\n\n

    Algunos plugins populares vienen con sus propios bloques.<\/p>\n\n\n\n

    Por ejemplo,\u00a0WPForms, el mejor\u00a0plugin de formularios de contacto de WordPress, te permite agregar formularios a tu contenido usando un bloque.<\/p>\n\n\n\n

    \"Ejemplo<\/figure>\n\n\n\n

    Otros plugins de WordPress tambi\u00e9n pueden agregar sus configuraciones a la pantalla del editor de bloques.<\/p>\n\n\n\n

    Por ejemplo, as\u00ed es como\u00a0All in One SEO for WordPress\u00a0te permite editar tu configuraci\u00f3n de SEO en la parte inferior del editor de bloques:<\/p>\n\n\n\n

    \"Ejemplo<\/figure>\n\n\n\n

    De manera similar, si administras una tienda en l\u00ednea usando\u00a0WooCommerce, notar\u00e1s que tambi\u00e9n tiene sus propios bloques.<\/p>\n\n\n\n

    Estos bloques te permiten agregar tus productos a cualquiera de tus publicaciones y p\u00e1ginas de WordPress.<\/p>\n\n\n\n

    \"Bloques<\/figure>\n\n\n\n

    Agregando algunos bloques comunes en el editor de bloques<\/h4>\n\n\n\n

    El editor de bloques puede hacer todo lo que hac\u00eda el editor cl\u00e1sico anterior.<\/p>\n\n\n\n

    Sin embargo, har\u00e1s las cosas m\u00e1s r\u00e1pido y elegantemente que antes. Adem\u00e1s, puede hacer mucho m\u00e1s, como permitirte estilizar tu contenido con un mont\u00f3n de opciones sin c\u00f3digo.<\/p>\n\n\n\n

    Aqu\u00ed tienes algunos de los bloques comunes que puedes usar.<\/p>\n\n\n\n

    1. A\u00f1adir una imagen en el editor de bloques de WordPress<\/h5>\n\n\n\n

    Hay un bloque de Imagen listo para usar en el editor de bloques de WordPress. Simplemente a\u00f1ade el bloque y luego sube un archivo de imagen o selecci\u00f3nalo de la biblioteca de medios.<\/p>\n\n\n\n

    \"Agregar<\/figure>\n\n\n\n

    Tambi\u00e9n puedes arrastrar y soltar im\u00e1genes desde tu computadora, y el editor crear\u00e1 autom\u00e1ticamente un bloque de Imagen.<\/p>\n\n\n\n

    Una vez que hayas agregado una imagen, podr\u00e1s ver la configuraci\u00f3n del bloque, donde puedes agregar metadatos para la imagen, como el\u00a0texto alternativo, el tama\u00f1o de la resoluci\u00f3n de la imagen y agregar un enlace a la imagen.<\/p>\n\n\n\n

    \"Configuraci\u00f3n<\/figure>\n\n\n\n