O introducere în WordPress Playground (inclusiv cazuri de utilizare și comentarii de la Lead Dev)

WordPress Playground ar putea fi răspunsul la o mulțime de probleme. De mult timp, nu a existat o modalitate solidă de a prezenta produse WordPress, cum ar fi teme sau pluginuri, fără configurații complexe de găzduire și demonstrații. De asemenea, replicarea unei erori este adesea un câmp minat pentru o echipă de asistență. WordPress Playground este o versiune în browser a platformei care ar putea rezolva toate aceste probleme.

👉 În această postare, voi analiza proiectul WordPress Playground, voi vorbi despre istoria acestuia, vă arăt cum să-l utilizați și voi discuta spre ce se îndreaptă acest instrument interesant.

Ce este WordPress Playground

WordPress are nevoie de numeroasele sale părți mobile pentru a porni chiar. Un server este o necesitate evidentă, dar arhitectura lui PHP va necesita și o bază de date. Cu toate acestea, ce se întâmplă dacă nu ați avea nevoie de o implementare tipică a niciuna dintre acestea pentru a crea o nouă instalare WordPress? Aici intervine WordPress Playground.

Este o versiune complet în browser a platformei care nu are nevoie de un server, PHP sau o bază de date. În schimb, utilizează alte tehnologii comune pentru a simula sau înlocui componentele standard necesare:

• Instrumentul folosește un binar WebAssembly pentru a construi un interpret PHP.
• În loc de MySQL, există un plugin WordPress care rulează SQLite.
• Serverul web folosește o implementare inteligentă a JavaScript ca un Service Worker.

Ca atare, puteți avea o versiune nouă de WordPress care va rula în browser, fără dependențele sale obișnuite (cel puțin într-un mod la care v-ați aștepta).

Un tur rapid al terenului de joacă WordPress

Odată ce vă îndreptați către site-ul web WordPress Playground, serviciul vă va pregăti o versiune de WordPress și ar trebui să dureze doar câteva secunde. Așa este din punct de vedere tehnic, deși există mai multe posibilități în așteptare (cum voi vedea mai târziu).

Ecranul principal va afișa interfața unui site web WordPress, ca și cum v-ați fi autentificat. Aceasta înseamnă că aveți o bară de instrumente tipică cu care vă puteți îndrepta către backend. Cu toate acestea, înainte de a face acest lucru, identificați unele dintre funcțiile suplimentare din bara de instrumente simulată a browserului :

• Un meniu care vă ajută să alegeți o anumită versiune PHP sau WordPress.
• Opțiuni pentru a importa și exporta instanțe Playground pentru utilizare ulterioară.

Atunci când alegeți versiunea PHP și WordPress, puteți alege și stocarea temporară sau persistentă. Acesta din urmă utilizează cookie-uri pentru a vă păstra instanța WordPress.

După cum sugerez, există și alte modalități de a vă personaliza instanța WordPress Playground, pe care le voi trata în curând. Între timp, restul instalării va arăta exact ca WordPress tipic. Singurul plugin pe care WordPress Playground îl instalează este cel pentru a importa conținut:

Apropo de asta, nicio soluție nu poate fi perfectă, și este și cazul WordPress Playground. Să vorbim mai multe despre asta în continuare.

Limitările WordPress Playground

Principala limitare a WordPress Playground este că nu puteți accesa Directorul de teme WordPress sau Directorul de pluginuri WordPress. Cu toate acestea, puteți utiliza atribute în adrese URL pentru a instala teme și pluginuri. Acesta este ceva ce vă voi arăta cum să faceți mai târziu.

De asemenea, este o idee bună să exportați instanța Playground dacă doriți să păstrați modificările. Deși acum există un mod de stocare persistent , nu doriți să vă bazați pe acesta în timp ce proiectul este în fazele sale incipiente.

