Bundled Themes: Introduce stylesheet minification for core block themes.

This introduces a build process to provide minified stylesheets for the Twenty Twenty-Two and Twenty Twenty-Five themes. The built minified CSS is not committed to version control. When `SCRIPT_DEBUG` is disabled, the minified `style.min.css` file will be enqueued to improve performance, including reducing render-blocking resources as well as facilitating inlining. See #63007.

* Stylesheets are minified via the new core `cssmin:themes` Grunt task, which is automatically run as part of `build:css`.
* The same build process is added to the themes (via `package.json` and `package-lock.json`) with `build` and `watch` commands; the `postcss` and `cssnano` development dependencies are used to handle CSS minification.
* The `functions.php` in each theme is updated to enqueue `style.min.css` unless `SCRIPT_DEBUG` is enabled, in which case `style.css` is enqueued. 
* A notice comment is added to `style.css` to warn against editing the stylesheet since the minified version will likely be served instead. 
* A new `contributing.txt` file is added to each theme to document the build process for developers.
* The `test-and-zip-default-themes` GitHub workflow is updated to install npm dependencies and build the minified assets before packaging the themes.
* New PHPUnit tests are added to verify version number consistency across `style.css`, `readme.txt`, `package.json`, and `package-lock.json` files in default themes.

Developed in #10081.

Props b1ink0, westonruter, shyamgadde, jonsurrell, sabernhardt, jorbin, peterwilsoncc, poena.
Fixes #63012.


git-svn-id: https://develop.svn.wordpress.org/trunk@60934 602fd350-edb4-49c9-b593-d223f7449a82

Author: westonruter

.github/dependabot.yml

@@ -129,6 +129,28 @@ updates:
           - "underscore"
 
   # Monitor npm dependencies within default themes.
+  - package-ecosystem: "npm"
+    directory: "/src/wp-content/themes/twentytwentyfive"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 20
+    groups:
+      twentytwentyfive-css:
+        patterns:
+          - "**browserslist*"
+          - "*css*"
+
+  - package-ecosystem: "npm"
+    directory: "/src/wp-content/themes/twentytwentytwo"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 20
+    groups:
+      twentytwentytwo-css:
+        patterns:
+          - "**browserslist*"
+          - "*css*"
+
   - package-ecosystem: "npm"
     directory: "/src/wp-content/themes/twentytwentyone"
     schedule:

.github/workflows/test-and-zip-default-themes.yml

@@ -14,6 +14,8 @@ on:
       - 'src/wp-content/themes/twentynineteen/**'
       - 'src/wp-content/themes/twentytwenty/**'
       - 'src/wp-content/themes/twentytwentyone/**'
+      - 'src/wp-content/themes/twentytwentytwo/**'
+      - 'src/wp-content/themes/twentytwentyfive/**'
       # Changes to this workflow file should always verify success.
       - '.github/workflows/test-and-zip-default-themes.yml'
   pull_request:
@@ -29,6 +31,8 @@ on:
       - 'src/wp-content/themes/twentynineteen/**'
       - 'src/wp-content/themes/twentytwenty/**'
       - 'src/wp-content/themes/twentytwentyone/**'
+      - 'src/wp-content/themes/twentytwentytwo/**'
+      - 'src/wp-content/themes/twentytwentyfive/**'
       # Changes to this workflow file should always verify success.
       - '.github/workflows/test-and-zip-default-themes.yml'
   workflow_dispatch:
