Changeset 60934

Timestamp:

10/15/2025 05:38:25 AM (6 weeks ago)

Author:

westonruter

Message:

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 ​https://github.com/WordPress/wordpress-develop/pull/10081.

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

Location:

trunk

Files:

• .github/dependabot.yml (modified) (1 diff)
• .github/workflows/test-and-zip-default-themes.yml (modified) (4 diffs)
• .gitignore (modified) (1 diff)
• Gruntfile.js (modified) (2 diffs)
• src/wp-content/themes/twentytwentyfive/contributing.txt (added)
• src/wp-content/themes/twentytwentyfive/functions.php (modified) (2 diffs)
• src/wp-content/themes/twentytwentyfive/package-lock.json (added)
• src/wp-content/themes/twentytwentyfive/package.json (added)
• src/wp-content/themes/twentytwentyfive/style.css (modified) (1 diff)
• src/wp-content/themes/twentytwentytwo/contributing.txt (added)
• src/wp-content/themes/twentytwentytwo/functions.php (modified) (1 diff)
• src/wp-content/themes/twentytwentytwo/package-lock.json (added)
• src/wp-content/themes/twentytwentytwo/package.json (added)
• src/wp-content/themes/twentytwentytwo/style.css (modified) (1 diff)
• tests/phpunit/tests/theme.php (modified) (2 diffs)

trunk/.github/dependabot.yml

@@ -131 +131 @@
   # 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:

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

@@ -15 +15 @@
       - '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'
@@ -30 +32 @@
       - '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'
@@ -121 +125 @@
       matrix:
         theme: [
+            'twentytwentyfive',
+            'twentytwentytwo',
             'twentytwentyone',
             'twentytwenty',
@@ -222 +228 @@
           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

trunk/.gitignore

@@ -89 +89 @@
 /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

trunk/Gruntfile.js

@@ -567 +567 @@
                 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',
                 ]
             }
@@ -1592 +1602 @@
         'cssmin:rtl',
         'cssmin:colors',
+        'cssmin:themes',
         'usebanner'
     ] );

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

@@ -40 +40 @@
 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
@@ -50 +50 @@
      */
     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' )

trunk/src/wp-content/themes/twentytwentyfive/style.css

@@ -14 +14 @@
 Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
 */
+
+/*
+ * IMPORTANT: This file is only served on the frontend when `SCRIPT_DEBUG` is enabled;
+ * in most instances, the `style.min.css` file will be served. It is not recommended that you
+ * use the Theme File Editor to modify this stylesheet. Instead, add the necessary style
+ * overrides via "Additional CSS" in the Site Editor.
+ */
 
 /*

trunk/src/wp-content/themes/twentytwentytwo/functions.php

@@ -46 +46 @@
 
         $version_string = is_string( $theme_version ) ? $theme_version : false;
+
+        $suffix = SCRIPT_DEBUG ? '' : '.min';
+        $src    = 'style' . $suffix . '.css';
+
         wp_register_style(
             'twentytwentytwo-style',
-            get_template_directory_uri() . '/style.css',
+            get_parent_theme_file_uri( $src ),
             array(),
             $version_string

trunk/src/wp-content/themes/twentytwentytwo/style.css

@@ -17 +17 @@
 Twenty Twenty-Two is distributed under the terms of the GNU GPL.
 */
+
+/*
+ * IMPORTANT: This file is only served on the frontend when `SCRIPT_DEBUG` is enabled;
+ * in most instances, the `style.min.css` file will be served. It is not recommended that you
+ * use the Theme File Editor to modify this stylesheet. Instead, add the necessary style
+ * overrides via "Additional CSS" in the Site Editor.
+ */
 
 /*

trunk/tests/phpunit/tests/theme.php

@@ -315 +315 @@
      * @ticket 48566
      *
-     * @dataProvider data_year_in_readme
+     * @dataProvider data_provider_default_themes
      */
     public function test_year_in_readme( $theme ) {
@@ -337 +337 @@
     }
 
