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 funciones 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 de bloques preconstruidos 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.
Por defecto, WordPress proporciona unos cuantos patrones de bloques integrados para que elijas al crear tu contenido. Además, los temas de bloques suelen proporcionar más patrones de bloques que puedes añadir a tu contenido directamente desde el insertador de bloques.
Por ejemplo, el tema predeterminado actual, Twenty Twenty-Three, proporciona los siguientes patrones de bloque:
- Llamada a la acción
- Pie de página predeterminado
- 404 oculto
- Comentarios ocultos
- Contenido oculto sin resultados
- Meta del post
Y no estás limitado a los patrones proporcionados por WordPress o tu tema.
En primer lugar, encontrarás montones de patrones de bloques listos para usar en el directorio de Patrones oficial de WordPress.
Además, puedes crear un número ilimitado de patrones personalizados utilizando la API de Patrones o las herramientas de edición disponibles en el editor de bloques. Puedes utilizar patrones personalizados internamente en tu sitio web, exportarlos a otros sitios web o compartirlos públicamente en el directorio 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.
¿Te preguntas cómo funciona este sistema y cómo aprovechar las nuevas funciones de edición añadidas a WordPress 6.3? Profundicemos en ello.
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 personalizarás in situ, cambiando imágenes, texto, estilos o añadiendo/eliminando elementos.
Los patrones de bloques son reutilizables, lo que significa que una vez que hayas creado tu 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 preconstruidos desde la pestaña Patrones del Insertador de Bloques, navegar a la sección de administración de Patrones en el Editor de Sitios, o al directorio de Patrones mediante el botón Explorar todos los patrones del Insertador de Bloques.
Encontrarás montones de patrones en la pestaña Patrones del insertador de bloques, o explora la biblioteca de Patrones de Bloques directamente desde la interfaz del editor.
También puedes visitar el sitio web de Block Pattern, elegir un patrón y hacer clic en Copiar.
Una vez que hayas copiado un patrón, pégalo en tu contenido y ya está.
Puedes personalizar el grupo de bloques incluidos en el patrón sin que ello afecte al patrón registrado ni a ninguna instancia adicional del mismo en tu sitio web.
Patrones de Bloques Personalizados
Como hemos mencionado antes, con WordPress 6.3 el sistema de patrones se ha simplificado 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 estándar
La diferencia entre los dos tipos de patrones es que todos los cambios realizados en un patrón sincronizado se aplicarán a todas las apariciones de ese bloque en todo tu sitio web.
Por el contrario, los cambios realizados en un patrón de bloques estándar (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 bloques personalizados se registran en la base de datos de WordPress como tipos de entrada personalizados de wp_block, y un metacampo de wp_block_sync_status almacena el estado de sincronización de un patrón.
wp_block_sync_status se utiliza para almacenar el estado de sincronización de un patrón de bloques
Gracias 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/bloque reutilizable 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, un botón y un par de espaciadores.
Cuando hagas clic en Crear patrón/bloque reutilizable, se te pedirá que introduzcas un nombre para tu patrón y que decidas si se trata de un patrón sincronizado o no sincronizado.
Y ya está. Ahora tu patrón sincronizado aparece 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 nueva entrada y añade dos patrones de bloque, uno sincronizado y otro estándar. Luego ve al editor de código y comprueba el código.
El bloque sincronizado se genera con el siguiente código:
<!-- wp:block {"ref":94} /-->WordPress buscará la entrada con el ID 94 para generar el HTML que se mostrará en la pantalla.
El bloque estándar (no sincronizado) no se identifica con un ID. En este caso, el editor de código contiene todo el marcado de los bloques que componen 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.
En el Insertador de bloques, los patrones de bloques personalizados aparecen en dos pestañas separadas. Los patrones estándar aparecen en la pestaña Patrones, en la categoría Mis patrones.
Los patrones sincronizados aparecen en la pestaña Patrones sincronizados (antes Bloques reutilizables).
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 Patrones de bloque. 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 Gestionar Mis patrones en el insertador de Bloques.
- Haciendo clic en el botón Gestionar Todos mis patrones en el editor del sitio.
Una vez allí, puedes
- Editar, Eliminar o Exportar tu patrón como JSON,
- Importar patrones desde JSON,
- Crear nuevos patrones.
Todos los cambios en un patrón sincronizado se aplicarán a todas las apariciones de ese patrón en todo tu sitio web, independientemente de la página de administración en la que se realicen los cambios.
Partes de Plantilla
Antes de la era Gutenberg, las plantillas y temas de WordPress se construían principalmente en PHP. Un conocimiento sólido de los temas hijo, la jerarquía de plantillas y los principales lenguajes de desarrollo front-end eran requisitos básicos para crear o personalizar plantillas. Pero las cosas cambiaron con la introducción de los temas de bloques.
En los temas por bloques y en los temas clásicos que han optado por esta función, puedes crear o personalizar fácilmente una plantilla o una parte de plantilla con facilidad 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.
Pero a diferencia de los bloques, las partes de plantilla están pensadas para áreas del sitio que no cambian con frecuencia.
Diferencias entre Patrones Preconstruidos, Patrones Personalizados 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 predefinidos 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.
Pero WordPress también ofrece otras formas de crear patrones de bloques para los desarrolladores de temas y plugins.
Junto con la función de patrones de bloques, WordPress 5.5 introdujo una nueva API para que los desarrolladores puedan «crear bloques de contenido prediseñados 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.
A partir de 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 WordPress 6.2, se han añadido nuevas categorías de patrones y se han modificado algunas categorías existentes. En el momento de escribir esto, puedes utilizar las siguientes categorías incorporadas:
- Destacados (
featured) - Entradas (
posts) - Texto (
text) - Galería (
gallery) - Llamada a la acción (
call-to-action) - Banners (
banner) - Encabezados (
header) - Pie de página (
footer) - Equipo (
team) - Testimonios (
testimonials) - Servicios (
services) - Portfolio (
portfolio) - Medios (
media)
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ón register_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 de 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 ayuda register_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 recibe 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.
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' => '<!-- wp:paragraph --><p>My awesome block pattern</p><!-- /wp:paragraph -->'
)
);
}
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 entradas. 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 un nuevo post (o tipo de post personalizado), 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. Siéntete libre de jugar con las propiedades de los patrones para personalizar tus patrones de bloques.
Ahora vamos a profundizar un poco más e intentar construir un patrón de bloques del mundo real.
Un Ejemplo Real de Patrón de Bloques
Supón 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 un array 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 al contenedor de tu patrón de bloques.
Para ello, debes crear un nuevo grupo con el atributo className:
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 ha mencionado 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 el root de tu tema.
Digamos que quieres registrar implícitamente el mismo patrón de bloques construido en la sección anterior en tu tema de bloques. En este ejemplo, utilizaremos 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 haber colocado 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 un nuevo post. Tu patrón de bloques debería aparecer en las categorías Destacados y Banners.
Eliminar Soporte, Anular Registro y Ocultar Patrones de Bloque
En algunos casos, puede que quieras realizar acciones especiales en los patrones de bloques. Por ejemplo, puedes querer sustituir un patrón de bloques principal por un patrón de bloques propio o anular el registro de una categoría en determinadas condiciones. Estas son las operaciones que puedes realizar.
1. Eliminar la Compatibilidad con Todos los Principales Patrones de Bloques
En primer lugar, los desarrolladores de temas pueden eliminar la compatibilidad con los patrones de bloques principales y proporcionar su propio conjunto de patrones. Para eliminar la compatibilidad con los patrones principales, 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 hook after_setup_theme.
2. Anular el Registro de un Único Patrón de Bloques
También puedes anular el registro de un patrón de bloques concreto en caso de que quieras proporcionar una alternativa personalizada o no quieras que se utilice con tu tema.
La API de Patrones proporciona la función unregister_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 anular 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 hook init.
3. Anular el Registro de una Categoría de Patrón de Bloque
También puedes anular el registro de una categoría de patrón, introduciendo 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 online gratuita: The Pattern Creator.
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.
Deja una respuesta