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?

Lospatrones de bloques de WordPress son una colección de elementos de diseño prefabricados que pueden utilizarse para crear estructuras / disposiciones / diseño / plantillas 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 hacer una entrada o una 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 más patrones en el sitio web WordPress.org, e incluso crear y compartir tus propios patrones.

A continuación, vamos a examinar cómo utilizar fácilmente los patrones de bloques en WordPress para crear un sitio web con un contenido atractivo.

Cómo utilizar patrones de bloques en WordPress

Por defecto, WordPress viene con varios patrones de bloque útiles que puede utilizar en su sitio web. Tu tema de WordPress y algunos plugins también pueden añadir sus 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, cabeceras, etc.

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

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

Una vez que 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.

El patrón aparecerá en el editor de contenidos con un marcador de posición que podrá editar y sustituir por el suyo propio.

Basta con apuntar y hacer clic en cualquier bloque dentro del patrón para editar y cambiar su contenido según sus necesidades.

Seguirá teniendo todas las opciones que tiene normalmente 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.

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

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

En última instancia, los patrones de bloques le ayudan a ahorrar 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.

Cómo crear patrones en el editor de bloques

WordPress facilita enormemente la creación de patrones en el editor de bloques que podrás reutilizar más adelante.

Al editar una entrada o página, sólo tiene que seleccionar los bloques que desea incluir en su patrón y hacer clic en “Crear patrón”.

Puede seleccionar varios bloques pulsando la tecla Mayús del teclado y haciendo clic sobre ellos.

Sin embargo, si sus bloques están dispuestos de forma que resulte más difícil seleccionarlos, puede utilizar la vista Lista en la pestaña Vista general del documento.

Al crear un patrón aparecerá un mensaje / ventana emergente.

Deberá dar un nombre a su patrón y elegir una categoría.

Debajo verás un conmutador para mantener el patrón sincronizado o sin sincronizar.

Patrones sincronizados: Cuando usted u otros usuarios editen el patrón, esos cambios se guardarán la siguiente vez que se utilice ese patrón.

Patrones no sincronizados: Los cambios realizados en estos patrones después de insertarlos en una entrada o página no afectarán al patrón original.

Haz clic en el botón “Crear” para guardar tu patrón.

La próxima vez que quiera utilizar ese patrón, sólo tiene que buscar su nombre o categoría en el insertador de bloques.

Cómo crear patrones en el Editor de Sitios

Si está utilizando un tema de bloques con soporte completo para el editor de sitios, también puede crear patrones en el editor de sitios.

Abra el editor del sitio visitando la página Apariencia ” Editor.

Ahora aterrizará en la interfaz del editor del sitio.

Haga clic en “Patrones” en la barra lateral izquierda para continuar.

Verás todos los patrones y categorías disponibles.

Para crear un nuevo patrón, haga clic en el botón Añadir [+] y seleccione “Crear patrón”.

Aparecerá una ventana emergente en la que deberá indicar un nombre para el patrón, elegir una categoría y decidir si desea que el patrón se sincronice o no.

Haga clic en “Crear” para continuar.

WordPress creará un lienzo en blanco para que crees tu patrón.

A partir de aquí, puedes añadir bloques para diseñar tu patrón.

Cuando hayas terminado, no olvides hacer clic en el botón “Guardar” para guardar tu patrón.

Gestión de patrones en WordPress

Si está utilizando un tema de bloques con soporte completo para el editor del sitio, puede gestionar los patrones en el editor del sitio.

Abra el editor del sitio visitando la página Apariencia ” Editor.

En la pantalla Patrones, puede hacer clic en un patrón para editarlo. También puede hacer clic en el menú de tres puntos situado junto a un patrón para duplicarlo, exportarlo o borrarlo.

Para gestionar todos tus patrones, haz clic en la pestaña “Gestionar todos mis patrones” de la barra lateral.

Esto le mostrará un anuncio / catálogo / ficha de todos sus patrones.

Ahora puedes editarlos, exportarlos o borrarlos.

Si está utilizando un tema clásico (temas de WordPress que no son compatibles con el editor completo del sitio), puede gestionar los patrones visitando la página Apariencia ” Patrones.

Desde aquí puede añadir, borrar y exportar sus patrones de bloques.

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á patrones de bloques enviados por la comunidad de WordPress.

Para utilizar uno de estos patrones de bloques, basta con hacer clic para ver el patrón y, a continuación, hacer clic en el botón “Copiar patrón”.

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, 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 patrones de bloques

¿Quieres crear 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 “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, cópialos y pégalos desde la página Mis patrones en 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 un plugin de fragmentos de código personalizados como WPCode.

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.

A continuación, cambie al modo Editor de código.

A partir de aquí, tienes que copiar 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 ese código. Lo necesitarás en el siguiente paso.

Ahora ya puede registrar sus bloques como patrón.

Para ello, simplemente copie y pegue el siguiente código en el archivo functions. php de su tema o en un plugin de fragmentos de código como el plugin gratuito WPCode (recomendado).

Para más detalles, aquí está 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 del bloque 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 del contenido del bloque va aquí” por el código del 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. El patrón de bloques recién registrado aparecerá en el insertador de bloques.

Cómo eliminar un patrón de bloques 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 necesitas hacer es copiar y pegar el siguiente código en el archivo functions.php de tu tema o WPCode:

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 encajen 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, necesita añadir el siguiente código al archivo de funciones de su tema o WPCode:

remove_theme_support( 'core-block-patterns' );

¿Qué ha sido de los bloques reutilizables?

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

Para corregirlo, el equipo del núcleo de WordPress fusionó los bloques reutilizables en patrones.

Para tener la misma funcionalidad que los bloques reutilizables, ahora puede utilizar patrones sincronizados. Cuando usted u otros usuarios editen el patrón, esos cambios se guardarán la siguiente vez que se utilice ese patrón.

Esperamos que esta guía te haya ayudado a aprender a utilizar los patrones de bloques de WordPress en tu sitio web. También puedes consultar nuestra guía sobre cómo dominar el editor de bloques de WordPress o echar un vistazo a estos prácticos atajos de WordPress para ser más productivo.

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.