Create wc-all-block-styles chunk with all the styles for classic themes (#10543)

Author: gigitux

bin/webpack-configs.js

@@ -733,7 +733,7 @@ const getSiteEditorConfig = ( options = {} ) => {
  * @param {Object} options Build options.
  */
 const getStylingConfig = ( options = {} ) => {
-	let { fileSuffix } = options;
+	let { fileSuffix, isClassicThemeConfig } = options;
 	const { alias, resolvePlugins = [] } = options;
 	fileSuffix = fileSuffix ? `-${ fileSuffix }` : '';
 	const resolve = alias
@@ -775,11 +775,58 @@ 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: {
@@ -800,6 +847,7 @@ const getStylingConfig = ( options = {} ) => {
 				},
 				{
 					test: /\.s?css$/,
+					exclude: /node_modules/,
 					use: [
 						MiniCssExtractPlugin.loader,
 						'css-loader',

bin/webpack-entries.js

@@ -114,6 +114,16 @@ 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,10 +46,17 @@ 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

@@ -303,9 +303,12 @@ protected function get_block_type_script( $key = null ) {
 	 * @return string[]|null
 	 */
 	protected function get_block_type_style() {
-		$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 );
+		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 ];
+		}
 
-		return [ 'wc-blocks-style', 'wc-blocks-style-' . $this->block_name ];
+		return [ 'wc-all-blocks-style' ];
 	}
 
 	/**

webpack.config.js

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