Split theme.css styles loading (#31239)

* generate separate stylesheets * WIP * Update after #31274
WordPress · Jun 11, 2021 · b933da3 · b933da3
1 parent 05ed04a
commit b933da3
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 1 deletion.
diff --git a/bin/packages/build.js b/bin/packages/build.js
@@ -122,7 +122,7 @@ function createStyleEntryTransform() {
 			// block-library package also need rebuilding.
 			if (
 				packageName === 'block-library' &&
-				[ 'style.scss', 'editor.scss' ].includes(
+				[ 'style.scss', 'editor.scss', 'theme.scss' ].includes(
 					path.basename( file )
 				)
 			) {
@@ -213,6 +213,7 @@ if ( files.length ) {
 			`${ PACKAGES_DIR }/*/src/*.scss`,
 			`${ PACKAGES_DIR }/block-library/src/**/*.js`,
 			`${ PACKAGES_DIR }/block-library/src/*/style.scss`,
+			`${ PACKAGES_DIR }/block-library/src/*/theme.scss`,
 			`${ PACKAGES_DIR }/block-library/src/*/editor.scss`,
 			`${ PACKAGES_DIR }/block-library/src/*.scss`,
 		],

diff --git a/lib/blocks.php b/lib/blocks.php
@@ -190,6 +190,50 @@ function gutenberg_register_core_block_styles( $block_name ) {
 		wp_register_style( "wp-block-{$block_name}", false );
 	}
 
+	// If the current theme supports wp-block-styles, dequeue the full stylesheet
+	// and instead attach each block's theme-styles to their block styles stylesheet.
+	if ( current_theme_supports( 'wp-block-styles' ) ) {
+
+		// Dequeue the full stylesheet.
+		// Make sure this only runs once, it doesn't need to run for every block.
+		static $stylesheet_removed;
+		if ( ! $stylesheet_removed ) {
+			add_action(
+				'wp_enqueue_scripts',
+				function() {
+					wp_dequeue_style( 'wp-block-library-theme' );
+				}
+			);
+			$stylesheet_removed = true;
+		}
+
+		// Get the path to the block's stylesheet.
+		$theme_style_path = is_rtl()
+			? "build/block-library/blocks/$block_name/theme-rtl.css"
+			: "build/block-library/blocks/$block_name/theme.css";
+
+		// If the file exists, enqueue it.
+		if ( file_exists( gutenberg_dir_path() . $theme_style_path ) ) {
+
+			if ( file_exists( gutenberg_dir_path() . $style_path ) ) {
+				// If there is a main stylesheet for this block, append the theme styles to main styles.
+				wp_add_inline_style(
+					"wp-block-{$block_name}",
+					file_get_contents( gutenberg_dir_path() . $theme_style_path )
+				);
+			} else {
+				// If there is no main stylesheet for this block, register theme style.
+				wp_register_style(
+					"wp-block-{$block_name}",
+					gutenberg_url( $theme_style_path ),
+					array(),
+					filemtime( gutenberg_dir_path() . $theme_style_path )
+				);
+				wp_style_add_data( "wp-block-{$block_name}", 'path', gutenberg_dir_path() . $theme_style_path );
+			}
+		}
+	}
+
 	if ( file_exists( gutenberg_dir_path() . $editor_style_path ) ) {
 		wp_deregister_style( "wp-block-{$block_name}-editor" );
 		wp_register_style(

diff --git a/webpack.config.js b/webpack.config.js
@@ -243,6 +243,22 @@ module.exports = {
 				to: 'build/block-library/blocks/[1]/editor-rtl.css',
 				transform: stylesTransform,
 			},
+			{
+				from: './packages/block-library/build-style/*/theme.css',
+				test: new RegExp(
+					`([\\w-]+)${ escapeRegExp( sep ) }theme\\.css$`
+				),
+				to: 'build/block-library/blocks/[1]/theme.css',
+				transform: stylesTransform,
+			},
+			{
+				from: './packages/block-library/build-style/*/theme-rtl.css',
+				test: new RegExp(
+					`([\\w-]+)${ escapeRegExp( sep ) }theme-rtl\\.css$`
+				),
+				to: 'build/block-library/blocks/[1]/theme-rtl.css',
+				transform: stylesTransform,
+			},
 		] ),
 		new CopyWebpackPlugin(
 			Object.entries( {