Cómo crear patrones de tema de bloque en WordPress 6.0

Patrones de bloque, también conocido frecuentemente como (secciones), fueron introducidos en WordPress 5.5 para permitir a los usuarios crear y compartir diseños de bloques predefinidos en el directorio de patrones. El directorio es el hogar de una amplia gama de patrones seleccionados diseñados por la comunidad de WordPress. Estos patrones están disponibles en un formato simple de copiar y pegar, no requieren conocimientos de codificación y, por lo tanto, son un gran ahorro de tiempo para los usuarios.

A pesar de la gran cantidad de artículos sobre patrones, faltan artículos completos y actualizados sobre la creación de patrones que cubran las funciones mejoradas más recientes. Este artículo tiene como objetivo llenar el vacío con un enfoque en las funciones mejoradas recientes, como la creación de patrones sin registro, y ofrece una guía paso a paso actualizada para crearlos y usarlos en temas de bloque para autores novatos y experimentados.

Desde el lanzamiento de WordPress 5.9 y del Veintidós (TT2) tema predeterminado, ha proliferado el uso de patrones de bloque en temas de bloque. he sido un gran fan de patrones de bloque y los he creado y usado en mis temas de bloque.

El nuevo WordPress 6.0 ofrece tres patrones principales presentan mejoras para los autores:

• Permitir el registro de patrones a través de /patterns carpeta (similar a /parts, /templatesy /styles registro).
• Registro de patrones desde el directorio público de patrones usando el theme.json.
• Adición de patrones que se pueden ofrecer al usuario al crear una nueva página.

En una introducción Explorando el vídeo de WordPress 6.0, Ann McCathy, enlace de productos de Automattic, destaca algunas funciones de patrones recientemente mejoradas (a partir de las 15:00) y analiza los planes futuros de mejora de patrones, que incluyen patrones como elementos de sección, brindando opciones para elegir patrón en la creación de la página, integrando la búsqueda de directorios de patrones y más.

Requisitos previos

El artículo asume que los lectores tienen un conocimiento básico de la interfaz de edición completa del sitio (FSE) de WordPress y los temas de bloque. los Manual del editor de bloques y Edición del sitio completo El sitio web proporciona las guías de tutoriales más actualizadas para aprender todas las funciones de FSE, incluidos los temas y patrones de bloques que se analizan en este artículo.

Sección 1: Enfoques en evolución para crear patrones de bloques

El enfoque inicial para crear patrones de bloques requería el uso de la API de patrones de bloques, ya sea como un complemento personalizado o registrado directamente en el functions.php archivo para agrupar con un tema de bloque. El recién lanzado WordPress 6.0 introdujo varias características nuevas y mejoradas que trabajan con patrones y temas, incluido el registro de patrones a través de un /patterns carpeta y una patrón de creación de página modal.

Como información general, primero repasemos brevemente cómo evolucionó el flujo de trabajo de registro de patrones desde el uso de la API de patrón de registro hasta la carga directa sin registro.

Ejemplo de caso de uso 1: veinte veintiuno

El valor por defecto Veinte veintiuno tema (TT1) y Tema de bloques TT1 (un hermano de TT1) muestra cómo se pueden registrar patrones de bloque en el tema functions.php. En el tema experimental TT1 Blocks, este sencillo patrón-de-bloque.php archivo que contiene ocho se añaden patrones de bloques a la functions.php como una include como se muestra aquí.

Un patrón de bloque personalizado necesita ser registrado usando el register_block_pattern función, que recibe dos argumentos: title (nombre de los patrones) y properties (una matriz que describe las propiedades del patrón).

Aquí hay un ejemplo de registro de un patrón de párrafo simple "Hola mundo" de este Artículo Modelador de temas:

register_block_pattern( 'my-plugin/hello-world', array( 'title' => __( 'Hello World', 'my-plugin' ), 'content' => "<!-- wp:paragraph -->n<p>Hello World</p>n<!-- /wp:paragraph -->", )
);

Después del registro, el register_block_pattern() La función debe llamarse desde un controlador adjunto al init gancho como se describe esta página.

 function my_plugin_register_my_patterns() { register_block_pattern( ... ); } add_action( 'init', 'my_plugin_register_my_patterns' );

