Une introduction à WordPress Playground (y compris les cas d'utilisation et les commentaires du développeur principal)

WordPress Playground pourrait être la réponse à beaucoup de problèmes. Pendant très longtemps, il n'y a pas eu de moyen solide de présenter des produits WordPress tels que des thèmes ou des plugins sans configurations d'hébergement et de démonstration complexes. De plus, la réplication d'une erreur est souvent un champ de mines pour une équipe de support. WordPress Playground est une version dans le navigateur de la plate-forme qui pourrait résoudre tous ces problèmes.

👉 Dans cet article, je vais examiner le projet WordPress Playground, parler de son histoire, vous montrer comment l'utiliser et discuter de la direction que prendra cet outil passionnant.

Qu'est-ce que WordPress Playground ?

WordPress a besoin de ses nombreuses pièces mobiles pour même démarrer. Un serveur est une nécessité évidente, mais son architecture PHP nécessitera également une base de données. Cependant, que se passe-t-il si vous n'avez pas besoin d'une implémentation typique de l'un d'entre eux pour lancer une nouvelle installation WordPress ? C'est là qu'intervient WordPress Playground.

Il s'agit d'une version entièrement intégrée à la plate-forme qui n'a pas besoin de serveur, de PHP ou de base de données. Au lieu de cela, il utilise d'autres technologies courantes pour simuler ou remplacer les composants standard requis :

• L'outil utilise un binaire WebAssembly pour créer un interpréteur PHP.
• Au lieu de MySQL, il existe un plugin WordPress qui exécute SQLite.
• Le serveur Web utilise une implémentation intelligente de JavaScript en tant que Service Worker.

En tant que tel, vous pouvez avoir une nouvelle version de WordPress qui s'exécutera dans le navigateur, sans ses dépendances habituelles (du moins d'une manière à laquelle vous vous attendez).

Une visite rapide de WordPress Playground

Une fois que vous vous dirigez vers le site Web WordPress Playground, le service préparera une version de WordPress pour vous, et cela ne devrait prendre que quelques secondes. C'est techniquement tout, bien qu'il y ait plus de possibilités en attente (comme je le verrai plus tard).

L'écran principal affichera le frontend d'un site Web WordPress, comme si vous étiez connecté. Cela signifie que vous avez la barre d'outils typique avec laquelle vous pouvez vous diriger vers le backend. Cependant, avant de le faire, repérez certaines des fonctionnalités supplémentaires dans la barre d'outils du navigateur simulé :

• Un menu pour vous aider à choisir une version spécifique de PHP ou WordPress.
• Options d'importation et d'exportation d'instances Playground pour une utilisation future.

Lors du choix de votre version PHP et WordPress, vous pouvez également choisir un stockage temporaire ou persistant. Ce dernier utilise des cookies pour conserver votre instance WordPress.

Comme je le suggère, il existe d'autres façons de personnaliser votre instance WordPress Playground, que je couvrirai bientôt. En attendant, le reste de l'installation ressemblera à WordPress typique. Le seul plugin que WordPress Playground installe est celui pour importer du contenu :

En parlant de cela, aucune solution ne peut être parfaite, et c'est également le cas avec WordPress Playground. Parlons plus à ce sujet ensuite.

Limites de WordPress Playground

La principale limitation de WordPress Playground est que vous ne pouvez pas accéder au répertoire des thèmes WordPress ou au répertoire des plugins WordPress. Cependant, vous pouvez utiliser des attributs dans les URL pour installer des thèmes et des plugins. C'est quelque chose que je vous montrerai plus tard.

C'est également une bonne idée d'exporter votre instance Playground si vous souhaitez conserver vos modifications. Bien qu'il existe désormais un mode de stockage persistant , vous ne voulez pas vous y fier pendant que le projet en est à ses débuts.

