Patrones de bloque de WordPress

Desde la introducción de los patrones de bloques, ha habido un aumento en el interés por los patrones de bloques dentro del ecosistema de WordPress.

La adición de patrones de bloques a Gutenberg ha sido bastante ventajosa para los usuarios de WordPress. Esto se debe a que ahora puede usar diseños prefabricados mientras diseña su sitio web y modificarlos según sus preferencias. Esto realmente ayuda a ahorrar tiempo, en comparación con el diseño de las páginas de su sitio desde cero.

En este artículo, veremos qué son estos patrones de bloques, dónde encontrarlos, cómo usarlos y cómo se comparan con los bloques reutilizables.

Tabla de contenido

¿Qué son los patrones de bloques?

Uso de patrones de bloques existentes

Patrones de bloques frente a bloques reutilizables

Cómo crear sus propios patrones de bloques

• El enfoque manual
• A través del directorio de patrones

Cómo crear un complemento de patrones de bloques personalizados

Cancelación del registro de patrones de bloques

Cancelación del registro de categorías de patrones de bloques

Conclusión

¿Qué son los patrones de bloques?

Los patrones de bloques son una colección de bloques combinados para crear diseños prediseñados.

Un usuario de WordPress que, por ejemplo, quiera configurar una llamada a la acción puede hacerlo agregando una serie de bloques a su página, como los bloques de encabezado, párrafo y botón. Sin embargo, diseñar los bloques para que coincidan con su diseño de diseño preferido puede no ser tan fácil, especialmente para los usuarios novatos de WordPress. Los patrones de bloque son útiles en tal caso, ya que los usuarios de WordPress pueden simplemente agregar el patrón de bloque de llamada a la acción. Luego pueden editar los patrones de bloques a la vista que deseen.

Uso de patrones de bloques existentes

WordPress integra un editor de bloques (Gutenberg) que sustituye al editor clásico. Dentro del editor, puede agregar fácilmente patrones a sus páginas o publicaciones. Para empezar, primero deberá hacer clic en el insertador de bloques.

Al hacer clic en él, navegue a la pestaña Patrones que se ilustra a continuación:

A continuación, haga clic en el botón "Explorar"

En la ventana emergente representada, tendrá una serie de patrones agrupados en función de varias categorías.

Para insertar un patrón en la página o publicación, solo tendrá que hacer clic en él y luego debería mostrarse dentro de su página o publicación.

Una vez hecho esto, puede personalizar aún más los bloques dentro del patrón según sus preferencias.

También puede encontrar más patrones en el directorio de patrones de bloques de wordpress.org.

Una vez que encuentre un patrón de su preferencia, solo tendrá que copiarlo haciendo clic en el botón de copiar que se muestra una vez que haya un evento de mouseover en el patrón deseado.

Al lograr esto, deberá pegar el patrón dentro de su página o publicación.

Patrones de bloques frente a bloques reutilizables

Un bloque reutilizable es una colección de uno o más bloques que puede usar más tarde dentro de su publicación o página.

Siguiendo la definición anterior, los bloques reutilizables parecen bastante similares a los patrones de bloques en el sentido de que ambos implican la adición de bloques prefabricados dentro de una publicación o página. Sin embargo, hay una diferencia entre estos dos elementos.

Cuando se trata de bloques reutilizables, estos bloques no son muy flexibles en comparación con los patrones de bloques. Los bloques reutilizables conservan una sola instancia sin importar en qué página o publicación se apliquen. Esto significa que si agrega un bloque reutilizable a varias páginas y decide personalizar el bloque reutilizable en una de las páginas, los cambios se aplican a todas las instancias del bloque reutilizable, en todas las páginas.

En cuanto a los patrones de bloques, por otro lado, una vez que agrega un patrón de bloques a varias páginas y realiza algunas personalizaciones en el patrón de bloques en una página específica, las personalizaciones no se aplican a los patrones de bloques en el resto de las páginas. Las instancias de Block Pattern son, por lo tanto, diferentes.

A diferencia de los bloques reutilizables, los patrones de bloques también se pueden registrar dentro de su tema o código de complemento.