Una vez que se registran los patrones de bloques, son visibles en el editor de bloques. Documentación más detallada se encuentra en este Registro de patrón de bloques.

Propiedades del patrón de bloque

Además de lo requerido title y content propiedades, el manual del editor de bloques enumera los siguientes opcionales propiedades del patrón:

• title (requerido): Un título legible por humanos para el patrón.
• content (requerido): Bloquear marcado HTML para el patrón.
• description (opcional): un texto visualmente oculto que se usa para describir el patrón en el insertador. Una descripción es opcional, pero se recomienda enfáticamente cuando el título no describe completamente lo que hace el patrón. La descripción ayudará a los usuarios a descubrir el patrón mientras buscan.
• categories (opcional): Una matriz de categorías de patrones registrados que se utiliza para agrupar patrones de bloques. Los patrones de bloques se pueden mostrar en varias categorías. Una categoría debe registrarse por separado para poder usarse aquí.
• keywords (opcional): una matriz de alias o palabras clave que ayudan a los usuarios a descubrir el patrón durante la búsqueda.
• viewportWidth (opcional): un número entero que especifica el ancho previsto del patrón para permitir una vista previa escalada del patrón en el insertador.
• blockTypes (opcional): una matriz de tipos de bloques con los que se pretende utilizar el patrón. Cada valor debe ser el del bloque declarado. name.
• inserter (opcional): Por defecto, todos los patrones aparecerán en el insertador. Para ocultar un patrón de modo que solo se pueda insertar mediante programación, configure el inserter a false.

El siguiente es un ejemplo de fragmentos de código de complemento de patrón de comillas tomados del WordPress Blog.