@@ -120,6 +124,8 @@ jobs:
       fail-fast: false
       matrix:
         theme: [
+            'twentytwentyfive',
+            'twentytwentytwo',
             'twentytwentyone',
             'twentytwenty',
             'twentynineteen',
@@ -221,11 +227,31 @@ jobs:
           show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
           persist-credentials: false
 
+      - name: Set up Node.js for themes needing minification
+        if: matrix.theme == 'twentytwentytwo' || matrix.theme == 'twentytwentyfive'
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
+        with:
+          node-version-file: '.nvmrc'
+          cache: npm
+          cache-dependency-path: src/wp-content/themes/${{ matrix.theme }}/package-lock.json
+
+      - name: Install npm dependencies
+        if: matrix.theme == 'twentytwentytwo' || matrix.theme == 'twentytwentyfive'
+        run: npm ci
+        working-directory: src/wp-content/themes/${{ matrix.theme }}
+
+      - name: Build theme assets
+        if: matrix.theme == 'twentytwentytwo' || matrix.theme == 'twentytwentyfive'
+        run: npm run build
+        working-directory: src/wp-content/themes/${{ matrix.theme }}
+
       - name: Upload theme ZIP as an artifact
         uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
         with:
           name: ${{ matrix.theme }}
-          path: src/wp-content/themes/${{ matrix.theme }}
+          path: |
+            src/wp-content/themes/${{ matrix.theme }}
+            !src/wp-content/themes/${{ matrix.theme }}/node_modules
           if-no-files-found: error
           include-hidden-files: true
 

.gitignore

@@ -88,6 +88,12 @@ wp-tests-config.php
 /src/wp-content/themes/twentynineteen/node_modules
 /src/wp-content/themes/twentytwentyone/node_modules
 /src/wp-content/themes/twentytwenty/node_modules
+/src/wp-content/themes/twentytwentytwo/node_modules
+/src/wp-content/themes/twentytwentyfive/node_modules
+
+# Minified files in bundled themes
+/src/wp-content/themes/twentytwentytwo/*.min.css
+/src/wp-content/themes/twentytwentyfive/*.min.css
 
 # Operating system specific files
 .DS_Store

Gruntfile.js

@@ -567,6 +567,16 @@ module.exports = function(grunt) {
 				src: [
 					'wp-admin/css/colors/*/*.css'
 				]
+			},
+			themes: {
+				expand: true,
+				cwd: WORKING_DIR,
+				dest: WORKING_DIR,
+				ext: '.min.css',
+				src: [
+					'wp-content/themes/twentytwentytwo/style.css',
+					'wp-content/themes/twentytwentyfive/style.css',
+				]
 			}
 		},
 		rtlcss: {
@@ -1591,6 +1601,7 @@ module.exports = function(grunt) {
 		'rtl',
 		'cssmin:rtl',
 		'cssmin:colors',
+		'cssmin:themes',
 		'usebanner'
 	] );
 

src/wp-content/themes/twentytwentyfive/contributing.txt

@@ -0,0 +1,19 @@
+=== Contributing to Twenty Twenty-Five ===
+
+= Minifying CSS =
+
+Twenty Twenty-Five has a single stylesheet `style.css` which is enqueued in addition to the global styles coming from core. On a normal production site, when `SCRIPT_DEBUG` is disabled, then the minified version `style.min.css` will be enqueued instead. If you make a change to `style.css`, you'll need to re-minify the `style.min.css` using the built-in npm build tool. As always, it is preferable to use the Site Editor to supply Additional CSS instead of directly editing the theme stylesheet.
+
+Installation instructions
+
+1. Using a command line interface, go to the “twentytwentyfive” directory `cd /my-computer/local-wordpress-install/src/wp-content/themes/twentytwentyfive`.
+
+2. Type `npm install` into the command line, and press the [return] key, to install all Node.js dependencies.
+
+3. The dependencies may take a few minutes to download but once it completes, you’re done.
+
+Usage instructions
+
+1. After making a change to the `style.css` file, run `npm run build` from within the theme directory to regenerate `style.min.css` with your new changes.
+
+2. You can also “watch” the theme directory for CSS changes and re-minify the CSS anytime a change occurs by running: `npm run watch`.

src/wp-content/themes/twentytwentyfive/functions.php

@@ -39,19 +39,22 @@ function twentytwentyfive_editor_style() {
 endif;
 add_action( 'after_setup_theme', 'twentytwentyfive_editor_style' );
 
-// Enqueues style.css on the front.
+// Enqueues the theme stylesheet on the front.
 if ( ! function_exists( 'twentytwentyfive_enqueue_styles' ) ) :
 	/**
-	 * Enqueues style.css on the front.
+	 * Enqueues the theme stylesheet on the front.
 	 *
 	 * @since Twenty Twenty-Five 1.0
 	 *
 	 * @return void
 	 */
 	function twentytwentyfive_enqueue_styles() {
+		$suffix = SCRIPT_DEBUG ? '' : '.min';
+		$src    = 'style' . $suffix . '.css';
+
 		wp_enqueue_style(
 			'twentytwentyfive-style',
-			get_parent_theme_file_uri( 'style.css' ),
+			get_parent_theme_file_uri( $src ),
 			array(),
 			wp_get_theme()->get( 'Version' )
 		);