Modernste Musterverwaltung und -erstellung

Diejenigen, die Blockmuster beherrschen, werden stark positioniert sein, um das neue Paradigma des Entwerfens, Erstellens und Skalierens von WordPress anzuführen.

Sehen Sie sich diese Sitzung an, um zu erfahren, wie Sie die neuesten Musterfunktionen sowie ein aufregendes neues Tool nutzen können, das die Musterverwaltung für Freiberufler und Agenturen verbessert.

Lautsprecher:

• Michael Day, Reaktionsingenieur bei WP Engine
• Phil Johnston, Sr. Staff Software Engineer bei WP Engine

Sitzungsfolien:

Transkript:

PHIL JOHNSTON: Hallo. Mein Name ist Phil Johnston und ich bin Senior Staff Software Engineer bei WP Engine. Und ich selbst werde zusammen mit meinem Teamkollegen Mike Day über modernste Musterverwaltung und -erstellung in WordPress sprechen.

Es gibt also in letzter Zeit viele neue und interessante Dinge, die zu WordPress hinzugefügt werden. Und eines davon sind Muster. Und darüber werde ich sprechen. Muster bestehen aus Blöcken. Lassen Sie uns also direkt darauf eingehen.

Sie würden Blöcke im Blockeditor verwenden, der das WordPress-Dashboard ist. Hier würden Sie hingehen, um so etwas wie einen Blogbeitrag oder eine Seite zu erstellen, und hier können Sie mit dem Schreiben oder Erstellen beginnen. Und es ist der Ort, an dem Sie Blöcke verwenden würden.

Daher konnte ich mir für diesen Vortrag einige LEGO-Bausteine ​​von meinen Kindern ausleihen. Um dies zu veranschaulichen, wenn Sie sich die Seite hier ansehen, auf der steht, dass ich ein Überschriftenblock bin, können Sie sich das als einen LEGO-Block vorstellen. Und dann darunter, wo steht, dass ich ein Absatzblock bin, können Sie sich das als einen weiteren Block vorstellen, den Sie darunter abgeschnitten haben, und dann so weiter und so weiter.

Darunter befindet sich ein weiterer Kopfblock. Sie können das also einklicken. Und dann können Sie damit beginnen, Ihre Seite nach Ihren Wünschen aufzubauen. Und Sie können diese Blöcke einfach durch Klicken, Ziehen oder Neuordnen neu anordnen. Und dann können Sie Ihre Seite auf diese Weise sehr einfach wieder zusammensetzen, weil sie alle blockiert sind.

Während dies für so etwas wie einen Blogbeitrag sehr einfach ist und Sie einfach direkt in den Editor eintauchen und damit beginnen können, ohne überhaupt zu wissen, dass es sich um Blöcke handelt, können Sie aber auch ein viel komplexeres Blocklayout erstellen, wie z. hier wieder sehen. Hier haben Sie also ein dreispaltiges Layout mit drei Bildern. Und darüber hinaus haben Sie tatsächlich eine Spalte in voller Breite. Und es erstreckt sich über alle drei dieser Säulen. Und dann so drei Bildblöcke, drei Beispielüberschriftenblöcke, drei Absatzblöcke und dann drei Schaltflächenblöcke darunter.

Also noch einmal, WordPress-Blöcke sind wie LEGO. Sie können sie zusammenfügen, um entweder ein einfaches Layout wie das erste, das ich gezeigt habe, oder ein komplexeres Layout wie das, das Sie hier sehen, zu erstellen. Deshalb habe ich die Blöcke, die Sie auf einer Seite wie dieser erwarten könnten, rot hervorgehoben. Sie können also sehen, dass der erste einen roten Rahmen hat. [räuspert sich] Entschuldigung. Und das stellt eine Blockade dar. Darunter befindet sich ein weiterer Block mit etwas Lorem ipsum-Text und dann drei Bildblöcke, wie ich erwähnt habe, drei Überschriftenblöcke, drei Absatzblöcke darunter und drei Schaltflächenblöcke.

Sie denken vielleicht, dass das alles ist, was man braucht, um ein Seitenlayout wie dieses zu erstellen, aber es ist tatsächlich ein bisschen komplexer als das. Hier auf dieser Folie habe ich also die unsichtbaren Blöcke hervorgehoben, die Blöcke, die Sie nicht sehen können. Dies sind Blöcke, die auf der Seite sein müssen, um zu definieren, wo Dinge sitzen sollen, wie die Tatsache, dass es drei Spalten statt einer Spalte gibt.

