DE{CODE}: Modern Theming and the Future of WordPress: Working with Full Site Editing and Beyond

Mit WordPress 5.9 wurde Full Site Editing in den Kern eingeführt, was eine große Veränderung in der Art und Weise bedeutet, wie wir Websites mit WordPress erstellen. Schließen Sie sich in dieser DE{CODE}-Session dem WP Engine Developer Advocate Nick Diego an, während er diese Änderungen entpackt, sowie einige Möglichkeiten, wie Sie sie nutzen können, um bessere Websites zu erstellen – auf die moderne WordPress-Art.

Sitzungsfolien

Vollständige Textabschrift

NICK DIEGO : Hallo und willkommen bei „Arbeiten mit der vollständigen Seitenbearbeitung und der Zukunft des modernen Theming in WordPress“. Mein Name ist Nick Diego und ich bin ein Entwickleranwalt hier bei WP Engine. Also ein bisschen über mich – also begann ich 2012 mit WordPress zu arbeiten. Ich war hauptsächlich Plugin-Entwickler und habe seitdem dazu übergegangen, viel mit Block-Themes zu tun. Ich bin eigentlich im November 2021 zu WP Engine gekommen, also ist dies eine Art neuer Auftritt für mich. Ich interessiere mich leidenschaftlich für Blöcke und Muster und alles, was die Bearbeitung vollständiger Websites betrifft, weshalb ich mich sehr freuen könnte, heute diese Präsentation zu halten.

Was ist also eine vollständige Website-Bearbeitung? Wir haben in den letzten Jahren viel davon gehört. Es handelt sich also tatsächlich um „eine Sammlung von Funktionen, die die vertraute Erfahrung und Erweiterbarkeit von Blöcken in alle Teile Ihrer Website bringen, anstatt nur in Beiträge und Seiten.“ Es handelt sich also eigentlich um ein Bündel von Funktionen, zu denen Dinge wie der Site-Editor, globale Stile, Themenblöcke, Vorlagen und natürlich Blockdesigns gehören.

In unserem heutigen Gespräch werden wir also ein paar verschiedene Dinge behandeln. Wir werden mit den Grundlagen beginnen. Ich möchte sicherstellen, dass wir alle auf derselben Seite sind, insbesondere in Bezug auf die Terminologie. Dann werden wir über die Anatomie eines Blockdesigns sprechen, dann über globale Stile, In-Settings, die die Datei theme.json enthalten. Und schließlich werde ich meine Gedanken zu modernen Themen teilen und wie diese aussehen werden.

In der heutigen Präsentation werden wir also eine Reihe verschiedener Beispiele verwenden, und diese stammen aus dem 2022-Theme, das bereits im Januar 2022 in WordPress 5.9 enthalten war. Dies ist ein Block-Theme, das vom Core entwickelt wurde WordPress-Team, und es ist ein großartiger Ausgangspunkt, und es ist im Plugin-Repository verfügbar, also gibt es kein besseres Thema für Beispiele.

Wenn wir also heute anfangen, werden wir wieder mit den Grundlagen beginnen. Und es gibt nichts Grundlegenderes als einen Block. Wenn Sie also WordPress in den letzten Jahren verwendet haben, sind Sie wahrscheinlich sehr vertraut mit Blöcken. Sie sind die grundlegende Inhaltseinheit in WordPress. Es kann ein Textabsatz oder eine Bildergalerie sein. Es kann fast jede Form annehmen. Und die Idee hinter der vollständigen Website-Bearbeitung ist, dass bald oder jetzt alles auf Ihrer Website ein Block sein wird. Wir werden mehr darüber besprechen, wie das funktioniert.

Hier haben wir nun ein Beispiel für eine Reihe verschiedener Blöcke, die sich derzeit in WordPress befinden. Die beiden linken Spalten sollten Ihnen vertraut sein. Wir haben Absätze und Überschriften und Deckblöcke – und so weiter und so weiter. In 5.9 – auch das wurde dieses Jahr veröffentlicht – haben wir jetzt sogenannte Themenblöcke. Dies sind Blöcke, bei denen es sich um Inhalte handelt, die Sie traditionell nicht direkt in WordPress bearbeiten können.

Dazu gehören Dinge wie Ihr Website-Logo, Abfrageschleife, Beitragsauszug, Beitragsautor. Dies sind alles Arten von Inhalten, die Sie direkt in Ihre PHP-basierten Vorlagendateien und Ihren Code eintauchen oder ein Plugin eines Drittanbieters verwenden müssten, das Sie bei der Bearbeitung dieser Bereiche unterstützt. Und diese kommen alle oder sind zu WordPress gekommen und ermöglichen Benutzern, sie direkt zu bearbeiten, und sie haben alle die Form eines Blocks.