Los patrones de bloque son ideales si desea utilizar un diseño particular que se aplicará a varias páginas o publicaciones, desde donde luego pueden personalizarlos en las páginas o publicaciones individuales, para que coincidan con el contexto de las páginas o publicaciones respectivas.

Los bloques reutilizables, por otro lado, son ideales para escenarios en los que desea duplicar y usar el contenido exacto en sus páginas. Esto podría ser, por ejemplo, en anuncios publicitarios.

Cómo crear sus propios patrones de bloques

Hay diferentes formas en las que puede crear sus propios patrones de bloques. Dentro de este artículo veremos dos de estos métodos que son:

• El enfoque manual
• A través del directorio de patrones

El enfoque manual

En este enfoque, primero necesitaremos crear la colección de bloques dentro de una página o publicación y luego registrarla como un patrón.

Creación de una colección de bloques

Para configurar su colección de bloques, deberá realizar lo siguiente:

i) Primero crea una nueva página o publicación

ii) Agregue los bloques deseados que formarán el patrón o el diseño dentro de la publicación o página. En nuestro caso aquí, agregaremos un bloque de medios y texto, así como un bloque de botones y algo de estilo.

A continuación se muestra una muestra de visualización de los bloques:

Registro de un patrón de bloque

Para registrar la colección de bloques como un patrón de bloques, deberá realizar lo siguiente:

i) Dentro de la página o publicación donde tiene la colección de bloques, cambie al editor de código:

ii) Copie todos los códigos generados y péguelos en el editor de texto que desee, como Notepad o Sublime Text:

iii) A continuación, agregue el siguiente código al archivo functions.php dentro de su tema hijo:

 function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'featured' ), 'content' => 'Fill in your copied code here' ) ); } add_action( 'init', 'reg_block_patterns' );

Deberá reemplazar el contenido "Complete su código copiado aquí" con el código copiado en (ii) arriba.

A continuación se muestra una muestra del código final de nuestra parte:

 function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'featured' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' );

Una vez hecho esto, puede visitar su página o publicación y al navegar a la sección de patrones, tendrá una vista del nuevo patrón dentro de la sección "Destacado" como se ilustra a continuación:

Registro de una categoría de patrones

WordPress proporciona algunas categorías de patrones predeterminadas que puede usar al registrar patrones. Estos incluyen: botones, columnas, galería, encabezados, texto, consulta y destacados.

Al registrar patrones de bloques, un mejor enfoque sería registrar patrones en categorías personalizadas. Para lograr esto, primero deberá registrar una categoría de patrón.

Para registrar una categoría de patrón, deberá agregar el siguiente código dentro del archivo functions.php de su tema hijo.

 function register_category_pattern() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_category_pattern' );

Puede modificar la etiqueta de categoría a la de su preferencia. En el ejemplo de código anterior, estamos usando la etiqueta de categoría "Personalizada".

Para que la categoría de patrón personalizado se muestre en su página o publicación, debe asociarla con un patrón. En nuestro caso aquí, modificaremos el código de registro del patrón original para acomodar esta categoría de patrón. Para hacerlo, busque esta línea de código:

 'categories' => array( 'featured' ),

Luego deberá modificar la categoría en su lugar, que es "destacada" a "personalizada", de modo que el código ahora se lea como:

 'categories' => array( 'custom' ),

El código final para registrar el patrón y la categoría de patrón en nuestro caso sería:

 function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'custom' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' ); function register_pattern_categories() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_pattern_categories' );

Una vez que acceda a su página o publicación e intente agregarle un patrón, el patrón se representará en nuestra categoría "Personalizada" recién registrada como se ve a continuación:

A través del directorio de patrones

En el caso de que desee crear un patrón que sea accesible para todos en el ecosistema de WordPress, ahora puede lograrlo desde el Directorio de patrones.

Al acceder al directorio de patrones, deberá realizar lo siguiente:

i) Inicie sesión en el directorio de patrones.

ii) Haga clic en el enlace "crear un nuevo patrón".

iii) En la siguiente pantalla, agregue el título de su patrón y comience a agregar los bloques deseados. Debe agregar al menos un mínimo de tres bloques.

