wechsel-auf-ein-wordpress-block-theme


WordPress: Wechsel auf ein FSE Block Theme – meine ersten Schritte

Dieser Beitrag zeigt dir meine ersten Schritte zum Wechsel eines WordPress Themes zu einem Full Site Editing Block Theme.

Mit WordPress 6.0 gehen die Verbesserungen von Block Themes stetig voran. Block Themes, das ist die neue Generation von WordPress Themes. Es ist an der Zeit, sich zu überlegen, wie man das eigene WordPress Theme, in meinem Fall ein Custom Theme , welches schon Block Ready gemacht wurde nun komplett auf ein Full Site Editing Block Theme umstellen kann.

Diesen Beitrag schreibe ich bereits im Block Theme, zur Zeit noch auf lokalem Server, und kopiere es dann rüber.

Mein Style im FSE Block Theme im Block Editor

Block Editor im Custom FSE Block Theme von mediendesign-quer- noch lokal

Block Editor

Das Custom Theme Erdbeer, welches ich verwende ist schon auf Block Ready umgestellt. Es verwendet allerdings noch das Plugin Custom Widgets. Für das Backend verwende ich eine einfache blocks.css. Mit dieser Style ich mir das Backend, den Block Editor, so wie es mir angenehm ist.

Block Editor Design

Ich erstelle mir größere Abstände zwischen den Absatz Blocks und gebe dem Absatz Block einen dezenten beigen Rad. Das gefällt mir sehr gut. Und ich kann mich gut orientieren.

Die Überschriften sind zur Zeit noch blau mit hellblauem Hintergrund. Ich mag das. Ich fühle mich damit wohl. Es ist mein persönlicher Look & Feel, wo mir Schreiben spaß macht.

Schritte der Umstellung auf ein FSE Block Theme

Du kannst die Bilder verschieben. Das ist der Jetpack Bildvergleich Block 😉. Links ist das Design, wie es jetzt auf mediendesign-quer ist, mit Block Ready. Rechts ist ein komplettes Block Theme, welches im Design nachgebaut ist.

Beim Nachbau handelt es sich zunächst um eine Seite, die Referenzen Seite. Diese nehme ich hier als Beispiel.

Links altes Theme – rechts neues Block Theme

Mir ist zunächst wichtig, dass ich versuche, mein altes Design nachzubauen. So sehe ich, was die neuen FSE Block Themes können, bzw. was noch fehlt oder mir nicht so gefällt .

Wie komplex die Umstellung auf ein Full Site Editing Block Theme ist, hängt ganz von der Website ab. Im Prinzip sollten Block Themes so sein, dass man mit jedem Block Theme jedes Design umsetzen können sollte. 😅 Ganz so ist es noch nicht, speziell wenn ich den Navigations Block ansehe ..

  • Eigenes Custom Block Theme

Nachdem ich also mein Custom Block Theme erstellt habe, – bzw. wahrscheinlich noch länger nicht im finalen Stadium damit sein werde, genauso, wie auch der Block Editor immer noch mit WordPress 6.0 im Beta Stadium ist .. – ist der nächste Schritt: ich möchte das Design nachbauen im Block Theme.

  • Design nachbauen

Die Herausforderung liegt gar nicht so sehr im Wechsel auf das Block Theme. Die Herausfoderung sind die CSS Dateien und die Styles. In meinem Fall nehme ich diese CSS Styles ganz einfach in das Block Theme mit.

add_theme_support

Link Tipp: switch your website to full site editing

Wenn man ein bereits vorhandenes Block Ready Theme auf FSE Block Theme wechselt, hat man den Vorteil, dass bereits die CSS Dateien für Blocks vorhanden sind, und das Theme den Block Editor unterstützt.

Will heißen: ich nehme praktisch meine Styles aus dem alten Theme schon mit. Wenn ich ein klassisches Theme habe oder hätte, müsste ich alle Styles für den Block Editor und die Blocks noch extra erstellen. Denn im klassichen Theme habe ich nur den Style für den Classic Editor. Das würde oder entspricht dem Classic Block.

