WordPress es una potente herramienta de publicación online que permite a cualquiera crear y compartir fácilmente contenido textual y/o multimedia. Pero más allá de eso, también es una gran herramienta profesional para diseñadores, vendedores y desarrolladores, independientemente de su formación y habilidades.
En resumen, WordPress puede ser tu compañero de equipo más valioso y ayudarte a tener éxito en diversas profesiones.
Con esto en mente, hemos publicado una serie de artículos en este blog para ayudarte a adquirir las habilidades necesarias para ser desarrollador de WordPress:
- Cómo Crear Bloques Personalizados para Gutenberg
- Cómo Crear Bloques Dinámicos para Gutenberg
- Cómo Añadir Meta Boxes y Campos Personalizados a las Entradas en Gutenberg
Y para los que prefieren el contenido en vídeo, también tenemos un curso gratuito en vídeo: Desarrollo de Bloques Personalizados de Gutenberg.
Y sí, puedes aumentar tus expectativas profesionales con habilidades de desarrollo de Gutenberg, pero no necesitas ser necesariamente un desarrollador para crear diseños avanzados en tu sitio web de WordPress.
Los usuarios de WordPress pueden aprovechar las potentes funcionalidades que les permiten crear fácilmente diseños de bloques avanzados sin complicaciones. En este post, centraremos nuestra atención en los Patrones de Bloques.
Qué son los Patrones de Bloques
Los patrones de bloques son grupos preconstruidos de bloques que puedes añadir a tu contenido y personalizar utilizando las mismas herramientas de diseño disponibles para los bloques incluidos.
Se introdujeron por primera vez con WordPress 5.5 para permitir a los administradores de sitios y a los creadores de contenidos incluir en su contenido estructuras complejas de bloques anidados listas para usar con sólo unos clics.
Los temas de bloques suelen proporcionar algunos patrones de bloques que puedes añadir a tu contenido directamente desde el insertador de bloques. El nuevo tema predeterminado incluido en WordPress 6.7, Twenty Twenty-Five, incluye más de 70 patrones de bloques.
Y no estás limitado a los patrones proporcionados por tu tema.
En primer lugar, encontrarás montones de patrones de bloques listos para usar en la Galería de patrones oficial de WordPress.
Además, puedes crear un número ilimitado de patrones utilizando la API de patrones o las herramientas de edición disponibles en el editor de bloques. Puedes utilizar patrones personalizados de forma interna en tu sitio web, exportarlos a otros sitios web o compartirlos públicamente en la Galería de patrones.
Desde WordPress 6.3, un nuevo sistema de patrones hace que el proceso de creación de patrones sea más flexible y sencillo. Ahora está más claro qué tipo de diseño estás construyendo y qué efecto tienen tus personalizaciones en todo tu sitio web.
Hay dos tipos principales de patrones de bloques:
- Patrones de bloques sincronizados
- Patrones de bloques estándar (no sincronizados)
La principal diferencia entre los dos tipos es que todos los cambios realizados en un patrón sincronizado se aplican a cada instancia de un patrón en todo tu sitio web. En cambio, los cambios en un patrón de bloque estándar solo afectan a una instancia específica del patrón.
Pero hay mucho más que decir sobre los patrones de bloques. ¿Te estás preguntando cómo funciona este sistema y cómo aprovechar las nuevas funcionalidades de edición añadidas con las versiones más recientes de WordPress? Vamos a profundizar.
Patrones de Bloques Preconstruidos
Los patrones preconstruidos son patrones de bloques «no sincronizados», lo que significa que los cambios realizados en un patrón de bloques sólo afectarán a la instancia específica que estés editando y no se aplicarán a ninguna otra instancia que puedas haber añadido a otras entradas o páginas de tu sitio web.
Puedes utilizar patrones preconstruidos para incluir diseños de bloques que puedes personalizar in situ, cambiando imágenes, texto, estilos o añadiendo/eliminando elementos.
Una vez que hayas creado un patrón de bloques personalizado, puedes añadirlo en cualquier lugar de tu sitio web y personalizarlo con sólo unos clics utilizando los controles integrados del editor.
Puedes examinar e insertar patrones de bloques prediseñados desde la pestaña Patrones del Insertador de Bloques o navegar a la sección de administración de Patrones en el Editor de Sitios. También puedes descubrir nuevos patrones en la Galería de patrones.
En la galería, puedes elegir un patrón, hacer clic en el botón Copiar patrón y pegarlo directamente en tu contenido.
Eres libre de personalizar el grupo de bloques incluidos en el patrón sin que ello afecte al patrón registrado ni a ninguna instancia adicional de tu sitio web.
Patrones de bloques sincronizados y no sincronizados
Como se ha mencionado anteriormente, con WordPress 6.3 el sistema de patrones se ha racionalizado y se ha hecho más coherente. Ahora es más fácil para el usuario crear patrones personalizados directamente desde el editor de bloques y gestionarlos desde el panel de control de WordPress sin tener que lidiar con código. Ahora puedes construir:
- Patrones de bloques sincronizados
- Patrones de bloques no sincronizados
La diferencia entre los dos tipos de patrones es que todos los cambios realizados en un patrón sincronizado se aplicarán a cada aparición de ese bloque en todo tu sitio web.
Por el contrario, los cambios realizados en un patrón de bloque no sincronizado sólo afectarán a esa instancia específica del patrón y no se aplicarán a ninguna otra instancia que puedas haber añadido a otras entradas o páginas de tu sitio web.
Desde el punto de vista de un desarrollador, los patrones de bloque personalizados se registran en la base de datos de WordPress como tipos de entrada personalizados de wp_block, y un metacampo de wp_pattern_sync_status almacena el estado de sincronización de un patrón.
wp_pattern_sync_status se utiliza para almacenar el estado de sincronización de un patrón de bloquesGracias al nuevo sistema de gestión de patrones, ahora puedes crear patrones de bloques sincronizados y no sincronizados directamente desde el editor del sitio o de la entrada. Sólo tienes que diseñar tu patrón de bloques, seleccionar los bloques y hacer clic en el icono de los tres puntos de la barra de herramientas de bloques. A continuación, elige Crear patrón en el menú desplegable.
En el siguiente ejemplo, estamos creando un patrón sincronizado a partir de un bloque Grupo, un encabezado, un párrafo y un botón.
Cuando hagas clic en Crear patrón, se te pedirá que introduzcas el nombre y las categorías de tu patrón y que decidas si está sincronizado o no.
Y ya está. Tu patrón sincronizado aparece ahora en la sección de administración de Patrones del editor del sitio, en Mis Patrones.
Aquí puedes previsualizar tus patrones y comprobar el estado de sincronización de los mismos.
A continuación, puedes iniciar el editor de patrones y personalizar tu patrón de bloques.
De nuevo, los cambios realizados en los patrones sincronizados afectan a todas las apariciones de ese patrón en tu sitio web. Los cambios realizados en los patrones estándar sólo afectarán a las futuras instancias del patrón.
Esto es posible porque WordPress maneja los dos tipos de patrones de forma diferente. Para entender la diferencia, crea una copia no sincronizada de tu patrón personalizado, luego crea una nueva entrada o página y añade los dos patrones. Una vez hecho esto, ve al editor de código y comprueba el código.
El bloque sincronizado se genera con el siguiente código:
<!-- wp:block {"ref":512} /-->Esto significa que WordPress buscará la entrada con el ID 512 para generar el HTML que se mostrará en la pantalla.
El segundo bloque no se identifica con un ID. El editor de código contiene todo el marcado que compone el patrón.
Los patrones sincronizados son especialmente útiles para construir elementos que quieras incluir en varias páginas de tu sitio web y/o en diferentes sitios web. Piensa en llamadas a la acción, banners promocionales, tablas de precios, etc.
Como hemos mencionado, WordPress considera los patrones de bloques personalizados como tipos de entradas de wp_block y, como tales, los almacena en la tabla wp_posts.
Una vez que hayas creado tus patrones, puedes gestionarlos desde la pantalla de administración de Patrones. Puedes acceder a esa página de varias formas:
- Añadiendo /wp-admin/edit.php?post_type=wp_block a la URL WordPress de tu sitio web.
- Haciendo clic en el botón Explorar todos los patrones del Insertador de bloques.
- Haciendo clic en el botón Mis patrones en el Editor del sitio.
En la pantalla Patrones, puedes
- Editar, Eliminar o Exportar tu patrón como JSON,
- Importar patrones desde JSON,
- Crear nuevos patrones.
En el editor de Sitios, también puedes duplicar y renombrar tus patrones.
Modificaciones de patrones sincronizadas
Introducidas con WordPress 6.6, las Modificaciones de Patrones Sincronizados son un tercer tipo de patrón que aprovecha la API Block Bindings para obtener las características de ambos tipos de patrones.
Las modificaciones de patrones sincronizados te permiten crear patrones de bloques que mantienen la misma estructura en todo tu sitio web y que cambian de forma sincronizada con las personalizaciones realizadas en la estructura y el estilo del patrón en el editor del sitio. En esto, las modificaciones de patrones son similares a los patrones sincronizados.
Sin embargo, las modificaciones de patrones también son similares a los patrones no sincronizados porque puedes cambiar el contenido de bloques específicos incluidos en el patrón sin afectar a otras instancias del mismo patrón en el sitio.
Por tanto, las modificaciones de patrones son patrones sincronizados con elementos individuales no sincronizados.
Vamos a descubrir cómo crear una modificación de patrón.
Paso 1: Ve a Patrones y duplica uno de los patrones existentes, como el patrón Precios, 2 columnas (Pricing, 2 columns) del tema predeterminado Twenty Twenty-Five. Asigna un nombre y establece la copia como Patrón sincronizado.
Paso 2: Abre Mis patrones y busca tu nuevo patrón sincronizado. Ábrelo y selecciona uno de los bloques que necesites anular, como el bloque Encabezado.
Ve a la barra lateral de configuración del bloque y desplázate hasta la sección Avanzado. Aquí encontrarás Activar Modificaciones.
Cuando hagas clic en el botón, se te pedirá que añadas un nombre para la modificación.
Paso 3: Repite el mismo proceso para cada bloque que quieras modificar. Cuando hayas terminado, crea una nueva entrada o página e incluye tu patrón personalizado.
Paso 4: En el editor de entradas, cambia el contenido de los bloques que quieres modificar, guarda la entrada y comprueba el resultado en el front end.
Es posible que hayas notado que cuando editas una instancia de una modificación de patrón en el editor de entradas, la barra lateral de configuración de bloques muestra los campos que se pueden editar. En el ejemplo anterior, hemos hecho que el encabezado y algunos párrafos se puedan modificar.
Puedes añadir cualquier número de patrones en cualquier lugar de tu sitio web, y cada instancia mostrará la misma estructura original, pero estará lista para su personalización.
Ahora, abre tu patrón en el Editor de Sitios y cambia al Editor de Código. El código debería parecerse a lo siguiente:
<!-- wp:heading
{
"textAlign":"center",
"metadata":{
"name":"Heading",
"bindings":{
"__default":{
"source":"core/pattern-overrides"
}
}
},
"align":"wide"
}
-->
<h2 class="wp-block-heading alignwide has-text-align-center">Pricing</h2>
<!-- /wp:heading -->
<!-- wp:paragraph
{
"align":"center",
"metadata":{
"name":"Subtitle",
"bindings":{
"__default":{
"source":"core/pattern-overrides"
}
}
}
}
-->
<p class="has-text-align-center">Cancel or pause anytime.</p>
<!-- /wp:paragraph -->En el delimitador de bloque, verás la propiedad metadata.bindings. Esto hace que los bloques Título y Párrafo sean editables. La propiedad __default indica a WordPress que conecte todos los atributos admitidos a una fuente específica, que es "core/pattern-overrides".
Ahora, en el editor de entradas, cambia al Editor de código. El código debería ser similar al siguiente:
<!-- wp:block
{
"ref":518,
"content":{
"Heading":{
"content":"Choose your plan"
},
"Subtitle":{
"content":"Try our services with no risk thanks to our 30-day guarantee"
},
"Plan 1 title":{
"content":"Starter"
},
"Plan 2 title":{
"content":"Business"
}
}
}
/-->Aquí, verás una referencia al patrón de bloques y un conjunto de propiedades para cada bloque establecido como editable.
Ten en cuenta que, como las modificaciones de patrones son una implementación de la API Block Bindings, solo puedes modificar los bloques soportados. En el momento de escribir este artículo, las modificaciones de patrones soportan los bloques de Encabezado, Párrafo, Imagen y Botones.
Partes de la Plantilla
Antes de Gutenberg, las plantillas y temas de WordPress se creaban principalmente en PHP. Para crear o personalizar plantillas, se necesitaban sólidos conocimientos de temas hijos, jerarquía de plantillas y los principales lenguajes de desarrollo de front end. Pero las cosas cambiaron con la introducción de los temas de bloques.
En los temas de bloques y los temas clásicos que han optado por esta funcionalidad, puedes crear o personalizar fácilmente una plantilla o parte de una plantilla en la interfaz del Editor de sitios. No se requieren conocimientos de desarrollo a menos que, por supuesto, decidas convertirte en desarrollador de temas.
Una plantilla de bloque es una lista de elementos de bloque. Ejemplos de elementos de bloque son el título del sitio, el logotipo y la navegación.
Las partes de plantilla son secciones específicas de una página que pueden visualizarse en varias ubicaciones, como una cabecera y un pie de página, y pueden mostrarse en todas las páginas de tu sitio web WordPress.
Puedes crear y editar partes de plantilla a través de la interfaz del editor del sitio, donde puedes utilizar todas las herramientas de edición disponibles para los bloques.
Sin embargo, a diferencia de los patrones de bloques, las partes de plantilla están pensadas para áreas del sitio que no cambian con frecuencia.
Diferencias entre patrones y partes de plantilla
A modo de resumen, éstas son las principales diferencias entre los tres:
Patrones de Bloques Preconstruidos
- Los patrones de bloques preconstruidos son diseños de bloques predefinidos que puedes añadir a tu contenido y personalizar utilizando las mismas herramientas que los bloques incluidos. Los cambios realizados en un patrón de bloques sólo afectarán a esa única instancia del patrón de bloques.
- Puedes copiar y pegar patrones preconstruidos desde el directorio de Patrones.
- Puedes crear nuevos patrones y publicarlos en el directorio Patrones.
Patrones de bloques personalizados
- Los patrones de bloques personalizados son grupos de bloques sincronizados o no sincronizados que puedes utilizar en cualquier entrada o página de tu sitio web.
- Los patrones de bloques personalizados se almacenan en la tabla
wp_postscomo tipo de entradawp_block. - Puedes importar y exportar patrones de bloques personalizados desde y hacia otros sitios web.
Partes de la plantilla
- Las partes de plantilla son áreas específicas de una página que pueden mostrarse en varias ubicaciones, como el encabezado, el pie de página y la barra lateral, de forma recurrente en varias páginas de tu sitio web de WordPress.
- Puedes crear y editar partes de plantilla a través de la interfaz del editor del sitio.
- Las partes de plantilla están pensadas para áreas del sitio que no cambian con frecuencia.
Cómo Crear Partes de Plantilla para Temas y Plugins
Como hemos mencionado antes, WordPress 6.3 introdujo un nuevo sistema de gestión de patrones de bloques. Ahora es más fácil crear patrones de bloques sincronizados o no sincronizados sin salir de la interfaz del editor. Y también puedes importar y exportar patrones personalizados con unos pocos clics desde tu panel de control de WordPress.
Sin embargo, WordPress también ofrece otras formas de crear patrones de bloques para los desarrolladores de temas y plugins.
Además de la funcionalidad de patrones de bloques, WordPress 5.5 introdujo una nueva API para que los desarrolladores puedan «crear bloques de contenido preconstruidos que se pueden insertar fácilmente en entradas, páginas, tipos de entradas personalizados y plantillas» La nueva API proporciona las funciones register_block_pattern y register_block_pattern_category para registrar patrones de bloques y categorías de patrones.
Desde WordPress 6.0, también puedes registrar patrones de bloques con un archivo PHP. Así que, en el momento de escribir esto, tienes dos formas de crear un patrón de bloques.
- Utilizando la función de ayuda
register_block_pattern, - Añadiendo un archivo PHP a tu tema dentro de una carpeta de patrones.
Crear un Patrón de Bloques con un Plugin
El primer método está pensado principalmente para desarrolladores de WordPress, pero es lo suficientemente sencillo como para que también lo utilicen desarrolladores no avanzados.
Si te decides por el primer método, puedes crear un patrón de bloques utilizando las dos nuevas funciones register_block_pattern y register_block_pattern_category en el archivo PHP de un plugin o en el functions.php de tu tema.
Selecciona o Registra una Categoría de Patrón
En primer lugar, elige una categoría para tu patrón. Con las últimas versiones de WordPress, se han añadido nuevas categorías de patrones y se han modificado algunas categorías existentes.
Para obtener la lista de todas las categorías registradas, abre el editor de Entradas y pega el siguiente código en la consola del navegador:
wp.data.select('core').getBlockPatternCategories()En WordPress 6.7 con el tema Twenty Twenty-Five activo, obtendrás la siguiente lista de categorías de patrones:
Si tu patrón de bloques no entra en ninguna de las categorías predeterminadas, también puedes registrar una nueva categoría utilizando la funciónregister_block_pattern_category .
Esta función acepta dos argumentos:
$category_name: Nombre de la categoría del patrón, incluido el espacio de nombres.$category_properties: Un array de propiedades de la categoría.
Un ejemplo te ayudará a entender mejor cómo registrar una nueva categoría de patrón:
if ( function_exists( 'register_block_pattern_category' ) ) {
function my_plugin_register_pattern_category() {
register_block_pattern_category(
'my-pattern-category',
array(
'label' => __( 'My Pattern Category', 'my-plugin-text-domain' ),
'description' => __( 'Simple call to action with a header, an image, a paragraph, and a button.' ),
)
);
}
add_action( 'init', 'my_plugin_register_pattern_category' );
}Registrar un Patrón de Bloques
Una vez registrada la categoría del patrón, el siguiente paso es registrar el propio patrón de bloques. Registrarás el patrón de bloques utilizando la función de ayudaregister_block_pattern como se indica a continuación:
function my_plugin_register_block_pattern() {
register_block_pattern( 'prefix/pattern-name', $props );
}
add_action( 'init', 'my_plugin_register_block_pattern' );Esta función toma dos argumentos:
$pattern_name: Un nombre legible por la máquina en forma denamespace/pattern-name.$pattern_properties: Un array de propiedades del patrón.
Aquí tienes una lista de las propiedades del patrón disponibles actualmente:
title(obligatorio): Un título legible para el patrón.content(obligatorio): El código HTML del patrón.description: Un texto que describa el patrón en el insertador. La descripción es opcional, pero se recomienda porque ayuda a los usuarios a encontrar el patrón.categories: Un array de una o más categorías de patrones registradas. Tienes que registrar una categoría antes de poder utilizarla aquí (consulta la sección anterior).keywords: Un array de palabras clave que ayuden a los usuarios a encontrar el patrón.viewportWidth: Un número entero que especifica la anchura del patrón en la vista previa.blockTypes: Un array opcional de tipos de bloque que se utilizarán con el patrón.postTypes: Un array de tipos de entrada que podrán utilizar el patrón.templateTypes: Un array de tipos de plantilla en los que el patrón tiene sentido (disponible desde WordPress 6.2).inserter: Un booleano para determinar si el patrón debe ser visible en el insertador de bloques. Establece el valor afalsepara ocultar el patrón. Por defecto, todos los patrones aparecerán en el insertador de bloques.source(opcional): Una cadena que identifica la fuente del patrón. Pasa la cadenapluginsi estás registrando el patrón desde un plugin. Para un tema, pasa la cadenatheme.
Aquí tienes un ejemplo del uso de register_block_pattern:
if ( function_exists( 'register_block_pattern' ) ) {
function my_plugin_register_block_pattern() {
register_block_pattern(
'my-plugin/my-block-pattern',
array(
'title' => _x( 'My awesome pattern', 'Block pattern title', 'my-plugin-text-domain' ),
'categories' => array( 'my-pattern-category' ),
'postTypes' => array( 'post' ),
'content' => '<p>My awesome block pattern</p>'
)
);
}
add_action( 'init', 'my_plugin_register_block_pattern' );
}En este código, hemos utilizado la propiedad postTypes para restringir la disponibilidad del patrón a las entradas normales del blog. Sin embargo, tienes la flexibilidad de establecer un valor diferente para postTypes para que sea accesible para varios tipos de entrada. Por ejemplo, si tienes un tipo de entrada product y deseas limitar la disponibilidad del patrón sólo a ese tipo específico, simplemente escribirás:
'postTypes' => array( 'product' ),Ahora, crea una nueva entrada (o un tipo de entrada personalizada), abre el insertador de bloques y haz clic en la etiqueta Patrones. Deberías encontrar una nueva categoría de patrones (Mi categoría de patrones) con tu patrón de bloque personalizado. No dudes en jugar con las propiedades de los patrones para personalizar tus patrones de bloques.
Y ahora, profundicemos un poco más e intentemos construir un patrón de bloques del mundo real.
Un Ejemplo Real de Patrón de Bloques
Supongamos que quieres crear un patrón de bloques que incluya un encabezado, una imagen, un párrafo y un botón.
En el editor, crea el diseño para tu patrón de bloques, luego cambia al editor de código y copia el marcado.
En nuestro ejemplo, tenemos el siguiente código:
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"240px"} -->
<div class="wp-block-column" style="flex-basis:240px"><!-- wp:image {"id":25,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":{"topLeft":"16px"}}}} -->
<figure class="wp-block-image size-full has-custom-border"><img src="http://wordpress-block-patterns.local/wp-content/uploads/2023/05/placeholder.jpg" alt="" class="wp-image-25" style="border-top-left-radius:16px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"color":{"text":"#5831f6"}}} -->
<h4 class="wp-block-heading has-text-color" style="color:#5831f6">Your New Home for Modern Web Apps and Sites</h4>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Kinsta is a Cloud Platform designed to help companies and dev teams ship and manage their web projects faster and more efficiently.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:buttons {"layout":{"type":"flex"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textAlign":"center","textColor":"base","width":100,"style":{"color":{"background":"#5831f6"},"typography":{"fontSize":"1.36rem"},"border":{"radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"16px","bottomRight":"16px"}}},"fontFamily":"inter"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-inter-font-family" style="font-size:1.36rem"><a class="wp-block-button__link has-base-color has-text-color has-background has-text-align-center wp-element-button" style="border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;background-color:#5831f6"><strong>View Plans</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
Ahora puedes optimizar este código. Si estás registrando el patrón de bloques con un plugin, tienes que cambiar la URL de la imagen de la siguiente manera:
esc_url( plugin_dir_url( __FILE__ ) . 'images/placeholder.jpg' )De esta forma, WordPress no buscará la imagen en las subidas, sino en la carpeta de imágenes de tu plugin.
A continuación, puedes utilizar la propiedad viewportWidth para obtener una mejor vista previa del patrón en el insertador de bloques:
'viewportWidth' => 800,
También puedes incluir una serie de palabras clave para ayudar a los usuarios a encontrar tu patrón de bloques:
'keywords' => array( 'cta', 'demo', 'kinsta' ),
Otra opción para ayudar a los usuarios a encontrar el bloque en las búsquedas es añadir una matriz de tipos de bloque:
'blockTypes' => array( 'core/button' ),De esta forma, el patrón de bloques aparecerá en las sugerencias cuando un usuario busque uno de los bloques especificados.
La propiedad postTypes te permite hacer que el patrón de bloque sólo esté disponible para determinados tipos de entrada. Por ejemplo, puedes hacer que el patrón sólo sea visible para el tipo de entrada product:
'postTypes' => array( 'product' ),Por último, puedes añadir una clase CSS a la envoltura de tu patrón de bloques. Para ello, debes crear un nuevo grupo con el atributo className:
<!-- wp:group {"className":"my-css-class","layout":{"type":"constrained"}} -->
<div class="wp-block-group my-css-class">
<!-- Your blocks -->
</div>
<!-- /wp:group -->
Ten en cuenta que debes añadir el mismo nombre de clase al siguiente elemento div.
Para una visión más detallada de los patrones de bloques y más ejemplos de código, consulta también Patrones de bloques en el Manual de temas de WordPress.org.
Crear un Patrón de Bloques con un Archivo
Como se mencionó anteriormente, WordPress 6.0 introdujo una forma nueva y más sencilla de añadir patrones de bloques a tus temas de WordPress. Ahora puedes registrar implícitamente patrones de bloques declarándolos como archivos PHP en una carpeta /patterns en la raíz de tu tema.
Supongamos que quieres registrar implícitamente el mismo patrón de bloque creado en la sección anterior en tu tema de bloque. En este ejemplo, usaremos el tema Twenty Twenty-Three.
Puedes establecer los mismos parámetros que con el método anterior, pero incluyéndolos en un comentario en la cabecera del archivo. Además, en lugar de utilizar nombres de parámetros en camelCase, separarás las palabras con un espacio, y en lugar de arrays, utilizarás elementos de lista separados por comas.
En primer lugar, desactiva el plugin que utilizaste para registrar el patrón en el ejemplo anterior. A continuación, crea un nuevo archivo my-block-pattern.php e incluye la siguiente cabecera:
<?php
/**
* Title: My awesome pattern
* Slug: twentytwentythree/my-block-pattern
* Post Types: post
* Categories: featured, banner
* Viewport Width: 800
* Keywords: Call to action, Kinsta
* Block Types: core/buttons
*/
?>A continuación, añadirás el contenido a tu patrón de bloques. Puedes utilizar el mismo código que en el ejemplo anterior, pero primero tendrás que cambiarlo un poco:
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"240px"} -->
<div class="wp-block-column" style="flex-basis:240px"><!-- wp:image {"id":25,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":{"topLeft":"16px"}}}} -->
<figure class="wp-block-image size-full has-custom-border"><img src="<?php echo esc_url( get_theme_file_uri( 'assets/images/placeholder.jpg' ) ); ?>" alt="" class="wp-image-25" style="border-top-left-radius:16px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"color":{"text":"#5831f6"}}} -->
<h4 class="wp-block-heading has-text-color" style="color:#5831f6">Your New Home for Modern Web Apps and Sites</h4>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Kinsta is a Cloud Platform designed to help companies and dev teams ship and manage their web projects faster and more efficiently.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:buttons {"layout":{"type":"flex"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textAlign":"center","textColor":"base","width":100,"style":{"color":{"background":"#5831f6"},"typography":{"fontSize":"1.36rem"},"border":{"radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"16px","bottomRight":"16px"}}},"fontFamily":"inter"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-inter-font-family" style="font-size:1.36rem"><a class="wp-block-button__link has-base-color has-text-color has-background has-text-align-center wp-element-button" style="border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;background-color:#5831f6"><strong><?php echo __( 'View plans', 'text-domain' ); ?></strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
El marcado es esencialmente el mismo que en el ejemplo anterior. Sólo hemos hecho dos cambios.
La URL de la imagen del marcador de posición se genera ahora mediante la funciónget_theme_file_uri:
<?php echo esc_url( get_theme_file_uri( 'assets/images/placeholder.jpg' ) ); ?>Por supuesto, primero debes colocar la imagen placeholder.jpg en la carpeta /assets/images de tu tema. La siguiente instrucción genera el texto que quieres traducir.
<?php echo __( 'View plans', 'text-domain' ); ?>Ahora, guarda tu archivo y crea una nueva entrada. Tu patrón de bloques debería aparecer en las categorías Destacados y Banners.
Eliminar Compatibilidad, Modificar Registro y Ocultar Patrones de Bloques
En algunos casos, es posible que quieras realizar acciones especiales en los patrones de bloque. Por ejemplo, es posible que quieras sustituir un patrón de bloque principal por un patrón de bloque propio o modificar el registro de una categoría en determinadas condiciones. Estas son las operaciones que puedes realizar.
1. Eliminar compatibilidad con todos los patrones de bloques del núcleo
En primer lugar, los desarrolladores de temas pueden eliminar la compatibilidad con los patrones de bloques del núcleo y proporcionar su propio conjunto de patrones. Para eliminar la compatibilidad con los patrones del núcleo, puedes utilizar la funciónremove_theme_support de esta forma:
remove_theme_support( 'core-block-patterns' );Se recomienda adjuntar la función remove_theme_support al hookafter_setup_theme .
2. Modificar el Registro de un patrón de bloque único
También puedes modificar el registro de un patrón de bloques concreto si quieres ofrecer una alternativa personalizada o no quieres que se utilice con tu tema.
La API de Patrones proporciona la funciónunregister_block_pattern para ello:
function my_theme_unregister_block_pattern() {
unregister_block_pattern( 'namespace/block-pattern-name' );
}
add_action( 'init', 'my_theme_unregister_block_pattern' );En caso de que también puedas modificar el registro de un patrón de bloques básico, utilizarás lo siguiente:
function my_theme_unregister_block_pattern() {
unregister_block_pattern( 'core/query-offset-posts' );
}
add_action( 'init', 'my_theme_unregister_block_pattern' );Utilizarás unregister_block_pattern con el hookinit.
3. Modificar el Registro de una Categoría de Patrones de Bloques
También puedes modificar el registro de una categoría de patrón mediante el hook de la función unregister_block_pattern_category en el hook init:
function my_theme_unregister_block_pattern_categories() {
unregister_block_pattern_category( 'pattern-category-name' );
}
add_action( 'init', 'my_theme_unregister_block_pattern_categories' );Crear y Compartir Patrones de Bloques con el Creador de Patrones
También puedes crear tus patrones y compartirlos con la comunidad con una herramienta gratuita en online: El Creador de Patrones.
Si tienes una cuenta de WordPress.org, puedes acceder al Creador de Patrones desde el directorio de Patrones.
Una vez allí, haz clic en Crear nuevo patrón. Esto lanzará una versión específica del editor de bloques que puedes utilizar para crear tus patrones de bloques.
También puedes utilizar imágenes gratuitas alojadas en la biblioteca Openverse.
Cuando estés satisfecho con tus cambios, puedes guardar el borrador o enviar el patrón para su revisión.
A continuación, puedes volver al directorio Patrones y seleccionar Mis patrones. Allí encontrarás todos tus patrones en las tres pestañas correspondientes: Todos, Borradores y Pendientes de Revisión.
Cuando hayas terminado con tus ediciones, puedes compartir tu patrón con la comunidad. Haz clic en el botón Enviar de la esquina superior derecha del editor para enviar el patrón a revisión (asegúrate de seguir las directrices del patrón antes de enviarlo).
Resumen
WordPress ha cumplido 20 años, y las estadísticas nos dicen que sigue siendo el CMS más utilizado del mundo, con una cuota de mercado del 63,3% en mayo de 2023.
Estas cifras demuestran que WordPress es una excelente herramienta de publicación utilizada por miles de profesionales, desarrolladores y simples blogueros de todo el mundo.
Dedicar tiempo y recursos a adquirir nuevas habilidades en el desarrollo de WordPress y conocer funciones avanzadas como los bloques personalizados y los patrones de bloques podría ser una excelente inversión para tu carrera como vendedor, diseñador web o editor.
Y ahora depende de ti. ¿Has creado ya patrones de bloques? ¿Has compartido alguno con la comunidad? Nos encantaría ver tus creaciones. Deja un comentario con un enlace o tus ideas sobre los patrones de bloques.