/*
Plugin Name: Quote Pattern Example Plugin
*/ register_block_pattern( 'my-plugin/my-quote-pattern', array( 'title' => __( 'Quote with Avatar', 'my-plugin' ), 'categories' => array( 'text' ), 'description' => _x( 'A big quote with an avatar".', 'Block pattern description', 'my-plugin' ), 'content' => '<!-- wp:group --><div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --><!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --><div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/></figure></div><!-- /wp:image --><!-- wp:quote {"align":"center","className":"is-style-large"} --><blockquote class="wp-block-quote has-text-align-center is-style-large"><p>"Contributing makes me feel like I'm being useful to the planet."</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote><!-- /wp:quote --><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --></div></div><!-- /wp:group -->', )
);

Uso de patrones en un archivo de plantilla

Una vez que se crean los patrones, se pueden usar en un archivo de plantilla de tema con el siguiente marcado de bloque:

<!-- wp:pattern {"slug":"prefix/pattern-slug"} /-->

Un ejemplo de este repositorio de GitHub muestra el uso de “footer-with-background” patrón babosa con “tt2gopher” prefijo en el tema de bloques TT2 Gopher.

Los primeros usuarios de los temas de bloque y el complemento de Gutenberg también aprovecharon los patrones en los temas clásicos. El valor por defecto Veinte veinte y mis temas favoritos de Eksell (un Sitio de demostración aquí) son buenos ejemplos que muestran cómo se pueden agregar características de patrones a los temas clásicos.

Ejemplo de caso de uso 2: veinte veintidós

Si un tema incluye solo unos pocos patrones, el desarrollo y el mantenimiento son bastante manejables. Sin embargo, si un tema de bloque incluye muchos patrones, como en el tema TT2, entonces el pattern.php El archivo se vuelve muy grande y difícil de leer. El tema TT2 predeterminado, que incluye más de 60 patrones, muestra un flujo de trabajo de registro de patrones refactorizado estructura que es más fácil de leer y mantener.

Tomando ejemplos del tema TT2, analicemos brevemente cómo funciona este flujo de trabajo simplificado.

2.1: Registro de categorías de patrones

Para fines de demostración, creé un tema secundario TT2 y lo configuré en mi sitio de prueba local con contenido ficticio. Después de TT2, me registré footer-with-background y agregado a la siguiente lista de matrices de categorías de patrones en su block-patterns.php archivo.

/**
* Registers block patterns and categories.
*/
function twentytwentytwo_register_block_patterns() { $block_pattern_categories = array( 'footer' => array( 'label' => __( 'Footers', 'twentytwentytwo' ) ), 'header' => array( 'label' => __( 'Headers', 'twentytwentytwo' ) ), 'pages' => array( 'label' => __( 'Pages', 'twentytwentytwo' ) ), // ... ); /** * Filters the theme block pattern categories. */ $block_pattern_categories = apply_filters( 'twentytwentytwo_block_pattern_categories', $block_pattern_categories ); foreach ( $block_pattern_categories as $name => $properties ) { if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( $name ) ) { register_block_pattern_category( $name, $properties ); } } $block_patterns = array( 'footer-default', 'footer-dark', 'footer-with-background', //... 'header-default', 'header-large-dark', 'header-small-dark', 'hidden-404', 'hidden-bird', //... ); /** * Filters the theme block patterns. */ $block_patterns = apply_filters( 'twentytwentytwo_block_patterns', $block_patterns ); foreach ( $block_patterns as $block_pattern ) { $pattern_file = get_theme_file_path( '/inc/patterns/' . $block_pattern . '.php' ); register_block_pattern( 'twentytwentytwo/' . $block_pattern, require $pattern_file ); }
}
add_action( 'init', 'twentytwentytwo_register_block_patterns', 9 );

En este ejemplo de código, cada patrón enumerado en el $block_patterns = array() es llamado por foreach() función que requires una patterns archivo de directorio con el nombre del patrón enumerado en la matriz que agregaremos en el siguiente paso.

2.2: Agregar un archivo de patrón al /inc/patterns carpeta

A continuación, deberíamos tener todos los archivos de patrones enumerados en el $block_patterns = array(). Aquí hay un ejemplo de uno de los archivos de patrón, footer-with-background.php:

/** * Dark footer wtih title and citation */
return array( 'title' => __( 'Footer with background', 'twentytwentytwo' ), 'categories' => array( 'footer' ), 'blockTypes' => array( 'core/template-part/footer' ), 'content' => '<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"spacing":{"padding":{"top":"var(--wp--custom--spacing--small, 1.25rem)","bottom":"var(--wp--custom--spacing--small, 1.25rem)"}}},"backgroundColor":"background-header","textColor":"background","layout":{"inherit":true}} --> <div class="wp-block-group alignfull has-background-color has-background-header-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--custom--spacing--small, 1.25rem);padding-bottom:var(--wp--custom--spacing--small, 1.25rem)"><!-- wp:paragraph {"align":"center"} --> <p class="has-text-align-center">' . sprintf( /* Translators: WordPress link. */ esc_html__( 'Proudly powered by %s', 'twentytwentytwo' ), '<a href="' . esc_url( __( 'https://wordpress.org', 'twentytwentytwo' ) ) . '" rel="nofollow">WordPress</a> | a modified TT2 theme.' ) . '</p> <!-- /wp:paragraph --></div> <!-- /wp:group -->',
);

Hagamos referencia al patrón en el footer.html parte de la plantilla:

<!-- wp:template-part {"slug":"footer"} /-->

Esto es similar a agregar partes de encabezado o pie de página en un archivo de plantilla.

Los patrones se pueden agregar de manera similar a la parts/footer.html plantilla modificándola para hacer referencia a slug del archivo de patrón del tema (footer-with-background):

<!-- wp:pattern {"slug":"twentytwentytwo/footer-with-background"} /-->

Ahora bien, si visitamos el insertador de patrones del editor de bloques, el Footer with background debe estar disponible para nuestro uso:

La siguiente captura de pantalla muestra el pie de página recién creado con un patrón de fondo en el front-end.

Ahora que los patrones se han convertido en parte integral del tema de bloques, muchos patrones se agrupan en temas de bloques, como Plaza, Semilla, Mayland, Zoólogo, Geólogo — siguiendo el flujo de trabajo discutido anteriormente. Aquí hay un ejemplo del tema Quadrat /inc/patterns carpeta con un registro de patrón de bloque archivo y lista de archivos con fuente de contenido y encabezado de patrón requerido dentro de return array() función.

Sección 2: Creación y carga de patrones sin registro

Tenga en cuenta que esta función requiere la instalación de WordPress 6.0 o el complemento Gutenberg 13.0 o superior en su sitio.

Este nueva característica de WordPress 6.0 permite el registro de patrones a través de archivos y carpetas estándar – /patterns, trayendo convenciones similares como /parts, /templatesy /styles.

El proceso, como también se describe en esta taberna WP artículo, implica los siguientes tres pasos:

• creando una carpeta de patrones en la raíz del tema
• agregar encabezado de patrón de estilo de complemento
• contenido de origen del patrón

A continuación se muestra un marcado de encabezado de patrón típico, tomado del artículo:

<?php
/**
* Title: A Pattern Title
* Slug: namespace/slug
* Description: A human-friendly description.
* Viewport Width: 1024
* Categories: comma, separated, values
* Keywords: comma, separated, values
* Block Types: comma, separated, values
* Inserter: yes|no
*/
?>

Como se describe en la sección anterior, sólo Title y Slug los campos son obligatorios y otros campos son opcionales.

Haciendo referencia a ejemplos de temas lanzados recientemente, refactoricé el registro de patrones en este TT2 Gopher Bloques tema de demostración, preparado para un artículo anterior sobre CSS-Tricks.

En los siguientes pasos, exploremos cómo un footer-with-background.php patrón registrado con PHP y usado en un footer.html la plantilla se refactoriza.

2.1: crea un /patterns carpeta en la raíz del tema

El primer paso es crear un /patterns carpeta en la raíz del tema TT2 Gopher y mueva el footer-with-background.php archivo de patrón para /patterns carpeta y refactor.

2.2: Agregar datos de patrones al encabezado del archivo

A continuación, cree los siguientes campos de registro de encabezado de patrón.

<?php
/**
* Title: Footer with background
* Slug: tt2gopher/footer-with-background
* Categories: tt2gopher-footer
* Viewport Width: 1280
* Block Types: core/parts/footer
* Inserter: yes
*/
?>
<!-- some-block-content /-->

Un archivo de patrón tiene un campo de título superior escrito como comentarios de PHP. Seguido por el bloque de contenido escrito en formato HTML.

2.3: Agregar contenido de patrón al archivo

Para la sección de contenido, copiemos los fragmentos de código dentro comillas simples (p.ej, '...') de la sección de contenido del footer-with-background y reemplazar el <!-- some-block-content /-->:

<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|foreground"}}},"spacing":{"padding":{"top":"35px","bottom":"30px"}}},"backgroundColor":"background-header","textColor":"foreground","className":"has-foreground","layout":{"inherit":true}} --> <div class="wp-block-group alignfull has-foreground has-foreground-color has-background-header-background-color has-text-color has-background has-link-color" style="padding-top:35px;padding-bottom:30px"><!-- wp:paragraph {"align":"center","fontSize":"small"} --> <p class="has-text-align-center has-small-font-size">Powered by WordPress | TT2 Gopher, a modified TT2 theme</p> <!-- /wp:paragraph --></div>
<!-- /wp:group -->

El fragmento de código completo del patterns/footer-with-background.php el archivo se puede ver aquí en GitHub.

Tenga en cuenta que la /inc/patterns y block-patterns.php en extras, no requerido en WordPress 6.0, e incluido solo con fines de demostración.

2.4: Hacer referencia al slug de patrones en la plantilla

Agregando lo anterior refactorizado footer-with-background.php patrón a footer.html plantilla es exactamente igual a la descrita en la sección anterior (Sección 1, 2.2).

Ahora, si vemos la parte del pie de página del sitio en un editor de bloques o el front-end de nuestro sitio en un navegador, se muestra la sección del pie de página.

Categorías y tipos de patrones Registro (opcional)

Para categorizar patrones de bloques, las categorías y tipos de patrones deben registrarse en el tema. functions.php archivo.

Consideremos un ejemplo de registrar categorías de patrones de bloques del tema TT2 Gopher.

Después del registro, los patrones se muestran en el insertador de patrones junto con los patrones principales predeterminados. Para agregar etiquetas de categoría específicas del tema en el insertador de patrones, debemos modificar los fragmentos anteriores agregando el espacio de nombres del tema:

/**
* Registers block categories, and type.
*/ function tt2gopher_register_block_pattern_categories() { $block_pattern_categories = array( 'tt2gopher-header' => array( 'label' => __( 'TT2 Gopher - Headers', 'tt2gopher' ) ), 'tt2gopher-footer' => array( 'label' => __( 'TT2 Gopher - Footers', 'tt2gopher' ) ), 'tt2gopher-page' => array( 'label' => __( 'TT2 Gopher - Page', 'tt2gopher' ) ), // ...
); /**
* Filters the theme block pattern categories.
*/
$block_pattern_categories = apply_filters( 'tt2gopher_block_pattern_categories', $block_pattern_categories ); foreach ( $block_pattern_categories as $name => $properties ) { if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( $name ) ) { register_block_pattern_category( $name, $properties ); }
}
add_action( 'init', 'tt2gopher_register_block_pattern_categories', 9 );

El footer-with-background el patrón es visible en los patrones insertados con su vista previa (si está seleccionada):

Este proceso simplifica enormemente la creación y visualización de patrones de bloques en temas de bloques. Está disponible en WordPress 6.0 sin usar el complemento de Gutenberg.

Ejemplos de temas sin registro de patrones

Los primeros usuarios ya han comenzado a usar esta característica en sus temas de bloque. Algunos ejemplos de los temas, que están disponibles en el directorio de temas, que cargan patrones sin registro se enumeran a continuación:

• Archaeo – 12 patrones
• Colgante – 13 patrones
• Remote – 11 patrones
• Skatepark – 10 patrones
• Stewart – 17 patrones
• Libro – 16 patrones
• Vanguardia – 14 patrones

Sección 3: Creación y uso de patrones con código bajo

El directorio de patrones oficiales contiene diseños creativos aportados por la comunidad, que se pueden copiar y personalizar como se desee para crear contenido. ¡Usar patrones con un editor de bloques nunca ha sido tan fácil!

Cualquier patrón del directorio en constante crecimiento también se puede agregar para bloquear temas con solo "copiar y pegar" o incluirlo en el theme.json archivo haciendo referencia a su directorio babosa patrón. A continuación, explicaré brevemente la facilidad con la que esto se puede lograr con una codificación muy limitada.

Adición y personalización de patrones desde el directorio de patrones

3.1: Copie el patrón del directorio a una página

Aquí, estoy usando este patrón de sección de pie de página por FirstWebGeek del directorio de patrones. Copié el patrón seleccionando el botón "Copiar patrón" y lo pegué directamente en una nueva página.

3.2: Realice la personalización deseadas

Hice solo algunos cambios en el color de las fuentes y el fondo de los botones. Luego copió todo el código de la Editor de código a un portapapeles.

Si no está familiarizado con el uso del editor de código, vaya a las opciones (con tres puntos, arriba a la derecha), haga clic en el botón Editor de código y copie el código completo desde aquí.

3.3: Crear un nuevo archivo en la carpeta /patrones

Primero, vamos a crear un nuevo /patterns/footer-pattern-test.php archivo y agregue la sección de encabezado de patrón requerida. Luego pegue el código completo (paso 3, arriba). El patrón se clasifica en el área de pie de página (líneas: 5), podemos ver el recién agregado en el insertador de patrón.

<?php /** * Title: Footer pattern from patterns library * Slug: tt2gopher/footer-pattern-test * Categories: tt2gopher-footer * Viewport Width: 1280 * Block Types: core/template-part/footer * Inserter: yes */
?> <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"100px","bottom":"70px","right":"30px","left":"30px"}}},"backgroundColor":"black","layout":{"contentSize":"1280px"}} -->
<div class="wp-block-group alignfull has-black-background-color has-background" style="padding-top:100px;padding-right:30px;padding-bottom:70px;padding-left:30px"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","textTransform":"uppercase"}},"textColor":"cyan-bluish-gray"} -->
<h2 class="has-cyan-bluish-gray-color has-text-color" style="font-style:normal;font-weight:700;text-transform:uppercase">lorem</h2>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px">One of the main benefits of using Lorem Ipsum is that it can be easily generated, and it takes the pressure off designers to create meaningful text. Instead, they can focus on crafting the best website data.</p>
<!-- /wp:paragraph --> <!-- wp:social-links {"iconColor":"vivid-cyan-blue","iconColorValue":"#0693e3","openInNewTab":true,"className":"is-style-logos-only","style":{"spacing":{"blockGap":{"top":"15px","left":"15px"}}}} -->
<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"#","service":"facebook"} /--> <!-- wp:social-link {"url":"#","service":"twitter"} /--> <!-- wp:social-link {"url":"#","service":"instagram"} /--> <!-- wp:social-link {"url":"#","service":"linkedin"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column --> <!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"typography":{"textTransform":"capitalize","fontStyle":"normal","fontWeight":"700","fontSize":"30px"}},"textColor":"cyan-bluish-gray"} -->
<h4 class="has-cyan-bluish-gray-color has-text-color" style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Contact Us</h4>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1.2"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1.2">123 BD Lorem, Ipsum<br><br>+123-456-7890</p>
<!-- /wp:paragraph --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1">sample@gmail.com</p>
<!-- /wp:paragraph --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1">Opening Hours: 10:00 - 18:00</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --> <!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"typography":{"fontSize":"30px","fontStyle":"normal","fontWeight":"700","textTransform":"capitalize"}},"textColor":"cyan-bluish-gray"} -->
<h4 class="has-cyan-bluish-gray-color has-text-color" style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Newsletter</h4>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px">Lorem ipsum dolor sit amet, consectetur ut labore et dolore magna aliqua ipsum dolor sit</p>
<!-- /wp:paragraph --> <!-- wp:search {"label":"","placeholder":"Enter Your Email...","buttonText":"Subscribe","buttonPosition":"button-inside","style":{"border":{"width":"1px"}},"borderColor":"tertiary","backgroundColor":"background-header","textColor":"background"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

3.4: Ver el nuevo patrón en el insertador

Para ver los recién agregados Footer pattern from patterns library patrón, vaya a cualquier publicación o página y seleccione el ícono del insertador (símbolo más azul, arriba a la izquierda), y luego seleccione las categorías "TT2 Gopher - Pie de página". El patrón recién agregado se muestra en el panel izquierdo, junto con otros patrones de pie de página y su vista previa a la derecha (si se selecciona):

Registro de patrones directamente en theme.json presentar

En WordPress 6.0, es posible registrar cualquier patrón deseado desde el directorio de patrones con theme.json archivo con la siguiente sintaxis. los Estados de la nota de desarrollo 6.0, "el campo de patrones es una matriz de [babosas patrón] del directorio de patrones. Los slugs de patrones se pueden extraer mediante [URL] en la vista de patrón único en el Directorio de patrones”.

{ "version": 2, "patterns": ["short-text", "patterns-slug"]
}

Este Video corto de características de WordPress 6.0 demuestra cómo se registran los patrones en el /patterns (a las 3:53) y registrando los patrones deseados desde el director de patrones en un theme.json archivo (a las 3:13).

Luego, el patrón registrado está disponible en el cuadro de búsqueda del insertador de patrones, que luego está disponible para su uso al igual que la biblioteca de patrones de paquetes de temas.

{ "version": 2, "patterns": [ "footer-from-directory", "footer-section-design-with-3-column-description-social-media-contact-and-newsletter" ]
}

En este ejemplo, el patrón slug footer-section-design-with-3-column-description-social-media-contact-and-newsletter del desplegable ejemplo anterior está registrado a través de theme.json.

Modelo de patrón de creación de página

Como parte de "construyendo con patrones” iniciativas, WordPress 6.0 ofrece una opción modal de patrón a los autores de temas para agregar patrones de diseño de página en el tema de bloque, lo que permite a los usuarios del sitio seleccionar patrones de diseño de página (por ejemplo, una página acerca de, una página de contacto, una página de equipo, etc.) mientras crean una página. El siguiente es un ejemplo tomado de la nota de desarrollo:

register_block_pattern( 'my-plugin/about-page', array( 'title' => __( 'About page', 'my-plugin' ), 'blockTypes' => array( 'core/post-content' ), 'content' => '<!-- wp:paragraph {"backgroundColor":"black","textColor":"white"} --> <p class="has-white-color has-black-background-color has-text-color has-background">Write you about page here, feel free to use any block</p> <!-- /wp:paragraph -->', )
);

Esta característica está actualmente limitado al tipo de publicación de página solo y no para "Publicaciones Tipo de publicación", todavía.

El patrón de creación de página modal también se puede deshabilitar por completo eliminando el tipo de bloque posterior al contenido de todos los patrones. Un ejemplo de código de muestra está disponible aquí.

Puede seguir y participar en la discusión de GitHub desde los enlaces enumerados en la sección de recursos a continuación.

Usando el directorio de patrones para construir la página

Los patrones del directorio también se pueden usar para crear la publicación deseada o el diseño de página, similar a los creadores de páginas. los GutenbergHub equipo ha creado una aplicación experimental de creación de páginas en línea usando patrones directamente desde el directorio (video introductorio). Luego, los códigos de la aplicación se pueden copiar y pegar en un sitio, lo que simplifica enormemente el proceso de creación de diseño de página complejo sin codificación.

In este breve video, Jamie Marsland demuestra (en 1:30) cómo se puede usar la aplicación para crear un diseño de página completo similar al creador de páginas usando las secciones de página deseadas del directorio.

Terminando

Los patrones permiten a los usuarios recrear su diseño de contenido de uso común (p. ej., página principal, llamada, etc.) en cualquier página y reducir las barreras para presentar el contenido en estilos, lo que antes no era posible sin conocimientos de codificación. Al igual que el plugins y temas directorios, lo nuevo . El directorio ofrece a los usuarios opciones para usar una amplia gama de patrones de su elección del directorio de patrones, y escribir y mostrar contenido con estilo.

Es verdad que la los patrones de bloques lo cambiarán todo y seguramente este es un cambiador de juego característica en el panorama de temas de WordPress. Cuando todo el potencial de construyendo con patrones El esfuerzo está disponible, esto va a cambiar la forma en que diseñamos temas de bloques y creamos contenido hermoso incluso con conocimiento de código bajo. Para muchos diseñadores creativos, el directorio de patrones también puede proporcionar una vía adecuada para mostrar sus creatividad.

---

Recursos

WordPress 6.0

• Guía de campo de WordPress 6.0 (Núcleo de WordPress)
• Explorando WordPress 6.0: variaciones de estilo, interfaz de usuario de bloqueo de bloques, mejoras de escritura – Vídeo de 22 minutos (Anne McCarthy)
• Funciones de WordPress 6.0 en 4 minutos (David Smith)
• Novedades de WordPress 6.0: nuevos bloques, cambio de estilo, edición de plantillas, API de fuentes web y mucho más (Kinsta)

Creando patrones

• Introducción a los patrones de bloques. (Edición completa del sitio)
• Vídeo de introducción a los patrones de bloques, 14 minutos (Aprenda WordPress)
• Patrones de bloque (Manual del editor de bloques)
• ¿Entonces quieres hacer patrones de bloques? (Blog de WordPress)
• Cómo crear y compartir patrones de bloques de bajo código en WordPress (Ve papi)

Mejora de patrones (GitHub)

• Construyendo con patrones #38529
• Patrones como elementos de sección #39281
• Agregar: opción para elegir un patrón en la creación de la página. #40034
• Patrones de bloques para la creación de páginas. #38787
• Agregar: Opciones de inicio de página (plantillas y patrones) #39147

Artículos del blog

• Patrones de Gutenberg: el futuro de la creación de páginas en WordPress (Tabor rico)
• Uso de patrones de bloques para acelerar la creación de sitios de WordPress (Ve papi)
• Los patrones de bloques lo cambiarán todo (Taberna WP)

---

Cómo crear patrones de tema de bloque en WordPress 6.0 publicado originalmente el Trucos CSS. Debieras obtener el boletín.

• Coinsmart. El mejor intercambio de Bitcoin y criptografía de Europa.
• Platoblockchain. Inteligencia del Metaverso Web3. Conocimiento amplificado. ACCESO LIBRE.
• CriptoHawk. Radar de altcoins. Prueba gratis.
• Fuente: https://css-tricks.com/how-to-create-block-theme-patterns-in-wordpress-6-0/