[Résolu] Modifier Largeur Editeur Gutenberg (Créer un compte)

  • WordPress :5.4
  • Statut : résolu
10 sujets de 1 à 10 (sur un total de 10)
  • Auteur
    Messages
  • #2353947
    Rock4Temps
    Participant
    Chevalier WordPress
    288 contributions

    Bonjour,

    Comment faire pour modifier la largeur de l’éditeur Gutenberg,

    avec une largeur différente pour les articles & pages et qui corresponde au visuel en front?

    • Ce sujet a été modifié le il y a 6 mois par momofr@free.fr.
    • Ce sujet a été modifié le il y a 2 mois et 1 semaine par Flobogo. Raison: déplacé en rubrique "Gutenberg"
    #2354036
    momofr@free.fr
    Modérateur
    Maître WordPress
    4019 contributions

    Salut, ce n’est pas possible dans les réglages de WordPress actuellement.

    Il te faut créer un fichier style-editor.css dans ton thème enfant et ajouter/modifier les valeurs souhaitées via les règles CSS suivantes :

    /* 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;
    }

    C’est expliqué ici dans la documentation WordPress.

    #2354084
    Rock4Temps
    Participant
    Chevalier WordPress
    288 contributions

    Merci, mais comment faire varier automatiquement cette largeur selon que l’on rédige un article ou une page qui n’ont pas la même largeur ?

    L’article a une sidebar a 30 % de la largeur de 1200 px et  donc l’article a une largeur de 840 px, contrairement a une page qui n’a pas de side bar et fait donc 1200 px  de large.

    • Cette réponse a été modifiée le il y a 6 mois par momofr@free.fr. Raison: Ménage
    #2354111
    Rock4Temps
    Participant
    Chevalier WordPress
    288 contributions

    Bonjour,

    Je suis allé voir la documentation très intéressante, ce qui m’a permis aussi de modifier la palette de couleur de Gutenberg en accord avec la charte graphique.

    En inspectant le code j’ai essayé de trouver des sélecteurs pour régler mon problème de largeur différente entre article & page.
    j’ai renseigné le code suivant dans style-editor.css

    body.post-type-post .wp-block {
        max-width: 840!important;
    	}
    	
    	body.post-type-page .wp-block {
        max-width: 1200px!important;
    	}

    hélas ça ne surchage pas la classe .wp-block qui reste a 480px par défaut.

     

    #2354141
    momofr@free.fr
    Modérateur
    Maître WordPress
    4019 contributions

    Salut, en cherchant un peu j’ai trouvé cet article qui indique qu’il faut ajouter une fonction à ton fichier functions.php du thème enfant pour que les règles CSS du fichier style-editor.css soient prisent en compte.

    Voici le code :

    // AJOUT DE LA FEUILLE DE STYLE DE L'ÉDITEUR GUTENBERG
    function my_theme_setup() {
      	// Nouveauté à ajouter
      	add_theme_support('editor-styles');
    	// Puis la même fonction qu'on utilisait auparavant pour Tiny MCE
    	add_editor_style( 'style-editor.css' );
      	// Éventuellement pour prendre en compte les blocs larges
      	add_theme_support( 'align-wide' );  
    }
    add_action( 'after_setup_theme', 'my_theme_setup' );

    Ça marche très bien chez moi.

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2354145
    Rock4Temps
    Participant
    Chevalier WordPress
    288 contributions

    Je te remercie, après ton message précédent j’ai consulté la documentation et ajouter les mêmes lignes de code
    dans le fichier function.php de mon thème enfant.
    ça marche aussi chez moi, si je ne souhaite modifier que les articles qui ont une largeur de 840px en front,
    mais l’éditeur est aussi en largeur de 840px pour les pages alors qu’elles font 1200px de large en front.
    seule l’image est a 1200px car elle a la propriété d’alignement grande largeur qui est réglée a 1200px dans
    le fichier style-editor.css:
    .wp-block[data-align=”wide”] {
    max-width: 1200px;
    }
    tous les autres blocks restent a 840px de largeur.

     

    #2354146
    Rock4Temps
    Participant
    Chevalier WordPress
    288 contributions

    ci-joint photos edition-article a 840px de large et aussi edition-page avec la photo a 1200px et le corps du texte qui reste a 840px de large

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2354151
    Rock4Temps
    Participant
    Chevalier WordPress
    288 contributions

    je précise que les blocs textes  pour la page ont une propriété d’alignement a gauche, donc si les blocs font 1200px de large ils devraient être aligné avec le bord gauche de la photo.

     

    #2364886
    Rock4Temps
    Participant
    Chevalier WordPress
    288 contributions

    Bonjour,

    j’ai résolu mon problème de largeur différente de l’éditeur Gutenberg selon
    que l’on édite un article ou une page en utilisant l’extension vraiment très intéressante et fonctionnelle:
    Kadence Blocks

    • Extension qui apporte dans sa version free 10 blocs, avec plein d’options de réglages
      contrairement à l’éditeur Gutenberg.
    • Il permet de régler la largeur de l’éditeur pour une Page ou Article
    • On peut modifier la palette de couleur par défaut de l’éditeur pour la faire correspondre a notre charte graphique
    • il comporte une librairie avec des dispositions ou mises en page prédéfinies
    • On peut définir les paramètres par défaut des blocs
    #2367637
    microphoneglobe
    Participant
    Initié WordPress
    1 contributions

    i want to learn about gutenberg editor. i have this website microphoneglobe i am using Gutenberg but it is too difficult for me.

    Édit modération :
    You are on a french forum. Please, speak french, or go post on the official english forum.

    • Cette réponse a été modifiée le il y a 1 mois et 3 semaines par Flobogo. Raison: édit modération
10 sujets de 1 à 10 (sur un total de 10)
  • Vous devez être connecté pour répondre à ce sujet.