Skip to content

Commit

Permalink
WordPress: Keep dashicons, icons, and Akismet CSS in the bundle
Browse files Browse the repository at this point in the history
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"
}
```
  • Loading branch information
adamziel committed Nov 29, 2023
1 parent 8472660 commit c06935f
Show file tree
Hide file tree
Showing 141 changed files with 16,145 additions and 11,482 deletions.
10 changes: 5 additions & 5 deletions packages/playground/compile-wordpress/Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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/*' \
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down Expand Up @@ -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 {
Expand All @@ -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 {
Expand All @@ -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,
Expand Down Expand Up @@ -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,
Expand Down

Large diffs are not rendered by default.

31 changes: 15 additions & 16 deletions packages/playground/remote/public/wp-nightly/wp-admin/css/about.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down Expand Up @@ -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 {
Expand All @@ -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 {
Expand All @@ -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,
Expand Down Expand Up @@ -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,
Expand Down

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down

Large diffs are not rendered by default.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit c06935f

Please sign in to comment.