Un'introduzione a WordPress Playground (inclusi casi d'uso e commenti da Lead Dev)

WordPress Playground potrebbe essere la risposta a molti problemi. Per molto tempo, non c'è stato un modo solido per mostrare prodotti WordPress come temi o plugin senza complesse configurazioni di hosting e demo. Inoltre, replicare un errore è spesso un campo minato per un team di supporto. WordPress Playground è una versione in-browser della piattaforma che potrebbe risolvere tutti questi problemi.

👉 In questo post, esaminerò il progetto WordPress Playground, parlerò della sua storia, ti mostrerò come usarlo e discuterò dove si sta dirigendo questo entusiasmante strumento.

Cos'è WordPress Playground

WordPress ha bisogno delle sue numerose parti mobili anche solo per avviarsi. Un server è un'ovvia necessità, ma la sua architettura PHP richiederà anche un database. Tuttavia, cosa succederebbe se non avessi bisogno di un'implementazione tipica di nessuno di questi per avviare una nuova installazione di WordPress? È qui che entra in gioco WordPress Playground.

È una versione completamente integrata nel browser della piattaforma che non necessita di server, PHP o database. Invece, utilizza alcune altre tecnologie comuni per simulare o sostituire i componenti richiesti standard:

• Lo strumento utilizza un file binario WebAssembly per creare un interprete PHP.
• Invece di MySQL, c'è un plugin per WordPress che esegue SQLite.
• Il server Web utilizza un'implementazione intelligente di JavaScript come Service Worker.

Pertanto, puoi avere una nuova versione di WordPress che verrà eseguita nel browser, senza le sue solite dipendenze (almeno in un modo che ti aspetteresti).

Un rapido tour di WordPress Playground

Una volta che visiti il ​​​​sito Web di WordPress Playground, il servizio preparerà una versione di WordPress per te e dovrebbe richiedere solo pochi secondi. Tecnicamente è così, anche se ci sono più possibilità in attesa (come vedremo più avanti).

La schermata principale mostrerà il frontend di un sito Web WordPress, come se avessi effettuato l'accesso. Ciò significa che hai la tipica barra degli strumenti con cui puoi andare al backend. Tuttavia, prima di farlo, individua alcune delle funzionalità extra nella barra degli strumenti del browser simulato:

• Un menu per aiutarti a scegliere una versione specifica di PHP o WordPress.
• Opzioni per importare ed esportare istanze di Playground per uso futuro.

Quando scegli la tua versione PHP e WordPress, puoi anche scegliere l'archiviazione temporanea o persistente. Quest'ultimo utilizza i cookie per conservare la tua istanza di WordPress.

Come suggerisco, ci sono altri modi per personalizzare la tua istanza di WordPress Playground, che tratterò presto. Nel frattempo, il resto dell'installazione sembrerà proprio come il tipico WordPress. L'unico plugin che WordPress Playground installa è quello per importare i contenuti:

A proposito, nessuna soluzione può essere perfetta, ed è anche il caso di WordPress Playground. Parliamo di più di questo dopo.

Limitazioni di WordPress Playground

Il limite principale di WordPress Playground è che non puoi accedere alla directory dei temi di WordPress o alla directory dei plug-in di WordPress. Tuttavia, puoi utilizzare gli attributi negli URL per installare temi e plug-in. Questo è qualcosa che ti mostrerò come fare più tardi.

È anche una buona idea esportare l'istanza di Playground se desideri conservare le modifiche. Sebbene ora sia disponibile una modalità di archiviazione persistente , non vuoi fare affidamento su questo mentre il progetto è nelle sue fasi iniziali.

Quando si tratta di problemi di sviluppo, potresti riscontrare alcuni problemi con iFrame, Xdebug e alcune funzioni PHP. È una buona idea tenere a portata di mano la sezione dedicata della documentazione per vedere come questi problemi progrediranno in futuro. 🔮

Perché esiste WordPress Playground

WordPress Playground è super nuovo e splendente. Infatti, la prima presentazione del progetto è stata allo State of the Word nel novembre 2022:

Il ritmo vorticoso del progetto, dall'ideazione alla realizzazione, è il risultato del lavoro dello sviluppatore di Automattic Adam Zielinski. Come afferma il suo dettagliato post sul blog, voleva trovare un modo per installare WordPress senza lunghi flussi di lavoro o tempi di configurazione.

Inoltre, penso anche che aiuti l'obiettivo a lungo termine di WordPress di competere con costruttori di siti Web come Squarespace e Wix. Dopotutto, queste piattaforme non ti riguardano con server, codice e database. Questo è un fantastico vantaggio secondario che aiuta a far avanzare l'intero progetto WordPress, ed è qualcosa di cui parlerò di più in una sezione successiva.

Entro giugno 2023, WordPress Playground ha avuto un'altra messa in onda durante il Keynote di June WordCamp Europe 2023 di Josepha Haden Chomphosy:

A questo punto, WordPress Playground è un'app matura che può iniziare a farsi strada nello sviluppo quotidiano. Può inserirsi in qualsiasi numero di flussi di lavoro, progetti e situazioni. Posso coprire alcuni di questi più tardi.