Auch die Styles für den Classic Block habe ich schon erstellt gehabt. Also, das alles nehme ich schon mal mit, oder übernehme ich in das neue Block Theme.

Das geht ganz einfach über add_theme_support. WordPress Full Site Editing verwendet zwar eine theme.json Datei. Aber auch add_theme_support wird in einem Block Theme unterstützt. Allerdings hat die theme.json Datei Priorität . Falls dort aber nichts zu finden ist, greift das add_theme_support. wordpress block editor handbook

Info: Block Themes werden mit theme.json Datei angepriesen. Diese ist allerdings optional. Will heißen, ich kann, muss aber nicht eine solche Datei verwenden.

Zusammenfassung:

Wenn ich also das Block Theme habe und die Styles des alten Themes über add_theme_support im neuen Block Theme integriert habe, fehlen noch viele Dinge, damit das Design im Frontend gleich aussieht:

  • Header erstellen
  • Footer erstellen
  • Sidebar ? 😢
  • Plugins testen – Kompatibilität ?

Neuer Header über den Editor ( Beta )

Egal welches Block Theme du nimmst, du wirst einen neuen Header und einen neuen Footer selber bauen müssen. WordPress übernimmt beim Theme Wechsel nur die Beitrags Inhalte !

  • Variante 1 – Header erstellen und Code kopieren

Bei Variante 1 erstelle ich den Header komplett im Block Editor. Danach gehe ich in die Code Ansicht und kopiere alles nach > parts > header.html in das Block Theme . Dazu brauchst du aber ein FTP Programm. Das macht allerdings auch Sinn. Denn: die Block Theme Dateien werden nicht synchronisiert ! Siehe auch folgendenBeitrag ..

Wenn ich nun im Website Editor ( Beta ) nach Installation des Block Themes zum Beispiel eine Farbänderung vornehme, wird diese in den Block Theme Dateien nicht übernommen.

Wenn man aus irgendeinem Grund aber eine Header Wiederherstellung braucht, weil man sich vertan hat oder irrtümlich etwas gelöscht hat, kann man den Header in den Ursprungs Zustand = Code im Block Theme wiederherstellen.

Wenn dort aber nix ist, dann haste halt nix 😅. Achtung ! Aber dieser Inhalt muss von Anfang an in den Block Theme header.html Datei drinnen sein. WordPress nimmt zur Wiederherstellung nur die erste Fassung, welche im Theme hinterlegt ist !

  • Variante 2 – Header im Editor ( Beta )

WordPress liefert zwei Full Site Editing Editoren. Den Site Editor oder Editor ( Beta) und den Template Editor. Mit beiden kannst du Header und Footer erstellen. Und sie werden synchronisiert.

Wenn du ein WordPress Theme zu einem FSE Block Theme wechselst, fehlen Header und Footer. Diese musst du selber hinzufügen. Bzw. wenn du ein fertiges Block Theme verwendest, sind bereits fertige Designs vorinstalliert.

Hier fehlt natürlich dann der Look & Feel deiner alten Website. Mit Block Patterns kannst du dir sehr einfach einen neuen Header basteln. Das ist aber wieder bald ein Einheits Look, denn wenn die Block Themes mehr werden, werden viele diese fertigen Block Patterns verwenden.

Beispiel Design für den Header

in unterem Beispiel habe ich einen

  • kleinen Header mit Hintergrundbild
  • Logo
  • Navigation
  • zwei Call to Action Buttons

theme.json Datei

Ich habe in meinem Custom Block Theme von mediendesign-quer noch keine theme.json Datei in Verwendung. Alles, was das Block Theme über add_theme_support annimmt, habe ich verwendet.

Vieles wird nur über theme.json Datei unterstützt. Vieles davon brauche ich aber auch gar nicht. Da alles noch im Wandel ist, fühle ich mich mit meinen überschaubaren CSS Dateien viel wohler. Damit kann ich auch alle WordPress Blocks selber stylen.