En ce qui concerne les problèmes de développement, vous pouvez rencontrer des problèmes avec iFrames, Xdebug et certaines fonctions PHP. C'est une bonne idée de garder la section dédiée de la documentation à portée de main pour voir comment ces problèmes évoluent à l'avenir. 🔮

Pourquoi WordPress Playground existe

WordPress Playground est super nouveau et brillant. En effet, la première présentation du projet a eu lieu au State of the Word en novembre 2022 :

Le rythme effréné du projet - de la conception à la réalisation - est le résultat du travail du développeur Automattic Adam Zielinski. Comme l'indique son article de blog détaillé, il souhaitait trouver un moyen d'installer WordPress sans longs flux de travail ni temps de configuration.

En outre, je pense également que cela contribue à l'objectif à long terme de WordPress de rivaliser avec les créateurs de sites Web tels que Squarespace et Wix. Après tout, ces plates-formes ne vous concernent pas avec les serveurs, le code et les bases de données. C'est un avantage secondaire intéressant qui aide à faire avancer l'ensemble du projet WordPress, et c'est quelque chose dont je parlerai plus en détail dans une section ultérieure.

En juin 2023, WordPress Playground a eu une autre diffusion lors du Keynote de juin WordCamp Europe 2023 par Josepha Haden Chomphosy :

À ce stade, WordPress Playground est une application mature qui peut commencer à faire son chemin dans le développement quotidien. Il peut s'insérer dans n'importe quel nombre de flux de travail, de projets et de situations. Je peux couvrir certains d'entre eux plus tard.

Où WordPress Playground s'intègre dans l'écosystème de la plateforme

Il y a quelques années, l'équipe WP Sandbox a créé Poopy.life - un bac à sable WordPress qui vous permet de créer gratuitement de nouvelles installations au fur et à mesure de vos besoins. Ce projet n'a pas duré longtemps, même si vous pouvez voir comment le concept se poursuit dans WordPress Playground.

Contrairement à ses prédécesseurs, WordPress Playground peut offrir un meilleur moyen d'intégrer la plate-forme dans presque toutes les facettes de la communauté.

Par exemple, imaginez un scénario dans lequel vous pourriez présenter un thème WordPress ou une démo de plugin en direct sur le site Web de votre entreprise, avec un accès complet à l'arrière et à l'interface. Vous donnez essentiellement à l'utilisateur une démo entièrement fonctionnelle sur un site réel. Voici les pensées d'Adam Zielinski :

… les auteurs de plugins et les places de marché commenceront probablement à proposer des aperçus interactifs basés sur Playground ; les éditeurs de code en ligne peuvent ajouter la prise en charge de WordPress. Les sociétés d’hébergement peuvent proposer des expériences d’intégration interactives où vous commencez par personnaliser un vrai site WordPress…

Dans d'autres domaines, les équipes de support client pourraient utiliser un terrain de jeu simulé pour aider à créer une configuration WordPress basée sur les spécifications exactes d'un utilisateur. Cela signifie que si un utilisateur a un problème avec WordPress, des plugins, des thèmes ou d'autres produits, il peut ne pas être nécessaire de se connecter à distance à un système. Au lieu de cela, l'utilisateur peut montrer à l'équipe d'assistance exactement ce qu'il fait, tout en protégeant son site.

Adam voit WordPress Playground comme une "... expérience WordPress plus interactive..." et une "... façon plus accessible d'en savoir plus sur WordPress". Ces types de cas d'utilisation sont exactement ce qu'il veut dire. En fait, vous pouvez déjà le voir en action, car la page d'accueil de WordPress.org inclut un lien Essayez WordPress en utilisant Playground :

Pour les travaux de développement, WordPress Playground pourrait être une aubaine. Par exemple, il pourrait s'agir de "... l'outil standard utilisé par les développeurs pour démarrer avec WordPress, expérimenter des sites temporaires, configurer des sites de développement et prévisualiser les demandes d'extraction".

