diff --git a/bin/webpack-configs.js b/bin/webpack-configs.js index 84de696091a..3dd7a25347d 100644 --- a/bin/webpack-configs.js +++ b/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', diff --git a/bin/webpack-entries.js b/bin/webpack-entries.js index f56a3d28769..5dbcf14ba75 100644 --- a/bin/webpack-entries.js +++ b/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' ), diff --git a/src/AssetsController.php b/src/AssetsController.php index ea6e4f12293..4b62c9e59cd 100644 --- a/src/AssetsController.php +++ b/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 ); diff --git a/src/BlockTypes/AbstractBlock.php b/src/BlockTypes/AbstractBlock.php index 6e1b2bb0c1d..c4ef90ddfb2 100644 --- a/src/BlockTypes/AbstractBlock.php +++ b/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 ]; } /** diff --git a/webpack.config.js b/webpack.config.js index 8ba5746c343..ddb7942d125 100644 --- a/webpack.config.js +++ b/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, ];