Neue Bildklassen in Gutenberg alignwide und alignfull formatieren

Noch ist der Gutenberg-Editor nicht in WordPress integriert, kann jedoch bereits in Pluginform getestet werden. Voraussichtlich im Dezember soll Gutenberg den klassischen Editor ablösen.

Die beiden CSS-Klassen alignwide und alignfull ergänzen mit Gutenberg die bisherigen alignnone, alignleft, alignright und aligncenter Klassen für Captions und Bilder. Wie die bisherigen Klassen müssen auch die neuen im CSS des Themes entsprechend formatiert werden, damit sie erwartungsgemäß funktionieren.

Um die neuen Klassen anwenden zu können, muss das Theme sie unterstützen.

add_theme_support( 'align-wide' )

CSS für alignwide und alignwidth (bei boxed Layouts und ohne Sidebar)

Das funktioniert vielleicht nicht in jedem Theme genau so, es kommt auf Struktur und sonstige Formatierungen an. Auch Breakpoints spielen eine Rolle, resp. ab welcher Displaygröße die Darstellung in der Form gelten kann.

.alignwide {
    margin-left  : -20%;
    margin-right : -20%;
    max-width: 140%
}
.alignfull {
    margin-left  : calc( -100vw / 2 + 100% / 2 );
    margin-right : calc( -100vw / 2 + 100% / 2 );
    max-width    : 100vw;
    width: 100vw;
}
.alignfull img {
    width: 100%;
}

alignwide

alignfull

Mehr über „Max-width on blocks“