Eine Einführung in WordPress Playground (einschließlich Anwendungsfällen und Kommentaren von Lead Dev)

WordPress Playground könnte die Antwort auf viele Probleme sein. Lange Zeit gab es keine solide Möglichkeit, WordPress-Produkte wie Themes oder Plugins ohne komplexe Hosting- und Demo-Setups zu präsentieren. Außerdem ist die Replikation eines Fehlers für ein Support-Team oft ein Minenfeld. WordPress Playground ist eine In-Browser-Version der Plattform, die all diese Probleme lösen könnte.

👉 In diesem Beitrag schaue ich mir das WordPress Playground-Projekt an, spreche über seine Geschichte, zeige Ihnen, wie man es verwendet, und bespreche, wohin sich dieses spannende Tool als nächstes entwickelt.

Was WordPress Playground ist

WordPress benötigt seine vielen beweglichen Teile, um überhaupt hochfahren zu können. Ein Server ist eine offensichtliche Notwendigkeit, aber seine PHP-Architektur erfordert auch eine Datenbank. Was wäre jedoch, wenn Sie zum Starten einer neuen WordPress-Installation keine typische Implementierung davon benötigen würden? Hier kommt WordPress Playground ins Spiel.

Es handelt sich um eine vollständig im Browser integrierte Version der Plattform, die keinen Server, PHP oder eine Datenbank benötigt. Stattdessen werden einige andere gängige Technologien verwendet, um die standardmäßig erforderlichen Komponenten zu simulieren oder zu ersetzen:

• Das Tool verwendet eine WebAssembly-Binärdatei, um einen PHP-Interpreter zu erstellen.
• Anstelle von MySQL gibt es ein WordPress-Plugin, das SQLite ausführt.
• Der Webserver nutzt eine clevere Implementierung von JavaScript as a Service Worker.

Auf diese Weise können Sie eine neue Version von WordPress haben, die im Browser ausgeführt wird, ohne die üblichen Abhängigkeiten (zumindest in einer Art und Weise, wie Sie es erwarten würden).

Eine kurze Tour durch WordPress Playground

Sobald Sie die Website „WordPress Playground“ aufrufen, bereitet der Dienst eine Version von WordPress für Sie vor. Dies sollte nur wenige Sekunden dauern. Das ist technisch gesehen alles, obwohl noch weitere Möglichkeiten warten (wie ich später sehen werde).

Auf dem Hauptbildschirm wird das Frontend einer WordPress-Website angezeigt, als ob Sie angemeldet wären. Dies bedeutet, dass Sie über die typische Symbolleiste verfügen, mit der Sie zum Backend gelangen. Bevor Sie dies tun, sollten Sie sich jedoch einige der zusätzlichen Funktionen in der simulierten Browser- Symbolleiste ansehen:

• Ein Menü, das Ihnen bei der Auswahl einer bestimmten PHP- oder WordPress-Version hilft.
• Optionen zum Importieren und Exportieren von Playground-Instanzen für die zukünftige Verwendung.

Bei der Wahl Ihrer PHP- und WordPress-Version können Sie auch zwischen temporärer oder persistenter Speicherung wählen. Letzteres verwendet Cookies, um Ihre WordPress-Instanz zu behalten.

Wie ich vorschlage, gibt es andere Möglichkeiten, Ihre WordPress Playground-Instanz anzupassen, auf die ich bald eingehen werde. In der Zwischenzeit sieht der Rest der Installation genauso aus wie typisches WordPress. Das einzige Plugin, das WordPress Playground installiert, ist das zum Importieren von Inhalten:

Apropos: Keine Lösung kann perfekt sein, und das ist auch bei WordPress Playground der Fall. Lassen Sie uns als nächstes mehr darüber sprechen.

Einschränkungen von WordPress Playground

Die Haupteinschränkung von WordPress Playground besteht darin, dass Sie nicht auf das WordPress-Theme-Verzeichnis oder das WordPress-Plugin-Verzeichnis zugreifen können. Sie können jedoch Attribute in URLs verwenden, um Themes und Plugins zu installieren. Das ist etwas, was ich Ihnen später zeigen werde.

Es empfiehlt sich auch, Ihre Playground-Instanz zu exportieren, wenn Sie Ihre Änderungen beibehalten möchten. Obwohl es jetzt einen persistenten Speichermodus gibt, sollten Sie sich nicht darauf verlassen, solange sich das Projekt noch in einem frühen Stadium befindet.

Wenn es um Entwicklungsprobleme geht, stellen Sie möglicherweise Probleme mit iFrames, Xdebug und bestimmten PHP-Funktionen fest. Es empfiehlt sich, den entsprechenden Abschnitt der Dokumentation griffbereit aufzubewahren, um zu sehen, wie sich diese Probleme in Zukunft entwickeln. 🔮

