Neue Bildklassen in Gutenberg alignwide und alignfull formatieren

giraffe 3351363 1920
Bildquelle: Pixabay, Comfreak

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

giraffe 3351363 1920

alignfull

giraffe 3351363 1920

Mehr über „Max-width on blocks“

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden. Die Angabe einer E-Mail-Adresse und eines Namens ist nicht erforderlich. Einen (Spitz)-Namen zu nennen wäre aber doch nett.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Hinweis: Sowohl angegebener Name als auch E-Mail-Adresse (beides ist optional, dafür werden alle Kommentare vor Veröffentlichung geprüft) werden dauerhaft gespeichert. Du kannst jeder Zeit die Löschung Deiner Daten oder / und Kommentare einfordern, direkt über dieses Formular (wird nicht veröffentlicht, und im Anschluss gelöscht), und ich werde das umgehend erledigen. – Mit hinterlassenen Kommentaren hinterlegte IP-Adressen werden nach zwei Monaten automatisch gelöscht

publicly queryable