-
-
-
-
Preparing docs, please wait
-
+
+
+
Preparing component docs
+
{loadingStep}
}
diff --git a/website/src/pages/playground.js b/website/src/pages/playground.js
index 984cc598e..9ea2cabda 100644
--- a/website/src/pages/playground.js
+++ b/website/src/pages/playground.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl';
import Layout from '@theme/Layout';
@@ -9,16 +9,21 @@ export default function Playground() {
const context = useDocusaurusContext();
const { siteConfig = {} } = context;
+ const [iframeUrl, setIframeUrl] = useState('');
+
+ const [isLoading, setIsLoading] = useState(true);
+ const [loadingStep, setLoadingStep] = useState('Initializing');
+ const [loadingProgress, setLoadingProgress] = useState(null);
+
useEffect(() => {
const init = async () => {
-
const client = await startPlaygroundWeb({
iframe: iframeRef.current,
- remoteUrl: `https://playground.wordpress.net/remote.html`,
+ remoteUrl: 'https://playground.wordpress.net/remote.html',
blueprint: {
preferredVersions: {
php: '8.3',
- wp: '6.4',
+ wp: '6.5',
},
phpExtensionBundles: [
'kitchen-sink'
@@ -36,9 +41,18 @@ export default function Playground() {
]
},
sapiName: 'cli',
+ onClientConnected: (playground) => {
+ window.playground = playground;
+ },
+ });
+
+ client.onNavigation((url) => {
+ setIframeUrl(url);
});
// Fetch theme.
+ setLoadingStep('Loading theme');
+ setLoadingProgress(25);
const themeZipFilename = 'devkittest.zip';
const themeZipReq = await fetch(`/${themeZipFilename}`, {
headers: {
@@ -46,9 +60,15 @@ export default function Playground() {
},
credentials: 'include'
})
+
+ setLoadingProgress(33);
+ setLoadingStep('Unpacking theme');
const themeZipBlob = await themeZipReq.blob();
const themeFile = new File([themeZipBlob], themeZipFilename);
+ setLoadingProgress(50);
+ setLoadingStep('Installing theme');
+
await installTheme(client, {
themeZipFile: themeFile,
options: {
@@ -57,16 +77,22 @@ export default function Playground() {
});
// Install WP-CLI.
+ setLoadingProgress(60);
+ setLoadingStep('Setting up WP-CLI');
+
const wpCliPath = '/wordpress/wp-cli.phar';
const wpCliResponse = await fetch('https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar');
const wpCli = await wpCliResponse.arrayBuffer();
await client.writeFile(wpCliPath, new Uint8Array(wpCli));
// Add the demo post.
+ setLoadingProgress(75);
+ setLoadingStep('Adding demo posts');
+
const welcomePostContent = introPost.split("\n").map((line) => line.trim()).join('');
await client.writeFile(`/wordpress/initial-post.txt`, welcomePostContent);
- const {text: wpCliOutput} = await wpCLI(client, {
+ const { text: wpCliOutput } = await wpCLI(client, {
command: `wp post create /wordpress/initial-post.txt --post_title='Welcome to Eightshift DevKit!' --post_type='page' --post_status='publish'`,
wpCliPath,
});
@@ -74,13 +100,18 @@ export default function Playground() {
// WP playground currently has an issue that pollutes the WP-CLI output, so --porcelain isn't of much help here unfortunately.
const addedPostId = wpCliOutput.substring(wpCliOutput.indexOf('Created post ') + 13, wpCliOutput.lastIndexOf('.')).trim();
+ setLoadingProgress(95);
+ setLoadingStep('Finalizing');
await client.goTo(`/wp-admin/post.php?post=${addedPostId}&action=edit`);
+ setLoadingProgress(100);
// Add demo posts.
await wpCLI(client, {
command: 'wp post generate --count=10 --post_status=publish',
wpCliPath,
});
+
+ setIsLoading(false);
};
init();
@@ -88,6 +119,11 @@ export default function Playground() {
const iframeRef = useRef(null);
+ const handleUrlSubmit = (e) => {
+ e.preventDefault();
+ window?.playground?.goTo(iframeUrl);
+ }
+
return (
-
+ style={{
+ visibility: isLoading ? 'hidden' : 'visible'
+ }}
+ >
+
+
+
+
+