WordPress: Keep dashicons, icons, and Akismet CSS in the bundle

playground.wordpress.net ships an optimized WordPress build where most
static assets are removed to keep the initial download snappy. However,
some backend code actually depends on those assets being present as seen
in #729 and #770. This PR allowlists additional files:

* wp-includes/images/media
* wp-includes/fonts/dashicons.svg
* wp-content/plugins/akismet/_inc

To test, run Playground locally, go to this URL, and confirm it displays
the list of files as shown below.

http://localhost:5400/website-server/#%7B%22landingPage%22:%22/test.php%22,%22steps%22:[%7B%22step%22:%22writeFile%22,%22path%22:%22/wordpress/test.php%22,%22data%22:%22%3Cpre%3E%3C?php%20var_dump(glob(%27/wordpress/wp-includes/fonts/*%27));%20var_dump(glob(%27/wordpress/wp-includes/images/media/*%27));%20var_dump(glob(%27/wordpress/wp-content/plugins/akismet/_inc/*%27));%22}]}

```
array(3) {
  [0]=>
  string(60) "/wordpress/wp-includes/fonts/class-wp-font-face-resolver.php"
  [1]=>
  string(51) "/wordpress/wp-includes/fonts/class-wp-font-face.php"
  [2]=>
  string(42) "/wordpress/wp-includes/fonts/dashicons.svg"
}
array(9) {
  [0]=>
  string(47) "/wordpress/wp-includes/images/media/archive.png"
  [1]=>
  string(45) "/wordpress/wp-includes/images/media/audio.png"
  [2]=>
  string(44) "/wordpress/wp-includes/images/media/code.png"
  [3]=>
  string(47) "/wordpress/wp-includes/images/media/default.png"
  [4]=>
  string(48) "/wordpress/wp-includes/images/media/document.png"
  [5]=>
  string(51) "/wordpress/wp-includes/images/media/interactive.png"
  [6]=>
  string(51) "/wordpress/wp-includes/images/media/spreadsheet.png"
  [7]=>
  string(44) "/wordpress/wp-includes/images/media/text.png"
  [8]=>
  string(45) "/wordpress/wp-includes/images/media/video.png"
}
array(3) {
  [0]=>
  string(59) "/wordpress/wp-content/plugins/akismet/_inc/akismet-admin.js"
  [1]=>
  string(62) "/wordpress/wp-content/plugins/akismet/_inc/akismet-frontend.js"
  [2]=>
  string(53) "/wordpress/wp-content/plugins/akismet/_inc/akismet.js"
}
```

Author: adamziel

packages/playground/compile-wordpress/Dockerfile

@@ -65,6 +65,11 @@ RUN cd wordpress && \
     \) \
     # Preserve the wp-admin SVG files that are read  by PHP
     -not -path '*/wp-admin/images/*.svg' \
+    # Some plugins use the dashicons font. See #729.
+    -not -path '*/wp-includes/fonts/dashicons.svg' \
+    # WordPress functions like wp_mime_type_icon() use
+    # the icons shipped in images/media. See #770.
+    -not -path '*/wp-includes/images/media/*' \
     -delete
 
 # Keep only the CSS files that are read by PHP
@@ -81,11 +86,6 @@ RUN cd wordpress && \
     # This file is patched in JavaScript and needs to
     # be served from VFS. See #703
     -not -path '*/wp-includes/js/dist/block-editor*.js' \
-    # Some plugins use the dashicons font. See #729.
-    -not -path '*/wp-includes/fonts/dashicons.svg' \
-    # WordPress functions like wp_mime_type_icon() use
-    # the icons shipped in images/media. See #770.
-    -not -path '*/wp-includes/images/media/*' \
     # Akismet is shipped with WordPress and it
     # requires the included files to be present
     -not -path '*/wp-content/plugins/akismet/*' \

packages/playground/remote/public/wp-nightly/wp-admin/css/about-rtl.css

