Gutenberg Widgets als HTML bearbeiten

Wenn du im Editor einen Rich-Content-Block einfügst (also das, was z.B. über eine Zwischenüberschrift, einen Absatz oder eine Liste hinausgeht), wird dir links im Editor angezeigt, wie der Inhalt aussieht, während du rechts davon Einstellungsoptionen im Kontext mit dem gerade bearbeiteten Block-Element angezeigt bekommst. Änderst du nun über die Menüauswahl „Als HTML bearbeiten“ das HTML-Konstrukt, das den Block ausmacht, passen die zugehörigen Einstellungen nicht mehr. Der Editor „kommt durcheinander“ und meldet dir, dass der Block unerwarteten („Hey, da sollte doch was anderes kommen?!“) oder ungültigen („Das passt nicht zu meinem JavaScript!!1!“) Inhalt enthält. Wenn du darauf bestehst, dieses HTML trotzdem zu verwenden, kannst du es per Button „zu HTML umwandeln“ – nur passen dann eben nicht mehr die Einstellungsmöglichkeiten.

„Als HTML bearbeiten“ ist (so habe ich es zumindest verstanden) nicht so gemeint, dass du die Funktionalität eines Gutenberg-Blocks änderst, sondern dass diejenigen, die es gewohnt sind, z.B. eine Tabelle rasch als HTML einzufügen, das auch im Editor machen können.

Das kann ich dir nicht sagen.

Im Moment gibt es im Gutenberg-Plugin ein experimentelles Featur, mit dem du Blöcke als Widgets in der Sidebar nutzen kannst. Dabei werden aber die per Plugin ergänzten Blöcke bisher nicht unterstützt.

Wenn du partout ein Akkordion in der Sidebar verwenden möchtest, würde ich ein Plugin wie Shortcodes Ultimate nutzen und das ggf. mit eigenen CSS-Regeln ergänzen.

Schade bislang fand ich Gutenberg ganz gut, aber jetzt. Wenn so etwas Einfaches so schwierig wird….

Das ist alles noch in Entwicklung. Irgendwann kannst du dann beliebig Blöcke in der Sidebar platzieren. Im Moment beschränkt sich das aber noch auf die Standard-Blöcke.

Über den Begriff „einfach“ könnten wir lange diskutieren. Mit Blick auf den Code, der hinter den Blöcken steht, empfinde ich das persönlich nicht als einfach; aber das ist natürlich sehr subjektiv.

Ich kann zu dem Widget die Klasse nicht ermitteln. Kannst du mir da helfen?

Da gibt es nicht nur eine und da ich nicht weiß, was du jetzt im Detail anders ausgeben möchtest, kann ich dazu nichts sagen.

Die CSS-Klassen kannst du aber mit den Entwickler-Tools deines Browsers ermitteln: Rechtsklick auf den Button > Element untersuchen – im dann geöffneten Browser-Abschnitt siehst du links das HTML und rechts das zugehörige CSS.

#kt-accordion-header-196454 {
    color: orange;
    background: aquamarine;
}

(Die Farbwerte sind natürlich nur willkürlich gewählt.)

Eine gute Einführung in CSS findest du hier.

Du könntest natürlich auch

.widget-area .kt-blocks-accordion-header {
  color: orange;
  background:aquamarine;
}

verwenden, um das auf Akkordions in der Sidebar zu beschränken.

Hast du denn mal geschaut, ob die beiden URLs im Front-End als eingebettete Videos dargestellt werden?

Hier und da gibt es noch ein paar Kleinigkeiten, die beim neuen Block-Editor nicht perfekt sind. 😉