Download all WordPress assets on boot

packages/playground/remote/src/lib/boot-playground-remote.ts

@@ -197,6 +197,13 @@ export async function bootPlaygroundRemote() {
  ) {
  return await workerApi.bindOpfs(options, onProgress);
  },
+
+ /**
+ * Download WordPress assets.
+ */
+ async backfillStaticFilesRemovedFromMinifiedBuild() {
+ await workerApi.backfillStaticFilesRemovedFromMinifiedBuild();
+ },
  };
 
  await workerApi.isConnected();
@@ -232,6 +239,9 @@ export async function bootPlaygroundRemote() {
  throw e;
  }
 
+ wpFrame.addEventListener('load', () => {
+ webApi.backfillStaticFilesRemovedFromMinifiedBuild();
+ });
  /*
  * An assertion to make sure Playground Client is compatible
  * with Remote<PlaygroundClient>

packages/playground/remote/src/lib/playground-client.ts

@@ -52,6 +52,7 @@ export interface WebClientMixin extends ProgressReceiver {
  replayFSJournal: PlaygroundWorkerEndpoint['replayFSJournal'];
  addEventListener: PlaygroundWorkerEndpoint['addEventListener'];
  removeEventListener: PlaygroundWorkerEndpoint['removeEventListener'];
+ backfillStaticFilesRemovedFromMinifiedBuild: PlaygroundWorkerEndpoint['backfillStaticFilesRemovedFromMinifiedBuild'];
 
  /** @inheritDoc @php-wasm/universal!UniversalPHP.onMessage */
  onMessage: PlaygroundWorkerEndpoint['onMessage'];

packages/playground/remote/src/lib/worker-thread.ts

@@ -1,7 +1,7 @@
 import { SyncProgressCallback, exposeAPI } from '@php-wasm/web';
 import { EmscriptenDownloadMonitor } from '@php-wasm/progress';
 import { setURLScope } from '@php-wasm/scopes';