@@ -22,15 +22,15 @@
 
 .about__container {
 	/* Section backgrounds */
-	--background: #EAE9E7;
+	--background: #151515;
 	--subtle-background: #EAE9E7;
 
 	/* Main text color */
 	--text: #1e1e1e;
 	--text-light: #fff;
 
 	/* Accent colors: used in header, on special classes. */
-	--accent-1: #C94C26; /* Link color */
+	--accent-1: #D8613C; /* Link color */
 	--accent-2: #CFCABE; /* Accent background */
 	--accent-3: #f0f0f1; /* hr background */
 	--accent-4: #B1C5A4; /* Light green */
@@ -539,30 +539,28 @@
 	justify-content: end;
 	box-sizing: border-box;
 	padding: var(--gap) 0;
-	height: clamp(12.5rem, -1.25rem + 36.67vw, 26.25rem);
+	min-height: 420px;
 	color: var(--text-light);
-	background-image: url('../images/about-header-about.svg?ver=6.4'), url('../images/about-header-background.svg?ver=6.4');
-	background-size: auto 70%, cover;
+	background: var(--background) url('../images/about-header-about.svg?ver=6.4') no-repeat;
+	background-size: cover;
+	background-position: center;
 	border-radius: 5px;
-	background-repeat: no-repeat;
-	background-position: left 7% center, top right;
-	background-color: var(--background);
 }
 
 .credits-php .about__header {
-	background-image: url('../images/about-header-credits.svg?ver=6.4'), url('../images/about-header-background.svg?ver=6.4');
+	background-image: url('../images/about-header-credits.svg?ver=6.4');
 }
 
 .freedoms-php .about__header {
-	background-image: url('../images/about-header-freedoms.svg?ver=6.4'), url('../images/about-header-background.svg?ver=6.4');
+	background-image: url('../images/about-header-freedoms.svg?ver=6.4');
 }
 
 .privacy-php .about__header {
-	background-image: url('../images/about-header-privacy.svg?ver=6.4'), url('../images/about-header-background.svg?ver=6.4');
+	background-image: url('../images/about-header-privacy.svg?ver=6.4');
 }
 
 .contribute-php .about__header {
-	background-image: url('../images/about-header-contribute.svg?ver=6.4'), url('../images/about-header-background.svg?ver=6.4');
+	background-image: url('../images/about-header-contribute.svg?ver=6.4');
 }
 
 .about__header-image {
@@ -571,9 +569,8 @@
 
 .about__header-title {
 	box-sizing: border-box;
-	margin: 0 calc(var(--gap) + 2rem);
+	margin: 0 calc(var(--gap) + 3rem);
 	padding: 0;
-	max-width: 55%;
 }
 
 .about__header-title h1 {
@@ -585,7 +582,6 @@
 	font-weight: 600;
 }
 
-.about-php .about__header-title h1,
 .credits-php .about__header-title h1,
 .freedoms-php .about__header-title h1,
 .privacy-php .about__header-title h1,
@@ -650,8 +646,11 @@
 }
 
 @media screen and (max-width: 960px) {
+	.about__header-title h1 {
+		/* Fluid font size scales on browser size 600px - 960px. */
+		font-size: clamp(3rem, 13.33vw - 2rem, 6rem);
+	}
 
-	.about-php .about__header-title h1,
 	.credits-php .about__header-title h1,
 	.freedoms-php .about__header-title h1,
 	.privacy-php .about__header-title h1,

packages/playground/remote/public/wp-nightly/wp-admin/css/about-rtl.min.css

@@ -21,15 +21,15 @@
 
 .about__container {
 	/* Section backgrounds */
-	--background: #EAE9E7;
+	--background: #151515;
 	--subtle-background: #EAE9E7;
 
 	/* Main text color */
 	--text: #1e1e1e;
 	--text-light: #fff;
 
 	/* Accent colors: used in header, on special classes. */
-	--accent-1: #C94C26; /* Link color */
+	--accent-1: #D8613C; /* Link color */
 	--accent-2: #CFCABE; /* Accent background */
 	--accent-3: #f0f0f1; /* hr background */
 	--accent-4: #B1C5A4; /* Light green */
@@ -538,30 +538,28 @@
 	justify-content: end;
 	box-sizing: border-box;
 	padding: var(--gap) 0;
-	height: clamp(12.5rem, -1.25rem + 36.67vw, 26.25rem);
+	min-height: 420px;
 	color: var(--text-light);
-	background-image: url('../images/about-header-about.svg?ver=6.4'), url('../images/about-header-background.svg?ver=6.4');
-	background-size: auto 70%, cover;
+	background: var(--background) url('../images/about-header-about.svg?ver=6.4') no-repeat;
+	background-size: cover;
+	background-position: center;
 	border-radius: 5px;
-	background-repeat: no-repeat;
-	background-position: right 7% center, top left;
-	background-color: var(--background);
 }
 
 .credits-php .about__header {
-	background-image: url('../images/about-header-credits.svg?ver=6.4'), url('../images/about-header-background.svg?ver=6.4');
+	background-image: url('../images/about-header-credits.svg?ver=6.4');
 }
 
 .freedoms-php .about__header {
-	background-image: url('../images/about-header-freedoms.svg?ver=6.4'), url('../images/about-header-background.svg?ver=6.4');
+	background-image: url('../images/about-header-freedoms.svg?ver=6.4');
 }
 
 .privacy-php .about__header {
-	background-image: url('../images/about-header-privacy.svg?ver=6.4'), url('../images/about-header-background.svg?ver=6.4');
+	background-image: url('../images/about-header-privacy.svg?ver=6.4');
 }
 
 .contribute-php .about__header {
-	background-image: url('../images/about-header-contribute.svg?ver=6.4'), url('../images/about-header-background.svg?ver=6.4');
+	background-image: url('../images/about-header-contribute.svg?ver=6.4');
 }
 
 .about__header-image {
@@ -570,9 +568,8 @@
 
 .about__header-title {
 	box-sizing: border-box;
-	margin: 0 calc(var(--gap) + 2rem);
+	margin: 0 calc(var(--gap) + 3rem);
 	padding: 0;
-	max-width: 55%;
 }
 
 .about__header-title h1 {
@@ -584,7 +581,6 @@
 	font-weight: 600;
 }
 
-.about-php .about__header-title h1,
 .credits-php .about__header-title h1,
 .freedoms-php .about__header-title h1,
 .privacy-php .about__header-title h1,
@@ -649,8 +645,11 @@
 }
 
 @media screen and (max-width: 960px) {
+	.about__header-title h1 {
+		/* Fluid font size scales on browser size 600px - 960px. */
+		font-size: clamp(3rem, 13.33vw - 2rem, 6rem);
+	}
 
-	.about-php .about__header-title h1,
 	.credits-php .about__header-title h1,
 	.freedoms-php .about__header-title h1,
 	.privacy-php .about__header-title h1,

packages/playground/remote/public/wp-nightly/wp-admin/css/about.css

@@ -1148,6 +1148,17 @@ ul.cat-checklist {
 	overflow-y: scroll;
 }
 
+ul.cat-checklist input[name="post_category[]"]:indeterminate::before {
+	content: '';
+	border-top: 2px solid grey;
+	width: 65%;
+	height: 2px;
+	position: absolute;
+	top: calc( 50% + 1px );
+	right: 50%;
+	transform: translate( 50%, -50% );
+}
+
 #bulk-titles .ntdelbutton,
 #bulk-titles .ntdeltitle,
 .inline-edit-row fieldset ul.cat-checklist label {

packages/playground/remote/public/wp-nightly/wp-admin/css/about.min.css

@@ -1147,6 +1147,17 @@ ul.cat-checklist {
 	overflow-y: scroll;
 }
 
+ul.cat-checklist input[name="post_category[]"]:indeterminate::before {
+	content: '';
+	border-top: 2px solid grey;
+	width: 65%;
+	height: 2px;
+	position: absolute;
+	top: calc( 50% + 1px );
+	left: 50%;
+	transform: translate( -50%, -50% );
+}
+
 #bulk-titles .ntdelbutton,
 #bulk-titles .ntdeltitle,
 .inline-edit-row fieldset ul.cat-checklist label {