Header erstellen im Template Editor

WordPress FSE Block Theme mit Template Editor

Link Tipp: Template Editor auf wordpress.org

Zum Bearbeiten des Headers und Footers gibt es den Template Editor und den Website Editor oder auch nur Editor ( Beta ) genannt. Es gibt für mich noch Unstimmigkeiten zwischen Editor und Template Editor. Deswegen arbeite ich lieber mit dem Template Editor.

Link Tipp: does theme.json only work with block based themes

Ich wähle für meinen selbst designten Header im FSE Block Theme den Template Editor. Diesen erkennst du an dem schwarzen Rand. Du findest ihn im Block Editor. In der rechten Sidebar geht zu > Templates > Bearbeiten.

Im Template Editor kannst du nicht nur Header und Footer erstellen, sondern auch den gesamten Inhalt einer Seite. Somit kannst du dein Custom Template erstellen. Header und Footer werden mit dem Editor ( Beta ) synchronisiert.

Für mein Header Design habe ich verwendet:

  • Cover Block
  • Zeilen Block – für Logo und Navigation
  • Bild Block für Logo
  • Navigations Block
  • Buttons Block
  • Abstandhalter Block für dazwischen

Logo einfügen

Es gibt einen eigenen Logo Block. Ich habe allerdings das Logo über einen Bild Block eingefügt.

Navigation hinzufügen

Mit dem Navigations Block habe ich mich noch nicht angefreundet. Diesen finde ich im derzeitigen Stadium zu umständlich. WordPress unterstützt aber auch im Block Theme noch die klassischen Menüs.

Wenn du schon ein Menü erstellt hattest und dein Theme nun zu einem Block Theme wechselst, kannst du dein altes Menü übernehmen. Dann hast du gar keine Arbeit und WordPress fügt alle Navigationspunkte automatisch hinzu.

Ergebnis Header:

Im Großen und Ganzen bin ich mit dem neuen im Template Editor erstellten Header recht zufrieden. Ich finde vom Design her kommt er voll an mein altes Block Ready Theme heran. 😄.

Mankos:

Navigations Block:

Ich hatte in meinem alten – oder noch jetztigen Custom Theme – eine Bootstrap Navigation eingebaut. In dieser konnte ich die Dreieck Icons beim Drop Down Menü farblich extra anpassen. Der WordPress Navigations Block verwendet für diese Dreiecke SVG Files. Die Abstände sind auch anders und das Design auch.

Hier verzichte ich zunächst einmal auf das Design und bin froh, wenn die Navigation auch responsive überall funktioniert. 😄😅. Was sie auch tut.

Wünsche an den Navigations Block: Er soll so einfach gehen, wie in den klassischen Themes 😅.

Der Footer mit Template Editor erstellen

Den Footer erreichst du wieder über den Block Editor in der Sidebar unter > Templates > Bearbeiten. Mein Footer besteht aus drei übereinander gelagerten Spalten Blocks.

Spalten Block 1:

Footer im FSE Block Theme

Der erste Spalten Block besteht aus drei gleich großen Spalten. Der Hintergrund wird dunkelblau. Innerhalb der Spalten verwende ich:

Erste Spalte:

  • Überschriften Block
  • Listen Block

Den Navigations Block kann man horizontal, siehe Hauptnavigation – oder vertikal ausrichten. Wenn ich den Navigations Block in der ersten Footer Spalte horizontal ausrichte, sieht das Design wenig erfreulich aus. Aus diesem Grund nehme ich einfach einen Listen Block und füge dort die entsprechenden Seiten hinzu.

Zweite Spalte:

  • Überschriften Block
  • Absatz Block
  • Social Media Block

Hier werde ich noch überlegen, was mir besser gefällt, der Social Media Block. Aber dort gibt es keinen Xing Button. 😅. Diesen extra ohne Plugin hinzuzufügen, sollte möglich sein – siehe de.wordpress.org/support. Wenn nicht, nehme ich einfach den Absatz Block . Hier könnte ich vornhin noch selber Icons hinzufügen.

