Nociones básicas para el constructor: cómo crear patrones de bloque

En el artículo, las nociones básicas del constructor el mes pasado, exploré los modelos de bloques: lo que son y cómo puedes usarlos. Aprendí que un modelo de bloque es simplemente una colección predefinida de bloques que forman un aspecto específico. Presenté el poder de los modelos y discutí cómo son una piedra angular del desarrollo moderno de los temas de WordPress. ¡Hoy aprenderemos a diseñar, distribuir y grabar nuestros propios modelos! Tenga en cuenta que este artículo usa el tema de veintisé veintiséis en todos sus ejemplos. Este tema basado en el bloque se ha lanzado con WordPress 5.9 y es un recurso fantástico, con más de 60 modelos de bloques.
Diseño del modelo La parte más difícil de crear un modelo de bloque es decidir cómo debería ser. Comencemos con algo relativamente simple: una cuadrícula de artículos, dos filas de tres. Podríamos usar este diseño para presentar diferentes servicios comerciales o características del producto. Consejo rápido: los modelos se pueden construir a partir de cualquier bloque, incluidos bloques de terceros. Sin embargo, si tiene la intención de distribuir los modelos de un público en general, intente usar solo bloques básicos de WordPress; de esta manera, el usuario no tiene que instalar complementos adicionales para usar sus diseños.
Para mí, el diseño del modelo comienza en el editor. Si bien los modelos se pueden hacer a mano, es mucho más fácil hacer las cosas visualmente. Comenzaré agregando una columna con tres columnas para la primera fila de la cuadrícula. Luego agregue bloques de título, párrafo y botones a cada columna. Duplicar el bloque de columnas para crear la segunda fila de cuadrícula. Finalmente, aplicaré algunas configuraciones de estilo y empacaré ambas columnas en un grupo con un color de fondo. El resultado se ve así: ¡puedes ver los 33 bloques que componen este diseño en la captura de pantalla de arriba!

Si quiero crear una versión alternativa “oscura” de la cuadrícula, solo tengo que duplicar el diseño original y cambiar el estilo.
Si bien ambos modelos son relativamente simples, su creación desde cero puede ser aburrida. Poder compartir y/o guardar estos patrones de bloques ahorraría mucho tiempo. ¡Compartir un diseño compartir un modelo de diseño es fácil! Supongamos que desea mover el diseño a otra página en su sitio web o tal vez en otro sitio web. Es igual de simple copiar y pegar la marca de bloque. Hay varias formas de lograr esto.

Si el modelo está contenido en un bloque de “contenedor”, como un grupo, cubierta o columnas, seleccione el contenedor exterior y use el menú de herramientas para seleccionar “Copiar”. La marca del bloque se copia en el portapapeles y puede pegarla en cualquier lugar.
Una segunda opción es usar el editor de código, al que puede acceder desde el panel de opciones.

El editor de códigos ofrece una representación visual de todas las marcas de bloque en la página o la publicación actual. Prefiero este método porque es fácil ver exactamente qué código está copiado. Registrar un modelo copiar y pegar los bloques de marcado podría ser fácil, pero a menudo queremos una versión más permanente de nuestros modelos. Para hacer esto, utilizaremos la API de patrones para “registrar” un modelo de bloque personalizado. Esto hace que nuestro diseño esté disponible tanto en el inserto como en el explorador de patrones en WordPress.

Para grabar un modelo, utilizamos el PHP Register_Block_Pattern (). Esta función acepta dos parámetros, un título y una matriz de propiedades. Antes de pasar por cada uno de ellos, veamos un ejemplo. Registre un fondo abierto. ‘,’ TextDomain ‘),’ Categoría ‘=> Array (‘ Presentado ‘,’ Colors ‘),’ Palabras clave ‘=> Array (‘ Funcion ‘,’ Grid ‘),,

