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

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

Los patrones de bloque le permiten agregar rápidamente elementos de diseño de uso común a sus publicaciones o diseños de página.

En este artículo, le mostraremos cómo usar los patrones de bloqueo de WordPress y encontrar más patrones para usar en su sitio web.

Estos son los temas que trataremos en esta guía.

• ¿Qué son los patrones de bloque de WordPress?
• Cómo usar patrones de bloques en WordPress
• Encontrar más patrones de bloques para usar en su sitio web
• Cómo crear y compartir sus propios patrones de bloques
• Crear patrones de bloques de WordPress manualmente
• Eliminar un patrón de bloque en WordPress
• ¿Cuál es la diferencia entre bloques reutilizables y patrones de bloques?

¿Qué son los patrones de bloque de WordPress?

Los patrones de bloque de WordPress son una colección de elementos de diseño prefabricados que puede usar para crear diseños de contenido personalizados más rápido.

WordPress viene con un editor intuitivo comúnmente conocido como el editor de bloques. Permite a los usuarios crear hermosos diseños para sus publicaciones 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 publicación o una página.

Los patrones de bloques proporcionan una solución fácil a ese problema. WordPress ahora viene con un montón de patrones de bloque útiles de forma predeterminada.

Los temas populares de WordPress también proporcionan sus propios patrones que puede usar al escribir contenido.

Estos patrones incluyen elementos como diseños de varias columnas preconstruidos, patrones de medios y texto, patrones de llamada a la acción, encabezados, botones y más.

Puede encontrar aún más patrones en el sitio web de WordPress.org, e incluso puede crear y compartir sus propios patrones.

Dicho esto, echemos un vistazo a cómo usar fácilmente patrones de bloques en WordPress para crear contenido atractivo para su sitio web.

Cómo usar patrones de bloques en WordPress

De forma predeterminada, WordPress viene con un montón de patrones de bloques útiles que puede usar en su sitio web. Su tema de WordPress y algunos complementos también pueden agregar sus propios patrones.

Para usar patrones de bloque, debe editar la publicación o página de WordPress donde desea usar el patrón de bloque.

En la pantalla de edición de publicaciones, haga clic en el botón Agregar bloque para abrir el insertador de bloques. Desde aquí, cambie a la pestaña Patrones para ver los patrones de bloques disponibles.

Puede desplazarse hacia abajo para ver los patrones de bloques disponibles.

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

Alternativamente, también puede hacer clic en el botón Explorar para ver patrones de bloques.

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

Una vez que encuentre un patrón que desee probar, simplemente haga clic para insertarlo en el área de contenido de su publicación o página.

Después de eso, simplemente puede apuntar y hacer clic en cualquier bloque dentro del patrón para editar y cambiar su contenido según sus propios requisitos.

Aún tendrá todas las opciones que normalmente tiene para cada bloque. Por ejemplo, si se trata de un bloque de portada, puede cambiar el color de la portada o la imagen de fondo.

Puede agregar tantos patrones como necesite para su publicación o página de blog. También puede simplemente eliminar un patrón para eliminarlo de una publicación o página como eliminaría cualquier bloque de WordPress.

Mediante el uso de patrones de bloques, puede crear rápidamente hermosos diseños para sus artículos y su sitio de WordPress.

En última instancia, los patrones de bloques le ayudan a ahorrar tiempo que, de otro modo, gastaría organizando manualmente los bloques cada vez que necesita agregar un encabezado, una galería, botones y más.

Encontrar más patrones de bloques para usar en su sitio web

De forma predeterminada, WordPress viene con algunos patrones de bloques de uso común. Los temas de WordPress también pueden agregar sus propios patrones a su sitio web.

Sin embargo, puede encontrar muchos más patrones de bloques que los disponibles en el insertador de bloques en su sitio web.

Simplemente vaya al sitio web del directorio de patrones de WordPress para ver muchos más patrones de bloques.

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

Para usar uno de estos patrones de bloques, simplemente coloque el mouse sobre el patrón de bloques y haga clic en el botón Copiar.

A continuación, debe volver a su blog de WordPress y editar la publicación o página donde desea insertar este patrón de bloque.

En la pantalla de edición de publicaciones, simplemente haga clic con el botón derecho y seleccione Pegar en el menú del navegador o presione CTRL+V (Comando + V en Mac).

Cómo crear y compartir sus propios patrones de bloques

¿Quiere crear y compartir sus propios patrones de bloques de WordPress y compartirlos con el mundo?

WordPress hace que sea muy fácil crear patrones de bloques y usarlos en sus propios sitios web o compartirlos con todos los usuarios de WordPress en todo el mundo.

Simplemente visite el sitio web del directorio de patrones de WordPress y haga clic en el enlace 'Crear nuevo patrón'.

Nota: deberá iniciar sesión o crear una cuenta gratuita de WordPress.org para guardar sus patrones.