Unsichtbare Blöcke sind zwar leistungsstark, aber für einen durchschnittlichen Benutzer auch sehr schwer einzutauchen und einfach zu benutzen. Wenn Sie Ihre Maus im Blockeditor bewegen, werden Sie nicht wissen, dass es dort unsichtbare Blöcke gibt, weil sie unsichtbar sind. Und all diese Blöcke haben auch komplexe Steuerelemente, die mit ihnen einhergehen. Hier ist zum Beispiel einer der Spaltenblöcke.

Und wenn Sie auf die rechte Seite schauen, können Sie all die komplexen Steuerelemente sehen, die damit einhergehen und nicht besonders einfach oder intuitiv zu verstehen sind. Dinge wie innere Blöcke verwenden Inhaltsbreite oder Polsterung oder Blockabstand. Der durchschnittliche Benutzer wird nicht wissen oder verstehen, was diese Einstellungen bewirken. Und das ist ein bisschen so, als würde ich in eine Küche gehen und einen ganzen Haufen Gewürze sehen.

Ich bin kein großer Koch. Und so hätte ich so einen Haufen Gewürze auf dem Regal. Und ich wüsste nicht, wie ich sie kombinieren oder verwenden sollte, weil ich mir nicht die Zeit genommen habe, Koch zu werden. Und genauso wie es Zeit braucht, ein Fünf-Sterne-Koch zu werden und ein großartiges und leckeres Essen zu kochen, braucht es Zeit und es gibt eine schwierige Lernkurve mit dem Blockeditor und dem Verständnis, welche Blöcke zu welcher Zeit verwendet werden müssen, um etwas zu machen, das gut aussieht oder schmeckt Gut.

Es ist also eine Spezialität. Es ist ein Handwerk, das man entwickeln muss. Der durchschnittliche Benutzer wird also mit einer leeren Tafel, wie Sie sie hier sehen, in den Blockeditor geworfen. Und sie werden nicht wissen, dass sie einen Spaltenblock verwenden müssen oder wie man diesen Block verwendet oder was man in diesen Block einfügt, im Grunde die Gewürze, die sie kombinieren müssen, um etwas zu machen, das wirklich großartig aussieht.

Sie könnten es frustrierend finden. Sie könnten es als langweilig und schwierig empfinden, das zu bekommen, was sie wollen. Und selbst wenn sie all diese Komplexitäten von Blöcken lernen, verfügen sie möglicherweise einfach nicht über Designfähigkeiten. Und so können Blöcke, obwohl sie leistungsfähig sind, schwierig zu verwenden sein. Und deshalb wurde das Konzept eines Musters erfunden.

Also haben wir bei WP Engine ein Plugin namens Atomic Blocks erstellt. Und bei Atomic Blocks haben wir im Grunde das Konzept eines Musters entwickelt, aber wir haben es Abschnitte und Layouts genannt. Und es ist genau das gleiche Konzept. Und WordPress Core hat sich tatsächlich von Atomic Blocks für das Konzept dessen inspirieren lassen, was jetzt in WordPress Core enthalten ist und als Muster bezeichnet wird.

Muster sind also vorgefertigte Gruppen von Blöcken, die Benutzer durchsuchen können, wie Sie hier sehen. Hier gibt es eine Reihe von Mustern, aus denen sie wählen können. Und wenn sie auf eine klicken, wird all das mit einem einzigen Klick in ihre Seite eingefügt. Anstatt also Blöcke wie diese, LEGO-Blöcke, zusammenbauen zu müssen, bekommen sie so etwas, eine vormontierte Gruppe von Blöcken, die hoffentlich von jemandem hergestellt wurde, der bereits sehr gut im Designen ist und Stunden in dieses Handwerk gesteckt hat Blöcke.

Und sobald Sie es auf der Seite eingefügt haben, sieht es ein bisschen so aus. Und einfach so, Boom, Sie haben ein Muster, eine ganze Reihe von vormontierten Blöcken, die gut aussehen, die gut schmecken und die funktionieren, und die Sie dann einfach eingeben und den Text eingeben können, den Sie ändern müssen . Sie würden also so etwas wie eine Beispielüberschrift in den eindeutigen Text für Ihre Seite ändern.

Muster sind also wie ein riesiger Vorsprung für den durchschnittlichen Benutzer. Sie müssen nicht alle Komplexitäten des Blockeditors lernen, all diese komplexen Dinge. Sie müssen kein professioneller Designer sein, aber sie können ein großartig aussehendes Design erhalten, indem sie einfach ein Muster auf die Seite einfügen.