Als nächstes wollen wir über Muster sprechen. Muster sind eine Art Eckpfeiler der vollständigen Website-Bearbeitung. Muster könnten ein ganzes Gespräch für sich sein, aber wir geben Ihnen eine kleine Vorschau auf Muster, wenn Sie nicht vertraut sind. Ein Muster ist also nur eine vordefinierte Sammlung von Blöcken, die ein bestimmtes Layout bilden. Ein Muster könnte ein einzelner Block mit etwas Styling sein. Es können mehrere Blöcke sein.

Mit Mustern können Benutzer mit einem einzigen Klick ein komplettes Design direkt in ihre Website einfügen, anstatt das Design Block für Block manuell erstellen zu müssen, was die Entwicklung einer Website wirklich beschleunigen kann. Es ist auch sehr nützlich, wenn Sie sich daran erinnern, dass Sie diese schöne Website-Demo sehen, und sie enthält all diese Inhalte. Und Sie installieren das Thema und es ist wie, nun, wie bekomme ich diese Demo? Muster lösen das für Sie, da der Themenautor eine ganze Reihe von Seitenlayouts oder individuellen Designs bereitstellen kann, die ein Benutzer mit einem einzigen Klick einfügen und die Demo abrufen kann, die er gesehen hat und von der er angezogen wurde, als er das Thema ausgewählt hat.

Werfen wir also einen kurzen Blick auf ein Muster hier. Wir haben nur eine einfache Überschrift, etwas Text und einige Schaltflächen. Und das kann wiederum mit einem einzigen Klick in die Seite eingefügt werden, und wir sehen hier, dass es aus drei verschiedenen Blöcken besteht, einem Kopfzeilenblock, einem Absatzblock und einem Schaltflächenblock.

Jetzt mit 5.9, das dieses Jahr herauskam, haben wir die Einführung des Muster-Explorers gesehen. Das 2022-Thema, das ich bereits erwähnt habe und das wir in all unseren Beispielen verwenden, heißt Brutstätten-Thema – viele Vögel. Und Sie können hier im Muster-Explorer sehen, dass wir eine Reihe verschiedener Designs haben, die die Themenautoren erstellt haben.

Als Benutzer kann ich also jedes davon direkt in die Website einfügen, und ich erhalte die gleiche Ästhetik, für die der Themenautor das Thema entworfen hat, also seine Lautsprecherserie, einige Vögel nebeneinander – was auch immer Sie möchten. Und Muster und die Muster, die mit einem Thema geliefert werden, sind sehr wichtig für diese vollständige Website-Bearbeitungserfahrung.

Als nächstes haben wir den Editor. Wir können nicht nicht über den Editor sprechen. Wenn Sie WordPress verwendet haben, sind Sie wahrscheinlich sehr vertraut damit. Aber ich möchte das erwähnen, weil der Editor in der Vergangenheit viele verschiedene Namen hatte – Block Editor, Gutenberg, The Gutenberg Editor. Für diese Diskussion rufen wir einfach den Editor an. Das ist der offizielle Name dafür, und das werden Sie hier sehen. Auch dies wurde Ende 2018 in WordPress 5.0 eingeführt.

Im Editor klickst du also einfach auf den Insertor und kannst deine Blöcke und Muster einfügen. Jetzt wollte ich den Bildschirm zeigen, weil wir als nächstes über den Site-Editor sprechen müssen. Irgendwann wird das Site-Präfix des Site-Editors wahrscheinlich verschwinden, und wir werden nur noch den Editor haben. Der Site-Editor ist jedoch ein zusammenhängendes Erlebnis, mit dem Sie verschiedene Vorlagen, Vorlagenteile, Gestaltungsoptionen und mehr direkt bearbeiten und zwischen ihnen navigieren können.

Im Grunde nimmt der Site-Editor also unseren Standard-Editor, an den wir uns in den letzten Jahren gewöhnt haben, und bringt ihn auf die nächste Stufe, indem er Benutzern ermöglicht, zusätzliche Bereiche Ihrer Website zu bearbeiten, die jetzt alle von Blöcken unterstützt werden. Daher führte WordPress 5.9 die vollständige Seitenbearbeitung und damit den Site-Editor ein. Und in Version 6.0, die im Mai herauskommt, werden wir viele Verbesserungen sehen, was sehr aufregend ist.

Wenn Sie also ein Blockthema wie 2022 verwenden, können Sie auf den Site-Editor zugreifen. Es gibt zwei verschiedene Möglichkeiten, die obere Seitenleiste und dann unter dem Darstellungsbereich. Jetzt noch einmal der Site-Editor, weil er Teil des – er ist sehr leistungsfähig, er ist nur für Administratoren verfügbar. Also keine Sorge, Redakteure, sie werden nicht auf den Site-Editor zugreifen können. Sie müssen ein Administrator sein, um auf den Site-Editor zugreifen zu können.