iv) Una vez que haya terminado con la adición de bloques, puede guardar el patrón como borrador.

v) A continuación, verifique que su patrón no viole las pautas descritas aquí: Pautas de patrones. Si todo está bien, puede enviar el patrón.

Puede ver los patrones que tiene haciendo clic en el enlace "mis patrones" que se ilustra aquí:

Los patrones representados en la sección "mis patrones" son borradores, patrones que ha enviado y patrones en espera de revisión.

vi) Luego puede copiar el nuevo bloque y pegarlo en su página o publicación.

Cómo crear un complemento de patrones de bloques personalizados

En lugar de tener el código para registrar su patrón y categoría en su archivo functions.php, puede optar por tener un complemento personalizado que se puede usar para agregar patrones y categorías de patrones. Para ello, deberá realizar lo siguiente:

i) Acceda a los archivos de su sitio web a través de su panel de alojamiento o, alternativamente, a través de FTP utilizando un software FTP como Filezilla

ii) Navegue a la ruta del directorio wp-content > plugins

iii) Dentro del directorio de complementos, cree una carpeta con el nombre "patrones personalizados"

iv) En la carpeta, cree un archivo llamado custom-patterns.php

v) Agregue el siguiente comentario de encabezado dentro del archivo:

 <?php /** * Plugin Name: Custom Patterns * Description: Adds a custom block pattern and category * Version: 1.1.0 * Requires at least: 6.0 * Requires PHP: 7.4 * Author: John Chris * License: GPL v2 or later * Text Domain: custom-patterns */

Puede personalizar el comentario del encabezado anterior para que coincida con el nombre del complemento que desee.

vi) Debajo del comentario del encabezado, agregue su código para registrar el patrón y la categoría. En nuestro caso aquí, usaremos el código que habíamos creado previamente para registrar nuestro patrón y categoría personalizada. Por lo tanto, el código final será:

 <?php /** * Plugin Name: Custom Patterns * Description: Adds a custom block pattern and category * Version: 1.1.0 * Requires at least: 6.0 * Requires PHP: 7.4 * Author: John Chris * License: GPL v2 or later * Text Domain: custom-patterns */ function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'custom' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' ); function register_pattern_categories() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_pattern_categories' );

vii) Dentro de su lista de complementos en el tablero, ahora debería tener una vista del complemento desde la lista de complementos. Haga clic en el enlace de activación junto al nombre del complemento para activar el complemento.

viii) Una vez activado, ahora debería tener una vista del patrón de bloque y la categoría personalizada dentro del editor de bloques como se ve a continuación:

Cancelación del registro de patrones de bloques

Es posible eliminar los patrones de bloques que registre. Si, por ejemplo, desea eliminar el patrón de bloque "my-plugin/media-text-pattern" que registramos anteriormente, deberá agregar el siguiente código dentro del archivo functions.php del tema secundario:

 function deregister_my_pattern() { unregister_block_pattern( 'my-plugin/media-text-pattern' ); } add_action( 'init', 'deregister_my_pattern' );

En el código anterior, deberá reemplazar "my-plugin/media-text-pattern" con el nombre del patrón que registró.

Cancelación del registro de categorías de patrones de bloques

Si solo desea cancelar el registro de una categoría de patrón y conservar el patrón en sí, deberá agregar el siguiente código dentro del archivo functions.php del tema secundario:

 function deregister_pattern_category() { unregister_block_pattern_category( 'custom'); } add_action( 'init', 'deregister_pattern_category');

El código anterior da de baja la categoría “personalizada” que habíamos añadido previamente. Deberá reemplazar "personalizado" con la categoría que había registrado.

Conclusión

En este artículo, hemos analizado qué son los patrones de bloques, cómo usarlos, así como registrar y cancelar el registro de patrones y categorías de bloques. Los patrones de bloques son bastante clave al diseñar su sitio web con el editor de bloques. Facilitan el diseño de páginas y publicaciones dinámicas en su sitio web con poco esfuerzo.

Esperamos que este artículo brinde información relevante sobre cómo usar patrones de bloqueo dentro de su sitio web. Si tiene alguna pregunta o comentario, no dude en enviarlo en la sección de comentarios a continuación.