Wenn Sie also eine Agentur sind, jemand, der Websites für eine andere Person oder einen Kunden erstellt, können Sie Blockmuster verwenden, um Ihren Kunden zu helfen, sich selbst zu helfen. Indem Sie Ihren Kunden eine ganze Reihe vorgefertigter Muster liefern, können sie ihre eigenen Seiten erstellen.

Angenommen, es steht ein Ereignis an, für das eine spezielle Seite benötigt wird. Sie können sich ein Blockmuster schnappen, das Sie für sie erstellt haben und das zu ihrer Marke passt. Es passt zu ihrem Farbschema und all diesen Dingen, und sie können es einfach anklicken und auf der Seite einfügen und zurückentwickeln – fangen Sie einfach an, in diese Blöcke zu tippen, anstatt alle Komplexitäten wissen zu müssen, welcher Block in welchem ​​​​verwendet werden soll Szenario und was man nicht tun sollte, und wie man ein Layout erstellt, das auf allen Geräten und all diesen Dingen großartig funktioniert.

Obwohl Blockmuster für den durchschnittlichen Benutzer einfach zu verwenden sind, sind sie jedoch nicht einfach zu erstellen. Und sie sind im Laufe der Zeit noch schwieriger zu handhaben. Und für Entwickler und Agenturen gibt es keinen in WordPress integrierten Workflow oder Tools, die Ihnen beim Erstellen von Mustern helfen.

Also habe ich die Schritte zum Erstellen eines Musters, das ich hier den harten Weg nenne, in 10 Schritte unterteilt. Und wenn das überwältigend aussieht, liegt es daran, dass es irgendwie so ist. Als erstes müssen Sie eine PHP-Datei in einem Code-Editor wie VS Code erstellen. Sie müssen einen bestimmten Dateikopf an den Anfang dieser Datei setzen.

Dann brauchen Sie einen Platz zum Bauen. Sie müssen also ein WordPress haben, wahrscheinlich auf Ihrem lokalen, was großartig ist. Aber dann müssen Sie eine temporäre Seite innerhalb dieses WordPress erstellen, nur damit Sie Blöcke irgendwo platzieren und daran arbeiten können. Und dann musst du es aufbauen. Sie müssen diese Fähigkeiten, dieses Handwerk, das Sie entwickelt haben, einsetzen und es hübsch aussehen lassen. Und wenn Sie fertig sind, müssen Sie zu einer Codeansicht wechseln und den gesamten Code in die Datei kopieren, die Sie in Schritt eins erstellt haben.

Und dann müssen Sie diese Datei an einem bestimmten Ort in Ihrem Design speichern. Wenn Sie ein Design erstellen und es an Ihren Kunden liefern, müssen Sie es in das Musterverzeichnis einfügen. Und wenn Ihr Muster dann Bilder enthält, wie in dem dreispaltigen Layout, das ich gezeigt habe, müssen Sie sicherstellen, dass diese Bilder tatsächlich funktionieren, wenn Sie es an Ihren Kunden liefern. Da Sie es also auf Ihrem lokalen Computer erstellt haben, wird dieses Bild auch im Code referenziert, als ob es sich auf der Festplatte Ihres lokalen Computers befände.

Offensichtlich ist dies ein Problem. Sobald es nicht mehr auf Ihrem Computer ist, wird dieses Bild nicht mehr funktionieren. Dann müssen Sie den Code mit einem feinen Zahnkamm durchgehen, nach einer der URLs Ihrer lokalen Computer suchen und diese durch ein bestimmtes PHP-Tag ersetzen. Und dann müssen Sie sicherstellen, dass Sie diese Bilddateien auch tatsächlich in Ihr Design verschieben. Sie können es nicht einfach im Code ändern. Sie müssen diese Datei auch verschieben.

Und um es noch schwieriger zu machen, hier wird es wirklich. Ich denke, das frustrierendste, zumindest für mich, als ich viele Muster erstellte, war, dass ich anfangen musste, wenn ich einen Rechtschreibfehler innerhalb eines Musters machte bei Schritt drei und gehen Sie jedes Mal wieder bis zu Schritt neun, nur um einen Rechtschreibfehler zu korrigieren. Sie müssen auch – weil Sie den gesamten Blockcode jedes Mal neu generieren müssen – Sie müssen dann nach all diesen Bild-URLs suchen und sie ersetzen und wieder in die Datei einfügen.