Il est possible que WordPress Playground devienne un moyen de facto de lancer WordPress, notamment à des fins de développement. Il existe déjà une méthode pour lancer WordPress et le charger avec un plugin Gutenberg spécifique Pull Request (PR), comme ceci :

Je laisserai les derniers mots sur la façon dont WordPress Playground s'intégrera dans l'écosystème général de la plateforme :

…le but ultime est d'aider WordPress à devenir le système d'exploitation du web…

Cependant, pour tirer parti du potentiel de Playground, vous devez savoir comment l'utiliser. Je vais vous montrer ça ensuite.

Comment utiliser WordPress Playground (quatre conseils)

En substance, WordPress Playground est très simple à utiliser et à utiliser. Cependant, il existe de nombreuses astuces, astuces et techniques avancées pour créer l'installation exacte que vous souhaitez.

Au cours des prochaines sections, je vais vous montrer quelques-unes des façons d'utiliser WordPress Playground. Le meilleur endroit pour commencer est de savoir comment effectuer des installations fondamentales dans l'application.

1. Tirez parti des attributs de l'API Query pour effectuer des tâches WordPress et personnaliser la plate-forme
2. Créez des plans JSON pour créer des installations WordPress personnalisées
3. Contrôlez WordPress Playground avec l'API JavaScript
4. Utiliser WordPress Playground dans Node.js

1. Tirez parti des attributs de l'API Query pour effectuer des tâches WordPress et personnaliser la plateforme

Le moyen le plus simple d'implémenter WordPress Playground est avec l'API Query, qui est simple à utiliser. Votre installation s'affichera dans un iFrame, vous pouvez donc l'intégrer sur presque n'importe quel site avec une ligne de code :

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

À partir de là, vous pouvez personnaliser votre installation à l'aide d'options de configuration dédiées dans l'URL. Il existe actuellement une poignée d'options pour couvrir la plupart des tâches de base. Par exemple, vous pouvez choisir votre version de PHP, le mode de page, l'option de stockage, etc.

L'aspect le plus important est de savoir quels plugins et thèmes vous installez, car c'est la seule façon de le faire dans WordPress Playground :

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

Cet extrait installera Otter Blocks et Neve, affichera WordPress en plein écran et s'ouvrira sur une page de publication. Vous les entrez dans la barre d'adresse simulée à l'écran :

💡 C'est un moyen flexible d'installer ce dont vous avez besoin, et vous devriez le connaître si vous connaissez PHP.

2. Créez des plans JSON pour créer des installations WordPress personnalisées

Une autre façon familière de personnaliser WordPress Playground consiste à utiliser l'API JSON Blueprints. Ici, vous utiliserez un formatage JSON pour créer un profil de site. Vous comprendrez le processus si vous utilisez Varying Vagrant Vagrants (VVV) pour le développement WordPress local.

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

Je pense que ceux-ci sont plus flexibles que l'utilisation de l'API Query, car vous n'avez pas besoin de code (juste JSON). De plus, l'API Blueprints récupère les requêtes HTTP en votre nom. Vous pouvez également les utiliser dans Node.js (plus tard), bien qu'il soit plus simple de coller le plan dans la barre d'adresse simulée.

Bien que je ne puisse pas expliquer comment utiliser l'API Blueprints dans son intégralité ici, je vous encourage à consulter la documentation fantastique. Vous découvrirez que vous pouvez automatiser certains aspects d'un processus, comme la connexion d'un utilisateur avec un rôle spécifique.

3. Contrôlez WordPress Playground avec l'API JavaScript

WordPress Playground fournit sa propre API JavaScript qui vous permet d'exécuter une instance et de la contrôler de la même manière que d'autres méthodes. Pour ce faire, vous voudrez utiliser npm pour obtenir le package @wp-playground/client . Vous aurez également besoin d'un iFrame pour afficher l'installation WordPress résultante.

Voici une suite de code de la documentation de WordPress Playground qui montre le moyen le plus court d'utiliser l'API JavaScript :

 <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>

