gutenberg

¿Quieres patrocinar?

¿Quieres aparecer aquí? Si quieres patrocinar este blog, ponte en contacto conmigo a través de este formulario

Cambiar el ancho del editor Gutenberg

Pues me llegó el momento. Tras darle un tiempo, por fin me he decidido a probar Gutenberg. Lo probé en Septiembre de 2017 para una meetup en WordPress Madrid cuando aún andaba por la versión 0.6 creo recordar, y no volví a probarlo.

Por aquel entonces, y así lo dije en la meetup, lo veía como el futuro de los page builders, más que nada porque sería el nativo de WordPress, aquel que traería el equilibrio a la fuerza.

En la WordCamp Zaragoza 2018, varias personas tuvimos el placer de conversar con Matías Ventura, que nos enseñó in situ el potencial de Gutenberg y la idea que tenían para el futuro.

Como digo, no volví a probarlo, hasta ahora. En líneas generales me gusta, la verdad, aunque lo veo algo verde, y el mero hecho de escribir es más tedioso que antes… pero es simplemente una percepción inicial. Y también hay cosas que (personalmente) no me gustan, como lo primero que me he encontrado: el ancho del editor Gutenberg no ocupa todo el espacio disponible en la pantalla.

En mi caso, con una pantalla FullHD, ocupa el 50% aprox, queda mucho aire. Si queréis que ocupe el ancho disponible, sólo tenéis que seguir estos pasos:

Lo primero, si tu tema no es compatible con Gutenberg, añade estas líneas en tu functions.php:

<?php

//Theme setup
function my_theme_setup() {
    add_theme_support( 'editor-styles' );

    // Relative path from theme directory
    add_editor_style( 'css/style-editor.css' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Con esto simplemente estamos diciendo que nuestro tema soporta una hoja de estilos para el editor. Y encolamos un CSS que se cargará en nuestro panel de administración de WordPress cuando estemos editando con Gutenberg.

En esta hoja de estilo simplemente añadiremos esta regla:

/* Main column width */
.wp-block {
    max-width: 100%;
}

De este modo, el editor ocupará el 100% del espacio disponible.

¿Te ha resultado útil esta información?

Si este post te ha resuelto un problema, invítame a un café o a una cerveza. Con este pequeño gesto me animas a seguir escribiendo.