diff --git a/plugins/woocommerce-blocks/bin/webpack-configs.js b/plugins/woocommerce-blocks/bin/webpack-configs.js index 3dd7a25347d..84de696091a 100644 --- a/plugins/woocommerce-blocks/bin/webpack-configs.js +++ b/plugins/woocommerce-blocks/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', diff --git a/plugins/woocommerce-blocks/bin/webpack-entries.js b/plugins/woocommerce-blocks/bin/webpack-entries.js index 0d92167f615..ac2499cd932 100644 --- a/plugins/woocommerce-blocks/bin/webpack-entries.js +++ b/plugins/woocommerce-blocks/bin/webpack-entries.js @@ -118,6 +118,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' ), diff --git a/plugins/woocommerce-blocks/src/AssetsController.php b/plugins/woocommerce-blocks/src/AssetsController.php index 4b62c9e59cd..ea6e4f12293 100644 --- a/plugins/woocommerce-blocks/src/AssetsController.php +++ b/plugins/woocommerce-blocks/src/AssetsController.php @@ -46,10 +46,17 @@ final class AssetsController { * 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 ); diff --git a/plugins/woocommerce-blocks/src/BlockTypes/AbstractBlock.php b/plugins/woocommerce-blocks/src/BlockTypes/AbstractBlock.php index ba0c35a249b..be212f9ac13 100644 --- a/plugins/woocommerce-blocks/src/BlockTypes/AbstractBlock.php +++ b/plugins/woocommerce-blocks/src/BlockTypes/AbstractBlock.php @@ -303,9 +303,12 @@ abstract class AbstractBlock { * @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' ]; } /** diff --git a/plugins/woocommerce-blocks/webpack.config.js b/plugins/woocommerce-blocks/webpack.config.js index ddb7942d125..8ba5746c343 100644 --- a/plugins/woocommerce-blocks/webpack.config.js +++ b/plugins/woocommerce-blocks/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, ];