<! DOCTYPE html >
< iframe id =" wp-playground " style =" width: 1200px; height: 800px " > </ iframe >
< script type =" module " >
import { startPlaygroundWeb } from ' https://playground.wordpress.net/client/index.js ' ;
const client = await startPlaygroundWeb ( {
iframe : document . getElementById ( 'wp-playground' ) ,
remoteUrl : ` https://playground.wordpress.net/remote.html ` ,
blueprint : {
landingPage : '/wp-admin/' ,
preferredVersions : {
php : '8.0' ,
wp : 'latest' ,
} ,
steps : [
{
step : 'login' ,
username : 'admin' ,
password : 'password' ,
} ,
{
step : 'installPlugin' ,
pluginZipFile : {
resource : 'wordpress.org/plugins' ,
slug : 'friends' ,
} ,
} ,
] ,
} ,
} ) ;
const response = await client . run ( {
// wp-load.php is only required if you want to interact with WordPress.
code : '<? php require_once "/wordpress/wp-load.php"; $posts = get_posts(); echo "Post Title: " . $posts[0]->post_title;' ,
} ) ;
console . log ( response . text ) ;
</ script >
-
Interactive Code Block for Gutenberg -
WordPress Playground for Visual Studio Code -
wp-now CLI local development environment.
git clone -b trunk --single-branch --depth 1 git@github.com :WordPress/wordpress-playground.git
git clone -b trunk --single-branch --depth 1 git@github.com :WordPress/wordpress-playground.git cd wordpress-playground npm install npm run dev
# Build and run PHP.wasm CLI npx nx start php-wasm-cli # Build latest WordPress releases npx nx bundle-wordpress:all playground-wordpress-builds # Recompile PHP 5.6 - 8.2 releases to .wasm for web npx nx recompile-php:all php-wasm-web # Recompile PHP 5.6 - 8.2 releases to .wasm for node npx nx recompile-php:all php-wasm-node # Builds the documentation site npx nx build docs-site # Builds the Playground Client npm package npx nx build playground-client # Bonus: Run PHP.wasm in your local CLI: npx @php-wasm/cli -v PHP=7.4 npx @php-wasm/cli -v npx @php-wasm/cli phpcbf
PLAYGROUND_URL= http://localhost:9999 npx nx run playground-website:build:wasm-wordpress-net
php -S localhost:9999 -t dist/packages/playground/wasm-wordpress-net
docker run --rm -p 9999:80 -v $( pwd ) /dist/packages/playground/wasm-wordpress-net:/usr/share/nginx/html:ro nginx:alpine
-
Open the browser and go to http://localhost:9999 . -
Open the browser's developer tools. -
Go to the "Network" tab. -
Select "Offline" in the throttling dropdown menu. -
Refresh the page.
-
Code contributions – see the developer section . -
Documentation – see the documentation section . -
Triage – see the triage section . -
Reporting bugs – open an issue in the repository. -
Ideas, designs or anything else – open a GitHub discussion and let's talk!