Registre un patrón de bloque en el editor de bloques de WordPress (Gutenberg)

Los patrones de bloques en el editor de bloques de WordPress (Gutenberg) son una característica poderosa que le permite crear diseños variados con muy poco esfuerzo.

Usando register_block_patternusted puede crear muy rápidamente un patrón de bloque para usted o sus clientes.

requisitos previos

• Instalación de WordPress
• Editor de código

Crea tu patrón de bloques

Usted crea patrones de bloques a partir de los bloques que ha registrado en su sitio. Estos pueden ser bloques principales o cualquier cantidad de bloques personalizados o de terceros.

Comience usando el editor de WordPress para crear un diseño de bloque. Puede usar la configuración para hacer esto tan complejo o tan simple como desee.

En este ejemplo, lo mantendremos simple y simplemente crearemos un patrón de bloque que se estructura de la siguiente manera:

• Bloque de grupo
  • Bóveda
  • Párrafo
  • columnas
    • columna 1
      • Bóveda
      • Párrafo
    • columna 2
      • Bóveda
      • Párrafo

Una vez que haya creado su patrón de bloques, simplemente copie el código que se generó para usted.

Copie el código de patrón de bloque

Para hacer esto, vaya a los tres puntos en la parte superior derecha del editor (etiquetados como Opciones) y seleccione ‘Editor de código’. Esto mostrará el HTML detrás del patrón de bloque que acaba de crear.

Copie este código en su portapapeles.

Registre el patrón de bloque

Pegue este código del editor de bloques en su editor de código. Si no está seguro de dónde, puede usar el functions.phpde su tema.

Asegúrese de pasarlo a una variable colocando comillas simples (') alrededor del texto pegado, así:

$block_pattern_content = '
<div class="wp-block-group"><div class="wp-block-group__inner-container">
<h2>Example Block Pattern</h2>

<p>Lorem ipsum dolor sit amet labore cras venenatis.</p>

<div class="wp-block-columns">
<div class="wp-block-column">
<h3>Sub Heading 1</h3>

<p>Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.</p>
</div>

<div class="wp-block-column">
<h3>Sub Heading 2</h3>

<p>Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.</p>
</div>
</div>
</div></div>
';

Es posible que deba escapar algunos caracteres, según la complejidad de su patrón de bloque.

A continuación, debemos pasar esto a la register_block_patternfunción:

register_block_pattern(
    'wholesomecode/example-block-pattern',
    [
        'categories'    => [
            'text',
        ],
        'content'       => $block_pattern_content,
        'description'   => 'An example block pattern',
        'keywords'      => 'example',
        'title'         => 'Example Block Pattern',
        'viewportWidth' => 800,
    ],
);

Eso es todo, el patrón de bloque está registrado.

rompiendoregister_block_pattern

• Espacio de nombres: (wholesomecode/example-block-pattern) es el espacio de nombres del patrón de bloque. Asegúrese de que esto sea único para su patrón de bloques. Si alguna vez necesitamos cancelar el registro del patrón de bloque, esta es la cadena que necesitaremos.
• Categorías: esta es la categoría de patrón de bloque en la que aparecerá el patrón de bloque cuando insertemos nuestro patrón de bloque. También podemos añadir nuestras propias categorías.
• Contenido: este es HTML que genera el patrón de bloque. Este ejemplo usa la variable que creamos desde el editor.
• Descripción: una descripción del patrón de bloque.
• Palabras clave: palabras clave que se pueden usar para buscar el patrón de bloque.
• Título: el título del patrón de bloque.
• Ancho de ventana gráfica: la ventana gráfica del patrón de bloque, utilizada para el área de vista previa.

Insertar el patrón de bloque

Para insertar el patrón de bloque, simplemente use el signo más en la parte superior izquierda del editor y seleccione patrones de bloque.

Seleccione la categoría en la que registró su patrón y debería aparecer.

Inserción del patrón de bloques

Alternativamente, puede buscar por las palabras clave que registró.

Para registrar una categoría de bloque, simplemente use la register_block_pattern_categoryfunción.

register_block_pattern_category(
    'my-client',
    [
        'label' => esc_html__( 'My Client Patterns', 'wholesome-plugin' ),
    ]
);

Luego puede usar la categoría que acaba de registrar en su código de patrón de bloque, así:

register_block_pattern(
    'wholesomecode/example-block-pattern',
    [
        'categories'    => [
            'my-client',
        ],
        'content'       => $block_pattern_content,
        'description'   => 'An example block pattern',
        'keywords'      => 'example',
        'title'         => 'Example Block Pattern',
        'viewportWidth' => 800,
    ],
);

Ahora, cuando encuentre su patrón de bloque, se ubicará en su categoría personalizada:

Categoría de patrón de bloque personalizado

Ahora puede agrupar todos los patrones de bloques personalizados que acaba de crear para su cliente en un solo lugar.

• ¿Necesitas algo más estático? Intente registrar una plantilla de bloque en su lugar
• ¿Necesita algo que se aplique a los bloques para niños? Intente registrar una plantilla de InnerBlocks