Es ist eine ganze Reihe sich wiederholender, mühsamer Schritte, insbesondere für die Verwaltung im Laufe der Zeit. Sagen wir, Sie müssen ein Muster in Monaten optimieren. Es ist sehr langweilig. Und darauf sind wir beim Erstellen von Mustern für unsere Genesis Pro-Kollektion gestoßen. Wir haben damit viele Abschnitte und Layouts oder Muster geliefert und waren sehr frustriert von dem Prozess, diese mühsamen Dinge immer und immer wieder zu tun.

Und das hat uns dazu veranlasst, ein Tool zu entwickeln, das uns hilft, diese Dinge nicht tun zu müssen, um diese Ermüdung zu beseitigen und es wirklich so schnell wie möglich zu machen. Sie können einfach daran arbeiten, es speichern und, boom, es wird direkt für Sie in die Datei aufgenommen. Es wird die Datei an der richtigen Stelle ablegen. Es schreibt den gesamten Code für Sie. Und so beschlossen wir, intern ein Tool für uns selbst zu bauen, das all diesen Schmerz von uns nehmen würde. Und wir hatten eigentlich nie vor, es zu etwas zu machen, das wir anderen Leuten zur Verfügung stellen würden, aber es wurde so nützlich für uns, dass wir es auch anderen Leuten zur Verfügung stellen wollten.

Also noch einmal, wie Sie sehen können, ist der derzeitige harte Weg, ein Muster zu erstellen, nicht ideal, und es ist keine großartige Art, Dinge zu tun. Aus diesem Grund haben wir Pattern Manager entwickelt, eine Benutzeroberfläche zum Erstellen und Verwalten von Mustersammlungen in WordPress. Also übergebe ich es an meinen Kollegen Mike Day, der uns durch den Mustermanager führt und uns all die großartigen Funktionen darin zeigt. Also rüber zu dir, Mike.

MIKE DAY: Hallo. Ich bin Mike. Ich bin Softwareentwickler bei WP Engine. Muster sind ein leistungsstarkes Tool zur Layouterstellung, das das Potenzial hat, das Spiel für WordPress-Ersteller zu verändern. Aber wie Phil gerade demonstriert hat, fehlt es gelinde gesagt an der Erfahrung, diese Muster tatsächlich zu verwenden, um sie zu erstellen und zu verwalten. Pattern Manager zielt darauf ab, die Verwaltung von Musterdateien über ein Plugin, das sich in Ihren Workflow einfügen lässt, reibungslos an die Spitze des WordPress-Designs zu bringen. Springen wir hinein.

Für die anfänglichen Zwecke dieser Demo lasse ich mein Code-Editor-Fenster hier rechts geöffnet. Dies ist eine tatsächliche Musterdatei, die direkt auf meiner Festplatte gespeichert ist. Und ich möchte wirklich den Punkt verdeutlichen, dass Sie bei der Arbeit mit Pattern Manager tatsächlich physische Dateien manipulieren und erstellen, die auf Ihrer Festplatte gespeichert sind. Insbesondere werden sie in Ihrem aktuellen Themenverzeichnis gespeichert. Sie können also genau hier diese beiden PHP-Dateien oder Musterdateien sehen, sie stellen die Muster dar, die derzeit in dieser Musteransicht aktiv sind.

Beachten Sie außerdem dieses Bildverzeichnis. Phil brachte einen wirklich interessanten Punkt zur Sprache, nämlich dass Sie jetzt, wenn Sie mit Mustern arbeiten, sagen wir, Sie haben eine Reihe von Bildern in einem Muster gespeichert. Alle diese URLs für diese bestimmten Bilder verweisen auf Ihre lokale Installation. Das ist ein großes Problem, wenn es an der Zeit ist, Ihre Arbeit tatsächlich zu teilen.

Alle diese Bilder werden beschädigt. Also gehen wir das etwas anders an. Tatsächlich speichern wir Kopien dieser Bilder direkt im Themenordner selbst. Dies ist beispielsweise ein Game Changer für die Versionskontrolle. Angenommen, Sie und Ihre Mitarbeiter verwenden Git. Jetzt können Sie sicher sein, dass Sie alle Zugriff auf die gleichen Bilder haben, während Sie arbeiten.

OK. Also lassen Sie uns tatsächlich in die Schnittstelle springen. Dies ist die Musteransicht. Und gleich hier können Sie beide Muster sehen, die für mein Thema registriert sind. Wenn Sie den Mauszeiger über eine Mustervorschau bewegen, beachten Sie die Aktionsschaltflächen, die eingeblendet werden. Wir haben Optionen zum Bearbeiten, Duplizieren oder Löschen eines bestimmten Musters. Es gibt auch einige Filteroptionen hier auf der linken Seite, aber darauf werde ich gleich noch zurückkommen. Lassen Sie uns zunächst einmal einsteigen und ein Muster bearbeiten.

