Fix: load blocks style separately for classic themes

bin/webpack-configs.js

@@ -733,7 +733,7 @@ const getSiteEditorConfig = ( options = {} ) => {
  * @param {Object} options Build options.
  */
 const getStylingConfig = ( options = {} ) => {
-	let { fileSuffix, isClassicThemeConfig } = options;
+	let { fileSuffix } = options;
 	const { alias, resolvePlugins = [] } = options;
 	fileSuffix = fileSuffix ? `-${ fileSuffix }` : '';
 	const resolve = alias
@@ -775,58 +775,11 @@ const getStylingConfig = ( options = {} ) => {
 						chunks: 'all',
 						priority: 10,
 					},
-					...( isClassicThemeConfig && {
-						vendorsStyle: {
-							test: /[\/\\]node_modules[\/\\].*?style\.s?css$/,
-							name: 'wc-blocks-vendors-style',
-							chunks: 'all',
-							priority: 7,
-						},
-						blocksStyle: {
-							// Capture all stylesheets with name `style` or name that starts with underscore (abstracts).
-							test: /(style|_.*)\.scss$/,
-							name: 'wc-all-blocks-style',
-							chunks: 'all',
-							priority: 5,
-						},
-					} ),
 				},
 			},
 		},
 		module: {
 			rules: [
-				{
-					test: /[\/\\]node_modules[\/\\].*?style\.s?css$/,
-					use: [
-						MiniCssExtractPlugin.loader,
-						{ loader: 'css-loader', options: { importLoaders: 1 } },
-						'postcss-loader',
-						{
-							loader: 'sass-loader',
-							options: {
-								sassOptions: {
-									includePaths: [ 'node_modules' ],
-								},
-								additionalData: ( content ) => {
-									const styleImports = [
-										'colors',
-										'breakpoints',
-										'variables',
-										'mixins',
-										'animations',
-										'z-index',
-									]
-										.map(
-											( imported ) =>
-												`@import "~@wordpress/base-styles/${ imported }";`
-										)
-										.join( ' ' );
-									return styleImports + content;
-								},
-							},
-						},
-					],
-				},
 				{
 					test: /\.(j|t)sx?$/,
 					use: {
@@ -847,7 +800,6 @@ const getStylingConfig = ( options = {} ) => {
 				},
 				{
 					test: /\.s?css$/,
-					exclude: /node_modules/,
 					use: [
 						MiniCssExtractPlugin.loader,
 						'css-loader',

bin/webpack-entries.js

@@ -122,16 +122,6 @@ const getBlockEntries = ( relativePath ) => {
 
 const entries = {
 	styling: {
-		// @wordpress/components styles
-		'custom-select-control-style':
-			'./node_modules/wordpress-components/src/custom-select-control/style.scss',
-		'snackbar-notice-style':
-			'./node_modules/wordpress-components/src/snackbar/style.scss',
-		'combobox-control-style':
-			'./node_modules/wordpress-components/src/combobox-control/style.scss',
-		'form-token-field-style':
-			'./node_modules/wordpress-components/src/form-token-field/style.scss',
-
 		// Packages styles
 		'packages-style': glob.sync( './packages/**/index.js' ),
 

src/AssetsController.php

@@ -46,17 +46,10 @@ protected function init() {
 	 * Register block scripts & styles.
 	 */
 	public function register_assets() {
+		$this->register_style( 'wc-blocks-packages-style', plugins_url( $this->api->get_block_asset_build_path( 'packages-style', 'css' ), __DIR__ ), [], 'all', true );
+		$this->register_style( 'wc-blocks-style', plugins_url( $this->api->get_block_asset_build_path( 'wc-blocks', 'css' ), __DIR__ ), [], 'all', true );
 		$this->register_style( 'wc-blocks-editor-style', plugins_url( $this->api->get_block_asset_build_path( 'wc-blocks-editor-style', 'css' ), __DIR__ ), [ 'wp-edit-blocks' ], 'all', true );
 
-		if ( wc_current_theme_is_fse_theme() ) {
-			$this->register_style( 'wc-blocks-packages-style', plugins_url( $this->api->get_block_asset_build_path( 'packages-style', 'css' ), __DIR__ ), [], 'all', true );
-			$this->register_style( 'wc-blocks-style', plugins_url( $this->api->get_block_asset_build_path( 'wc-blocks', 'css' ), __DIR__ ), [], 'all', true );
-		} else {
-
-			$this->register_style( 'wc-blocks-vendors-style', plugins_url( $this->api->get_block_asset_build_path( 'wc-blocks-vendors-style', 'css' ), __DIR__ ) );
-			$this->register_style( 'wc-all-blocks-style', plugins_url( $this->api->get_block_asset_build_path( 'wc-all-blocks-style', 'css' ), __DIR__ ), [ 'wc-blocks-vendors-style' ], 'all', true );
-		}
-
 		$this->api->register_script( 'wc-blocks-middleware', 'build/wc-blocks-middleware.js', [], false );
 		$this->api->register_script( 'wc-blocks-data-store', 'build/wc-blocks-data.js', [ 'wc-blocks-middleware' ] );
 		$this->api->register_script( 'wc-blocks-vendors', $this->api->get_block_asset_build_path( 'wc-blocks-vendors' ), [], false );

src/BlockTypes/AbstractBlock.php

@@ -210,6 +210,37 @@ protected function register_block_type() {
 		}
 
 		$metadata_path = $this->asset_api->get_block_metadata_path( $this->block_name );
+
+		/**
+		 * We always want to load block styles separately, for every theme.
+		 * When the core assets are loaded separately, other blocks' styles get
+		 * enqueued separately too. Thus we only need to handle the remaining
+		 * case.
+		 */
+		if (
+			! is_admin() &&
+			! wc_current_theme_is_fse_theme() &&
+			$block_settings['style'] &&
+			(
+				! function_exists( 'wp_should_load_separate_core_block_assets' ) ||
+				! wp_should_load_separate_core_block_assets()
+			)
+		) {
+			$style_handles           = $block_settings['style'];
+			$block_settings['style'] = null;
+			add_filter(
+				'render_block',
+				function( $html, $block ) use ( $style_handles ) {
+					if ( $block['blockName'] === $this->get_block_type() ) {
+						array_map( 'wp_enqueue_style', $style_handles );
+					}
+					return $html;
+				},
+				10,
+				2
+			);
+		}
+
 		// Prefer to register with metadata if the path is set in the block's class.
 		if ( ! empty( $metadata_path ) ) {
 			register_block_type_from_metadata(
@@ -303,12 +334,9 @@ protected function get_block_type_script( $key = null ) {
 	 * @return string[]|null
 	 */
 	protected function get_block_type_style() {
-		if ( wc_current_theme_is_fse_theme() ) {
-			$this->asset_api->register_style( 'wc-blocks-style-' . $this->block_name, $this->asset_api->get_block_asset_build_path( $this->block_name, 'css' ), [], 'all', true );
-			return [ 'wc-blocks-style', 'wc-blocks-style-' . $this->block_name ];
-		}
+		$this->asset_api->register_style( 'wc-blocks-style-' . $this->block_name, $this->asset_api->get_block_asset_build_path( $this->block_name, 'css' ), [], 'all', true );
 
-		return [ 'wc-all-blocks-style' ];
+		return [ 'wc-blocks-style', 'wc-blocks-style-' . $this->block_name ];
 	}
 
 	/**

webpack.config.js

@@ -75,12 +75,7 @@ const PaymentsConfig = {
  */
 const StylingConfig = {
 	...sharedConfig,
-	...getStylingConfig( { alias: getAlias(), isClassicThemeConfig: false } ),
-};
-
-const StylingClassicThemeConfig = {
-	...sharedConfig,
-	...getStylingConfig( { alias: getAlias(), isClassicThemeConfig: true } ),
+	...getStylingConfig( { alias: getAlias() } ),
 };
 
 /**
@@ -108,5 +103,4 @@ module.exports = [
 	SiteEditorConfig,
 	StylingConfig,
 	InteractivityConfig,
-	StylingClassicThemeConfig,
 ];