Guía para principiantes: Cómo utilizar los patrones de bloques de WordPress

¿Quieres aprender a utilizar los patrones de bloques de WordPress en tu sitio web?

Los patrones de bloques te permiten añadir rápidamente elementos de diseño de uso común a los diseños de tus entradas o páginas

En este artículo, te mostraremos cómo utilizar los patrones de bloques de WordPress y encontraremos más patrones para utilizar en tu sitio web

Estos son los temas que cubriremos en esta guía

¿Qué son los patrones de bloques de WordPress?

Los patrones de bloques de WordPress son una colección de elementos de diseño prefabricados que puedes utilizar para crear diseños de contenido personalizados más rápidamente.

WordPress viene con un editor intuitivo conocido comúnmente como el editor de bloques. Permite a los usuarios crear bonitos diseños para sus entradas y páginas utilizando bloques para elementos de contenido comunes

Sin embargo, no todos los usuarios de WordPress son diseñadores o quieren dedicar tiempo a crear diseños cada vez que necesitan crear una entrada o una página

Los patrones de bloques proporcionan una solución fácil a ese problema. Ahora WordPress viene con un montón de útiles patrones de bloques por defecto

Los temas populares de WordPress también proporcionan sus propios patrones que puedes utilizar al escribir el contenido

Estos patrones incluyen elementos como diseños multicolumna preconfigurados, patrones de medios y texto, patrones de llamada a la acción, cabeceras, botones y mucho más

Puedes encontrar aún más patrones en el sitio web de WordPress.org, e incluso puedes crear y compartir tus propios patrones

Dicho esto, echemos un vistazo a cómo utilizar fácilmente los patrones de bloques en WordPress para crear un hermoso contenido para tu sitio web

Cómo utilizar patrones de bloques en WordPress

Por defecto, WordPress viene con un montón de útiles patrones de bloques que puedes utilizar en tu sitio web. Tu tema de WordPress y algunos plugins también pueden añadir sus propios patrones

Para utilizar los patrones de bloques, tienes que editar la entrada o página de WordPress en la que quieras utilizar el patrón de bloques

En la pantalla de edición de la entrada, haz clic en el botón Añadir bloque para abrir el insertador de bloques. Desde aquí, cambia a la pestaña Patrones para ver los patrones de bloques disponibles

Puedes desplazarte hacia abajo para ver los patrones de bloques disponibles

También puedes ver patrones de bloques en diferentes categorías como destacados, botones, columnas, cabecera y más

También puedes hacer clic en el botón Explorar para ver los patrones de bloques.

Aquí puedes ver vistas previas más grandes en una ventana emergente

Una vez que encuentres un patrón que quieras probar, sólo tienes que hacer clic para insertarlo en el área de contenido de tu entrada o página

Después, sólo tienes que señalar y hacer clic en cualquier bloque dentro del patrón para editar y cambiar su contenido según tus necesidades

Seguirás teniendo todas las opciones que normalmente tienes para cada bloque. Por ejemplo, si es un bloque de portada, puedes cambiar el color de la portada o la imagen de fondo

Puedes añadir tantos patrones como necesites para tu entrada o página del blog. También puedes simplemente eliminar un patrón para quitarlo de una entrada o página como eliminarías cualquier bloque de WordPress

Utilizando patrones de bloques, puedes hacer rápidamente hermosos diseños para tus artículos y tu sitio de WordPress

En definitiva, los patrones de bloques te ayudan a ahorrar el tiempo que, de otro modo, emplearías en organizar manualmente los bloques cada vez que necesites añadir una cabecera, una galería, botones, etc

Cómo encontrar más patrones de bloques para usar en tu sitio web

Por defecto, WordPress viene con unos cuantos patrones de bloques de uso común. Los temas de WordPress también pueden añadir sus propios patrones a tu sitio web

Sin embargo, puedes encontrar muchos más patrones de bloques que los disponibles en el insertador de bloques de tu sitio web

Sólo tienes que ir a la página Directorio de patrones de WordPress para ver muchos más patrones de bloques

Aquí encontrarás muchos más patrones de bloques enviados por la comunidad de WordPress

Para utilizar uno de estos patrones de bloques, sólo tienes que llevar el ratón hasta el patrón de bloques y hacer clic en el botón Copiar

A continuación, tienes que volver a tu blog de WordPress y editar la entrada o página en la que quieres insertar este patrón de bloques

En la pantalla de edición de la entrada, simplemente haz clic con el botón derecho y selecciona Pegar en el menú del navegador o pulsa CTRL+V (Comando + V en Mac)

Cómo crear y compartir tus propios patrones de bloques

¿Quieres crear y compartir tus propios patrones de bloques en WordPress y compartirlos con el mundo?

WordPress hace que sea muy fácil crear patrones de bloques y utilizarlos en tus propios sitios web o compartirlos con todos los usuarios de WordPress del mundo.

Sólo tienes que visitar el sitio web del Directorio de Patrones de WordPress y hacer clic en el enlace "Crear nuevo patrón"

Nota: Tendrás que iniciar sesión o crear una cuenta gratuita de WordPress.org para guardar tus patrones

Una vez iniciada la sesión, llegarás a la página del editor de patrones de bloques. Es idéntico al editor de bloques predeterminado de WordPress, y puedes utilizarlo para crear tu patrón

Sólo tienes que añadir bloques para crear el diseño de tu patrón

Puedes utilizar bloques de diseño como grupo, portada, galería y otros para organizar tu diseño

