Cómo cambiar el tamaño de fuente por defecto del editor Gutenberg en WordPress

En el editor de bloques de Gutenberg puedes elegir el tamaño del texto por defecto. ¿Sabías cambiar el tamaño de fuente por defecto de Gutenberg en WordPress? Si, es muy fácil de hacer y podrás tener más control sobre los bloques de WordPress.

Los bloques nos dan la posibilidad de configurar el tamaño de la fuente, además provee por defecto distintos tamaños, pero esto se puede editar y elegir el tamaño que quieras.

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

Es posible que tu template tenga configurado por defecto distintas fuentes.

Cambiar el tamaño de fuente por defecto de Gutenberg en WordPress

Para cambiar el tamaño de las fuentes por defecto y agregar solamente los que tu quieras puedes ingresar el siguiente código de ejemplo en el archivo functions.php de tu template.

add_theme_support( 'editor-font-sizes', array(
    array(
        'name' => __( 'Small', 'themeLangDomain' ),
        'size' => 12,
        'slug' => 'small'
    ),
    array(
        'name' => __( 'Regular', 'themeLangDomain' ),
        'size' => 16,
        'slug' => 'regular'
    ),
    array(
        'name' => __( 'Large', 'themeLangDomain' ),
        'size' => 36,
        'slug' => 'large'
    ),
    array(
        'name' => __( 'Huge', 'themeLangDomain' ),
        'size' => 50,
        'slug' => 'huge'
    )
) );

Si, parece demasiado código, pero no te asustes que es muy simple. Como ves se declaran 4 fuentes (small, regular, large, huge). Puedes quitar o agregar un array para modificar la cantidad de fuentes.

name es el nombre que le quieres poner al tamaño de fuente y slug es una variable descriptiva y no puede tener espacios.

Ahora sólo falta agregar los tamaños de fuente en tu CSS.

El template es responsable luego de crear las clases correspondientes a cada estilo de fuente. El nombre de la clase CSS se crea agregando has-, seguido por el nombre «name» que le has ingresado a la fuente y termina con -font-size.

De esta manera tendrías por ejemplo la clase Small de la siguiente manera; has-small-font-size.

.has-regular-font-size {
    font-size: 12px;
}
Tipos de fuentes por defecto en Gutenberg
Tipos de fuentes por defecto en Gutenberg

Bonus: Eliminar las fuentes por defecto.

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

add_theme_support('disable-custom-font-sizes');

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