Create wc-all-block-styles chunk with all the styles for classic themes (https://github.com/woocommerce/woocommerce-blocks/pull/10543)

This commit is contained in:
Luigi Teschio 2023-08-11 14:12:34 +02:00 committed by GitHub
parent 566513e3ed
commit 97474e4040
5 changed files with 80 additions and 6 deletions

View File

@ -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',

View File

@ -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' ),

View File

@ -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 );

View File

@ -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' ];
}
/**

View File

@ -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,
];