Vorlage synchronisieren, Inhalt aber loslösen. Wie ist das Vorgehen?
-
Hallo Community
Ich möchte mit Vorlagen arbeiten. Beiträge einer bestimmten Kategorie sollen immer in demselben Layout erscheinen. Als Vorlage schwebt mir ein Layout vor mit 2 Spalten. Diese enthält auf der linken Seite ein paar Textzeilen und am Fuss eine Tabelle mit Text. Die rechte Spalte soll mit einem Bild befüllt werden.
Ich finde dazu keine Vorlage. Darum mache ich mich selber ans Werk : Ich habe einen 2-spaltigen Beitrag wie oben beschrieben erstellt und wähle über Dokumentenübersicht den für eine neue Vorlage vorgesehenen Bereich aus. Erreiche über das 3 Punkte-Menu rechts: Abspeichern als Vorlage und wähle ‚Vorlage über mehrere Positionen hinweg synchronisieren‘. Bis hierher dünkt mich alles stringent. Danach erstelle ich einen 2. Beitrag und füge die Vorlage ein. Um z.B. Inhalte wie Text oder Bild in der Vorlage zu ändern zu können, wähle ich loslösen.Problem: Leider ist die Vorlage via Dokumentenübersicht nicht aufklappbar, es kann nur alles oder nichts losgelöst werden. Ein Eingriff in Teile der Verschachtelung lässt sich nicht bewerkstelligen. Nach dem Loslösen ist das Layout nicht mehr synchronisiert, dass doch logischerweise verknüpft bleiben soll, auch wenn ich nur einen Text in der Spälte ändern will.
Probe auf das Exempel: Wähle ich unter ‚Ihre Vorlagen‘ meine Vorlage und ändere z.B. farbige Linien der Tabelle, dann wird diese nicht mit dem eben erstellten Beitrag synchronisiert.
Frage: Wie ist das Vorgehen, dass nur einzelne Bereiche wie z.B. der Texte einer Tabelle losgelöst sind, das Layout und die Tabelle aber synchronisiert bleiben?
Vielen Dank für das Interesse und hilfreiche Tipps im Voraus.
Grüsse, Flipper
-
Zu dem Zeitpunkt meines Beitrages hattest du den Thread noch nicht auf „ungelöst“ zurückgesetzt. Daher der Hinweis, dass Threadersteller ihren Beitrag jederzeit wieder auf ungelöst setzen können.
Zu deiner Frage „300px Höhe“: Prinzipiell gebe ich dir recht, die Möglichkeiten im Block- und Seiteneditor sind immer noch sehr begrenzt (im Vergleich zu vielen Alternativen).
Im vorliegenden Beispiel jedoch kann man das OHNE CSS allerdings aber mit einem anderen Block lösen. Screenshot: Das obere ist das aus dem Artikel mit dem Block Spalten (hier habe ich die 300px fixe Höhe zur Demonstration weggelassen), das untere ist mit dem Block Zeile und kann komplett ohne manuelles CSS und ohne fixe Höhe über das UI so eingerichtet werden. Eine automatische Höhe ist natürlich viel flexibler und für alle Eventualitäten gerüstet.
Zum Vergrößern auf das Bild klicken
Wie auch immer: Der Artikel konzentrierte sich nicht auf die Darstellung der Cards, sondern auf das Synchronisieren der Patterns, unabhängig vom – zu Demonstrationszwecken gezeigten – Inhalt.
Um die Höhe eines Textblocks zu bestimmten, regle ich viel speditiver über ein eigenes CSS.
Auch die Ausrichtung eines Textes innerhalb eines Divs lässt sich dank dem Attribut display: table und display: table-cell steuern, um eine vertikale Ausrichtung unten zu erlauben.Versuch es besser mit flex (display:flex), denn display:table und :table-cell sind schon mehr so old School, funktionieren natürlich auch aber wenn es dann in den responsiven Bereich geht, wird es tricky.
Was ich mir nicht einleuchten will ist, dass eine Pattern in der Dokumentdarstellung nicht aufgeklappt werden kann. Das wäre auf deinem oben verlinkten Blogbeitrag, Abschnitt ‚Einen neuen synced pattern overrite auf dieser Grundlage erstellen‘ auf dem Screenshot, Dokumentdarstellung Pattern ‚Karte mit Bild und Text‘ zu erwarten. Dem ist aber nicht so, statt dessen muss eine Umgweg über den Klick auf das Kebab-Menü gewählt werden.
So etwas ist meiner Meinung nach typisch für Block-/Gutenberg- und Site-Editor. Viel zu viele unnötige Klicks. Schreib gerne ein Ticket auf Github, kann aber dauern, bis sich etwas ändert – wenn überhaupt.
Die Ausrichtung von DIV oben und unten in einem Container gelingt mit
display: flex;flex-wrap: wrap; align-content: space-between;In dem von mir beschriebenen Fall gelingt es per Klicks.
Leider wird das Aussehen des Klassen-Attribut im Editor nicht wiedergegeben. Vielleicht ist dazu ein anderer Editor beizuziehen. Arbeiten im HTML-Modus reicht vorerst aus.
Mir ist nicht klar, was du mit Klassen-Attribut meinst. Individuell vergebene (also selbst hinzugefügte) CSS-Klassen können natürlich erst ausgeführt werden, wenn das dazugehörige CSS geladen wird. Und dieses individuelle CSS wird im Frontend gerendert, da es i. d. R. entweder über den Customizer oder über die style.css geschrieben wurde.
Nachtrag:
Du könntest das testen:
https://css-tricks.com/getting-the-wordpress-block-editor-to-look-like-the-front-end-design/Mit WordPress 7.0 (Release vermutlich Ende 2026?) ist geplant, die Diskrepanz zwischen Backend- und Frontend-Ansicht (CSS) zu verhindern, indem der Block-Editor künftig in einem Frame ausgeführt wird:
https://make.wordpress.org/core/2025/11/12/preparing-the-post-editor-for-full-iframe-integration
Dazu gibt es schon viele kritische Stimmen und Bedenken, ob es tatsächlich so umgesetzt wird, ist daher zumindest kritisch zu betrachten./Nachtrag.
Ich bediene mich – z.B. wie oben im Screenshot gezeigt – zum Darstellen von Kacheln einer Kategorie der Abfrageschlaufe für Titel und einen Lauftext.
Ich finde nur einen Screenshot (den von mir) und darin ist keine Abfrageschleife (ich vermute, das meinst du mit schlaufe, den Loop?) zu sehen.
Du willst in einem Loop ein einzelnes Element inhaltlich ändern? Du kannst in Komponenten/Patterns alles editierbar machen. Aber ein Loop holt sich die Daten von vorgegebenen Inhalten, du erstellst eine Abfrageschleife, die existierende Inhalte durchläuft und wiedergibt.
Was ich mir vorstellen könnte: Du erstellst diese Inhalte zuvor als Patterns (mit dem von dir angesprochenen editierbaren Absatz) und packst das anschließend in einen Loop. Das kannst du ebenso als verschachtelte (nested) Patterns realisieren.
Ich arbeite aber nicht (nie!) mit dem Block-Editor (Gutenberg) und habe keine Ambitionen, dieses Konstrukt zu verifizieren. Hier kann sicher @hage weiterhelfen.
Noch ein Nachtrag:
Ich habe das gerade mal ansatzweise so nachgebaut, wie du das wohl eingangs geplant hast (wenn ich das richtig verstanden habe):
Hier ein Screenshot dazu (bei Klick auf das Bild, wird das Bild vergrößert):
(1): Das ist der synchronisierte Pattern.
(2): Diese Inhalte (zwei Absätze und ein Bild) können überschrieben werden, während das gesamte Design erhalten bleibt.Hallo La Geek, hallo Hans-Gerd
Danke für das Feedback. Interessante Diskussion. Zum Thema Loop, es ist von mir beiläuftig eingeworfen, das Thema würde ich hier weglassen.
Ich einarbeite mich in sBlock-Theme, probehalber arbeite ich mit TT4 (Twentytwentyfour). Eine eigene CSS-Datei muss trotzdem sein, die ich mittels PlugIn Header and Footer Scripts eingebunden habe. (@la-geek: der Editor stellt die Klassen der CSS-Datei dar, die Wirkungsweise entspricht dem ‚Gutenberg custom stylesheet‘ wie in deinem Links beschrieben)
Wegen der Komplexen Fragestellung wäre ein Video ganz gut. Gerne würde ich es bei Screenshots belassen und ggf. später auf Video zurückgreifen. Aber mir stellen sich Screenshot oben von Hans-Gerds die Frage, wann sich Pattern in der Dokumentenübersichts-Leiste links aufklappen lassen. Es trifft bei mir nicht zu. WP 6.8.3 | TT4 und Screenshot. Wäre dem ab aktuellerem WP so, dann wäre die Eingangsfrage gelöst.
Grüsse Flipper
Du musst angemeldet sein, um auf dieses Thema zu antworten.