Când vine vorba de probleme de dezvoltare, este posibil să observați unele probleme cu iFrames, Xdebug și anumite funcții PHP. Este o idee bună să păstrați secțiunea dedicată a documentației la îndemână pentru a vedea cum progresează aceste probleme în viitor. 🔮

De ce există WordPress Playground

WordPress Playground este super nou și strălucitor. De fapt, prima prezentare a proiectului a fost la State of the Word în noiembrie 2022:

Ritmul vârtej al proiectului – de la concepere la realizare – este rezultatul muncii dezvoltatorului Automattic, Adam Zielinski. După cum afirmă postarea sa detaliată pe blog, el a vrut să găsească o modalitate de a instala WordPress fără fluxuri de lucru lungi sau timp de configurare.

În plus, cred că ajută obiectivul pe termen lung al WordPress să concureze cu constructorii de site-uri web precum Squarespace și Wix. La urma urmei, aceste platforme nu vă preocupă serverele, codul și bazele de date. Acesta este un beneficiu secundar grozav care ajută la avansarea întregului proiect WordPress și este ceva despre care voi vorbi mai multe într-o secțiune ulterioară.

Până în iunie 2023, WordPress Playground a avut o altă difuzare în timpul discursului principal din iunie WordCamp Europe 2023 de Josepha Haden Chomphosy:

În acest moment, WordPress Playground este o aplicație matură care poate începe să își facă drum în dezvoltarea zilnică. Se poate integra în orice număr de fluxuri de lucru, proiecte și situații. Pot acoperi unele dintre acestea mai târziu.

Unde WordPress Playground se încadrează în ecosistemul platformei

În urmă cu câțiva ani, echipa WP Sandbox a creat Poopy.life – un sandbox WordPress care vă permite să faceți instalări noi, în mod gratuit, atunci când aveți nevoie de ele. Acest proiect nu a durat mult, deși puteți vedea cum conceptul continuă în WordPress Playground.

Spre deosebire de predecesorii săi, WordPress Playground poate oferi o modalitate mai bună de a integra platforma în aproape fiecare fațetă a comunității.

De exemplu, imaginați-vă un scenariu în care ați putea prezenta o temă WordPress sau o demonstrație de plugin live pe site-ul web al companiei dvs., cu acces complet la spate și la interfață. În esență, oferiți utilizatorului o demonstrație complet funcțională pe un site real. Iată gândurile lui Adam Zielinski:

… autorii de pluginuri și piețele vor începe probabil să ofere previzualizări interactive bazate pe Playground; editorii de cod online pot adăuga suport WordPress. Companiile de găzduire pot oferi experiențe interactive de onboarding în care începeți prin a personaliza un site WordPress real...

În alte domenii, echipele de asistență pentru clienți ar putea folosi un teren de joacă simulat pentru a ajuta la crearea unei configurații WordPress pe baza specificațiilor exacte ale unui utilizator. Aceasta înseamnă că, dacă un utilizator are o problemă cu WordPress, pluginuri, teme sau alte produse, este posibil să nu fie nevoie să acceseze de la distanță un sistem. În schimb, utilizatorul poate arăta echipei de asistență exact ceea ce face, păstrând în același timp site-ul în siguranță.

Adam vede WordPress Playground ca o „... experiență WordPress mai interactivă...” și o „... mod mai accesibil de a afla despre WordPress.” Aceste tipuri de cazuri de utilizare sunt exact ceea ce vrea să spună. De fapt, puteți vedea deja acest lucru în acțiune, deoarece pagina de pornire WordPress.org include un link Încercați WordPress folosind Playground:

Pentru munca de dezvoltare, WordPress Playground ar putea fi o mană divină. De exemplu, ar putea fi „... instrumentul standard pe care dezvoltatorii îl folosesc pentru a începe cu WordPress, a experimenta site-uri temporare, a configura site-uri de pregătire și a previzualiza solicitările de extragere.”

Este posibil ca WordPress Playground să devină o modalitate de facto de a lansa WordPress, mai ales în scopuri de dezvoltare. Există deja o metodă pentru a lansa WordPress și a-l încărca cu un anumit plugin Gutenberg Pull Request (PR), astfel:

