Neuerstellung der Music Artist WordPress Theme Homepage mit dem Block Editor

Eine meiner Lieblingsbeschäftigungen ist es jede Woche, die neuesten Themen zu lesen, um im WordPress-Themenverzeichnis zu landen. Oft gibt es faszinierende Designkonzepte. Die meiste Zeit bin ich jedoch enttäuscht zu erfahren, dass viele Homepage-Designs auf Themenoptionen anstatt auf den Blockeditor angewiesen sind.

Während der Editor mehrere Designeinschränkungen hat, haben Themenautoren viel Platz zum Erkunden. Es hat genug Leistung, um einige dieser benutzerdefinierten Homepage-Designs mit weitaus weniger Codearbeit zu erstellen.

Music Artist war eines der neuesten Themen, die mir ins Auge fielen. Ich mochte den großen Heldenbereich und einige Designelemente des Themas. Nach der Installation stellte ich fest, dass das Homepage-Layout über Themenoptionen gehandhabt wurde. Der Themenautor hätte diese Seite jedoch vollständig aus Blöcken aufbauen und jeden Abschnitt oder sogar das gesamte Design in Blockmuster verpacken können.

Dies alles ist mit dem Blockeditor machbar.

Damit ich praktiziere, was ich predige, habe ich mir ein paar Stunden Zeit genommen und die Homepage-Demo für das Theme direkt aus dem Blockeditor neu erstellt. Kein Code erforderlich. Es gab ein paar knifflige Stücke, auf die ich eingehen werde. Es war jedoch nicht so schwer zu bauen und hätte einfacher gemacht werden können, wenn das Thema den Blockeditor unterstützt hätte.

Der Plan war, die benutzerdefinierte Seite mit dem installierten Music Artist-Design zu replizieren. Die fehlende Blockunterstützung des Themes führte jedoch dazu, dass einige Dinge grundlegend kaputt waren. Stattdessen habe ich ein Thema mit Designähnlichkeiten wie Schriftarten und Farben aktiviert. Da ich bereits wusste, dass Ariele Lite mit dem Blockeditor funktioniert, war es sinnvoll zu sehen, ob ich damit bauen kann. Es erwies sich als solides Fundament.

Das Folgende ist ein Vergleich der ursprünglichen Music Artist-Design-Homepage (erste) und einer Nachbildung, die Blöcke über das Ariele Lite-Design verwendet (zweite):

Es gibt offensichtlich Unterschiede in Abständen, Farben, Typografie und anderen Elementen. Vieles davon hängt von den stilistischen Entscheidungen der Themendesigner ab. Mit mehr Zeit und Modifikationen über ein Plugin wie Editor Plus hätte ich dies genug anpassen können, um eine genauere Nachbildung zu erhalten. Mein Ziel war es jedoch, so nah wie möglich am WordPress-Kern zu bleiben. Technisch gesehen habe ich die neueste Version des Gutenberg-Plugins installiert, daher gibt es möglicherweise einige Elemente, die noch in WordPress landen müssen.

Für dieses Experiment habe ich verwendet:

• WordPress 5.7 Beta
• Gutenberg 10.1 Beta
• Ariele Lite 1.0.8
• EditorPlus 2.6

Ich brauchte Editor Plus nur, um ein paar Randanpassungen am Gruppenblock vorzunehmen. Ich hätte es in Ruhe lassen können, aber ich wollte einen Teil des Abstands zwischen den Abschnitten auf der Seite verringern, um eine genauere Erholung zu erhalten. In Zukunft werden wir mehr Abstandssteuerungen in WordPress sehen, daher hielt ich dies für einen fairen Kompromiss.

Dieses Experiment soll Themenautoren zeigen, dass sie ihre benutzerdefinierten Designs mit dem Blocksystem erstellen können. Das Weglassen von Designoptionen der alten Schule bedeutet viel weniger Codearbeit für Entwickler, sodass sie sich mehr auf das Styling konzentrieren können. Endbenutzer profitieren auch von mehr Flexibilität, z. B. durch das Hinzufügen benutzerdefinierter Elemente oder das Entfernen von Teilen, die sie nicht möchten. Das beinhaltet noch nicht einmal die Stiloptionen auf der Ebene der einzelnen Blöcke.

Der sekundäre Zweck besteht darin, den Benutzern zu zeigen, dass sie einige dieser Homepages ohne Code erstellen können. Der Blockeditor und ein abgerundetes, blockfertiges Design können Sie ziemlich weit bringen.

Neuerstellung der Musikkünstler-Homepage

Beginnend mit einer Basis aus Ariele Lite wurde das Design verpackt. Das Design verfügt jedoch über eine benutzerdefinierte Seitenvorlage „Blank Canvas“, mit der Benutzer die gesamte Seite entwerfen können.