Und sobald wir hier reinspringen, sieht es dem Standard-Editor sehr ähnlich, aber Sie werden etwas ein bisschen anders bemerken. Ganz oben hier haben wir Zuhause. Und dies sagt uns, dass wir tatsächlich die Vorlage home.HTML bearbeiten, und wir haben ein paar verschiedene Bereiche der Seite, die wir separat bearbeiten können. Wie Sie hier sehen können, haben wir die Kopf- und Fußzeile.

Das ist also etwas, was Sie vorher nie tun konnten. Sie konnten die home.PHP-, aber jetzt HTML-Vorlage nie direkt von der Benutzeroberfläche aus bearbeiten, nicht ohne eine andere Erweiterung eines Drittanbieters.

Und wenn wir auf die Seite und die Listenansicht klicken, können wir sehen, dass wir eine Abfrageschleife haben. Auch hier sind diese vertrauten Bauthemen wahrscheinlich sehr, sehr, sehr vertraut mit dem Erstellen von Schleifen innerhalb von Vorlagen für Themen, aber hier können wir das alles mit Blöcken tun, die die Abfrageschleife verwenden. Und wir können auch einige dieser anderen Themenblöcke sehen, wie den Titel des Beitrags, das vorgestellte Bild, den Auszug des Beitrags und das Datum des Beitrags. Diese können alle vom Benutzer über die Benutzeroberfläche verschoben und geändert werden, ohne dass eine Codierung erforderlich ist.

Wenn Sie jetzt auf ein kleines WordPress-Symbol oder Website-Symbol klicken, können wir diese Seitenleiste erhalten. Und dann können wir sehen, dass wir Zugriff auf alle unsere Vorlagen und Vorlagenteile haben. Nun möchte ich anmerken, dass der Ablauf – alle diese Bildschirme vollständig in der Entwicklung sind. Die vollständige Bearbeitung der Website befindet sich noch in der Beta-Phase, und es wird noch eine Menge Verfeinerungen und Verbesserungen geben. Was wir heute sehen, sieht in sechs Monaten vielleicht nicht mehr so ​​aus, aber es ist ein fantastischer Anfang.

Wenn wir also zu den Vorlagen gehen, können wir alle Vorlagen sehen, die in 2022 enthalten sind. Sie sollten einige bekannte sehen, wie Page und Index und Home und 404. Und wenn wir dann zu unseren Vorlagenteilen gehen, können wir einige benutzerdefinierte sehen Vorlagenteile, die von den Themenautoren eingefügt wurden. Wir haben also ein paar verschiedene Kopfzeilen und wir haben eine Fußzeile.

Alle diese sind jetzt wieder vom Benutzer bearbeitbar. Wenn wir also diesen kleinen winzigen Punkt hier sehen, können wir sehen, dass dieser Header-Vorlagenteil von mir bearbeitet wurde. Wenn Sie jetzt ein Vorlagenteil oder eine Vorlage bearbeiten, werden diese Änderungen in der Datenbank gespeichert. Sie ändern die Vorlagen in Ihrem Design nicht wirklich, was großartig ist, da Sie jederzeit zu den Designvorlagen oder Vorlagenteilen zurückkehren können.

Aber noch einmal, wenn wir hier hineinklicken, können wir mit der Bearbeitung dieses Header-Template-Teils beginnen, und Sie werden sehen, dass all dies aus Blöcken besteht. Es ist also dieselbe Erfahrung, die Sie im Editor verwenden würden, wenn Sie einen Beitrag oder eine Seite bearbeiten. Sie können dies jetzt im Site-Editor für alle Ihre Vorlagen und Vorlagenteile tun.

Das war also ein kurzer Durchlauf des Site-Editors und seiner Funktionsweise, aber jetzt möchte ich über die Anatomie eines Blockdesigns sprechen, das die wichtigste grundlegende Komponente der vollständigen Site-Bearbeitung ist. Wie funktioniert also die Anatomie eines Blockthemas? Nun, es ist eigentlich in ein paar verschiedene Kategorien unterteilt. Wir haben also Blockthemen. Sie umfassen vollständig die Bearbeitung der gesamten Website. Themenvorlagen bestehen vollständig aus Blöcken. Vorlagen und Vorlagenteile sind eher HTML als PHP.

Und dann möchte ich anmerken, dass ein Blockthema sehr einfach sein kann. Es muss lediglich aus einer style.CSS-Datei und einer index.html-Datei sowie einer index.PHP-Datei bestehen. Diese PHP-Datei ist eine Art Überbleibsel der traditionellen WordPress-Designentwicklung und wird wahrscheinlich in Zukunft verschwinden.

Und schließlich enthalten die meisten Blockdesigns eine theme.JSON-Datei. Darüber sprechen wir gesondert. Es ist ein sehr wichtiges Thema in Bezug auf globale Einstellungen und Stile. Werfen wir also einen Blick auf die Dateistruktur des Themas. Das ist also 2022, eine gekürzte Version der Dateistruktur innerhalb von 2022. Und wir können diese erforderlichen Dateien genau hier sehen.