Voi lăsa ultimele cuvinte despre modul în care WordPress Playground se va potrivi în ecosistemul general al platformei:

… scopul final este de a ajuta WordPress să devină sistemul de operare al web…

Totuși, pentru a valorifica potențialul Playground-ului, trebuie să știi cum să-l folosești. Îți voi arăta asta în continuare.

Cum să utilizați WordPress Playground (patru sfaturi)

În esență, WordPress Playground este foarte simplu de utilizat și de lucrat. Cu toate acestea, există o mulțime de trucuri, sfaturi și tehnici avansate pentru a crea instalarea exactă pe care o doriți.

În următoarele câteva secțiuni, vă voi arăta câteva dintre modalitățile de a utiliza WordPress Playground. Cel mai bun loc pentru a începe este cum să efectuați instalări fundamentale în cadrul aplicației.

1. Utilizați atributele API-ului Query pentru a efectua sarcini WordPress și a personaliza platforma
2. Creați planuri JSON pentru a crea instalări WordPress personalizate
3. Controlați terenul de joacă WordPress cu API-ul JavaScript
4. Utilizați WordPress Playground în Node.js

1. Utilizați atributele Query API pentru a efectua sarcini WordPress și pentru a personaliza platforma

Cel mai elementar mod de a implementa WordPress Playground este cu Query API, care este ușor de utilizat. Instalarea dvs. se va afișa într-un iFrame, astfel încât să o puteți încorpora pe aproape orice site cu o linie de cod:

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

De aici, vă puteți personaliza instalarea utilizând opțiuni de configurare dedicate din adresa URL. Există o mână de opțiuni disponibile chiar acum pentru a acoperi majoritatea sarcinilor de bază. De exemplu, puteți alege versiunea PHP, modul de pagină, opțiunea de stocare și multe altele.

Cel mai important aspect este ce pluginuri și teme instalați, deoarece acesta este singurul mod în care puteți face acest lucru în WordPress Playground:

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

Acest fragment va instala Otter Blocks și Neve, va afișa WordPress ca ecran complet și se va deschide pe o pagină de editare post. Le introduceți pe bara de adrese simulată de pe ecran:

💡 Este o modalitate flexibilă de a instala ceea ce aveți nevoie și ar trebui să vă familiarizați cu aceasta dacă cunoașteți PHP.

2. Creați planuri JSON pentru a crea instalări personalizate WordPress

Un alt mod familiar de a personaliza WordPress Playground este prin API-ul JSON Blueprints. Aici, veți folosi o formatare JSON pentru a crea un profil de site. Veți înțelege procesul dacă utilizați Variying Vagrant Vagrants (VVV) pentru dezvoltarea locală a 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" } ] }

Cred că acestea sunt mai flexibile decât utilizarea Query API, deoarece nu aveți nevoie de cod (doar JSON). În plus, API-ul Blueprints preia solicitările HTTP în numele tău. Le puteți folosi și în Node.js (din care mai multe mai târziu), deși este mai simplu să lipiți modelul în bara de adrese simulată.

Deși nu pot acoperi modul de utilizare a API-ului Blueprints în întregime aici, vă încurajez să consultați documentația fantastică. Veți descoperi că puteți automatiza aspecte ale unui proces, cum ar fi conectarea unui utilizator cu un anumit rol.

3. Controlați terenul de joacă WordPress cu API-ul JavaScript

WordPress Playground oferă propriul său API JavaScript care vă permite să rulați o instanță și să o controlați într-un mod similar cu alte metode. Pentru a face acest lucru, veți dori să utilizați npm pentru a obține pachetul @wp-playground/client . De asemenea, veți avea nevoie de un iFrame pentru a afișa instalarea WordPress rezultată.

Iată o suită de cod din documentația WordPress Playground care arată cel mai scurt mod de a utiliza API-ul 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>