Ich bin mir sicher, dass Sie sofort eine sehr vertraute Benutzeroberfläche erkennen werden. Dies ist der WordPress-Blockeditor, der in diesem Fall umfunktioniert wurde, um einen bestimmten Raum für die Arbeit mit Mustern bereitzustellen. Und hier rechts sehen Sie diese verschiedenen Header-Eigenschaften. Bevor ich nun auf diese eingehe, möchte ich etwas mehr Kontext geben und tatsächlich etwas Text verwenden, der aus der WordPress-Entwicklerdokumentation entlehnt ist.

Die Titeleigenschaft ist ziemlich selbsterklärend. Dies ist, wenn Sie so wollen, eine von Menschen lesbare Front-ID, die Benutzer sehen, wenn sie mit Ihrem Muster auf einer Website interagieren. Kategorien werden eigentlich zum Gruppieren von Mustern verwendet. Dies wird eine Reihe von registrierten Kategorien sein, zu denen Sie eine oder viele oder gar keine hinzufügen können, wenn Sie möchten. Aber hier gibt es ein Problem mit der aktuellen Art und Weise, wie dies in WordPress Core funktioniert.

Es gibt wirklich keine gute Möglichkeit zu sagen, welche Kategorien tatsächlich verfügbar sind. Es gibt nirgendwo auf Ihrer Website einen offensichtlichen Ort, an dem Sie diese registrierten Blockmusterkategorien tatsächlich finden können, zumindest soweit ich weiß. Jetzt können Sie sich Schlüsselwörter als eine Art Suchbegriff vorstellen. Im Wesentlichen können Sie diese beschreibenden Aliase eingeben, um Ihr Muster zu beschreiben, damit Benutzer, was immer sie im Inserter suchen, leicht finden können, was sie brauchen. Und die Beschreibung ist eine Art Erweiterung dieser Idee, außer dass es sich um visuell verborgenen Text handelt. Dies ist wirklich nützlich für sehbehinderte Benutzer, die möglicherweise einen Bildschirmleser verwenden.

Springen wir nun zurück in den Muster-Manager und ändern wir diese Meta-Eigenschaften. Der Mustertitel ist eine einfache Texteingabe. Beginnen Sie einfach mit der Eingabe, um Ihr Muster umzubenennen. Aber beachten Sie hier eine versteckte Funktion. Der Mustermanager teilt mir mit, dass ein Muster mit diesem Titel bereits im Thema vorhanden ist. Ich möchte diese Datei nicht versehentlich zerstören, also lasse ich einfach den Titel in Ruhe.

OK. Lassen Sie uns einige Kategorien auswählen. Beachten Sie also sofort, dass wir diese Liste von Kategorien nur in einem Dropdown-Menü gerendert haben. Andernfalls ist es schwer zu wissen, wo diese Daten tatsächlich zu finden sind. Diese Liste wird jedoch dynamisch über einen API-Aufruf gefüllt. Das bedeutet, dass wir hier nicht nur alle registrierten Blockmuster-Kategorien für Ihr Design anzeigen, sondern jede Kategorie, die Sie möglicherweise registriert haben. Lassen Sie uns vorerst nur die vorgestellten auswählen.

OK. Und lassen Sie uns einige durchsuchbare Begriffe hinzufügen. Für die Zwecke dieser Demo werde ich nur Beispielmuster verwenden. Denken Sie jedoch daran, dass Sie hier Begriffe hinzufügen könnten, die dieses Muster für Benutzer beschreiben, die im Inserter suchen. Und beachten Sie, dass ich hier einen Begriff aus mehreren Wörtern verwendet habe. Diese werden im Mustermanager unterstützt.

OK. Und lassen Sie uns eine Beschreibung hinzufügen. Denken Sie daran, dass dies visuell verborgener Text ist. Meiner Meinung nach besteht die Hauptabsicht hier also darin, Bildschirmlesern zu helfen. Beschreiben wir dies also einfach als drei Spalten mit invertierten Farben. OK. Perfekt. Ich habe das Gefühl, dass wir jetzt an einem guten Punkt sind. Wir können unsere Arbeit tatsächlich speichern. Aber bevor ich das tue, möchte ich, dass Sie genau auf den Header in dieser Datei auf der rechten Seite achten. Sobald ich jetzt auf Update Pattern drücke, sind hier plötzlich viel mehr Daten. Die Beschreibung, Kategorien und Schlüsselwörter, die wir gerade geändert haben, sind alle hier erschienen, ohne dass ich diese Datei berühren musste.