Dann bemerken wir auch, dass es einige Ordner gibt, nämlich Templates und Template Parts. In jedem dieser Ordner befinden sich alle HTML-Dateien für jede Vorlage und jeden Vorlagenteil. Was hier nicht sichtbar ist, was eigentlich wirklich aufregend ist, also wollte ich das reinschmuggeln, Gutenberg, das Gutenberg-Plug-in, in dem all diese zukünftige Entwicklung der vollständigen Site-Bearbeitung durchgeführt wird, hat kürzlich einen neuen Ordner namens Patterns eingeführt. Sie können Ihre Musterdateien also tatsächlich direkt im Musterordner ablegen, und WordPress registriert sie für Sie. Nur ein kleiner Vorgeschmack. Ich empfehle Ihnen dringend, sich Gutenberg und all die neuen Funktionen anzusehen.

Aber zurück zur Folie hier. Wir haben unsere Vorlagen und Vorlagenteile. Und Sie können die einzelnen HTML-Dateien für jede sehen. Um nun besser zu verstehen, wie das funktioniert, werfen wir einen Blick auf die Datei 404.HTML. Dies ist eine Datei oder eine Seite auf Ihrer Website, die Sie niemals direkt bearbeiten könnten, es sei denn, Sie haben sich in Code eingetaucht oder Sie haben eine Ressource eines Drittanbieters verwendet, mit der Sie diese Vorlage bearbeiten können.

Wenn wir also zurück zum Site-Editor gehen, können wir sehen, dass unsere 404-Seite genau hier ist. Wenn wir darauf klicken, kann der Benutzer jetzt die verschiedenen Komponenten dieser Vorlage bearbeiten. Lassen Sie uns jedoch einen Blick darauf werfen, aus welchem ​​tatsächlichen HTML-Code diese Vorlage besteht, dem Code, der tatsächlich im Design enthalten ist.

Hier können wir also sehen, dass wir unsere 404.HTML-Datei haben, und sie hat eine Menge Markups. Oben und unten beginnend sehen wir, dass wir die Spezifikation für einen Vorlagenteilblock haben. Was dies tut, ist, dass es auf unsere registrierten Vorlagenteile verweist und sie in die Vorlage zieht. Wenn wir also hierher zurückspringen, können wir sehen, dass wir einen footer.HTML-Teil und einen header.HTML-Teil haben. Und darauf wird hier verwiesen.

Dies ist also ein einzigartiger Block, mit dem Sie Vorlagen abrufen können, die aus anderen Blöcken bestehen. Jetzt könnten Sie natürlich einfach alle Blöcke, die eine Kopfzeile bilden würden, und alle Blöcke, die eine Fußzeile bilden würden, einbeziehen, aber indem Sie auf den Vorlagenteil verweisen, können Sie alles an einem Ort erledigen und dann denselben Vorlagenteil anwenden über alle Ihre Vorlagen hinweg, ähnlich wie Sie es in einem traditionellen WordPress mit PHP tun würden.

Nun, wenn wir weiter schauen, haben wir etwas Markup, nur ein Haupt-Markup, und dann haben wir ein div. Ich werde nicht zu tief darauf eingehen. Hier passieren einige interessante Dinge, nämlich das Layout hier drin, das zwar einige Layouteinstellungen vornimmt, aber das ist nur allgemeines Markup für die Seite, das 404-Muster.

Nun, ich erwähnte Muster. Der 404 in diesem Thema ist tatsächlich zu einem Muster gebündelt. Alle Blöcke, aus denen der 404-Inhalt besteht, befinden sich also in einem Muster. Und dann haben wir einen Musterblock, der tatsächlich auf dieses Muster verweist und dann diese Blöcke einzieht. Nun könnten Sie natürlich wieder alle Blöcke, aus denen die 404-Seite besteht, hier einfügen, aber indem Sie sie in ein Muster einfügen und dann auf sie verweisen, wird die Verwaltung nur ein wenig einfacher.

Wenn wir also zum Site-Editor zurückkehren, haben wir unseren Inhalt und können die verschiedenen Abschnitte sehen. Der obere Teil ist also der Header-Template-Teil, der hereingezogen wird. Und dann ist der Hauptabschnitt natürlich das 404-Muster, das hereingezogen wird. Und jetzt, da dies alles Blöcke sind, müssen wir sie nur noch so bearbeiten, wie wir es normalerweise tun würden . Wir können es mutig machen. Wir könnten die Farbe ändern. Wir könnten Blöcke entfernen, Blöcke hinzufügen – und so weiter und so weiter.

