WordPress Gutenberg FSE Ärgerliches Inline-CSS

Lesezeit: 3 Minuten

Ich versuche, einige CSS zu entfernen, die von WordPress am Frontend hinzugefügt werden. Beim letzten Update fügt WordPress eine Klasse wie diese hinzu:

<main id="app" class="wp-container-620d4049355bb wp-block-group">

<div class="wp-container-620d404934f13 entry-content wp-block-post-content">

wp-container-620d4049355bb / wp-container-620d404934f13 für Hauptblöcke.

Das Problem ist, dass es auch etwas CSS hinzufügt:

.wp-site-blocks > * + * {
  margin-top: var( --wp--style--block-gap );
}

.wp-site-blocks > * {
  margin-top: 0;
  margin-bottom: 0;
}

.wp-container-620d4049355bb > * {
  margin-top: 0;
  margin-bottom: 0;
}

.wp-container-620d404934f13 > * + * {
  margin-top: var( --wp--style--block-gap );
  margin-bottom: 0;
}

Dieses CSS hat einen Konflikt mit meinen Blöcken, wo ich einzelne Klassen zum Festlegen der Marge hinzufüge.

Kann mir jemand helfen, wie ich dieses CSS entfernen kann? Oder diese Klasse entfernen? Lustige Tatsache ist, dass wp-container-620d42ff1d800 bei jeder Seitenaktualisierung anders ist.

Vielen Dank!

Was wäre, wenn Sie auf die nicht dynamische Klasse abzielen würden? Wie .wp-block-group?

– Manuel S.

17. Februar um 8:24 Uhr
Mein System ähnelt “Tailwindcss”. Für meine Abschnitte/Blöcke pro Einstellungen füge ich eine Klasse wie “.mt-y” hinzu, die X rem padding-top hinzufügt. Eine einzelne Klasse wird also durch .wp-container-620d404934f13 > * + * {} überschrieben. Eine Lösung für den Moment sehe ich darin, die Gruppe und den Inhaltsblock neu zu schreiben und sie einfach nicht mehr zu verwenden

– Lukasz Górski

18. Februar um 10:32 Uhr
Ich sehe das gleiche seltsame Verhalten bei 22 und FSE. Wo deaktivieren wir diese Stile und woher kommen sie? Es macht mich wahnsinnig, weil ich nicht weiß, wie ich es deaktivieren kann. Die Stile entfernen meine Ränder auf meinen Bildern: wordpress.org/support/topic/…

– Markus

1. März um 16:10 Uhr

Die blockGap-Funktion, var( --wp--style--block-gap ); ist standardmäßig nicht aktiviert. Wenn Sie blockGap oder AppearanceTools in theme.json aktiviert haben, können Sie es wieder deaktivieren, indem Sie es auf null setzen:

theme.json:

{
    "version": 2,
    "settings": {
        "spacing": {
            "blockGap": null
        }
    }
}

Siehe die theme.json-Referenz:
https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/#spacing

Wenn Sie die entfernen möchten wp-container-random und den generierten Ausrichtungen, Rändern und Flex-Stilen können Sie die Layout-Funktion deaktivieren. Fügen Sie dies zu Ihrer Themen-functions.php oder ähnlichem hinzu:

remove_filter( 'render_block', 'wp_render_layout_support_flag', 10, 2 );

Und wenn Sie Gutenberg aktiv haben:

remove_filter( 'render_block', 'gutenberg_render_layout_support_flag', 10, 2 );

Quelle für das wp_render_layout_support_flag: https://github.com/WordPress/WordPress/blob/master/wp-includes/block-supports/layout.php#L142

Ich verstehe diese Antwort nicht. Ich verwende Standard Twent-Twenty-Two mit der neuesten WordPress-Version und sehe diese generierten Inline-Stile. Sie entfernen einige Ränder auf meinen Bildern und ich habe keine Ahnung, wie ich sie entfernen soll. Da ich kein untergeordnetes Thema habe, kann ich theme.json nicht bearbeiten oder Filter zu einer function.php hinzufügen. Irgendeine Idee, wie man die Stile entfernt? Siehe das gleiche Problem hier: wordpress.org/support/topic/…

– Markus

1. März um 16:12
Das erste hat bei mir funktioniert: remove_filter( ‘render_block’, ‘wp_render_layout_support_flag’, 10, 2 ); Ich verwende Gutenberg/den Blockeditor.

– Dan Brown

1. März um 17:23 Uhr
remove_filter( ‘render_block’, ‘wp_render_layout_support_flag’, 10, 2 ); zerstört mein ganzes Layout auf einem Vanilla 2022 Theme mit WP 5.9. Nicht Plugins. Woher kommt dieses CSS?

– Markus

2. März um 14:41 Uhr
Marc, deine Frage und Anwendungsfall ist anders als der Threadstarter. Sie fragen, wie Sie den Rand für einen einzelnen Block ändern können, während es bei dieser Frage um das Entfernen der Stile geht.

– Carolina Nymark

3. März um 5:05
Nein, ich frage, wie man die Inline-Stile entfernt und woher sie kommen. Es ist genau das gleiche Problem.

– Markus

9. März um 8:58

14278200cookie-checkWordPress Gutenberg FSE Ärgerliches Inline-CSS

#WordPress #WordPress-Gutenberg