Dove WordPress Playground si inserisce nell'ecosistema della piattaforma

Alcuni anni fa, il team di WP Sandbox ha creato Poopy.life, una sandbox di WordPress che ti consente di avviare gratuitamente nuove installazioni come e quando ne avevi bisogno. Quel progetto non è durato a lungo, anche se puoi vedere come il concetto continua in WordPress Playground.

A differenza dei suoi predecessori, WordPress Playground può offrire un modo migliore per integrare la piattaforma in quasi ogni aspetto della comunità.

Ad esempio, immagina uno scenario in cui potresti presentare un tema WordPress o una demo di plug-in dal vivo sul tuo sito web aziendale, con pieno accesso al back e al frontend. Essenzialmente dai all'utente una demo completamente funzionante su un sito reale. Ecco i pensieri di Adam Zielinski:

…probabilmente gli autori di plug-in e i marketplace inizieranno a offrire anteprime interattive basate su Playground; gli editor di codice online possono aggiungere il supporto per WordPress. Le società di hosting possono offrire esperienze di onboarding interattive in cui si inizia personalizzando un vero sito WordPress...

In altre aree, i team di assistenza clienti potrebbero utilizzare un Playground simulato per aiutare a creare una configurazione di WordPress basata sulle specifiche esatte di un utente. Ciò significa che se un utente ha un problema con WordPress, plug-in, temi o altri prodotti, potrebbe non essere necessario accedere in remoto a un sistema. Invece, l'utente può mostrare al team di supporto esattamente cosa sta facendo, mantenendo al sicuro il proprio sito.

Adam vede WordPress Playground come "...un'esperienza WordPress più interattiva..." e un "...modo più accessibile per conoscere WordPress". Questi tipi di casi d'uso sono esattamente ciò che intende. In effetti, puoi già vederlo in azione, poiché la home page di WordPress.org include un collegamento Prova WordPress utilizzando Playground:

Per il lavoro di sviluppo, WordPress Playground potrebbe essere una manna dal cielo. Ad esempio, potrebbe essere lo "... strumento standard utilizzato dagli sviluppatori per iniziare con WordPress, sperimentare siti temporanei, configurare siti di gestione temporanea e visualizzare in anteprima le richieste pull".

È possibile che WordPress Playground diventi di fatto un modo per lanciare WordPress, soprattutto per scopi di sviluppo. Esiste già un metodo per avviare WordPress e caricarlo con uno specifico Pull Request (PR) del plugin Gutenberg, come questo:

Lascio le ultime parole su come WordPress Playground si inserirà nell'ecosistema generale della piattaforma:

…l'obiettivo finale è aiutare WordPress a diventare il sistema operativo del web…

Per sfruttare il potenziale di Playground, però, devi sapere come usarlo. Ti mostrerò questo dopo.

Come usare WordPress Playground (quattro consigli)

In sostanza, WordPress Playground è semplicissimo da usare e con cui lavorare. Tuttavia, ci sono molti trucchi, suggerimenti e tecniche avanzati per creare l'installazione esatta che desideri.

Nelle prossime sezioni, ti mostrerò alcuni dei modi per utilizzare WordPress Playground. Il miglior punto di partenza è come eseguire installazioni fondamentali all'interno dell'app.

1. Sfrutta gli attributi dell'API di query per eseguire attività di WordPress e personalizzare la piattaforma
2. Costruisci progetti JSON per creare installazioni WordPress personalizzate
3. Controlla WordPress Playground con l'API JavaScript
4. Usa WordPress Playground all'interno di Node.js

1. Sfrutta gli attributi dell'API di query per eseguire attività di WordPress e personalizzare la piattaforma

Il modo più semplice per implementare WordPress Playground è con l'API Query, che è semplice da usare. La tua installazione verrà visualizzata in un iFrame, quindi puoi incorporarla in quasi tutti i siti con una riga di codice:

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

Da qui è possibile personalizzare l'installazione utilizzando le opzioni di configurazione dedicate all'interno dell'URL. Ci sono una manciata di opzioni disponibili in questo momento per coprire la maggior parte delle attività di base. Ad esempio, puoi scegliere la versione PHP, la modalità della pagina, l'opzione di archiviazione e altro.

L'aspetto più importante è quali plugin e temi installi, poiché questo è l'unico modo per farlo in WordPress Playground:

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

Questo frammento installerà Otter Blocks e Neve, mostrerà WordPress a schermo intero e si aprirà su una pagina di modifica del post. Li inserisci nella barra degli indirizzi simulata sullo schermo:

💡 È un modo flessibile per installare ciò di cui hai bisogno e dovresti conoscerlo se conosci PHP.

2. Costruisci progetti JSON per creare installazioni WordPress personalizzate

Un altro modo familiare per personalizzare WordPress Playground è tramite l'API JSON Blueprints. Qui utilizzerai una formattazione JSON per creare un profilo del sito. Capirai il processo se utilizzi Varying Vagrant Vagrants (VVV) per lo sviluppo locale di WordPress.

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

