*

Crear un patrón para WordPress

Sin usar plugins tienes una manera sencilla de crear tu patrones. Comencemos:

  1. Crea el diseño en un post de wordpress.
    En el ejemplo usamos el bloque Medios y texto al que modificamos a nuestro gusto.

2. Cogemos su código HTML. Para ello, seleccionamos del menú superior (tres puntos verticales) Editor de código y seleccionamos el código que nuestro diseño.

3. Tenemos que «escaparlo» con alguna herramienta online. Pj. https://onlinestringtools.com/escape-string

4. Creamos el registro de patrones, para luego usarlo como plugin

register_block_pattern(
    'mis-patrones-de-bloques/medios-y-texto-con-boton-comprar',
    array(
        'title'   => __( 'Medios y texto con botón', 'mis-patrones-de-bloques' ),
        'content' => "PEGA-AQUÍ-EL-CÓDIGO-ESCAPADO",
    )
);

5. Por último, solo queda convertir el patrón en una función que añada el patrón al editor (pegando el código dentro de functions.php) o incluso en un plugin, como en el siguiente código:

<?php
/**
 * Plugin Name: Patrón de bloques de Medios y texto con botón Comprar
 * Description: Para añadir en tus post
 * Version: 1.0
 * Author: Yanez.pro
 */

/**
 * Registro de estilos de bloques personalizados
 */

function yaz_registra_patron_bloque_valores() {
    if ( function_exists( 'register_block_pattern' ) ) {
    /**
    * Registro del patrón de bloques
    */
register_block_pattern(
    'mis-patrones-de-bloques/mision-vision-valores-tres-columnas',
    array(
        'title'   => __( 'Medios y texto con botón de Comprar', 'mis-patrones-de-bloque' ),
        'content' => "<!-- wp:media-text {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile is-vertically-aligned-center\"><figure class=\"wp-block-media-text__media\"></figure><div class=\"wp-block-media-text__content\"><!-- wp:heading -->\n<h2></h2>\n<!-- /wp:heading -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"borderRadius\":3,\"backgroundColor\":\"luminous-vivid-amber\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-luminous-vivid-amber-background-color has-text-color has-background\" style=\"border-radius:3px\">Comprar</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div></div>\n<!-- /wp:media-text -->",
    )
);
add_action( 'init', 'yaz_registra_patron_bloque_valores' );

6. Creando un fichero nombre-patron.php con el código anterior y subiéndolo a mu-plugins estaría listo para ser usado.