Avec cet objet client , vous pouvez ensuite contrôler davantage le site Web à l'aide des Blueprints et des fonctions JSON, ainsi que du client API Playground. Ce dernier vous permet d'exécuter du code PHP spécifique, de faire des requêtes HTTP, de personnaliser le fichier PHP.ini, de gérer les fichiers et les répertoires, et presque tout ce que vous vous attendez à réaliser.

4. Utilisez WordPress Playground dans Node.js

WebAssembly est une technologie de base de WordPress Playground, grâce à laquelle vous pouvez l'utiliser dans Node.js. Cela ouvre l'outil pour vous aider à développer pour WordPress dans les éditeurs basés sur VSCode à l'aide d'une extension.

L'extension vous permet d'installer un environnement de développement local sans configuration qui n'a pas besoin de dépendances telles qu'Apache, MySQL et autres. Vous pouvez démarrer un serveur WordPress en un clic depuis la barre latérale :

Cela pourrait être un excellent moyen de garder votre code et votre environnement de développement ensemble. Et, à mon avis, cela constitue un moyen efficace et organisé de conserver vos projets.

L'avenir de WordPress Playground

Étant donné que WordPress Playground est nouveau – pour ne pas dire passionnant ! – projet, le développement se déroule à un rythme rapide. Cela signifie qu'il y a beaucoup de développements intéressants et de mises à jour qui se produisent tout le temps.

L'un des plus importants est Blocknotes. Cette application iOS est actuellement en phase bêta et vous permet de créer des notes sur votre appareil qui se synchronisent ensuite avec WordPress pour vous aider à créer des publications et des pages. L'espoir est qu'il devienne central pour une meilleure expérience mobile WordPress - quelque chose que la communauté a demandé. Comme l'explique Adam :

Blocknotes ouvre la voie à la documentation et à l'automatisation d'un processus d'utilisation de WordPress en tant qu'application mobile. J'aimerais voir un monde où vous pouvez simplement personnaliser un site WordPress ou créer un plugin WordPress, cliquer sur un bouton et le transformer en mobile. application .

Cependant, WordPress Playground peut offrir plus. Par exemple, il y a le plugin Interactive Code Block qui vous permet d'exécuter PHP dans le navigateur grâce à l'architecture de Playground.

Il y a même des efforts pour faire fonctionner le WP CLI avec Playground :

… J'ai passé du temps… à exécuter WP CLI dans le navigateur à l'aide de Playground. En pensant à l'avenir, le site WP CLI pourrait afficher un terminal interactif qui vous permet d'apprendre et d'explorer les commandes WP CLI…

Dans l'ensemble, l'avenir s'annonce lourd sur WordPress Playground :

…Les auteurs de plugins et les places de marché commenceront probablement à proposer des aperçus interactifs basés sur Playground…

Cela semble être une application modeste compte tenu de la portée de Playground dans son ensemble. Cela pourrait être une étape importante pour WordPress en tant que plate-forme de la même manière que l'éditeur de blocs ou des innovations similaires l'ont été.

Conclusion 🧐

L'écosystème WordPress a demandé un outil pour présenter des plugins, des thèmes, des sites, etc., sans avoir besoin d'un processus de configuration compliqué ou d'un autre hébergement. Le projet WordPress Playground fournit exactement cela. Il vous permet d'exécuter une version complète de WordPress dans le navigateur, sans avoir besoin d'un serveur, d'une base de données, de PHP ou de nombreuses autres dépendances.

En un mot, l'outil est incroyable et semble faire partie de l'avenir de la plate-forme. Mieux encore, l'équipe de développement travaille sur la solution à perpétuité. Il y a eu de nombreux ajouts intéressants, comme une option de demande d'extraction qui, je pense, rendra le développement et le support WordPress beaucoup plus faciles à partir de maintenant.

Comment WordPress Playground aidera-t-il vos projets à s'améliorer ? Faites-nous part de vos réflexions dans la section commentaires ci-dessous!