Gutenberg Blöcke mit individuellen HTML-Elementen umschließen
WordPress legt alle Prioritäten auf den neuen Gutenberg (Block) Editor und ebnet die Zukunft für die Erstellung individueller Webseiten. Das Arbeiten mit Blöcken wird daher immer mehr zu einer Pflicht für WordPress Entwickler.
In WordPress gibt es bereits zahlreiche Standard-Blöcke, welche ohne die Installation zusätzlicher Plugins verwendet werden können. Jedoch gibt es hier einige Optimierungsmöglichkeiten, in Hinblick auf eine bessere Differenzierung von Stylesheet-Definitionen.
Wie kann ich HTML-Elemente um Gutenberg Blöcke herum einfügen?
Alle Standard Gutenberg Blöcke müssen von einem Theme-Entwickler entsprechend formatiert werden, um die richtige Darstellung zu gewährleisten. In einigen Fällen wird dies allerdings erschwert.
Beispiel 1: Der Paragraf-Block wird durch ein reines <p>Text</p> eingefügt. Eine spezielle Differenzierung nur für diesen Paragraf-Tags ist somit nicht möglich.
Beispiel 2: Der HTML-Block wird ohne ein umschließendes Eltern-Element eingefügt. Mit einem umschließenden DIV-Container, können wir diesen einfacher formatieren.
Es gibt noch weitere Anwendungsfälle bei denen eine weitere Eingrenzung von Blöcken angebracht ist. Für diesen Fall können wir den WordPress-Filter render_block verwenden. Der folgende Code-Schnipsel zeigt, wie einfach wir Blöcke im Gutenberg-Editor mit individuellen HTML-Elementen umschließen können:
Durch den Einsatz des oberen WordPress-Filters lassen sich nicht nur Standard-Blöcke umschließen. Auch alle anderen Blöcke, welche durch zusätzliche Plugins hinzugefügt werden, können wir mit diesem Filter beeinflussen. Alles was wir dafür benötigen, ist der einzigartige Block-Name. Im Falle von ACF Blöcken wird dieser immer mit acf/blockname definiert. Für die Standard Gutenberg Blöcke, können wir auf das Schema core/blockname zurückgreifen.
