¿Como ampliar el ancho del editor de Gutenberg?

El editor nuevo de bloques de WordPress: Gutenberg, ya no tan nuevo pero no lleva mucho tiempo rodando la cuestión es que venía a contaros un poco mi impresión acerca del editor de contenido nativo de WordPress.

Se trata de una herramienta para la edición de contenidos que nos proporciona una edición visual mucho mejor que antes, más rápida y organizada. Debo decir que llevo poco usándolo ya que me decanté en un principio por anular este magnífico editor y poner el editor clásico.

A primera vista me pareció realmente complicado, nada fácil de usar. Pero al cabo del tiempo pensé que en primer lugar eso era debido a que no le había dedicado nada de tiempo. Pero consideré que debía darle una oportunidad al avance imparable de las nuevas formas de trabajar y nuevas herramientas y que tarde o temprano debería acostumbrarme y por supuesto ponerme a aprenderla.

Además pensé que si la comunidad de WordPress había lanzado algo así sería porque realmente debería ser algo positivo, ahora o en el futuro.

Sin embargo, como todo en la vida nada es perfecto. Claro que también depende mucho del ojo que lo mira. Para mi, uno de los defecto es el del ancho del editor visual Gutenberg, es muy estrecho.

Por defecto el editor tiene un ancho de 580px, dejando por los lados mucho espacio lo que provoca visualmente en muchos casos desajuestes estéticos sobre todo cuando se trabaja con tablas no permite ver todo despejado sino muy comprimido.

Como ampliar el ancho del contenido de Gutenberg con código

Por el momento la comunidad de WordPress no nos ha proporcionado en sus actualizaciones el ajuste de este ancho, por lo que vamos a tener que hacerlo poniendo algo de código en el archivo functions.php.

Allá vamos, pues agreguemos este código PHP al fichero funcions.php a través del editor de temas de WordPress o con el plugin Code Snippets.

function custom_admin_css() {
echo '<style type="text/css">
/* Contenido por defecto (textos y otros) */
.wp-block {
    max-width: 900px;
}
/* Ancho establecido como "Amplio" del Bloque (imágenes y otros) */
     .wp-block[data-align="wide"] {
     max-width: 1280px;
}

/* Ancho establecido como "Completo" del Bloque (imágenes y otros) */
.wp-block[data-align="full"] {
    max-width: none;
}
</style>';
}
add_action('admin_head', 'custom_admin_css');
add_theme_support( 'wp-block-styles' );
add_theme_support( 'align-wide' );

Deja una respuesta