• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria

Montando Sites

Recursos y Tutoriales de Desarrollo Web con WordPress y Genesis Framework

  • Empieza aquí
  • Tutoriales

Crear y Gestionar Bloques Reutilizables en Gutenberg WordPress

29 septiembre, 2019 por Gerber Cucurell

icono bloques reutilizables

Gutenberg, el editor de WordPress, tiene la opción de crear y guardar bloques para volverlos a utilizar en otro momento. Esto agiliza enormemente el desarrollo de un sitio web ya que no tendremos que perder tiempo creando bloques nuevos cada vez. Incluso podemos crear nuestra lista de bloques predefinidos y luego ir insertándolos en las páginas a medida que los necesitamos.

En éste tutorial veremos los siguientes contenidos:

  1. Crear bloques reutilizables
  2. Insertar y editar bloques
  3. Panel de gestión: importar, exportar, editar o eliminar bloques

Cómo crear bloques reutilizables con Gutenberg

Crear un bloque reutilizable con Gutenberg es sencillo, sigue los siguientes pasos:

01. Crear un bloque cualquiera

En éste ejemplo hemos creado un bloque de “Medios y Texto” con un botón de leer mas.

Crear Bloques Reutilizables Gutenberg

02. Añadimos a bloque reutilizable

Seleccionamos el bloque que queramos reutilizar, le damos al icono de más ajustes y seleccionamos “Añadir a los bloques reutilizables”.

Añadir Bloques Reutilizables Gutenberg

03. Guardamos bloque

Nos inventamos un nombre cualquiera para nuestro bloque y le damos a guardar. El bloque se guardará en una lista que se encuentra en la siguiente URL: https://tudominio.com/wp-admin/edit.php?post_type=wp_block

Guardar Bloques Reutilizables Gutenberg

Cómo insertar bloques reutilizables de Gutenberg

Ahora que ya tenemos el bloque guardado, lo podemos reutilizar en cualquier página o post de WordPress. Sigue los siguientes pasos:

01. Insertamos bloque

Nos vamos al botón “insertar bloque” y al final de la lista abrimos el desplegable “Reutilizable”. Allí nos aparecerán los bloques que hemos creado. En este caso sólo tenemos el bloque “Medios y Texto”. Hacemos click en él.

02. Convertir a bloque normal

Este paso es muy importante, ya que sí editamos el bloque sin convertir a bloque normal estaremos modificando el que tenemos guardado de muestra.

Bloques Reutilizables convertir a bloque normal

Una vez convertido a bloque normal ya podemos editarlo de forma independiente: cambiar foto, textos, links, etc.

Editando bloque reutilizable

Cómo gestionar los bloques reutilizables de Gutenberg

Ya hemos visto cómo crear e insertar los bloques reutilizables de Gutenberg. Vamos a ver ahora cómo gestionarlos.

Para acceder a la lista de bloques tienes que abrir el desplegable de bloques y hacer click en “Gestionar todos los bloques reutilizables”.

A continuación se abrirá el gestor de bloques reutilizables. En la lista de nuestro ejemplo sólo tenemos el bloque “Medios y texto”. Des de éste panel puedes editar los bloques, crear nuevos, borrarlos y también importarlos o exportarlos por si te interesa transferirlos de un sitio web a otro.

Gestión de bloques reutilizables

Cómo has podido ver los bloques reutilizables de Gutenberg tienen un gran potencial que permite el desarrollo de sitios web de forma fácil y rápida.

Archivado en:Gutenberg, WordPress

Acerca de Gerber Cucurell

Desarrollador Web especializado en WordPress + Genesis Framework, Director de Arte y Técnico Superior en Multimedia Interactiva. Más info…

Barra lateral primaria

Categorías

  • CSS
    • Iconos
    • Menus
    • Retículas y Columnas
  • Genesis Framework
    • Custom Posts
    • Footer
    • Header
    • Imágenes Destacadas
    • Page Template
    • Widgets
  • Javascript
  • SEO
    • 404
    • Imágenes
    • Optimización Web
  • WordPress
    • Admin
    • Campos personalizados
    • Clases CSS
    • Google Fonts
    • Gutenberg
    • PHP
    • Plugins
    • Search
    • Shortcodes
    • Temas de WordPress
    • Traducciones
    • WPML
  • Recursos rápidos
  • Info
  • Aviso Legal
  • Contacto

Usamos cookies para asegurar que te damos la mejor experiencia en nuestra web. Si continúas usando este sitio, asumiremos que estás de acuerdo con ello.Aceptar