OK. Schauen wir uns die verbleibenden Meta-Eigenschaften an. Zunächst einmal haben wir also eine ziemlich interessante Eigenschaft in der Breite des Ansichtsfensters. Dies soll eine Ganzzahl sein, die die skalierte Breite für die Vorschau dieses Musters darstellt. Wenn Sie also standardmäßig ein Muster erstellen, nehmen wir an, dass Sie etwas erstellen, das die volle Breite oder vielleicht sogar sehr schmal ist. Die Standardeinstellungen dafür in einem WordPress-Kern können dazu führen, dass die Skalierung in Vorschauen etwas seltsam aussieht.

Also Posttypen. Dies ist einfach eine Reihe von Slugs vom Post-Typ, mit denen das Muster verwendet werden soll. Beachten Sie, dass das Hinzufügen von Werten hier das Muster tatsächlich einschränkt, sodass es nur mit diesen Beitragstypen funktioniert. Beachten Sie auch, dass das Muster, wenn Sie dieses Feld leer lassen, mit allen Beitragstypen funktioniert.

Als nächstes haben wir Blocktypen. Dies ist ein weiteres Array, aber diesmal von Blocktypen, mit denen das Muster verwendet werden soll. Nun muss ich zugeben, wann immer ich anfing, diese Blocktypen zu verwenden, fand ich es etwas verwirrend. Es scheint, als ob die Verwendung wirklich für Mehrzweckzwecke gedacht ist, aber die Absicht dahinter ist meiner Meinung nach nicht ganz klar.

Und schließlich haben wir die Inserter-Eigenschaft. Jetzt werden standardmäßig alle Muster im Inserter angezeigt, aber nehmen wir an, Sie möchten das ändern. Sie würden einfach einen booleschen Wert von false für diese Eigenschaft hinzufügen und sie wird vor der Verwendung im Inserter ausgeblendet.

Springen wir also zurück zum Muster-Manager und sehen wir uns an, wie wir mit diesen verbleibenden Meta-Eigenschaften umgehen. Zunächst einmal werde ich diese anderen Panels schließen. Und werfen wir einen Blick auf die Viewport-Breite. Denken Sie jetzt daran, dass dies ein ganzzahliger Wert ist, der einfach skalierte Vorschauen für Ihr Muster im Inserter steuert. Eine Sache, die bei der aktuellen Implementierung schmerzt, ist, die Ergebnisse Ihrer Arbeit tatsächlich zu sehen.

Nehmen wir also an, ich ändere den Header in meiner Musterdatei und ich ändere die Breite des Ansichtsfensters. Die einzige Möglichkeit, tatsächlich zu sehen, wie das aussieht, besteht darin, beispielsweise einen neuen Beitrag zu erstellen. Das wird etwas verworren. Es ist nur ein wenig zu kompliziert, hin und her zu springen. Es tut ein bisschen weh. So wie wir es angegangen sind, bewegen Sie einfach den Mauszeiger über den Schieberegler und sofort wird eine Vorschau angezeigt. Und während ich herumziehe und verschiedene Größen ausprobiere, kann ich sehen, wie dieses Muster skaliert. Das ist wirklich nützlich und eine enorme Zeitersparnis. Nehmen wir erstmal 1.200. Und kommen wir zu den Beitragstypen.

Das erste, was bei diesem Panel zu beachten ist, ist das Vorhandensein dieser Tooltips. Dies sind nur kleine Leckerbissen an Informationen, die versuchen, Sie bei der Verwendung der App zu unterstützen. Also zunächst einmal, dies ist nur eine Wiederholung von etwas, das ich bereits besprochen habe. Wenn es keine Auswahlen gibt, wenn dem Header Ihrer Musterdatei keine Beitragstypen hinzugefügt wurden, funktioniert Ihr Muster für alle Beitragstypen. Aber beachten Sie unten, dass es diese Einstellung namens Modal Visibility gibt.

Dies ist eine wirklich coole versteckte Funktion. Wenn Sie im Header Ihrer Musterdatei den richtigen Typ des Blocktyps haben, sehen Benutzer jedes Mal, wenn sie einen neuen Beitrag des Zieltyps erstellen, ein modales Erscheinen. Und sie können Ihr Muster direkt aus diesem Modal auswählen. Und ich werde Ihnen gleich zeigen, was ich meine. Aber ich möchte, dass Sie bemerken, dass dieser Schalter tatsächlich deaktiviert ist. Und das liegt daran, dass die modalen Sichtbarkeitseinstellungen nur funktionieren, wenn ein Beitragstyp ausgefüllt ist.

