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 le permiten añadir rápidamente elementos de diseño de uso común a la disposición de sus entradas o páginas.

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

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

• Qué son los patrones de bloques de WordPress
• Cómo utilizar patrones de bloques en WordPress
• Más patrones de bloques para su sitio web
• Cómo crear y compartir sus propios patrones de bloques
• Creación manual de patrones de bloques en WordPress
• Quitar un patrón de bloque en WordPress
• ¿Cuál es la diferencia entre bloques reutilizables y patrones de bloques?

¿Qué son los patrones de bloques de WordPress?

Lospatrones de bloques de WordPress son una colección de elementos de diseño prefabricados que puede utilizar para crear estructuras de contenido personalizadas con mayor rapidez.

WordPress incluye un editor intuitivo conocido como editor de bloques. Permite a los usuarios crear hermosas disposiciones 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 disposiciones cada vez que necesitan crear una entrada o página.

Los patrones de bloques ofrecen una solución sencilla a este problema. WordPress ahora viene con un montón de patrones de bloque útiles por defecto.

Lostemas populares de WordPress también proporcionan sus propios patrones que puede utilizar al escribir el contenido.

Estos patrones incluyen elementos como estructuras / disposición / diseño / plantilla de varias columnas, patrones de medios y texto, patrones de llamada a la acción, cabeceras, botones, etc.

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

Dicho esto, veamos cómo utilizar fácilmente patrones de bloques en WordPress para crear contenido atractivo para su sitio web.

Tutorial en vídeo

Si prefiere instrucciones escritas, siga leyendo.

Cómo utilizar patrones de bloques en WordPress

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

Para utilizar patrones de bloques, debe editar la entrada o página de WordPress en la que desea utilizar el patrón de bloques.

En la pantalla de edición de entradas, haga 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.

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

También puede ver patrones de bloques en distintas categorías, como destacados, botones, columnas, cabecera, etc.

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

Aquí puede ver vistas previas más grandes en un mensaje / ventana emergente.

Cuando encuentre un patrón que desee probar, sólo tiene que hacer clic para insertarlo en el área de contenido de su entrada o página.

A continuación, sólo tiene que señalar y hacer clic en cualquier bloque del patrón para modificar su contenido y adaptarlo a sus necesidades.

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

Puedes añadir tantos patrones como necesites para la entrada o página de tu blog. También puede simplemente quitar / eliminar un patrón de una entrada o página como lo haría con cualquier bloque de WordPress.

Mediante el uso de patrones de bloques, usted puede hacer rápidamente hermosas disposiciones para sus artículos y sitio de WordPress.

En última instancia, los patrones de bloques le ayudan a guardar o ahorrar el tiempo que de otro modo emplearía en organizar manualmente los bloques cada vez que necesite añadir una cabecera, una galería, botones, etc.

Más patrones de bloques para su sitio web

Por defecto, WordPress viene con algunos patrones de bloque de uso común. Los temas de WordPress también pueden añadir 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 de su sitio web.

Sólo tiene que ir 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 utilizar uno de estos patrones de bloques, basta con acercar el ratón al patrón de bloques y hacer clic en el botón Copiar.

A continuación, debe volver a su blog de WordPress y editar la entrada o página en la que desea insertar este patrón de bloques.

En la pantalla de edición de entradas, basta con hacer clic con el botón derecho y seleccionar Pegar en el menú del navegador o pulsar CTRL+V (Comando + V en Mac).

Cómo crear y compartir sus propios patrones de bloques

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

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

Sólo tiene que visitar el sitio web del directorio de patrones de WordPress y enlazar el enlace “Crear nuevo patrón”.

Nota: Tendrás que acceder o crear una cuenta gratuita en WordPress.org para guardar tus patrones.

Una vez hayas accedido, llegarás a la página del editor de patrones de bloques. Es idéntico al editor de bloques por defecto de WordPress, y puedes usarlo para crear tu patrón.

Simplemente añade bloques para crear la disposición de tu patrón.

Puedes utilizar bloques de disposición como grupo, portada, galería, etc. para organizar tu disposición.

También hay imágenes libres de derechos disponibles para usar en tus bloques de medios. La biblioteca de medios de WordPress te permitirá encontrar y utilizar fácilmente estas imágenes en tus patrones.

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

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

Puedes gestionar todos tus patrones de bloques al hacer clic en el enlace Mis patrones. Aparecerán todos los patrones de bloques que hayas compartido, los patrones borradores y los patrones que hayas marcado como favoritos.

Si solo 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.

Creación manual de patrones de bloques en WordPress

También puede crear patrones de bloques manualmente y añadirlos a su tema de WordPress o a su plugin de fragmentos de código personalizados.

Basta con crear una nueva entrada o página en WordPress. En el área de contenido, utilice bloques para crear una estructura / disposición / diseño / plantilla personalizada o una colección de bloques que desee guardar como patrón.

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

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

Ahora ya puede registrar sus bloques como patrón.

Para ello, sólo tienes que copiar y pegar el siguiente código en el archivo functions . php de tu tema o en un plugin específico del sitio. Si nunca has insertado un código en tu archivo functions.php, te recomendamos que utilices el plugin gratuito WPCode para añadirlo.

Esta es la guía completa para añadir código personalizado en WordPress.

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 tu código de bloque. Asegúrese de dejar las comillas simples alrededor del texto.

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

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

Quitar un patrón de bloque en WordPress

Puede quitar / anular fácilmente cualquier patrón de bloque en WordPress. Digamos que desea quitar / eliminar el patrón de bloque que creó en el ejemplo anterior.

Todo lo que tiene que hacer es copiar y pegar el siguiente código en el archivo functions. php de su 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 utilizamos al registrarlo.

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

Quitar / eliminar patrones de 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 desea utilizar un patrón, puede simplemente evitar añadirlo a su contenido. Sin embargo, si tiene un sitio WordPress con varios autores, puede que quiera evitar que todos los usuarios utilicen estos patrones de núcleo.

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

remove_theme_support( 'core-block-patterns' );

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

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

Sin embargo, son muy 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 realizas un cambio en un bloque reutilizable, éste cambia en todas las entradas o páginas en las que lo hayas utilizado.

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

Por otro lado, si insertas un patrón y lo editas, entonces esos cambios solo 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 plugins como los plugins de bloques. Esto permite a esos desarrolladores ofrecerle muchas más opciones de diseño para crear sus disposiciones de entradas 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. Puede que también quieras ver nuestra guía sobre cómo añadir código personalizado en WordPress, o la guía para principiantes sobre cómo pegar fragmentos de web en WordPress

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.