Gutenberg-Editor in der Breite anpassen

Was mich am meisten in WordPress stört, ist die voreingestellte Breite des Gutenberg-Editors.

Zum Glück bietet Wordpress eine einfache Möglichkeit das zu ändern.

Dafür braucht es nur folgende paar Zeilen Code in der functions.php des aktiven Themes oder in einem kleinen Plugin:

// Callback mit CSS
function fz_gutenberg_admin_styles() {
    echo '
        <style>
            /* Standard-Breite des Editors */
            .wp-block {
                max-width: 900px;
            }
            /* Breite von Blöcken mit dem "wide" Attribut */
            .wp-block[data-align="wide"] {
                max-width: 1080px;
            }
            /* Breite von Blöcken mit dem "full-wide" Attribut */
            .wp-block[data-align="full"] {
                max-width: none;
            }   
        </style>
    ';
}

// Action zum Hook 'admin_head' hinzufügen um CSS aus der
// Callback-Funktion im Kopf (<head>) von Admin-Seiten auszugeben
add_action( 'admin_head', 'fz_gutenberg_admin_styles' );

Um die gewünschte Breite zu erhalten, kann man einfach die Werte von 'max-width' im CSS-Code verändern.

Viel Spaß beim Coden.