3. Spalte:

  • Überschriften Block
  • zwei Absatz Blocks

Die Inhalte kopiere ich direkt aus den ehemaligen Widgets.

Spalten Block 2 :

  • Spalten Block – eine Spalte
  • HTML Block

Hier gebe ich dem Spalten Block wieder einen dunkelblauen Hintergrund. In den HTML Block kopiere ich den Code von meinem Open Street Maps.

Spalten Block 3:

  • Spalten Block eine Spalte
  • HTML Block

Darunter verwende ich wieder einen Spalten Block mit dunkelblauem Hintergrund. Da ich im alten Block Ready Theme dieses Spalte im Customizer mit HTML erstellt habe, verwende ich hier ebenfalls einfach einen HTML Block und kopiere den Inhalt aus dem Widget Block.

Footer im Block Theme

Ergebnis Footer:

Sieht ziemlich gut aus.

Manko:

Ich habe noch im alten Block Ready Theme dazwischen zwei dünne horizontale Linien gehabt. Siehe Bild oben. Diese kann ich so im Trenner Block nicht verwenden. Hier müsste ich zuerst eigene Styles für den Trenner Block erstellen. 😅

Fazit: im großen und Ganzen kann man sehen, das es möglich ist, sein altes Design in einem Block Theme zu übernehmen. Es gibt noch die Feinheiten, welche dann geändert gehören, aber es geht im Prinzip ganz einfach.

Block Editor ( Beta ) ?

Das große Fragezechen ist im Prinzip, dass der Block Editor in WordPress 6.0 immer noch im Beta Stadium ist. WordPress 6.1 kommt wahrscheinlich im Oktober 2022. Die Full Site Editing Block Themes sind m. E. schon Einsatzfähig.

Wer allerdings seine alte WordPress Website zu einem Block Theme wechseln möchte, der sollte schon je nach Bedarf mehrere Dinge überlegen:

  • Will ich mein Website Design behalten ?
  • Ist das Design sehr aufwändig
  • Mit welchen Blocks kann ich Header und Footer nachbauen ?
  • Wieviele Plugins habe ich installiert
  • Welche Plugins sind mit dem Block Theme kompatibel
  • Habe ich in der header.php besondere Dinge stehen ?
  • Wie kann ich die Dinge in der header.php übernehmen ?

Hier noch ein paar gute Link Tipps , welche sich mit diesem Thema beschäftigen:

Abschließende persönliche Bemerkung:

Ich habe diesen ganzen Beitrag schon auf meinem lokalen Test Block Theme geschrieben. Ich bin begeistert. Ehrlich. Auch, dass sozusagen alle meine verwendeten “ kleinen “ Plugins kompatibel sind. Welche Plugins mit Block Themes kompatibel sind, schreibe ich in einem extra Beitrag.

Bei meinem Test fehlen noch zwei Seiten, welche eine Sidebar haben:

  • Bog Übersichts Seite
  • eine weitere statische Seite mit Sidebar

Darüber werde ich noch berichten. Dass muss ich noch erstellen. 😄.

Alles in allem, freu ich mich total, dass meine ersten Schritte, mein Custom Block Ready Theme auf ein Block Theme zu wechseln so toll funktioniert. Ich werde weiter daran arbeiten und auf jeden Fall bis zum Erscheinen von WordPress 6.1 im Oktober 2022 dieses Wesite auf ein Block Theme wechseln.

Dies ist nur ein Gravatar Ursula

Hi, ich bin Ursula. Ich mache Webseiten und WordPress Themes, liebe italienisches Essen, Gelati, Vino Rosso und Il Mare :-) Achtung: Serien Junkie .... --------------------- Werde Fan auf Facebook und Twitter

 

Veröffentlicht in Kategorie: Block Themes, Block Themes



Next Post →