Penso che questi siano più flessibili rispetto all'utilizzo dell'API di query, poiché non è necessario il codice (solo JSON). Inoltre, l'API Blueprints recupera le richieste HTTP per tuo conto. Puoi anche usarli anche in Node.js (ne parleremo più avanti), anche se è più semplice incollare il progetto nella barra degli indirizzi simulata.

Anche se non posso spiegare come utilizzare l'API Blueprints per intero qui, ti incoraggio a dare un'occhiata alla fantastica documentazione. Scoprirai che puoi automatizzare aspetti di un processo, come l'accesso di un utente con un ruolo specifico.

3. Controlla WordPress Playground con l'API JavaScript

WordPress Playground fornisce la propria API JavaScript che consente di eseguire un'istanza e controllarla in modo simile ad altri metodi. Per fare ciò, ti consigliamo di utilizzare npm per ottenere il pacchetto @wp-playground/client . Avrai anche bisogno di un iFrame per visualizzare l'installazione di WordPress risultante.

Ecco una suite di codice dalla documentazione di WordPress Playground che mostra il modo più breve per utilizzare 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>

Con questo oggetto client , puoi quindi controllare ulteriormente il sito Web utilizzando i progetti e le funzioni JSON e il client API Playground. Quest'ultimo ti consente di eseguire codice PHP specifico, effettuare richieste HTTP, personalizzare il file PHP.ini, gestire file e directory e quasi tutto ciò che ti aspetteresti di ottenere.

4. Usa WordPress Playground all'interno di Node.js

WebAssembly è una tecnologia di base di WordPress Playground, grazie alla quale puoi utilizzarla all'interno di Node.js. Questo apre lo strumento per aiutarti a sviluppare per WordPress all'interno di editor basati su VSCode utilizzando un'estensione.

L'estensione ti consente di installare un ambiente di sviluppo locale a configurazione zero che non necessita di dipendenze come Apache, MySQL e altri. Puoi avviare un server WordPress con un clic dalla barra laterale:

Questo potrebbe essere un modo eccellente per tenere insieme il tuo codice e il tuo ambiente di sviluppo. E, secondo me, rappresenta un modo efficiente e organizzato per conservare i tuoi progetti.

Il futuro di WordPress Playground

Dato che WordPress Playground è una novità, per non dire eccitante! – progetto, lo sviluppo sta avvenendo a un ritmo rapido. Ciò significa che ci sono molti sviluppi e aggiornamenti interessanti in continuazione.

Uno dei più grandi è Blocknotes. Questa app iOS è in fase beta in questo momento e ti consente di creare note sul tuo dispositivo che poi si sincronizzano con WordPress per aiutarti a creare post e pagine. La speranza è che diventi centrale per una migliore esperienza mobile di WordPress, qualcosa che la community ha chiesto. Come spiega Adamo:

Blocknotes apre la strada alla documentazione e all'automazione di un processo di utilizzo di WordPress come app mobile: mi piacerebbe vedere un mondo in cui puoi semplicemente personalizzare un sito WordPress o creare un plug-in WordPress, fare clic su un pulsante e trasformarlo in un dispositivo mobile app .

Tuttavia, WordPress Playground può offrire di più. Ad esempio, c'è il plug-in Interactive Code Block che ti consente di eseguire PHP nel browser grazie all'architettura di Playground.

Ci sono anche sforzi per far funzionare la CLI di WP con Playground:

…Ho trascorso un po' di tempo…eseguendo WP CLI nel browser usando Playground. Pensando al futuro, il sito WP CLI potrebbe visualizzare un terminale interattivo che ti consente di apprendere ed esplorare i comandi WP CLI...

Nel complesso, sembra che il futuro sarà pesante su WordPress Playground:

…Gli autori di plug-in e i marketplace probabilmente inizieranno a offrire anteprime interattive basate su Playground…

Questa sembra un'applicazione modesta data la portata di Playground nel suo complesso. Questa potrebbe essere una pietra miliare per WordPress come piattaforma nello stesso modo in cui lo sono stati il ​​Block Editor o innovazioni simili.

Conclusione 🧐

L'ecosistema WordPress ha richiesto uno strumento per mostrare plug-in, temi, siti e altro senza la necessità di un complicato processo di installazione o altro hosting. Il progetto WordPress Playground fornisce proprio questo. Ti consente di eseguire una versione completa di WordPress nel browser, senza la necessità di un server, database, PHP o molte altre dipendenze.

In poche parole, lo strumento è fantastico e sembra far parte del futuro della piattaforma. Ancora meglio, il team di sviluppo lavora alla soluzione per sempre. Ci sono state molte aggiunte entusiasmanti, come un'opzione di richiesta pull che penso renderà lo sviluppo e il supporto di WordPress molto più un gioco da ragazzi d'ora in poi.

In che modo WordPress Playground aiuterà i tuoi progetti a migliorare? Fateci sapere i vostri pensieri nella sezione commenti qui sotto!