Ziemlich einfach, und wir mussten überhaupt keinen Code bearbeiten. Wir mussten verstehen, wie der Code funktioniert, aber wir mussten überhaupt keinen Code anfassen. Wenn wir dann zufrieden sind, klicken wir einfach auf Speichern. Auch hier werden diese Änderungen in der Datenbank gespeichert, sodass Sie die Designdateien nicht wirklich ändern. Wenn wir also die Änderungen rückgängig machen, kehren wir zu dem zurück, was das Thema bereitstellt.

Eines der großartigen Dinge am Site-Editor – und auch dieser befindet sich noch in der Entwicklung – ist, dass Sie neue Vorlagenteile hinzufügen können. Also noch einmal, dieses Thema fügt eine Reihe verschiedener Kopf- und Fußzeilen hinzu, aber was wäre, wenn wir mehr hinzufügen wollten? Vielleicht wollten wir eine Seitenleiste. Vielleicht wollten wir verschiedene Inhaltsabschnitte. Wir können das direkt im Site-Editor tun.

Und wieder wird dieser Ablauf verbessert – mehr Features, mehr Funktionen. Aber es ist derzeit funktionsfähig, und Sie können alles direkt hier hinzufügen. Beachten Sie, dass Sie im Site-Editor noch keine Vorlagen hinzufügen können. Sie können innerhalb einer anderen Oberfläche innerhalb des WordPress-Editors, aber noch nicht ganz im Site-Editor. Aber das wird noch kommen.

Der letzte Teil davon ist also, dass wir darüber gesprochen haben, all diese Änderungen vorzunehmen. Nun, was wäre, wenn Sie alle Ihre Änderungen einfach als ein einzelnes Design exportieren könnten, das tatsächlich kommt, und es ist wirklich interessant zu sehen, wie sich das auf die Designentwicklung auswirkt. Mit der neuesten Version von Gutenberg können Sie jetzt alle Ihre Änderungen plus das ursprüngliche Design exportieren.

Sie werden zusammengeführt und Sie können es als brandneues Design exportieren, wobei alle Ihre Änderungen auf die Dateien innerhalb des Designs angewendet werden. Sie könnten sich also vorstellen, 2022 zu nehmen. Sie laden es hoch. Sie nehmen alle Ihre Änderungen vor. Sie können einige Vorlagen ändern und dann ein vollständiges Design exportieren. Es hat einige sehr interessante Implikationen für die zukünftige Themenentwicklung.

Jetzt müssen wir über globale Einstellungen und Stile sprechen. Dies ist diese theme.JSON-Datei. Dies ist brandneu in WordPress und so aufregend wie knifflig. Wenn wir also auf das Thema 2022 zurückblicken, sehen wir diese Datei dort ganz oben. Und wenn wir in die theme.JSON-Datei springen, sind es wirklich fünf Abschnitte, von denen einer nur die Versionsnummer ist.

Und ich werde kurz über benutzerdefinierte Vorlagen und Vorlagenteile sprechen. Wenn Sie also eine benutzerdefinierte Vorlage haben, eine vollständig benutzerdefinierte Vorlage, die WordPress natürlich nicht erkennt, können Sie sie hier registrieren. Hier registrieren Sie auch alle diese Vorlagenteile wie Kopf- und Fußzeilen. Jedes traditionelle Template, wie Index, Page, Post – diese Templates, die WordPress im Allgemeinen erkennt – müssen Sie hier nicht einfügen, nur benutzerdefinierte und natürlich Ihre eigenen Template-Teile.

Aber das Fleisch von theme.JSON ist Ihr Einstellungs- und Stilbereich. Wenn wir uns also zuerst die Einstellungen ansehen, passiert hier eine Menge. Und das ist wieder sehr gekürzt. Aber der obere Teil sind globale Einstellungen. Dies sind Einstellungen, die sich auf den Site-Editor und den Editor auf Ihrer gesamten Site auswirken. Dazu gehören Dinge wie Rahmen und Farbe und Typografie. Hier würden Sie die Farbpalette für Ihr Design, die Typografieeinstellungen für Ihr Design, die Schriftarten usw. festlegen.

Und dann haben wir auch Einstellungen auf Blockebene, bei denen Sie beispielsweise eine Farbpalette für Ihre gesamte Website festlegen können, aber dann eine kleinere Farbpalette und eine völlig andere Farbpalette festlegen, beispielsweise für den Absatzblock oder den Schaltflächenblock. Es bietet also eine enorme Flexibilität, aber Einstellungen sind die Funktionen, die einem Benutzer innerhalb des Editors oder innerhalb eines Blocks zur Verfügung stehen.

Wenn wir uns also noch einmal die Farbe ansehen, haben wir hier unsere Palette definiert. Wir haben eine Vordergrundfarbe, einen Hintergrund und dann die Primärfarbe Schwarz, Weiß und eine Art Waldgrün. Und wenn wir dann in den Editor gehen, können wir sehen, dass, wenn unser Farbwähler erscheint, wir diese Farben definiert haben, aus denen ein Benutzer auswählen kann.

