Cambiar los colores por defecto de Gutenberg en WordPress

Si, cambiar los colores por defecto de Gutenberg en tu WordPress es posible y muy fácil.

Tener que seleccionar o ingresar el color hexadecimal en el editor cada vez que agregas un bloque es una tarea repetitiva y poco productiva.

Pero no te preocupes, la solución es sencilla y muy rápida.

Cambiar los colores por defecto de Gutenberg en WordPress

Para ingresar los siguientes códigos se aconseja tener un child theme o tema hijo.

Por defecto el editor tiene una paleta de 12 colores predefinidos y un enlace para elegir el color que quieras.

Para cambiar la paleta de colores y agregar solamente los que tu desees debes ingresar el siguiente código de ejemplo en el archivo functions.php de tu template.

add_theme_support( 'editor-color-palette', array(
    array(
        'name' => __( 'strong magenta', 'themeLangDomain' ),
        'slug' => 'strong-magenta',
        'color' => '#a156b4',
    ),
    array(
        'name' => __( 'light grayish magenta', 'themeLangDomain' ),
        'slug' => 'light-grayish-magenta',
        'color' => '#d0a5db',
    ),
    array(
        'name' => __( 'very light gray', 'themeLangDomain' ),
        'slug' => 'very-light-gray',
        'color' => '#eee',
    ),
    array(
        'name' => __( 'very dark gray', 'themeLangDomain' ),
        'slug' => 'very-dark-gray',
        'color' => '#444',
    ),
) );

Si, parece demasiado código, pero no te asustes que es muy simple. Como ves se declaran 4 colores, puedes editar cualquier código hexadecimal, voy a agregar por ejemplo el color azul oscuro:

array(
        'name' => __( 'azul oscuro', 'themeLangDomain' ),
        'slug' => 'azul-oscuro',
        'color' => '#0645ad',
    ),
Editor de colores de Gutenberg
Editor de colores de Gutenberg

Puedes quitar o agregar un array para modificar la cantidad de colores.

name es el nombre que le quieres poner al color y slug es una variable descriptiva del color y no puede tener espacios.

Ahora sólo falta agregar los colores en tu CSS.

Para esto ingresa las siguientes clases CSS en tu archivo style.css. WordPress automáticamente crea las clases .has-slug-background-color y .has-slug-color donde slug como comenté antes es el nombre único para ese color hexadecimal. El siguiente ejemplo es para el color azul que he agregado antes:

.has-azul-oscuro-background-color {
background-color: #0645ad;
}
.has-azul-oscuro-color {
color: #0645ad;
}

Bonus: Eliminar la posibilidad de elegir un color personalizado.

Podría ser útil que quieras tener sólo los colores que has declarado y no poder elegir otro color personalizado.

Se me ocurre, que es muy útil si quieres limitar a un cliente o editor en el administrador de WordPress, para que no este eligiendo colores que no se corresponden con los colores de marca de la empresa.

Para hacer esto, nuevamente en el archivo functions.php pega el siguiente código:

add_theme_support( 'disable-custom-colors' );

Como puedes ver el editor de bloques de Gutenberg es muy customizable y con poco código. Existen más customizaciones que puede hacer, para profundizar en el tema puedes ver el artículo oficial de WordPress sobre la Customización de los Editores de Bloques.

Comparte: Te gusto o te ha parecido útil este artículo? Considera compartirlo con tus amigos, me será de gran ayuda para seguir creciendo.

TwitterFacebookBufferLinkedInWhatsAppPin It

Deja un comentario