Wir nähern uns dem also, indem wir einfach den Schalter deaktivieren, bis ein Beitragstyp vorhanden ist. OK. Jetzt kann ich das einschalten. Und das Umschalten von Display und Inserter macht das, was Sie sich vorstellen können. Wenn Sie dies ausschalten würden, würde dies im Header Ihrer Datei den Wert false zuweisen. Und dieses Muster würde nicht mehr im Inserter erscheinen. OK. Lassen Sie uns fortfahren und dies aktualisieren.

Sehen wir uns nun an, wie das alles tatsächlich in einem Beitrag funktioniert. Also werde ich umschalten und tatsächlich einen neuen Beitrag erstellen. Nun, das ist das Modal, von dem ich gesprochen habe, in Aktion. Da der Datei sowohl der richtige Blocktyp als auch der richtige Beitragstyp hinzugefügt werden, sehe ich dies jetzt sofort, wenn ich einen neuen Beitrag erstelle. Und ich kann einfach auf die Mustervorschau klicken und mein Muster ist da.

Das ist ziemlich cool, aber mal sehen, wie das Tagging ansonsten tatsächlich funktioniert. Hier ist also die Kategorie, die ich ausgewählt habe, das Feature. Und das andere Muster in meinem Thema hat die Kategorien Spalten und Text, das funktioniert also großartig. Was ist mit meinen Suchbegriffen? Mein Suchbegriff mit Beispielmuster. Das funktioniert super. Und mein versteckter Text begann mit drei Spalten und funktionierte auch genau wie beabsichtigt. Das ist großartig.

OK. Lassen Sie uns also zurückspringen und eine weitere verbleibende Metaeigenschaft behandeln. Dies ist ein wenig seltsam zu erklären. Ich habe das Gefühl, dass es einfacher ist, wenn ich es dir stattdessen einfach zeige. Also lass uns weitermachen und ein neues Muster erstellen. Alles, was Sie dafür tun müssen, ist auf die Schaltfläche „Neues Muster erstellen“ zu klicken. Und hier bin ich wieder im Editor. In diesem Fall wähle ich den Codeblock. Und in diesen Codeblock füge ich Beispielcode ein.

Nun, das ist tatsächlich aus der WordPress-Dokumentation entnommen. Auf diese Weise würden Sie eine Blocktransformation mit PHP registrieren. Sie würden also diesen Code nehmen und vielleicht eine Funktionsdatei einfügen, was immer Sie bevorzugen. Lassen Sie mich Ihnen zeigen, wie wir das angehen. In diesem Abschnitt für den transformierten Blocktyp gibt es eine Dropdown-Liste. Dieses Dropdown-Menü wird genau wie Post-Typen und Kategorien über einen API-Aufruf dynamisch gefüllt.

So kann ich einfach nach meinem Zieltyp suchen – da ist er, Kern/Code – und ihn auswählen. Um dies noch einmal zu veranschaulichen, besteht der Unterschied darin, wie Sie dies jetzt tun könnten, im Vergleich zur Verwendung des Mustermanagers. Um dies jetzt zu tun, muss ich diesen Codeblock suchen, genau herausfinden, welchen Inhalt ich möglicherweise brauche, meinen Blocktyp herausfinden und ihn irgendwo einfügen, im Gegensatz zu Pattern Manager habe ich nur dieses Feld ausgewählt. Ich habe diesen Wert aus einer Dropdown-Liste ausgewählt. OK. Lassen Sie uns dies aktualisieren. Und ich werde einen neuen Beitrag erstellen. Und verlassen wir unser Modal.

Jetzt wähle ich dieses Mal auch den Codeblock. Aber anstatt diese tatsächlich mit Inhalt zu füllen, kann ich diese Option einfach aus der Symbolleiste auswählen. Und beachten Sie diese Musterauswahl. Wenn ich Muster auswähle, gibt es mein Muster. Und mit einem Klick darauf wurde dieser Block sofort in mein Zielmuster umgewandelt.