Warum es WordPress Playground gibt

WordPress Playground ist super neu und glänzend. Tatsächlich fand die erste Präsentation des Projekts auf der State of the Word im November 2022 statt:

Das rasante Tempo des Projekts – von der Konzeption bis zur Umsetzung – ist das Ergebnis der Arbeit des Automattic-Entwicklers Adam Zielinski. Wie es in seinem ausführlichen Blogbeitrag heißt, wollte er eine Möglichkeit finden, WordPress ohne langwierige Arbeitsabläufe oder Einrichtungszeit zu installieren.

Darüber hinaus glaube ich auch, dass es dem langfristigen Ziel von WordPress hilft, mit Website-Erstellern wie Squarespace und Wix zu konkurrieren. Schließlich kümmern Sie sich bei diesen Plattformen nicht um Server, Code und Datenbanken. Dies ist ein cooler sekundärer Vorteil, der dazu beiträgt, das gesamte WordPress-Projekt voranzutreiben, und auf den ich in einem späteren Abschnitt näher eingehen werde.

Im Juni 2023 wurde WordPress Playground während der Keynote des WordCamp Europe 2023 im Juni von Josepha Haden Chomphosy erneut ausgestrahlt:

Zu diesem Zeitpunkt ist WordPress Playground eine ausgereifte App, die in die tägliche Entwicklung einfließen kann. Es kann in eine beliebige Anzahl von Arbeitsabläufen, Projekten und Situationen integriert werden. Einige davon kann ich später behandeln.

Wo WordPress Playground in das Ökosystem der Plattform passt

Vor ein paar Jahren hat das WP Sandbox-Team Poopy.life entwickelt – eine WordPress-Sandbox, mit der Sie bei Bedarf kostenlos Neuinstallationen starten können. Dieses Projekt dauerte nicht lange, obwohl Sie in WordPress Playground sehen können, wie das Konzept fortgesetzt wird.

Im Gegensatz zu seinen Vorgängern bietet WordPress Playground eine bessere Möglichkeit, die Plattform in fast alle Facetten der Community zu integrieren.

Stellen Sie sich zum Beispiel ein Szenario vor, in dem Sie ein WordPress-Theme oder eine Plugin-Demo live auf Ihrer Unternehmenswebsite präsentieren könnten, mit vollem Zugriff auf das Back- und Frontend. Im Wesentlichen stellen Sie dem Benutzer eine voll funktionsfähige Demo auf einer tatsächlichen Website zur Verfügung. Hier sind Adam Zielinskis Gedanken:

…Plugin-Autoren und Marktplätze werden wahrscheinlich damit beginnen, Playground-basierte interaktive Vorschauen anzubieten; Online-Code-Editoren können WordPress-Unterstützung hinzufügen. Hosting-Unternehmen bieten möglicherweise interaktive Onboarding-Erlebnisse an, bei denen Sie zunächst eine echte WordPress-Site anpassen …

In anderen Bereichen könnten Kundensupportteams einen simulierten Playground nutzen, um bei der Erstellung eines WordPress-Setups basierend auf den genauen Spezifikationen eines Benutzers zu helfen. Das heißt, wenn ein Benutzer ein Problem mit WordPress, Plugins, Themes oder anderen Produkten hat, ist möglicherweise kein Remotezugriff auf ein System erforderlich. Stattdessen kann der Benutzer dem Support-Team genau zeigen, was er tut, und gleichzeitig die Sicherheit seiner Website gewährleisten.

Adam sieht WordPress Playground als ein „… interaktiveres WordPress-Erlebnis…“ und eine „… zugänglichere Möglichkeit, etwas über WordPress zu lernen.“ Solche Anwendungsfälle sind genau das, was er meint. Tatsächlich können Sie dies bereits in Aktion sehen, da die WordPress.org-Homepage einen Link zum Ausprobieren von WordPress mit Playground enthält:

Für die Entwicklungsarbeit könnte WordPress Playground ein Glücksfall sein. Es könnte sich zum Beispiel um das „...Standardtool handeln, das Entwickler verwenden, um mit WordPress zu beginnen, mit temporären Websites zu experimentieren, Staging-Websites einzurichten und eine Vorschau von Pull-Anfragen anzuzeigen.“

Es ist möglich, dass WordPress Playground de facto zu einer Möglichkeit wird, WordPress zu starten, insbesondere für Entwicklungszwecke. Es gibt bereits eine Methode, WordPress zu starten und mit einem bestimmten Gutenberg-Plugin Pull Request (PR) zu laden, etwa so:

Ich überlasse Ihnen die letzten Worte dazu, wie sich WordPress Playground in das allgemeine Ökosystem der Plattform einfügt:

…das ultimative Ziel ist es, WordPress dabei zu helfen, das Betriebssystem des Webs zu werden…

