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.