El nuevo Editor de bloques (Gutenberg) nos brinda una experiencia de edición más visual, rápida y organizada. Pero para nosotros tiene un pequeño defecto, el ancho del editor visual, que provoca que no se ajuste al ancho de nuestro tema o diseño web.
Por defecto el editor tiene un ancho de 580px, dejando mucho aire en sus lados y facilitando la escritura y composición. En la mayoría de los casos no va a coincidir con el ancho de nuestra entrada de blog y provocará algunos desajustes estéticos.
¿Como lo solucionamos sin utilizar ningún plugin?
Mientras esperamos que en alguna de las próximas actualizaciones el equipo de desarrollo nos proporcione alguna funcionalidad dentro de las opciones del editor, vamos a ver como podemos cambiar este ancho con un sencillo código.
Pongamos un ejemplo:
Tenemos una ancho del contenido entrada en nuestro blog de 1280px y estableceremos unos 900px para el texto, queremos adaptar este ancho a nuestro editor, pues tan sólo tenemos que ir al archivo fuctions.php de nuestra tema hijo y introducir el siguiente código.
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' );Te ofrecemos una solución aun más simple que la que nos ofrece el sitio oficial para desarrolladores de wordpress. Aún así podéis ver más información y opciones.
Esperamos que os haya servido ayuda y si la necesitáis no dudéis en contactarnos y ofrecerte el soporte que necesites.