Una vez que haya iniciado sesión, accederá a la página del editor de patrones de bloques. Es idéntico al editor de bloques predeterminado de WordPress y puede usarlo para crear su patrón.

Simplemente agregue bloques para crear su diseño de patrón.

Puede usar bloques de diseño como grupo, portada, galería y más para organizar su diseño.

También hay imágenes libres de regalías disponibles para usar en sus bloques de medios. La biblioteca de medios de WordPress le permitirá encontrar y usar fácilmente estas imágenes en sus patrones.

Una vez que esté satisfecho con su patrón de bloques, puede guardarlo como borrador o enviarlo al directorio de patrones.

Antes de que pueda enviar su patrón de bloques para el directorio de patrones, asegúrese de haber leído las pautas del directorio de patrones de bloques.

Puede administrar todos sus patrones de bloques haciendo clic en el enlace Mis patrones. Mostrará todos los patrones de bloque que ha compartido, los patrones de borrador y los patrones que ha marcado como favoritos.

Si solo desea crear patrones de bloques para su propio uso, puede guardarlos como borradores. Después de eso, simplemente puede copiarlos y pegarlos desde la página Mis patrones en su sitio web de WordPress.

Crear patrones de bloques de WordPress manualmente

También puede crear patrones de bloques manualmente y agregarlos a su tema de WordPress o complemento de fragmentos personalizados.

Simplemente cree una nueva publicación o página en WordPress. En el área de contenido, use bloques para crear un diseño personalizado o una colección de bloques que desee guardar como patrón.

Después de eso, cambie al modo Editor de código y copie todo el contenido que ve en el editor de código.

A continuación, abra un editor de texto sin formato como el Bloc de notas y pegue ese código allí. Lo necesitará en el siguiente paso.

Ahora está listo para registrar sus bloques como un patrón.

Para hacer eso, simplemente copie y pegue el siguiente código en el archivo functions.php de su tema o en un complemento 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 copie y pegue los datos de bloques sin procesar que copió anteriormente como el valor para el parámetro de contenido. En otras palabras, deberá reemplazar el texto que dice "Su código de contenido de bloque va aquí" con su código de bloque. Asegúrese de dejar las comillas simples que rodean el texto en su lugar.

Por último, no olvide cambiar el título y la descripción por los suyos propios y guardar los cambios.

Ahora puede visitar su sitio web y editar y publicar o página. Ahora podrá ver su patrón de bloque recién registrado en el insertador de bloques.

Eliminar un patrón de bloque en WordPress

Puede eliminar o anular el registro fácilmente de cualquier patrón de bloqueo en WordPress. Supongamos que desea eliminar el patrón de bloque que creó en el ejemplo anterior.

Todo lo que necesita hacer es copiar y pegar el siguiente código en el archivo functions.php de su tema o en un complemento 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 usamos al registrarlo.

Puede usar este código para cancelar el registro de cualquier patrón de bloque creado por su tema o un complemento. Todo lo que necesita saber es el nombre utilizado para registrar el patrón.

Eliminar patrones básicos de WordPress

Los patrones básicos de WordPress están disponibles para todos los usuarios de WordPress. Esto significa que pueden usarse en exceso y es posible que ni siquiera coincidan con el resto de su tema de WordPress.

Si no desea utilizar un patrón, simplemente puede evitar agregarlo a su contenido. Sin embargo, si ejecuta un sitio de WordPress de varios autores, es posible que desee evitar que todos los usuarios utilicen estos patrones básicos.

Para eliminar todos los patrones básicos de WordPress, debe agregar el siguiente código al archivo de funciones de su tema o un complemento específico del sitio.

remove_theme_support( 'core-block-patterns' );

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

Los patrones de bloques y los bloques reutilizables pretenden resolver un problema similar: proporcionar a los usuarios opciones para agregar fácilmente bloques de uso común.

Sin embargo, son bastante diferentes entre sí.

Por ejemplo, los bloques reutilizables se pueden editar y guardar dentro del editor de publicaciones, pero no son tan flexibles como los patrones de bloques.

Una gran diferencia es que si realiza un cambio en un bloque reutilizable, cambia el bloque en cada publicación o página en la que lo ha usado.

Para obtener más detalles, consulte nuestro tutorial sobre cómo usar bloques reutilizables en WordPress.

Por otro lado, si inserta un patrón y lo edita, esos cambios solo se aplican a la publicación o página donde agregó ese patrón.

Los patrones de bloque también pueden ser registrados por su tema de WordPress o complementos como complementos de bloque. Esto permite a esos desarrolladores ofrecerle muchas más opciones de diseño para crear sus publicaciones y diseños de página.

Esperamos que esta guía lo haya ayudado a aprender cómo usar los patrones de bloqueo de WordPress en su sitio web. También puede consultar nuestra guía sobre cómo elegir el mejor software de diseño web, o nuestra selección experta de los mejores servicios de marketing por correo electrónico para pequeñas empresas.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para videos tutoriales de WordPress. También puede encontrarnos en Twitter y Facebook.