Kommen wir nun zum Stil. Stile sind also im Grunde wie Ihr CSS. Traditionell würden Sie also Ihr gesamtes CSS in einer styles.CSS-Datei oder einem anderen Setup zusammenfassen. Aber der Stilabschnitt von theme.JSON ermöglicht es Ihnen, den Stil auf Blockebene und auch auf globaler Ebene für Ihr gesamtes Design festzulegen. Betrachten Sie diese als Standardeinstellungen, richtig, denn der Editor – der springende Punkt ist, dass Benutzer dort einsteigen und mit dem Modifizieren und Ändern beginnen und ihre Website mithilfe von Blöcken so gestalten können, wie sie möchten.

Es muss jedoch ein Standardwert vorhanden sein, und dieser wird im Stilabschnitt des Themas festgelegt. JSON ist dieser Standardwert. Wir haben also wieder globale Stile, ähnlich wie unsere globalen Farben, globale Typografie, und dann können wir auch Stile auf Blockebene festlegen. Die Sache mit den globalen Stilen ist also, dass wir die Hintergrundfarbe unseres Themas festlegen würden. Hier würden wir die Schriftgrößen für unsere Überschriften, die verschiedenen Typografieoptionen für Links und Text und Überschriften und all diese Sachen festlegen. Und auf Blockebene können wir dasselbe tun, aber speziell für Blöcke.

Nun, eines der netten Dinge am Einstellungsabschnitt, über den wir gerade gesprochen haben, ist, dass WordPress immer dann eine Variable definiert, wenn Sie eine Einstellung erstellen. Als wir uns also diese Farbpalette ansahen, definierten wir Hintergrund, Vordergrund und Primärfarbe. WordPress wird tatsächlich eine Variable generieren, die diesem Hex-Code zugeordnet ist, unabhängig davon, welcher Hex-Code für Primär, Vordergrund und Hintergrund festgelegt ist.

In Styles können wir diese Variablen verwenden, um die Styles sowohl für globale als auch für Block-Level-Styles zu definieren. Der Vorteil davon ist, dass, wenn ein Benutzer jemals die Hintergrundfarbe ändern sollte, diese durch die Stilspezifikation in theme.JSON fließt. Wenn wir uns jetzt den Blockabschnitt ansehen, haben wir hier unseren Schaltflächenblock, und wir haben diesen von einem Themendesigner.

Ich wollte, dass meine Schaltflächen die Standardfarbe Grün mit etwas weißem Text haben. Sie können sehen, dass wir im Farbabschnitt des Schaltflächenblocks die Hintergrundfarbe als Primärfarbe definieren, also Waldgrün, und unser Text ist der Hintergrund, der Weiß ist. Daher können wir diese Variablen im gesamten theme.JSON verwenden, um Stile für unsere Blöcke und für die Website selbst zu definieren.

Nun, das knüpft an globale Stile an, auf die ich zuvor angespielt habe. Also zurück in den Site-Editor, wenn wir oben auf diesen kleinen zweifarbigen Kreis klicken, öffnen wir unser globales Styles-Panel. Nun, hier ist eine Menge los, also werde ich nur kurz demonstrieren, wie es funktioniert. Aber wissen Sie, dass ich Sie ermutige, das 2022-Design oder ein anderes Blockdesign herunterzuladen und globale Stile wirklich zu erkunden.

Und wenn wir hier reinspringen und uns Farben ansehen, darauf klicken, können wir jetzt sehen, dass die Farbpalette da ist, die vom Thema bereitgestellt wird, sowie einige andere Elemente, wie z. B. unser Hintergrund, Text und Links . In diesem Bereich, den wir uns hier ansehen, bearbeiten wir jetzt die globalen Elemente der Site. So haben wir zum Beispiel über den Hintergrund der Seite gesprochen. Im Moment ist es weiß. Wenn ich also auf Hintergrund klicke, kann ich hier reinkommen und sehen, dass es als Weiß ausgewählt ist. Dies ist die Farbe, die wir in theme.JSON festgelegt haben.

Aber was ist, wenn ich diese Pfirsichfarbe wirklich mag? Nun, mit einem einzigen Klick kann ich klicken, und los geht's. Unsere Hintergrundfarbe unserer Website ist jetzt Pfirsich. Dies gibt dem Benutzer eine beispiellose Kontrolle, um seine Website vollständig an seine Bedürfnisse anzupassen. Aber auch hier stellt theme.JSON den Standard bereit, den Sie als Designentwickler dem Benutzer zur Verfügung stellen, und er kann ihn dann von dort aus übernehmen.

