|

Neue Bildklassen in Gutenberg alignwide und alignfull formatieren

giraffe 3351363 1920

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' )
Code-Sprache: JavaScript (javascript)

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%; }
Code-Sprache: CSS (css)

alignwide

giraffe 3351363 1920

alignfull

giraffe 3351363 1920

Mehr über „Max-width on blocks“

Kommentarformular bitte nicht für Supportanfragen verwenden

Schreibe einen Kommentar

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