También hay imágenes libres de derechos de autor que puedes utilizar en tus bloques multimedia. La biblioteca multimedia de WordPress te permitirá encontrar y utilizar fácilmente estas imágenes en tus patrones

Una vez que estés satisfecho con tu patrón de bloques, puedes guardarlo como borrador o enviarlo al directorio de patrones

Antes de enviar tu patrón de bloques al directorio de patrones, asegúrate de haber leído el bloque directrices del directorio de patrones

Puedes gestionar todos tus patrones de bloques haciendo clic en el enlace Mis patrones. Se mostrarán todos los patrones de bloques que has compartido, los borradores y los patrones que has favorecido

Si sólo quieres crear patrones de bloques para tu propio uso, puedes guardarlos como borradores. Después, sólo tienes que copiarlos y pegarlos desde la página Mis patrones a tu sitio web de WordPress

Crear manualmente patrones de bloques para WordPress

También puedes crear patrones de bloques manualmente y añadirlos a tu tema de WordPress o al plugin de fragmentos personalizados

Simplemente crea una nueva entrada o página en WordPress. En el área de contenido, utiliza bloques para crear un diseño personalizado o una colección de bloques que quieras guardar como patrón

Después, cambia al modo de editor de código y copia todo el contenido que veas en el editor de código

A continuación, abre un editor de texto plano como el Bloc de notas y pega allí ese código. Lo necesitarás en el siguiente paso

Ahora estás preparado para registrar tus bloques como patrón.

Para ello, simplemente copia y pega el siguiente código en el archivo functions.php de tu tema o en un plugin específico del sitio.

function wpb_my_block_patterns() {
    register_block_pattern(
        'my-plugin/my-awesome-pattern',
        array(
            'title'       => __( 'Two column magazine layout', 'my-theme'),
            'description' => _x( 'A simple magazine style two-column layout with large image and stylized text', 'my-theme' ),
            'categories'  => array( 'columns' ),
            'content'     => ' Your block content code goes here'
            )
    );
}
add_action( 'init', 'wpb_my_block_patterns' );

Ahora copia y pega los datos de los bloques que has copiado antes como valor del parámetro de contenido. En otras palabras, tendrás que sustituir el texto que dice "El código de contenido de tu bloque va aquí" por el código de tu bloque. Asegúrate de dejar las comillas simples que rodean el texto en su lugar.

Por último, no olvides cambiar el título y la descripción por los tuyos y guardar los cambios

Ahora puedes visitar tu sitio web y editar la entrada o la página. Ahora podrás ver tu patrón de bloques recién registrado en el insertador de bloques

Eliminar un patrón de bloques en WordPress

Puedes eliminar o anular fácilmente cualquier patrón de bloques en WordPress. Digamos que quieres eliminar el patrón de bloques que has creado en el ejemplo anterior

Todo lo que tienes que hacer es copiar y pegar el siguiente código en el archivo functions.php de tu tema o en un plugin específico del sitio.

function wpb_unregister_my_patterns() {
  unregister_block_pattern( 'my-plugin/my-awesome-pattern' );
}
add_action( 'init', 'wpb_unregister_my_patterns' );

En este ejemplo, 'my-plugin/my-awesome-pattern' es el nombre del patrón que hemos utilizado al registrarlo

Puedes utilizar este código para anular el registro de cualquier patrón de bloque creado por tu tema o por un plugin. Todo lo que necesitas saber es el nombre utilizado para registrar el patrón

Eliminar patrones del núcleo de WordPress

Los patrones del núcleo de WordPress están disponibles para todos los usuarios de WordPress. Esto significa que pueden estar sobreutilizados y puede que ni siquiera coincidan con el resto de tu tema de WordPress

Si no quieres utilizar un patrón, puedes simplemente evitar añadirlo a tu contenido. Sin embargo, si diriges un sitio de WordPress con varios autores, entonces es posible que quieras evitar que todos los usuarios utilicen estos patrones básicos

Para eliminar todos los patrones del núcleo de WordPress, tienes que añadir el siguiente código al archivo de funciones de tu tema o a un plugin específico del sitio

remove_theme_support( 'core-block-patterns' );

¿Cuál es la diferencia entre los bloques reutilizables y los patrones de bloques?

Tanto los patrones de bloques como los bloques reutilizables pretenden resolver un problema similar: proporcionar a los usuarios opciones para añadir fácilmente bloques de uso común.

Sin embargo, son bastante diferentes entre sí

Por ejemplo, los bloques reutilizables pueden editarse y guardarse directamente en el editor de entradas, pero no son tan flexibles como los patrones de bloques

Una gran diferencia es que si haces un cambio en un bloque reutilizable, éste cambia el bloque en todas las entradas o páginas en las que lo hayas utilizado.

Para más detalles, consulta nuestro tutorial sobre cómo utilizar bloques reutilizables en WordPress.

Por otro lado, si insertas un patrón y lo editas, esos cambios sólo se aplican a la entrada o página donde has añadido ese patrón

Los patrones de bloques también pueden ser registrados por tu tema de WordPress o por plugins como los de bloques. Esto permite a esos desarrolladores ofrecerte muchas más opciones de diseño para crear tus post y páginas.

Esperamos que esta guía te haya ayudado a aprender a utilizar los patrones de bloques de WordPress en tu sitio web. Quizá también quieras ver nuestra guía sobre cómo elegir el mejor software de diseño web, o nuestra selección de expertos sobre los mejores servicios de marketing por correo electrónico para pequeñas empresas.

Si te ha gustado este artículo, suscríbete a nuestro Canal de YouTube para los videotutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.