Protege tu diseño en Gutenberg

Codigo-Gutenberg

Impide que tus clientes puedan cambiar los colores de tu diseño.

Para asegurarnos de que nuestros clientes no puedan aprovechar las facilidades de Gutenberg y que se pongan a trastear con los colores del sitio, vamos a realizar unos sencillos ajustes de código para que los clientes solo puedan utilizar entre los dos o tres colores que definiste para el tema cuando lo diseñaste.

Lo primero que vamos a hacer es asegurarnos que los estilos que trae Gutenberg por defecto se cargan en nuestro sitio.

Para ello vamos a editar el functions.php y añadir  
add_theme_support('wp-block-styles'); 
dentro de la function MiTextDomain_setup() 
y que ejecutará con el hook 
add_action('after_setup_theme', 'MiTextDomain_setup');

También podemos añadir en la misma function
MiTextDomain_setup() soporte para definir los distintos tamaños de fuente que se utilizaran en el tema. 

Para ello agregaremos el siguiente código:

add_theme_support( 'editor-font-sizes', array(
    array(
        'name' => __( 'small', 'MiTextDomain' ),
        'shortName' => __( 'S', 'MiTextDomain' ),
        'size' => 12,
        'slug' => 'small'
    ),
    array(
        'name' => __( 'regular', 'MiTextDomain' ),
        'shortName' => __( 'M', 'MiTextDomain' ),
        'size' => 16,
        'slug' => 'regular'
    ),
    array(
        'name' => __( 'large', 'MiTextDomain' ),
        'shortName' => __( 'L', 'MiTextDomain' ),
        'size' => 36,
        'slug' => 'large'
    ),
    array(
        'name' => __( 'larger', 'MiTextDomain' ),
        'shortName' => __( 'XL', 'MiTextDomain' ),
        'size' => 48,
        'slug' => 'larger'
    ),
    array(
        'name' => __( 'xlarger', 'MiTextDomain' ),
        'shortName' => __( 'XXL', 'MiTextDomain' ),
        'size' => 70,
        'slug' => 'xlarger'
    )
) );

Ahora añadiremos soporte para que nuestro tema permita imágenes de ancho completo. Pondremos en el function.php, en la misma function MiTextDomain_setup() el siguiente código:

// Soporte para imágenes que ocupen la pantalla de extremo a extremo
add_theme_support('align-wide');

Ahora vamos con la limitación de los colores y desactivar la personalización de los colores.

En la misma function MiTextDomain_setup() , pondremos el siguiente código:

add_theme_support( 'editor-color-palette', array(
    array(
        'name'  => __( 'Azul', 'MiTextDomain' ),
        'slug'  => 'azul',
        'color' => '#25a5d5',
    ),
    array(
        'name'  => __( 'Verde', 'MiTextDomain' ),
        'slug'  => 'verde',
        'color' => '#82bd58',
    ),
    array(
        'name'  => __( 'Gris', 'MiTextDomain' ),
        'slug'  => 'gris',
        'color' => '#414141',
    ),
    array(
        'name'  => __( 'Blanco', 'MiTextDomain' ),
        'slug'  => 'blanco',
        'color' => '#FFFFFF',
    ),
) );

add_theme_support('disable-custom-colors');

Actualizaremos los estilos en el style.css o en el block.css si prefieres enlazarlo para tenerlo aparte

/** Colores **/
.has-azul-color {
    color: #25a5d5;
}
.has-azul-background-color {
    background-color: #25a5d5;
}
.has-verde-color {
    color: #82bd58;
}
.has-verde-background-color {
    background-color: #82bd58;
}
.has-gris-color {
    color: #414141;
}
.has-gris-background-color {
    background-color: #414141;
}
.has-blanco-color {
    color: #ffffff
}
.has-blanco-background-color {
    background-color: #ffffff;
}


/** Tamaño de Fuentes **/
.has-xlarger-font-size {
    font-size: 70px;
    line-height: 5rem;
}
.has-larger-font-size {
    line-height: 3.4rem;
}
.has-large-font-size {
    line-height: 2.8rem;
}
.has-drop-cap {
    padding-bottom: 60px;
}

Ya solo queda adaptar este código para que se ajuste a tus necesidades, cambia el nombre a los colores, los tamaños a las fuentes según te convenga. Adapta MiTextDomain a tu textDomain.


Este post es un resumen del curso de 
WordPress Introducción Practica a Gutenberg el Nuevo Editor .
Este es un curso gratuito de https://www.udemy.com/ impartido por 
Juan Pablo De la torre Valdez .

CONSULTA NUESTROS ÚLTIMOS POSTS. ESPERAMOS TUS COMENTARIOS


Sobre Francisco Silva

Llegado al mundo de WordPress de manera casual, me he reciclado desde mi profesión de la construcción y ahora, después de aprender de forma autodidacta, me dedico a hacer sitios Web s con WordPress.
Entusiasta de WordPress y su comunidad, participo en la las Meetups de Chiclana y Cádiz y soy miembro del equipo organizador de la Wordcamp de Chiclana.
De Cádiz. DKY - Spain