Cu acest obiect client , puteți controla ulterior site-ul web utilizând Blueprints și funcții JSON și Playground API Client. Acesta din urmă vă permite să rulați un anumit cod PHP, să faceți solicitări HTTP, să personalizați fișierul PHP.ini, să gestionați fișierul și directoarele și aproape tot ce vă așteptați să realizați.

4. Utilizați WordPress Playground în Node.js

WebAssembly este o tehnologie de bază a WordPress Playground, datorită căreia o puteți utiliza în Node.js. Acest lucru deschide instrumentul care vă va ajuta să dezvoltați pentru WordPress în cadrul editorilor bazați pe VSCode folosind o extensie.

Extensia vă permite să instalați un mediu de dezvoltare locală fără setări care nu are nevoie de dependențe precum Apache, MySQL și altele. Puteți porni un server WordPress cu un singur clic din bara laterală:

Aceasta ar putea fi o modalitate excelentă de a vă menține codul și mediul de dezvoltare împreună. Și, în opinia mea, este un mod eficient și organizat de a vă păstra proiectele.

Viitorul WordPress Playground

Având în vedere că WordPress Playground este un nou – ca să nu mai vorbim de interesant! – proiect, dezvoltarea are loc într-un ritm rapid. Aceasta înseamnă că există o mulțime de dezvoltări și actualizări interesante care au loc tot timpul.

Una dintre cele mai mari este Blocknotes. Această aplicație iOS este în stadiul beta chiar acum și vă permite să creați note pe dispozitivul dvs., care apoi să se sincronizeze cu WordPress pentru a vă ajuta să creați postări și pagini. Speranța este că acesta devine esențial pentru o experiență mobilă WordPress mai bună – ceva ce a cerut comunitatea. După cum explică Adam:

Blocknotes conduce la documentarea și automatizarea unui proces de utilizare a WordPress ca aplicație mobilă – mi-ar plăcea să văd o lume în care să personalizați un site WordPress sau să creați un plugin WordPress, să faceți clic pe un buton și să îl transformați într-un dispozitiv mobil. aplicația .

Cu toate acestea, WordPress Playground poate oferi mai mult. De exemplu, există pluginul Interactive Code Block care vă permite să rulați PHP în browser datorită arhitecturii Playground.

Există chiar și eforturi pentru ca WP CLI să funcționeze cu Playground:

…Am petrecut ceva timp… rulând WP CLI în browser folosind Playground. Gândindu-se la viitor, site-ul WP CLI ar putea afișa un terminal interactiv care vă permite să învățați și să explorați comenzile WP CLI...

În general, viitorul pare să fie greu pe WordPress Playground:

…Autorii de pluginuri și piețele vor începe probabil să ofere previzualizări interactive bazate pe Playground...

Aceasta pare o aplicație modestă, având în vedere domeniul de aplicare al Playground-ului în ansamblu. Aceasta ar putea fi o piatră de hotar pentru WordPress ca platformă, în același mod în care au fost Editorul de blocuri sau inovațiile similare.

Concluzie 🧐

Ecosistemul WordPress a cerut un instrument care să prezinte pluginuri, teme, site-uri și multe altele, fără a fi nevoie de un proces complicat de configurare sau de altă găzduire. Proiectul WordPress Playground oferă tocmai asta. Vă permite să rulați o versiune completă a WordPress în browser, fără a fi nevoie de un server, bază de date, PHP sau multe alte dependențe.

Pe scurt, instrumentul este uimitor și pare să facă parte din viitorul platformei. Și mai bine, echipa de dezvoltare lucrează la soluție în perpetuitate. Au existat multe completări interesante, cum ar fi o opțiune de solicitare de tragere care cred că va face dezvoltarea și suportul WordPress mult mai ușor de acum înainte.

Cum vă va ajuta WordPress Playground ca proiectele dvs. să devină mai bune? Spune-ne gândurile tale în secțiunea de comentarii de mai jos!