‘ViewportWidth’ => 1400, ‘blockTypes’ => array (‘core/columns’), ‘content’ => ‘modelo contenido’)); Aquí grabamos el modelo de cuadrícula de funciones que hemos diseñado previamente. El título sigue un nombre para el espacio de nombre/título. Cuando registra más modelos en el mismo proyecto, es la mejor práctica para mantener el espacio de nombre de manera consistente. Solo se requieren el título y los parámetros de contenido de la matriz de propiedades desde un punto de vista técnico. Para Concise, el contenido del modelo se excluye en el ejemplo anterior. Sin embargo, este es el mismo código que copié y atascé en la sección anterior. Las categorías se establecen utilizando el campo de categoría, y un modelo puede tener más. En el editor, los modelos están organizados por categorías. Para las propiedades restantes, se proporciona un desglose fantástico en el manual del editor de bloques. Para grabar la función de la red con fondo oscuro, solo duplicar el código de registro y actualizar en consecuencia. Finalmente, empacamos ambas funciones como esta y colocamos todo en las funciones.php de nuestro tema. la función my_pattern_library_register Register_block_pattern (“Ejemplo/Grid-Function Coated, Matrix (…)); } add_action (‘init’, ‘ejemplo_register_block_patterns’); El código completo está disponible en una esencia en GitHub. Una vez que se agrega el código, nuestros modelos recién registrados ahora se mostrarán en Insert y Pattern Explorer.
Registrar una categoría de modelo cuando se trabaja con patrones personalizados a menudo es útil para colocarlos en categorías personalizadas. WordPress se simplifica con registro_block_pattern_category (). Esta función es similar a la que usé para grabar modelos. Todo lo que tiene que hacer es proporcionar un título de categoría y una serie de propiedades. Comenzando con WordPress 5.9, la etiqueta es la única propiedad aceptada, pero esperamos más en el futuro. Coloque este código en el archivo Functions.php de su base con los ejemplos de registro del modelo.
la función Ejemplo_register } add_action (‘init’, ‘ejemplo_register_block_pattern_categories’); Las categorías de modelos solo se mostrarán en el editor si tienen modelos asociados. Por lo tanto, si agregamos personalizados a los dos modelos de cuadrícula de características que hemos grabado anteriormente, la categoría “personalizada” aparecerá de la siguiente manera:
Cree un complemento para la biblioteca de modelos en las secciones anteriores, tenemos modelos registrados y una categoría de modelos colocando el código en las funciones.php de nuestro tema. Aunque funciona, no es ideal a largo plazo. ¿Supongo que tenemos que actualizar nuestro tema? ¿Quizás queremos usar los modelos en otro sitio web?

WordPress aún no ha proporcionado una solución nativa para administrar modelos personalizados, por lo que debemos buscar soluciones alternativas. Además, a menudo es preferible tener modelos en un formato más portátil. El mejor enfoque que encontré es crear un complemento simple de WordPress para almacenar mi colección de modelos personalizados. Los arados proporcionan la máxima versatilidad y son un tema agnóstico. Le mostraré cómo crear su propio complemento de biblioteca de modelos en los próximos pasos. Consejo rápido: si desea omitir los siguientes pasos, hemos preparado un complemento completo de “mi biblioteca de patrones” que debería proporcionar un excelente punto de partida para su propia biblioteca. El código está disponible como una esencia en GitHub. Paso 1: se instala antes de comenzar a construir el complemento, necesitará una versión funcional de WordPress y un editor de texto de alguna variedad. Recomiendo localmente para crear instalaciones locales de WordPress y las he estado usando exclusivamente durante muchos años. Utilizo Atom para editar el texto, pero hay muchas opciones excelentes. Incluso el editor de texto básico que viene con su sistema operativo funcionará. Configure un sitio local de WordPress utilizando una aplicación local o similar. Asegúrese de que WordPress se actualice a la versión 5.9 o superior. Los modelos funcionarán en 5.5+, pero es mejor usar siempre la última versión de WordPress siempre que sea posible. Paso 2:

Cree el complemento que sea el siguiente que debe hacer es crear la “base” del complemento. Si eres nuevo en el desarrollo de complementos, no tengas miedo. Suena más desalentador de lo que es. Navegue al Director WP-Content → complementos desde su instalación local de WordPress y cree un nuevo director titulado My-Pattern-Library. Puedes nombrar al director lo que quieras. Reemplace “biblioteca-mi patrón” con su nombre personalizado en todos los próximos pasos. En el nuevo director de contenido WP → complementos → my-pattern-bibrary, cree un archivo php titulado My-Pattern-Library.php. Abra el archivo al editor de texto y agregue el siguiente comentario para el encabezado del complemento en la parte superior del archivo. Recuerda al líder <? Php. Tenga en cuenta que he simplificado el encabezado para este tutorial. <? Php /** * Nombres de complementos: mi biblioteca de modelos * Descripción: una biblioteca simple de patrones de bloque. * Versión: 0.1.0 * Requiere al menos: 5.8 * Requiere Php: 7.0 * Autor: Su nombre * Licencia: LPL V2 o una versión posterior * Dominio de texto: My-Pattern-Library */ Siéntase libre de cambiar la información en el encabezado como piensas correctamente. Luego guarde el archivo. Ahora tiene un complemento de WordPress completamente funcional. Confirme que sea visible en la página del complemento de administración y haga clic en "Habilitar". Debería verse así.
Aunque ahora tiene un complemento funcional, no hace nada.Cambiemos eso.Paso 3: Grabar modelos y categorías En este paso final, todo lo que tiene que hacer es copiar el código de registro del modelo y la categoría de modelo desde el comienzo de este artículo hasta el nuevo complemento.Anteriormente hemos colocado este código en el archivo Functions.php del tema.Ahora, pégalo debajo del comentario del encabezado al archivo my-patern-library.php.Guarde el archivo y luego explore el editor en WordPress.Abra Insertar, haga clic en la pestaña Patrones y elija la categoría personalizada.Debería ver los dos modelos registrados por el complemento.