Um das Potenzial von Playground auszuschöpfen, müssen Sie jedoch wissen, wie man es nutzt. Das zeige ich dir als nächstes.

So verwenden Sie WordPress Playground (vier Tipps)

Im Wesentlichen ist WordPress Playground supereinfach zu verwenden und zu bearbeiten. Es gibt jedoch zahlreiche fortgeschrittene Tricks, Tipps und Techniken, um genau die Installation zu erstellen, die Sie möchten.

In den nächsten Abschnitten zeige ich Ihnen einige Möglichkeiten, WordPress Playground zu verwenden. Der beste Ausgangspunkt ist die Durchführung grundlegender Installationen innerhalb der App.

1. Nutzen Sie die Abfrage-API-Attribute, um WordPress-Aufgaben auszuführen und die Plattform anzupassen
2. Erstellen Sie JSON-Blueprints, um benutzerdefinierte WordPress-Installationen zu erstellen
3. Steuern Sie WordPress Playground mit der JavaScript-API
4. Verwenden Sie WordPress Playground in Node.js

1. Nutzen Sie die Abfrage-API-Attribute, um WordPress-Aufgaben auszuführen und die Plattform anzupassen

Die einfachste Möglichkeit, WordPress Playground zu implementieren, ist die Query API, die einfach zu verwenden ist. Ihre Installation wird in einem iFrame angezeigt, sodass Sie sie mit einer Codezeile in fast jede Site einbetten können:

 <iframe src="https://playground.wordpress.net/"></iframe>

Von hier aus können Sie Ihre Installation mithilfe spezieller Konfigurationsoptionen innerhalb der URL anpassen. Derzeit stehen eine Handvoll Optionen zur Verfügung, um die meisten grundlegenden Aufgaben abzudecken. Sie können beispielsweise Ihre PHP-Version, den Seitenmodus, die Speicheroption und mehr auswählen.

Der wichtigste Aspekt ist, welche Plugins und Themes Sie installieren, denn nur so können Sie dies in WordPress Playground tun:

 <iframe src="https://playground.wordpress.net/?plugin=otter-blocks&theme=neve&url=/wp-admin/post-new.php&mode=seamless"> </iframe>

Dieses Snippet installiert Otter Blocks und Neve, zeigt WordPress im Vollbildmodus an und öffnet sich auf einer Post-Edit-Seite. Diese geben Sie in die simulierte Adressleiste auf dem Bildschirm ein:

💡 Es ist eine flexible Möglichkeit, das zu installieren, was Sie benötigen, und Sie sollten damit vertraut sein, wenn Sie PHP beherrschen.

2. Erstellen Sie JSON-Blueprints, um benutzerdefinierte WordPress-Installationen zu erstellen

Eine weitere bekannte Möglichkeit, WordPress Playground anzupassen, ist die JSON Blueprints API. Hier verwenden Sie eine JSON-Formatierung, um ein Site-Profil zu erstellen. Sie werden den Prozess verstehen, wenn Sie Varying Vagrant Vagrants (VVV) für die lokale WordPress-Entwicklung verwenden.

 { "$schema": "https://playground.wordpress.net/blueprint-schema.json", "landingPage": "/wp-admin/", "preferredVersions": { "php": "8.0", "wp": "latest" }, "steps": [ { "step": "login", "username": "admin", "password": "password" } ] }

Ich denke, diese sind flexibler als die Verwendung der Query API, da Sie keinen Code benötigen (nur JSON). Darüber hinaus ruft die Blueprints-API HTTP-Anfragen in Ihrem Namen ab. Sie können diese auch in Node.js verwenden (mehr dazu später), obwohl es einfacher ist, den Blueprint in die simulierte Adressleiste einzufügen.

Obwohl ich hier nicht vollständig auf die Verwendung der Blueprints-API eingehen kann, empfehle ich Ihnen, sich die fantastische Dokumentation anzusehen. Sie werden feststellen, dass Sie Aspekte eines Prozesses automatisieren können, beispielsweise das Anmelden eines Benutzers mit einer bestimmten Rolle.

3. Steuern Sie WordPress Playground mit der JavaScript-API

WordPress Playground bietet eine eigene JavaScript-API, mit der Sie eine Instanz ausführen und auf ähnliche Weise wie andere Methoden steuern können. Dazu müssen Sie npm verwenden, um das @wp-playground/client Paket abzurufen. Sie benötigen außerdem einen iFrame, um die resultierende WordPress-Installation anzuzeigen.