Eine andere Sache, die mit Transformationstypen abgedeckt werden muss, ist die Idee der sogenannten semantischen Blockmuster. Diese ähneln einer Blocktransformation, sind jedoch auf Vorlagenteile ausgerichtet. Zum Beispiel Kopf- und Fußzeilen. Aber da ist ein Haken drin. Eine Sache, die Sie bei der Auswahl dieses Zielvorlagenteil-Blocktyps wissen sollten, ist, dass Sie auch den richtigen Beitragstyptyp zugewiesen haben müssen, sonst funktioniert es einfach nicht. Unser Ansatz ist also, indem wir einfach diesen Vorlagentyp für Sie zuweisen. Und es ist verschlossen. Und es bleibt gesperrt, bis dieser Blocktyp tatsächlich entfernt wird.

Das war es also für die anfängliche Demo dieser Editoransicht, aber ich muss hier die Themen im Hintergrund wechseln. Und jetzt wechsle ich zurück zur Musteransicht. Der Punkt hier ist, Ihnen zu zeigen, wie sich der Muster-Manager mit vielen Mustern verhält. Dieses spezielle Thema hat über 50 registrierte Muster.

Beachten Sie nun, wie sofort diese Muster gefiltert werden, wenn ich durch diese verschiedenen Kategorien klicke. Das ist wirklich nützlich, wenn ich versuche, unter einer Reihe von Mustern das zu finden, was ich brauche. Aber nehmen wir an, Sie möchten eine genauere Steuerung. Beginnen Sie einfach mit der Eingabe. Diese Filterung funktioniert sehr ähnlich wie beim Inserter. Es ist wirklich nützlich und wirklich bissig. Apropos bissig, eine weitere Sache, die darauf hingewiesen werden sollte, ist, wie schnell sich diese Benutzeroberfläche anfühlt.

Beachten Sie, dass diese Vorschauen erst geladen werden, wenn ich tatsächlich zu ihnen scrolle. Dies ist eine benutzerdefinierte Implementierung, die wirklich großartig darin ist, Browserressourcen zu sparen. Und dadurch fühlt sich diese App schnell und sehr bissig an, egal wie viele Muster Sie verwenden. In Ordnung. Wir haben in dieser Präsentation viel behandelt, also lassen Sie uns nur kurz zusammenfassen. Patterns stellen eine interessante Schnittstelle zwischen der Kuration einzelner Inhaltselemente und der Ganzseitengestaltung dar.

Als WordPress-Builder ist die Möglichkeit, größere Layoutelemente zu erstellen und sie in einem Theme wiederzuverwenden, eine überzeugende Idee. Kopfzeilen, Fußzeilen, Testimonials, Feature-Boxen. All dies sind Kennzeichen jeder Website. Und jetzt können Sie ganz einfach Ihre gesamte Website mit Mustern gestalten.

Trotz des Aufkommens von Mustern als Schlüsselkomponente von Blockthemen hat WordPress selbst keine offizielle Schnittstelle, um diese Muster tatsächlich zu erstellen oder zu verwalten, und es gibt auch nichts auf der Roadmap. Stattdessen müssen Entwickler Muster manuell in ihrem Code-Editor erstellen, Code dutzende Male hin und her kopieren und einfügen, was viel Raum für Fehler lässt.

Unser Produkt, Pattern Manager, wurde entwickelt, um sich in Ihren Workflow einzufügen. Installieren und aktivieren Sie einfach das Plugin und Sie erhalten eine moderne Benutzeroberfläche zum Filtern von Mustern, Erstellen, Duplizieren, Bearbeiten, Löschen und all dies zusammen mit der Erfahrung, Inhalte in der vertrauten Erfahrung der Verwendung des WordPress-Kerneditors zu bearbeiten. Darüber hinaus werden viele schwer verständliche Feinheiten der richtigen Kennzeichnung einer Musterdatei, z. B. das Hinzufügen von Kategorien, Schlüsselwörtern oder vielleicht sogar die Einschränkung, nur mit bestimmten benutzerdefinierten Beitragstypen zu arbeiten, in unserer Benutzeroberfläche abstrahiert. Bauherren haben die vollständige Kontrolle über diese Einstellungen über benutzerfreundliche Seitenleisten-Steuerelemente.

Pattern Manager wurde veröffentlicht und steht ab sofort unter der nachstehenden URL zum Download bereit. Probieren Sie es aus und teilen Sie uns Ihre Gedanken mit. Und zögern Sie nicht, mich persönlich zu kontaktieren und mir Ihre Meinung mitzuteilen. Wir hoffen, dass Sie Pattern Manager ausprobieren. Und wir hoffen, dass es Ihnen genauso hilft, wie es unserem Team von WordPress-Erstellern geholfen hat. Danke schön.