Aunque el propósito de este curso es explicar al usuario final la función de patrón de bloques y proporcionar un procedimiento sencillo para que pueda él mismo crear sus patrones de bloques, es necesario hablar en esta lección de código.
Sin embargo, hay que aclarar algo:
- Si eres usuario final y tu propósito es exclusivamente utilizar los patrones de bloques que vienen asociados con tu theme activo, puedes finalizar este curso en la lección 3. Has aprendido qué son los patrones de bloques e, incluso, su diferencia con los bloques reutilizables. Y emplear éstos para exportar e importar diseños hacia o desde otros servidores o instalaciones de WordPress. ¡Eso es fantástico!
- Si eres usuario final y tu propósito es crear tus propios patrones de bloques, a partir de los patrones de bloques existentes en tu theme activo y/u otros diseños que compongas; también puedes finalizar este curso en la lección 3 porque ya has aprendido a convertir diseños en bloques reutilizables y éstos a patrones de bloques.
- Si eres usuario final un poco más ambicioso o un usuario más avanzado, con conocimientos de PHP, HTML y CSS, que estás desarrollando un theme, por ejemplo; entonces puedes continuar con el curso, lecciones 4 y 5, porque te enseñaremos cómo crear patrones de bloques que vayan asociados a un theme.
El editor viene con una lista de patrones de bloques incorporados. Los autores de themes y plugins pueden registrar patrones de bloques personalizados adicionales utilizando la función "register_block_pattern". Fuente: Block Patterns
La función "register_block_pattern" recibe el nombre del patrón como primer argumento y un array que describe las propiedades del patrón como segundo argumento.
Las propiedades del patrón de bloque incluyen:
- title (obligatorio): un título legible por humanos para el patrón.
- content (obligatorio): contenido HTML sin formato para el patrón.
- description: Un texto visualmente oculto que se utiliza para describir el patrón en el insertador. La descripción es opcional, pero se recomienda encarecidamente cuando el título no describe completamente lo que hace el patrón..
- categories: Conjunto de categorías de patrones que se utilizan para agrupar patrones de bloques. Los patrones de bloques se pueden mostrar en varias categorías.
- keywords: una serie de alias o palabras clave que ayudan a los usuarios a descubrir el patrón mientras buscan.
- viewportWidth: Un número entero que especifica el ancho del patrón en el insertador.
register_block_pattern_category(
'Blogpocket Nineteen',
array( 'label' => __( 'Blogpocket Nineteen', 'blogpocket-nineteen' ) )
);
register_block_pattern(
'blogpocket-nineteen/nuestro-equipo',
[
'title' => __( 'Nuestro equipo' ),
'categories' => array( 'Blogpocket Nineteen' ),
"content" => "AQUÍ VA EL CÓDIGO",
]
);Con el código anterior se registró la categoría "Blogpocket Nineteen" y el patrón de bloques "Nuestro equipo" en el theme Blogpocket Sustie.
Estas instrucciones van dentro del archivo functions.php y, por supuesto, falta el código correspondiente al patrón de bloques.
Sustituye AQUÍ VA EL CÓDIGO por el código del patrón de bloques. El código debe quedar dentro de las comillas.
Para obtener el código del patrón de bloques, convierte el diseño a bloque reutilizable, haz clic en "Exportar como JSON" para descargar el archivo JSON correspondiente -desde la lista de patrones reutilizables- y ábrelo con un editor de código.
La figura 1 corresponde a un archivo JSON de un bloque reutilizable. El valor del parámetro content (sin las comillas) es el código que tienes que copiar y llevarlo al parámetro content del registro del patrón de bloques, dentro de las comillas (sustituye AQUÍ VA EL CÓDIGO del parámetro content en el modelo de la función "register_block_pattern" vista al principio).
Obsérvese que el código ya lleva los caracteres escapados (una \ antes de las comillas).
Ese es el mecanismo para registrar patrones de bloques y añadirlos a la lista de patrones disponibles para usar, mediante el insertador de bloques del editor.