Es gab Elemente, die ich aufgrund von Einschränkungen mit dem Blockeditor nicht vollständig neu erstellen konnte. Andere Teile waren Probleme oder Designentscheidungen, die sich aus dem Thema ergaben.

Das Folgende ist ein allgemeiner Überblick darüber, wie ich die einzelnen Abschnitte der Homepage erstellt habe. Ich werde Teile wie das Hinzufügen von Farben und das Ändern von Schriftgrößen überspringen, während ich mich auf die Layout-bezogenen Konzepte konzentriere.

Helden-Sektion

Der Cover-Block von WordPress bleibt einer meiner Lieblingsblöcke. Es ermöglicht Benutzern, Hero-Abschnitte ohne viel Arbeit zu erstellen. Ich schnappte mir das Hintergrundbild aus der Original-Demo und fügte es ein. Ich hatte den ersten wirklichen Schritt auf dieser Reise gemacht.

Dann fügte ich einen Heading-Block hinzu und passte seine Größe ein wenig an. Ich folgte ihm mit einem Spacer- und Social-Icons-Block.

Ich traf sofort zwei Haken. Das erste war, dass WordPress kein iTunes-Social-Icon enthält. Ich konnte dafür kein offenes Problem im Gutenberg-Repository finden. Vielleicht ist es kein oft nachgefragtes Feature. Das zweite Problem war, dass der Social Icons-Block die Labels der sozialen Netzwerke nicht ausgibt, sodass ich diesen Teil des Designs nicht replizieren konnte.

Abschnitt Diskographie

Es gibt einige Möglichkeiten, diesen Abschnitt zu handhaben. Unter der Annahme, dass es sich bei den aufgelisteten Alben um einen benutzerdefinierten Beitragstyp handelt, hätte das Plugin, aus dem diese Alben stammen, idealerweise einen benutzerdefinierten Block für die Ausgabe. Benutzer können auch den Block „Neueste Posts“ verwenden, wenn es sich um Blog-Posts oder den bevorstehenden Abfrageblock handelt.

Der Einfachheit halber habe ich mich entschieden, einen Spaltenblock hinzuzufügen und drei verknüpfte Bilder einzufügen.

Medien- und Textbereich

Mein Plan für diesen Abschnitt war, den zentralen Medien- und Textblock zu verwenden. Es unterstützt jedoch nur selbst gehostete Medien. Ich hatte keine Möglichkeit, ein YouTube-Video einzubetten.

Stattdessen habe ich mich für einen Spaltenblock entschieden. In der linken Spalte habe ich eine YouTube-Video-URL abgelegt. Auf der rechten Seite habe ich die Blöcke Überschrift, Absatz und Schaltflächen hinzugefügt.

Abschnitt Videos

Dies war ein relativ einfacher Abschnitt zum Nachbauen. Für das Layout brauchte es nur einen Heading-Block, gefolgt von einem Columns-Block. Dann habe ich mir ein paar Videolinks von YouTube geholt und die URLs in den Editor eingefügt.

Abschnitt "Neueste Beiträge".

Das war der Teil des Layouts, mit dem ich die meisten Probleme hatte. WordPress bietet den Block „Neueste Beiträge“, der in einem Raster eingestellt werden kann. Ariele Lite hat die Spalten jedoch nicht korrekt verarbeitet.

Also habe ich ein bisschen geschummelt.

Ich habe zu einem blockbasierten Design gewechselt, das die kommende Funktion zur vollständigen Seitenbearbeitung unterstützt. Dann habe ich einen Abfrageblock eingefügt, um mehr Kontrolle über die Spalten der Beiträge zu erhalten. Danach wechselte ich zurück zum Thema Ariele Lite.

Das ursprüngliche Design könnte mit dem aktuellen Block „Neueste Posts“ erstellt werden, sodass dies kein Blockeditor-Problem ist.

Abschnitt Fußzeile Seitenleiste

Technisch gesehen liegt die Seitenleiste der Fußzeile außerhalb des Rahmens des Homepage-Designs. Es ist ein Teil der Fußzeile des Themas auf der gesamten Website. Ich entschied mich jedoch, es hinzuzufügen, da ich bereits auf einer Rolle war.

Dieser Abschnitt erfordert den Spaltenblock. Von diesem Punkt an müssen Sie für jede Spalte einen Heading-Block einfügen. Ich habe einen Absatz-, Kalender- und Galerieblock hinzugefügt, um die drei „Widgets“ neu zu erstellen.

Das Kalender-Blockdesign von Ariele Lite funktioniert besser auf einem hellen Hintergrund. Es war ein kleiner Schmerzpunkt, den ich übersehen habe. Langfristig sollte WordPress Designkontrollen für Blöcke bereitstellen, denen diese fehlen.