-import { joinPaths } from '@php-wasm/util';
+import { joinPaths, phpVar } from '@php-wasm/util';
 import { wordPressSiteUrl } from './config';
 import {
  getWordPressModuleDetails,
@@ -35,7 +35,7 @@ import transportFetch from './playground-mu-plugin/playground-includes/wp_http_f
 import transportDummy from './playground-mu-plugin/playground-includes/wp_http_dummy.php?raw';
 /** @ts-ignore */
 import playgroundWebMuPlugin from './playground-mu-plugin/0-playground.php?raw';
-import { PHPWorker } from '@php-wasm/universal';
+import { PHP, PHPWorker } from '@php-wasm/universal';
 import {
  bootWordPress,
  getLoadedWordPressVersion,
@@ -186,6 +186,96 @@ export class PlaygroundWorkerEndpoint extends PHPWorker {
  async replayFSJournal(events: FilesystemOperation[]) {
  return replayFSJournal(this.__internal_getPHP()!, events);
  }
+
+ async backfillStaticFilesRemovedFromMinifiedBuild() {
+ await backfillStaticFilesRemovedFromMinifiedBuild(
+ this.__internal_getPHP()!
+ );
+ }
+}
+
+async function backfillStaticFilesRemovedFromMinifiedBuild(php: PHP) {
+ if (!php.requestHandler) {
+ logger.warn('No PHP request handler available');
+ return;
+ }
+
+ try {
+ const remoteAssetListPath = joinPaths(
+ php.requestHandler.documentRoot,
+ 'wordpress-remote-asset-paths'
+ );
+
+ /**
+ * Don't download static assets if they're already downloaded.
+ * WordPress may be loaded either from a production release or a minified bundle.
+ * Minified bundles are shipped without most CSS files, JS files, and other static assets.
+ * Instead, they contain a list of remote assets in wordpress-remote-asset-paths.
+ * We use this list to determine if we should fetch them on demand or if they are already downloaded.
+ * If the list is empty, we assume the assets are already downloaded.
+ * See https://github.com/WordPress/wordpress-playground/pull/1531
+ */
+ if (
+ !php.fileExists(remoteAssetListPath) ||
+ (await php.readFileAsText(remoteAssetListPath)) === ''
+ ) {
+ return;
+ }
+ const wpVersion = await getLoadedWordPressVersion(php.requestHandler);
+ const staticAssetsDirectory =
+ wpVersionToStaticAssetsDirectory(wpVersion);
+ if (!staticAssetsDirectory) {
+ return;
+ }
+ const response = await fetch(
+ joinPaths('/', staticAssetsDirectory, 'wordpress-static.zip')
+ );
+
+ if (!response.ok) {
+ throw new Error(
+ `Failed to fetch WordPress static assets: ${response.status} ${response.statusText}`
+ );
+ }
+
+ const zipPath = '/tmp/wordpress-static-assets.zip';
+ await php.writeFile(
+ zipPath,
+ new Uint8Array(await response.arrayBuffer())
+ );
+ await php.run({
+ code: `<?php
+ $document_root = ${phpVar(php.requestHandler.documentRoot)};
+ $zip_path = ${phpVar(zipPath)};
+ $zip = new ZipArchive;
+ $res = $zip->open($zip_path);
+ if ($res !== TRUE) {
+ return;
+ }
+ for ($i = 0; $i < $zip->numFiles; $i++) {
+ $filename = $zip->getNameIndex($i);
+ $extractPath = str_replace('wordpress-static', $document_root, $filename);
+ // Create directories if they don't exist
+ if (substr($filename, -1) === '/') {
+ if (is_dir($extractPath)) {
+ continue;
+ }
+ mkdir($extractPath, 0777, true);
+ } else {
+ // Extract files
+ copy("zip://$zip_path#".$filename, $extractPath);
+ }
+ }
+ $zip->close();
+ `,
+ });
+ if (await php.fileExists(zipPath)) {
+ await php.unlink(zipPath);
+ }
+ // Clear the remote asset list to indicate that the assets are downloaded.
+ await php.writeFile(remoteAssetListPath, '');
+ } catch (e) {
+ logger.warn('Failed to download WordPress assets', e);
+ }
 }
 
 const apiEndpoint = new PlaygroundWorkerEndpoint(

packages/playground/wordpress-builds/build/Dockerfile

@@ -44,11 +44,17 @@ RUN rm -rf wordpress-static/wp-content/mu-plugins
 # to request a remote asset or delegate the request for a missing file to PHP.
 RUN find wordpress-static -type f | sed 's#^wordpress-static/##'> wordpress-remote-asset-paths
 
-# Make the remote asset listing available remotely so it can be downloaded 
+# Make the remote asset listing available remotely so it can be downloaded
 # directly in cases where an older minified WordPress build without this file
 # has been saved to browser storage.
 RUN cp wordpress-remote-asset-paths wordpress-static/
 
+# ZIP the static files
+RUN zip -r wordpress-static.zip wordpress-static/
+
+# Move ZIP to the public output directory
+RUN cp wordpress-static.zip wordpress-static/
+
 # Move the static files to the final output directory
 RUN mkdir /root/output/$OUT_FILENAME
 RUN mv wordpress-static/* /root/output/$OUT_FILENAME/
@@ -135,6 +141,6 @@ RUN cd wordpress && \
 # Build the final wp.zip file
 RUN mv wordpress /wordpress && \
  cp wordpress-remote-asset-paths /wordpress/ && \
+ cp wordpress-static.zip /wordpress/ && \
  cd /wordpress && \
  zip /root/output/$OUT_FILENAME.zip -r .
-

packages/playground/wordpress/src/boot.ts

@@ -219,7 +219,7 @@ async function isWordPressInstalled(php: PHP) {
  return (
  (
  await php.run({
- code: `<?php 
+ code: `<?php
  require '${php.documentRoot}/wp-load.php';
  echo is_blog_installed() ? '1' : '0';
  `,

packages/playground/wordpress/src/index.ts

@@ -2,11 +2,7 @@ import { PHP, UniversalPHP } from '@php-wasm/universal';
 import { joinPaths, phpVar } from '@php-wasm/util';
 import { unzipFile } from '@wp-playground/common';
 export { bootWordPress } from './boot';
-export {
- getLoadedWordPressVersion,
- isSupportedWordPressVersion,
-} from './version-detect';
-
+export * from './version-detect';
 export * from './rewrite-rules';
 
 /**
@@ -21,7 +17,7 @@ export async function setupPlatformLevelMuPlugins(php: UniversalPHP) {
  await php.writeFile(
  '/internal/shared/preload/env.php',
  `<?php
- 
+
  // Allow adding filters/actions prior to loading WordPress.
  // $function_to_add MUST be a string.
  function playground_add_filter( $tag, $function_to_add, $priority = 10, $accepted_args = 1 ) {
@@ -31,7 +27,7 @@ export async function setupPlatformLevelMuPlugins(php: UniversalPHP) {
  function playground_add_action( $tag, $function_to_add, $priority = 10, $accepted_args = 1 ) {
  playground_add_filter( $tag, $function_to_add, $priority, $accepted_args );
  }
- 
+
  // Load our mu-plugins after customer mu-plugins
  // NOTE: this means our mu-plugins can't use the muplugins_loaded action!
  playground_add_action( 'muplugins_loaded', 'playground_load_mu_plugins', 0 );
@@ -60,7 +56,7 @@ export async function setupPlatformLevelMuPlugins(php: UniversalPHP) {
  }
  return $redirect_url;
  } );
- 
+
  // Needed because gethostbyname( 'wordpress.org' ) returns
  // a private network IP address for some reason.
  add_filter( 'allowed_redirect_hosts', function( $deprecated = '' ) {
@@ -78,7 +74,7 @@ export async function setupPlatformLevelMuPlugins(php: UniversalPHP) {
  if(!file_exists(WP_CONTENT_DIR . '/fonts')) {
  mkdir(WP_CONTENT_DIR . '/fonts');
  }
- 
+
  $log_file = WP_CONTENT_DIR . '/debug.log';
  define('ERROR_LOG_FILE', $log_file);
  ini_set('error_log', $log_file);
@@ -91,7 +87,7 @@ export async function setupPlatformLevelMuPlugins(php: UniversalPHP) {
  await php.writeFile(
  '/internal/shared/preload/error-handler.php',
  `<?php
- (function() { 
+ (function() {
  $playground_consts = [];
  if(file_exists('/internal/shared/consts.json')) {
  $playground_consts = @json_decode(file_get_contents('/internal/shared/consts.json'), true) ?: [];
@@ -207,7 +203,7 @@ export async function preloadSqliteIntegration(
 
 /**
  * Loads the SQLite integration plugin before WordPress is loaded
- * and without creating a drop-in "db.php" file. 
+ * and without creating a drop-in "db.php" file.
  *
  * Technically, it creates a global $wpdb object whose only two
  * purposes are to:

packages/playground/wordpress/src/version-detect.ts

@@ -16,7 +16,6 @@ export async function getLoadedWordPressVersion(
  if (!versionString) {
  throw new Error('Unable to read loaded WordPress version.');
  }
-
  return versionStringToLoadedWordPressVersion(versionString);
 }