Einstieg in WordPress 7

Autor: Waldemar Weber

  • Der Breadcrumbs-Block

    Neu in WP 7.0 Easy Peasy.

    Optionen im Block-Inspektor

    • Show home breadcrumb
    • Show current breadcrumb
    • Trennzeichen (Standard ist /)

    Plus ein bisschen Gestaltung. Haupteinsatzgebiet ist wohl das Template Einzelner Beitrag (engl. Single Post).

  • Richtig gut: Vorlagen und ContentOnly

    Pattern editing und contentOnly interactivity. Didn’t get it at first, aber es ist richtig gut. Besonders für Einsteiger.

    Der Name der Vorlage bleibt erhalten

    Nach dem Einfügen bleibt es eine Vorlage und in der Listenansicht steht nach wie vor der Name der Vorlage. Zentrierte Überschrift. Mit dem Symbol für eine Vorlage.

    Erzähle deine Geschichte

    Wie Blumen, die an unerwarteten Orten blühen, entfaltet sich jede Geschichte mit Schönheit und Widerstandsfähigkeit und offenbart verborgene Wunder.

    Weitere Informationen

    Der Block-Inspektor zeigt nur die Vorlage

    Wenn ich irgendwo in die Vorlage klicke, kann ich die Inhalte ändern. Rechts im Block-Inspektor erscheinen aber nur Optionen zum Bearbeiten der Vorlage, nicht die einzelnen Blöcke. Klasse.

    Für die Vorlage gibt es drei Tabs:

    1. Inhalt. Zeigt die in der Vorlage enthaltenen Blöcke.
    2. Listenansicht. Zeigt nur Listen und Buttons mit Text.
    3. Stile. Zeigt die fünf vorgefertigten Stile und einige Farboptionen.

    Alle anderen Optionen wie Abstände etc. erscheinen erst, wenn man auf Vorlage bearbeiten klickt. Das bezieht sich dann aber anders als bei synchronisierten Vorlagen nur auf diese Vorlage.

    Banner mit Beschreibung und Bilder-Raster

    Fleurs ist ein Blumenversand- und Abonnement-Unternehmen. Mit Sitz in der EU haben wir es uns zur Aufgabe gemacht, nicht nur atemberaubende Blumenarrangements zu liefern, sondern auch das Wissen und die Begeisterung für das schöne Geschenk der Natur zu fördern: Blumen.

    Nahaufnahme einer roten Blume.

  • Der Icon -Block

    Introduced in WP 7.0. On Github.

    Available icons

    After inserting an Icon block you click on Choose icon to see the following overview (defined in #16484):

    Icon block - overview of all icons
    These icons are currently available in the Icon block.

    Inserting icons

    After inserting it an icon displays in its own row as a block:

    Layout and format icons

    To use it next to text you have to wrap it in a row block:

    Icon of a video camera. If the text is longer than a row it will wrap and the next line aligns with the rest of the text. It almost looks like a list.

    The default block spacing looks good with this and you can vertically align the icon. The color and the width of the icon can be defined. You’re looking at a blue 3rem icon.

    To have paragraphs in the text you will have to group or stack the text.

    Uploading SVG Icons not yet possible

    Nick Diego’s Icon block had the ability to upload new SVG Icons:

    One thing that I have been thinking about how to handle SVG uploads. To be clear, I don’t think we should enable SVG uploads in core – that’s another conversation entirely and beyond the scope of this work.

    That being said, the existing code from the Icon Block plugin does a mime type check to see if SVG uploads have been enabled and provides the UI to upload them. IMO, this is a big win for extenders and I would love to see it stay in the block.

    Ryan Welcher on Github

    However, I installed Safe SVG, and I can’t find anything.

    After some reading I found that in order to enable an SVG Icon registration API in a future WordPress release the ability to upload icons was removed:

    Remove the SVG upload and custom icon creation features. To help users understand and edit SVGs, more discussion may be needed from a design and accessibility perspective.

    t-hamano on Github

    So at the moment that is someday maybe.

    The Icon block in the future

    Discussed in issue #75715 SVG Icon API: Iteration for WordPress 7.1.

    I see two shortcomings in the version shipping with WP 7.0:

    • Uploading your own icons is not possible
    • It’s not possible to add an icon to the Buttons block.

    MikeMcAlister points out that without Custom Icons it’s not very useful:

    Thanks for everyones work on this so far! I agree with the others, the ability to register a custom icon set will be critical. Builders and agencies will want to ship custom icon sets for their clients and product creators will want to ship custom icon sets for their user base.

    Mike McAlister on #75715

    Once inline SVG-Icons will be possible, it will be possible to add an icon to the Buttons block (t-hamano on #75715)

  • Neues in WordPress 7.0

    Quelle: Ankündigung der Beta 1

    Work together

    • Real Time Collaboration. Good for teams, not relevant for small sites.
    • Notes with real time sync, keyboard shortcut and better stability.

    Refined WP-Admin

    • WP-Admin refresh. New color scheme and very minor changes.
    • Visual Revisions. Look really nice. I finally understand it 🙂
    • View transitions. Cool, but most people won’t notice it.

    Customizing Content

    • Responsive Editing Mode. Visibility based on screen size
    • Pattern Editing and contentOnly interactivity. Needs to be explored.
    • Block supports and design tools. Indent. Columns. Height. And more.

    Blocks

    • Navigation Block. Workflow better. Customizable Overlay as template parts.
    • Heading Block. Levels as block variations. Nice.
    • Cover Block. Embedded videos as background.
    • Grid Block. Responsive enabled. Very nice.
    • Image Block. Sidebar with Content tab.
    • Gallery Block:
      • Lightbox click through. Nice.
      • Sidebar with List view tab.
    • Icon Block. Very much a 1.0 version. No upload. No icons in buttons.
    • Breadcrumbs Block. Template Einzelner Beitrag. Needs to be explored.

    Media

    • Media-processing in the browser (not on the server)

    And several Developer thingies not for beginners.

    What is not in WP 7.0

    Several features did not make into 7.0:

    • The Table of Content block
    • A real WP-Admin redesign

  • Visual Reskin of the WP Admin

    Da eine komplette Überarbeitung von WP-Admin auf Basis von React (so wie der Website-Editor) eine riesige Aufgabe ist, hatte Fabian Kaegy vor 3 Monaten eine Coat-of-Paint-Überarbeitung vorgeschlagen:

    Das Ziel beschreibt er so:

    The goal is to modernize the admin’s appearance, reduce inconsistencies between old screens and the newer block editor / site editor screens, and better align it with the WordPress design system

    Dabei geht es um eine rein visuelle Überarbeitung der Komponenten:

    • Buttons: Consistent styling for primary, secondary, and link buttons
    • Input Fields: Unified appearance for text inputs, selects, checkboxes, and radio buttons
    • Admin Tables: Light refresh of admin tables styles to align with DataViews
    • Cards: Dashboard widgets and metaboxes with modern styling
    • Notices: Clear, accessible info/warning/success/error messages
    • Typography: Consistent font sizes, weights, and line heights
    • Spacing: Unified spacing scale across the admin
    • View Transitions: Apply global view transitions for cross document navigations within the admin (#64470)
    • Global Background: Updated background color aligned with the design system
    • Admin Frame: Explore a sidebar navigation pattern similar to the Site Editor (if time and resources permit)

    Das bisherige Modern-Farbschema ist jetzt Standard. Das alte Schema fehlt ganz und ist im Benutzerprofil auch nicht mehr sichtbar.

    Die aktuelle Version

    Die aktuelle Version (links) hat nur ein bisschen anderes Spacing, ist aber nicht wirklich eine Angleichung an den Site-Editor. Eigentlich wollte er es etwas modernisieren (links), aber das hat aus zeitlichen Gründen nicht geklappt. Schade eigentlich …

    Der neue alte Screen
    Das war das eigentliche Ziel

    Vor ca. vier Wochen schrieb Fabian:

    Additionally at this point we believe that the larger „Frame“ is very unlikely to make it into 7.0. I personally still want to create a PR for it so we can at least test the various changes and see the holistic vision. But given we are already 4 weeks away from Beta 1 that seems like a stretch.

    https://core.trac.wordpress.org/ticket/64308#comment:13

    So wirkt das ein bisschen halbgar, und wahrscheinlich kommen der größere Frame und die bewegliche Sidebar dann in 7.1, sodass meine Screenshots nicht mehr stimmen. We’ll see.

    Beschreibung in Beta-1-Post

    WordPress 7.0 gives the wp-admin experience a boost with a fresh default color scheme, and a cleaner, more modern looking dashboard, while keeping the interface familiar. The upgraded dashboard enhances the editing experience with new visual revision comparisons, and smooth transitioning between screens.

    • Visual Revisions: Working with revisions is even better in 7.0 with the added ability to make visual comparisons to revision versions within the editor.
    • View transitions: Cross-document view transitions in the dashboard offer visual continuity with seamless movement from screen to screen.
    https://wordpress.org/news/2026/02/wordpress-7-0-beta-1/

    Fazit

    Besser als nix, aber doch ziemlich wenig. Ich hatte gehofft, dass zumindest die Modernisierung der linken Sidebar und die Angleichung an den Site-Editor drin sein würden.

  • Gleich hohe Spalten, vertikaler zentrierter Inhalt

    Ein scheinbar simples Layout: Gleich hohe Spalten mit vertikaler Zentrierung der darin enthaltenen Überschrift. Gar nicht so einfach.

    Mit Responsive Grid

    In WordPress 7.0 ist der Grid-Block durch die Option einer minimalen Breite für die Grid-Items responsiv, und zwar ohne Breakpoint.

    Zielorientierte Planung

    Energieberatung + Modernisierung

    Baubegleitung

    Mit Spalten und Stapel

    Das fertige Beispiel:

    Zielorientierte Planung

    Energieberatung + Modernisierung

    Baubegleitung

    Schritt 1: Drei gleich hohe Spalten

    Zunächst einmal Spalten-Block mit drei Spalte-Blöcken und einer Überschrift. Die Spalte bekommt die Hintergrundfarbe, und alles sieht gut aus.

    Zielorientierte Planung

    Energieberatung + Modernisierung

    Baubegleitung

    Schritt 2: Vertikale Zentrierung geht nicht

    Sobald man aber versucht, die Überschrift vertikal zu zentrieren, sind die Spalten nicht mehr gleich hoch.

    Zielorientierte Planung

    Energieberatung + Modernisierung

    Baubegleitung

    Der Spalten-Block wird mit Flexbox gebaut.

    Schritt 3: Ein zusätzlicher Stapel-Block

    Die Lösung liegt in einem zusätzlichen Stapel-Block. Der Spalte-Block bekommt dann eine vertikale Ausrichtung von Stretch to fill, der zusätzliche Stapel-Block eine Mindesthöhe von 100%, damit er so hoch wird wie der umgebende Spalte-Block, und die vertikale Zentrierung sowie Hintergrundfarbe und Padding.

    Zielorientierte Planung

    Energieberatung + Modernisierung

    Baubegleitung

    Zusammengefasst sieht das so anscheinend so simple Layout so aus:

    • Spalten-Block
      • darf keinerlei vertikale Ausrichtung haben (siehe unten)!
    • Spalte-Block:
      • vertikale Ausrichtung Stretch to fill (auf Toolbar, Zwischenraum)
    • Stapel-Block in der Spalte:
      • vertikale Ausrichtung Align middle (auf Toolbar, Mittig ausrichten)
      • Hintergrundfarbe
      • Padding
      • Mindesthöhe 100%

    Wichtig ist, dass der umgebende Spalten-Block keine vertikale Ausrichtung haben darf, und das ist unter Umständen tückisch:

    • Default ist keine der drei Optionen aktiviert.
    • Sobald man eine davon aktiviert, sind die Spalten nicht mehr gleich hoch.
    • Wenig intuitiv ist, das man zum Ausstellen der Optionen noch einmal auf die aktivierte Option klicken muss.

    Am 29. Januar 2026 mit Annette probiert (siehe Beispiel).

    1x Grid-Block

    • Grid Item Position: Auto
    • Max. Columns: 3
    • Min. Column-Width: z. B. 10rem
    • Block-Spacing: regelt die Abstände zwischen den Grid-Items

    3x Stapel-Block

    • Horizontale Ausrichtung: zentriert
    • Vertikale Ausrichtung: zentriert
    • Hintergrundfarbe
    • Padding
    • Colspan und Rowspan: 1 (für asymmetrische Grids)
    • Min. Height: 10rem (reicht, wenn 1 Stapel-Block die Mindesthöhe hat)

    Im Stapel-Block eine Absatz oder eine Überschrift für den Text:

    • Horizontale Ausrichtung: zentriert
    • Schriftgröße: L

  • Ein Vorhang für die Website

    Wenn WordPress auf einem Online-Webspace installiert wurde, ist die Website sofort weltweit erreichbar, und viele Einsteiger fühlen sich dadurch beobachtet.

    Falls Sie lieber erst einmal ohne Publikum alles in Ruhe ausprobieren möchten, können Sie ein Plugin wie CMP – Coming Soon & Maintenance installieren.

    Das Plugin zeigt Besuchenden eine Hinweisseite, während Sie selbst im Front- und Backend ganz normal an der Website arbeiten.

    So können Sie WordPress ungestört kennenlernen, ohne dass Ihnen gleich die ganze Welt zuschauen kann.

  • Mediendaten ausgeben mit X3P0 Media Data

    Das Plugin Media Data von Justin Tadlock im Einsatz

    Groningen - Vismarkt - Cappuvino

  • Anmerkungen sind Kommentare von Benutzern

    Seit WordPress 6.9 gibt es die Möglichkeit, dass Benutzer bei einem Block eine Anmerkung einfügen können:

    Eine Anmerkung wird im Block-Editor eingefügt und ist immer an einen Block gebunden:

    1. Der Cursor steht in einem Block.
    2. Das 3-Punkte-Menü für diesen Block öffnen.
    3. Den Befehl Anmerkung hinzufügen auswählen. In einer rechts erscheinenden Sprechblase kann man dann eine Anmerkung eingeben und speichern.
    4. Sind Anmerkungen vorhanden, erscheint in der oberen Editorleiste eine Sprechblase.
    5. Ein Klick auf die Sprechblase zeigt alle in diesem Dokument vorhandenen Anmerkungen.

    Anmerkungen werden in der Datenbank in der Tabelle für Kommentare gespeichert, und das passt eigentlich sehr gut:

    • Kommentare sind extern und kommen von den ganz normalen Besuchern der Website.
    • Anmerkungen sind intern und stammen von einem in WordPress registrierten Benutzer.

  • Die Vorlagen von Twentig

    Beitrag zum Testen der Vorlagen von Twentig.

    (mehr …)
  • Synchronisierte Vorlagen mit Überschreibungen

    Synchronisierte Vorlagen mit Überschreibungen

    Synchronisierte Vorlagen mit Überschreibungen bieten die Möglichkeit den Inhalt einer eingefügten Instanzen zu überschreiben. Die Gestaltung kann weiterhin zentral geregelt werden.

    Weiterlesen…
  • Synchronisierte Vorlage loslösen

    Synchronisierte Vorlage loslösen

    Man kann eine eingefügte synchronisierte Vorlage von der ursprünglichen Vorlage loslösen. Sie wird dann bei Änderungen des Originals nicht mehr automatisch aktualisiert.

    Weiterlesen…
  • Synchronisierte Vorlage – Instanz

    Synchronisierte Vorlage – Instanz

    Dieser Beitrag enthält eine weitere Instanz einer synchronisierten Vorlage, damit überprüfen kann, ob sich Änderungen auch wirklich überall auswirken.

    Weiterlesen…
  • Synchronisierte Vorlage einfügen

    Synchronisierte Vorlage einfügen

    Die folgende Gruppe ist eine eingefügte synchronisierten Vorlage. Sie ändert sich automatisch, wenn das Original bearbeitet wird.

    Weiterlesen…
  • Synchronisierte Vorlage erstellen

    Synchronisierte Vorlage erstellen

    Eine synchronisierte Vorlage kann man in beliebig vielen Dokumenten eingefügt werden. Wenn man das Original bearbeitet, ändern sich alle eingefügten Instanzen.

    Weiterlesen…
  • Eigene Vorlagen erstellen

    Eigene Vorlagen erstellen

    Das Erstellen eigener Vorlagen ist sehr einfach und kann eine Menge Zeit sparen.

    (mehr …)
  • Komplexes Layout mit Spalten, Stapel und Gruppe

    Komplexes Layout mit Spalten, Stapel und Gruppe

    Ein Beispiel für ein komplexes Layout mit den Blöcken Spalten, Stapel und Gruppe.

    Weiterlesen…
  • Der Buttons-Block

    Der Buttons-Block

    Mit dem Block Buttons können Sie, nun ja, Buttons in Ihr Dokument einfügen.

    (mehr …)
  • Der Block Medien und Text

    Der Block Medien und Text

    Mit dem Block Medien und Text erstellen Sie im Nu ein zweispaltiges Layout mit Bild und Text.

    (mehr …)
  • Der Cover-Block

    Der Cover-Block

    Der Cover-Block macht es sehr einfach, Text über ein Bild zu legen.

    Weiterlesen…
  • Layouts haben drei Breiten

    Layouts haben drei Breiten

    In Block-Themes werden drei verschiedene Breiten definiert: die Inhaltsbreite, Weite Breite und Gesamte Breite.

    Weiterlesen…
  • Der Gruppe-Block

    Der Gruppe-Block

    Ein wichtiger Baustein zum Erstellen von Layouts für Inhalte ist der Block Gruppe.

    Weiterlesen…
  • Ain’t No Sunshine

    Ain’t No Sunshine

    Ain’t No Sunshine von Bill Withers ist ein echter Klassiker und hat auch Jahrzehnte nach seinem Erscheinen nichts von seinem Charme eingebüßt. 

    Den ganzen Beitrag und das Video zeigen…
  • Der Video-Block

    Der Video-Block

    WordPress hat einen integrierten Video-Player zum Abspielen von in Beiträgen oder Seiten eingebundenen Video-Dateien.

    Ich möchte den ganzen Beitrag sehen…