-    public function data_year_in_readme() {
-        return array_map(
-            static function ( $theme ) {
-                return array( $theme );
-            },
-            $this->default_themes
-        );
+    /**
+     * Data provider.
+     *
+     * @return array<string, array{ theme: string }>
+     */
+    public function data_provider_default_themes(): array {
+        $data = array();
+        foreach ( $this->default_themes as $default_theme ) {
+            $data[ $default_theme ] = array( 'theme' => $default_theme );
+        }
+        return $data;
+    }
+
+    /**
+     * Tests that the version number in style.css, readme.txt, and package.json all match.
+     *
+     * @ticket 63012
+     *
+     * @dataProvider data_provider_default_themes
+     */
+    public function test_version_consistency_in_package_json( string $theme ) {
+        $wp_theme = wp_get_theme( $theme );
+
+        $path_to_style_css = $wp_theme->get_theme_root() . '/' . $wp_theme->get_stylesheet() . '/style.css';
+        $this->assertFileExists( $path_to_style_css );
+        $this->assertSame( 1, preg_match( '/^Version: (\d+\.\d+(?:\.\d+)?)$/m', file_get_contents( $path_to_style_css ), $matches ), 'Expected Version in style.css' );
+        $style_version = $matches[1];
+
+        // Version in style.css does not use patch versions, so supply one of 0.
+        $version_with_patch = $matches[1];
+        if ( 1 === substr_count( $version_with_patch, '.' ) ) {
+            $version_with_patch .= '.0';
+        }
+
+        $package_files         = array( 'package.json', 'package-lock.json' );
+        $present_package_files = array();
+        foreach ( $package_files as $package_file ) {
+            $path_to_package_json = $wp_theme->get_theme_root() . '/' . $wp_theme->get_stylesheet() . '/' . $package_file;
+            if ( file_exists( $path_to_package_json ) ) {
+                $present_package_files[] = $package_file;
+
+                $data = json_decode( file_get_contents( $path_to_package_json ), true );
+                $this->assertIsArray( $data, "Expected $package_file to be an array." );
+                $this->assertArrayHasKey( 'name', $data, "Expected name key in $package_file." );
+                $this->assertSame( $theme, $data['name'], "Expected name field to be the theme slug in $package_file." );
+                $this->assertArrayHasKey( 'version', $data, "Expected version key in $package_file." );
+                $this->assertSame( $version_with_patch, $data['version'], "Expected version from style.css to match version in $package_file." );
+
+                if ( 'package-lock.json' === $package_file && isset( $data['packages'][''] ) ) {
+                    $this->assertArrayHasKey( 'version', $data['packages'][''], "Expected version key in packages[''] in package-lock.json." );
+                    $this->assertSame( $version_with_patch, $data['packages']['']['version'], "Expected version from style.css to match packages[''].version in package-lock.json." );
+                }
+            }
+        }
+        if ( count( $present_package_files ) > 0 ) {
+            $this->assertCount( 2, $present_package_files, 'Expected package-lock.json to be present when package.json is present, and vice versa.' );
+        }
+
+        // TODO: The themes twentyfifteen, twentysixteen, and twentyseventeen lack a Stable Tag in the readme.txt.
+        $path_to_readme_txt = $wp_theme->get_theme_root() . '/' . $wp_theme->get_stylesheet() . '/readme.txt';
+        $this->assertFileExists( $path_to_readme_txt );
+        if ( 1 === preg_match( '/^Stable [Tt]ag: (\d+\.\d+(?:\.\d+)?)$/m', file_get_contents( $path_to_readme_txt ), $matches ) ) {
+            $readme_version = $matches[1];
+            $this->assertSame( $style_version, $readme_version, 'Expected version in style.css and stable tag in readme.txt to match.' );
+        }
     }