Das war also ein sehr kurzer Überblick über die vollständige Site-Bearbeitung und den Site-Editor und Blockthemen. Aber ich möchte mir etwas Zeit nehmen und über meine Gedanken zur Zukunft der modernen Thematisierung sprechen. Wenn wir also an moderne Themen denken, wird modernes Thema meiner Meinung nach das Design über die Entwicklung betonen. Jetzt denkst du vielleicht, nun ja, beim Entwerfen von Themes geht es immer um Design.

Aber wenn Sie an die traditionelle Themenentwicklung zurückdenken, gab es eine Menge tatsächlicher Codierung, die getan werden musste. Alle Vorlagendateien waren PHP, was ein erhebliches Maß an Wissen über WordPress sowie PHP-Entwicklung erforderte, um es richtig zu machen und zu machen. Nun, das ändert sich irgendwie. Wir sehen jetzt, dass Sie mit dem Editor Themen direkt in der Benutzeroberfläche des Site-Editors und des traditionellen Editors entwerfen können.

Und das wird eine große Rolle dabei spielen, wie wir Themen entwerfen. Ich bin also ein Developer Advocate für WP Engine, und in unserem Team erstellen wir ein experimentelles Thema namens Frost. Und wenn wir ein neues Muster erstellen oder eine Vorlage ändern möchten, gehen wir nicht in die Dateien und optimieren die Dateien. Wir gehen in den Site-Editor oder gehen in den Editor und ändern dieses Muster oder erstellen ein Muster oder erstellen eine Vorlage. Und dann sind wir damit zufrieden, wir exportieren es und fügen es dann in das Thema ein.

Wir codieren also nicht wirklich. Wir machen eigentlich alles visuell. Und der Vorteil davon ist, dass wir wissen, dass ein Benutzer, die Leute, die das Thema verwenden werden, auch dort sein werden, um das Muster oder die Vorlage zu optimieren. Und daher macht es Sinn, während wir das Design erstellen, den gleichen Prozess durchzuführen, den ein Benutzer tun würde, um das Design zu verwenden, was meiner Meinung nach einfach magisch ist.

Und dies wird zu einer Low-Code- oder sogar No-Code-Methode der Themenentwicklung führen. Jetzt sind wir natürlich auf einer Entwicklerkonferenz, oder? Wir sprechen also von No Code und Low Code. Aber mein letzter Punkt, wir werden darüber sprechen, wo meiner Meinung nach die Entwicklung liegt. Aber ich denke, das ist wirklich aufregend, weil es eine neue Generation von Benutzern anziehen wird, Leute, die ihr eigenes Design erstellen und ihr eigenes Design anpassen möchten, aber vielleicht keine PHP- oder JavaScript-Kenntnisse haben .

Sie können das alles jetzt im Site Editor tun, was meiner Meinung nach eine Art Ethos von WordPress ist, das Veröffentlichen zu demokratisieren. Und ich denke, dass Full-Site-Editing wirklich danach strebt. Und in den letzten zwei Jahren oder im letzten Jahr, ehrlich gesagt, haben wir solche Fortschritte bei der Bearbeitung der gesamten Website gesehen. Es wird ziemlich spannend. Daher glaube ich fest daran, dass die vollständige Seitenbearbeitung die Zukunft des traditionellen WordPress ist.

Nun, es ist vielleicht nicht jedermanns Sache. Das möchte ich ganz klar sagen. Und es gibt noch viel Entwicklungsbedarf. Wenn wir also über verschiedene Arten von Menschen sprechen, die WordPress verwenden, haben wir alles vom Standardbenutzer bis hin zu Agenturen. Und Agenturen möchten ihren Kunden möglicherweise eine sehr saubere, sehr strukturierte Oberfläche zur Verfügung stellen, damit sie ihre Websites verwenden und daran arbeiten können. Das ist möglicherweise keine vollständige Website-Bearbeitung. Ich denke, das ist in Ordnung.

Aber wie wir in der Wirtschaft sehen, haben wir Squarespace und Wix und Element oder andere Seitenersteller. Es gibt ein riesiges Kontingent der Web-Community von Benutzern, die ein Tool wollen, das es ihnen ermöglicht und sie befähigt, ihre eigene Website zu bearbeiten und zu gestalten. Und ich denke, WordPress hat in WordPress wirklich gefehlt, besonders in Core. Und ich denke, das ist das Ziel des Full-Site-Editings und das ist eine Art Versprechen des Full-Site-Editings.

Also viel zu tun. Noch eine Tonne zu tun. Es gibt noch viele Dinge, die wir herausfinden müssen, nämlich Dinge wie reaktionsschnelle Steuerelemente und wie wir verschiedene Komponenten der Benutzeroberfläche einschränken, damit bestimmte Benutzer weder Designs durcheinander bringen noch Dinge ändern, die sie nicht sollten. Also eine Menge Dinge, die noch herauszufinden sind.

