Formation « Créer des blocs avec Gutenberg »

Modifier la largeur de l’éditeur Gutenberg

Lecture : 1 minutes • 0

Dans l'interface d'administration, la largeur de l'éditeur est fixée par défaut à 636px, mais il est tout à fait possible de modifier cette largeur pour coller aux besoins de votre thème, grâce à quelques lignes de CSS.

Contrairement à ce qu’on pourrait le croire, il n’y a pas de fonction PHP pour définir cette taille, à la place il faudra ajouter un peu de CSS dans la feuille de style de votre éditeur, ou de votre interface d’administration.

Pour rappel on a vu comment charger une feuille de style personnalisée pour l’éditeur dans ce cours.  Je crée un CSS spécial pour cette utilisation, appelé depuis mon thème et non pas depuis l’extension de blocs.

Qu’on se comprenne bien : c’est arbitraire mais je considère que c’est le thème qui vient apporter cette spécificité, et pas les blocs.

PHP
functions.php
<?php 
function capitainewp_theme_editor_assets() {

	wp_enqueue_style(
		'capitainewp-editor-width',
		get_template_directory_uri( 'js/editor.css', dirname( __FILE__ ) ),
		array( 'wp-edit-blocks' )
	);
}
add_action( 'enqueue_block_editor_assets', 'capitainewp_theme_editor_assets' );

J’ajoute ensuite ce CSS, conformément à ce qui est dit dans la documentation Gutenberg :

CSS
js/editor.css
/* Main column width */
.wp-block {
    max-width: 720px;
}

/* Width of "wide" blocks */
.wp-block[data-align="wide"] {
    max-width: 1080px;
}

/* Width of "full-wide" blocks */
.wp-block[data-align="full"] {
    max-width: none;
}

Vous pouvez utiliser des valeurs en pixels, em, vw ou pourcentage, au choix !


Cette technique est très utile pour se calquer sur la même largeur qu’en front. Sur Capitaine WP j’ai fixé cette largeur à 756px.

0

Questions, réponses et commentaires

    Laisser un commentaire