Cómo aumentar el ancho del contenido editor Gutenberg

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.

ancho gutenberg

¿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.

Table of Contents

¿Estás listo para darle al play?

¡Pregunta, es gratis! Te asesoraremos para encontrar una solución a tu medida.

¡Pide presupuesto!

Completa y envía, es algo que nos encanta recibir

Todos y tu presupuesto son a medida y totalmente personalizados, entendemos que dos proyectos online no pueden ser iguales y que cada cliente tiene unos objetivos y necesidades muy diferentes, es por eso que para elaborar un presupuesto, necesitamos saber de ti, tu proyecto y objetivos.

Marca qué servicios estás interesado en solicitar presupuesto.

Los campos marcados con (*) son obligatorios

La comunicación enviada quedará incorporada a un fichero del que es responsable ADESTIC. Esta comunicación se utilizará exclusivamente para tratar sus datos para atender su solicitud, siempre de acuerdo al Reglamento (UE) 2016/679 (RGPD), la Ley Orgánica 15/1999 (LOPD) y el Real Decreto 1720/2007 de desarrollo de la LOPD), sobre protección de datos. Sus datos no se comunicarán a terceros, excepto por obligación legal, y se mantendrán mientras no solicite su cancelación. En cualquier momento usted puede ejercer los derechos de acceso, rectificación, portabilidad y oposición, o si procede, a la limitación y/o cancelación del tratamiento, comunicándolo por escrito, indicando sus datos personales a C/Transversal, 226 Terrassa Barcelona o mediante un email a info@adestic.com