Aber einer der Bereiche, die ich für wirklich spannend halte, ist die Entwicklung für die vollständige Bearbeitung von Websites. Jetzt, da wir dieses Tool haben, mit dem Benutzer ihr eigenes Thema oder ihre eigene Website entwerfen können, müssen wir darüber nachdenken, wie wir dies auf die nächste Stufe bringen können. Wie können wir als Entwickler darauf aufbauen? Wenn wir an traditionelles WordPress zurückdenken, nehmen wir den Widget-Bildschirm – Widgets im Allgemeinen. WordPress bot ein sehr niedriges Niveau an Widgets und Funktionen, und die Entwickler gingen los und bauten alle möglichen Erweiterungen.

Und ich denke, die gleiche Idee muss auf die Bearbeitung der gesamten Website angewendet werden. Im Moment gibt es, wenn überhaupt, nur sehr wenige Erweiterungen und Plug-Ins, die die vollständige Website-Bearbeitung wirklich nutzen und auf die nächste Stufe bringen. WordPress wird die Bearbeitung der gesamten Website fortsetzen und einen Punkt erreichen. Aber es wird nie alles tun, was alle wollen, und ich denke, jetzt ist es an der Zeit, sich ernsthaft mit der vollständigen Bearbeitung von Websites zu befassen und darüber nachzudenken, wie wir als Entwickler darauf aufbauen und diese Erfahrung wirklich auf die nächste bringen können eben.

Also fordere ich alle auf, rauszugehen, Gutenberg zu erkunden, das 2022-Design auszuprobieren und zu installieren und mit der Entwicklung von Lernblöcken zu beginnen. Es gibt unglaublich viele Möglichkeiten für Nischenblöcke. Und versuchen Sie, Ihr eigenes Thema zu erstellen. Versuchen Sie, 2022 zu nehmen. Versuchen Sie, es zu ändern. Versuchen Sie, Ihr Basisthema zu erstellen. Es macht wirklich Spaß, und es gibt so viel Potenzial für dieses Zeug.

Deshalb möchte ich an dieser Stelle anhalten und Ihnen für Ihre Teilnahme danken. Und bevor ich gehe, möchte ich über ein paar Ressourcen sprechen, die ich für wirklich wichtig halte, besonders wenn diese Präsentation neu für Sie ist und Sie mehr erfahren möchten. Du kannst mir also natürlich wieder folgen. Ich twittere die ganze Zeit darüber.

Aber es gibt ein paar Ressourcen. Der erste ist also Frost. Darauf habe ich vorhin angespielt. Dies ist also ein Thema, das die Entwicklerbeziehungen von WP Engine aufbauen. Und es ist ein experimentelles Produkt. Produkt sollte ich nicht sagen. Es ist ein Experiment, bei dem wir versuchen, es zu verwenden, um die Community darüber aufzuklären, wie man Blockthemen erstellt. Wir lernen nebenbei. Wir nehmen unterwegs viele Änderungen und Aktualisierungen vor und versuchen, mit WordPress auf dem Laufenden zu bleiben, aber es ist eine großartige Ressource. Auch wieder das Thema 2022 – ein fantastischer Ort, um anzufangen und zu lernen.

Als nächstes möchte ich Learn WordPress anschließen. Dies ist lernen.wordpress.org. Das Schulungsteam von wordpress.org leistet viel Arbeit, um zu versuchen, viele dieser Konzepte aufzuklären und der Öffentlichkeit zugänglich zu machen. Wenn Sie also interessiert sind und mehr erfahren möchten, ist dies ein fantastischer Ort. Wir haben dort drüben Workshops und alle möglichen unterschiedlichen Inhalte, einschließlich sozialer Lernräume. Diese finden wöchentlich statt, wo wir über verschiedene Themen sprechen, tief in das Programmieren eines Blocks eintauchen, um ein Blockthema zu erstellen – und so weiter und so weiter.

Und wenn Sie sich für Entwicklung interessieren, beginnen Sie natürlich immer mit dem Blockeditor-Handbuch. Dort habe ich angefangen, und es gibt so viele großartige Ressourcen. Und schließlich Gutenberg. Wenn Sie mit Gutenberg nicht vertraut sind, empfehle ich Ihnen, sich mit Gutenberg vertraut zu machen, insbesondere wenn Sie an der WordPress-Entwicklung interessiert sind. Und es ist ein großartiger Ort, um einzutauchen und zu erkunden, wie eine vollständige Site-Bearbeitung aufgebaut wird, wie verschiedene Blöcke aufgebaut werden und wie Sie dies auf Ihre eigenen Arbeitsabläufe anwenden können.

Also vielen Dank für Ihre Teilnahme. Ich hoffe, Sie haben viel davon aus dieser Präsentation mitgenommen und werden ermutigt, die vollständige Website-Bearbeitung weiter zu erkunden. Vielen Dank.