Hier ist eine Codefolge aus der WordPress Playground-Dokumentation, die den kürzesten Weg zur Verwendung der JavaScript-API zeigt:

 <iframe ></iframe> <script type="module"> // Use unpkg for convenience import { startPlaygroundWeb } from 'https://unpkg.com/@wp-playground/client/index.js'; const client = await startPlaygroundWeb({ iframe: document.getElementById('wp'), remoteUrl: `https://playground.wordpress.net/remote.html`, }); // Let's wait until Playground is fully loaded await client.isReady(); </script>

Mit diesem client Objekt können Sie die Website dann mithilfe von JSON-Blueprints und -Funktionen sowie dem Playground API-Client weiter steuern. Mit letzterem können Sie spezifischen PHP-Code ausführen, HTTP-Anfragen stellen, die PHP.ini-Datei anpassen, Dateien und Verzeichnisse verwalten und fast alles andere, was Sie erwarten.

4. Verwenden Sie WordPress Playground in Node.js

WebAssembly ist eine Kerntechnologie von WordPress Playground, dank der Sie es in Node.js verwenden können. Dadurch wird das Tool geöffnet, mit dem Sie mithilfe einer Erweiterung in VSCode-basierten Editoren für WordPress entwickeln können.

Mit der Erweiterung können Sie eine lokale Entwicklungsumgebung ohne Setup installieren, die keine Abhängigkeiten wie Apache, MySQL und andere benötigt. Sie können einen WordPress-Server mit einem Klick über die Seitenleiste starten:

Dies könnte eine hervorragende Möglichkeit sein, Ihren Code und Ihre Entwicklungsumgebung zusammenzuhalten. Und meiner Meinung nach ist es eine effiziente und organisierte Möglichkeit, Ihre Projekte zu verwalten.

Die Zukunft von WordPress Playground

Angesichts der Tatsache, dass WordPress Playground neu und aufregend ist! – Projekt, die Entwicklung schreitet rasant voran. Das bedeutet, dass es ständig viele interessante Entwicklungen und Updates gibt.

Eines der größten ist Blocknotes. Diese iOS-App befindet sich derzeit in der Beta-Phase und ermöglicht Ihnen das Erstellen von Notizen auf Ihrem Gerät, die dann mit WordPress synchronisiert werden, um Sie beim Erstellen von Beiträgen und Seiten zu unterstützen. Die Hoffnung ist, dass es für ein besseres mobiles WordPress-Erlebnis von zentraler Bedeutung sein wird – etwas, das sich die Community gewünscht hat. Wie Adam erklärt:

Blocknotes weist den Weg zur Dokumentation und Automatisierung eines Prozesses der Verwendung von WordPress als mobile App – ich würde gerne eine Welt sehen, in der Sie einfach eine WordPress-Site anpassen oder ein WordPress-Plugin erstellen, auf eine Schaltfläche klicken und sie in eine mobile App verwandeln können App .

WordPress Playground kann jedoch noch mehr bieten. Beispielsweise gibt es das Plugin „Interactive Code Block“ , mit dem Sie dank der Architektur von Playground PHP im Browser ausführen können.

Es gibt sogar Bestrebungen, die WP CLI mit Playground kompatibel zu machen:

…Ich habe einige Zeit damit verbracht, WP CLI mit Playground im Browser auszuführen. Wenn man an die Zukunft denkt, könnte die WP CLI-Site ein interaktives Terminal anzeigen, mit dem Sie WP CLI-Befehle lernen und erkunden können …

Insgesamt sieht es so aus, als ob die Zukunft stark von WordPress Playground geprägt sein wird:

…Plugin-Autoren und Marktplätze werden wahrscheinlich damit beginnen, Playground-basierte interaktive Vorschauen anzubieten …

Angesichts des Umfangs von Playground insgesamt scheint dies eine bescheidene Anwendung zu sein. Dies könnte ein Meilenstein für WordPress als Plattform sein, so wie es der Block Editor oder ähnliche Innovationen waren.

Fazit 🧐

Das WordPress-Ökosystem hat nach einem Tool gefragt, um Plugins, Themes, Websites und mehr zu präsentieren, ohne dass ein komplizierter Einrichtungsprozess oder anderes Hosting erforderlich ist. Das WordPress Playground-Projekt bietet genau dies. Damit können Sie eine vollständige Version von WordPress im Browser ausführen, ohne dass ein Server, eine Datenbank, PHP oder viele andere Abhängigkeiten erforderlich sind.

Kurz gesagt: Das Tool ist großartig und scheint Teil der Zukunft der Plattform zu sein. Noch besser: Das Entwicklungsteam arbeitet kontinuierlich an der Lösung. Es gab viele spannende Ergänzungen, wie zum Beispiel eine Pull-Request-Option, die meiner Meinung nach die WordPress-Entwicklung und -Unterstützung von nun an viel einfacher machen wird.

Wie wird WordPress Playground dazu beitragen, dass Ihre Projekte besser werden? Teilen Sie uns Ihre Meinung im Kommentarbereich unten mit!