diff --git a/bin/packages/build.js b/bin/packages/build.js index bd6fd25ca25b1..eff2fcd732020 100755 --- a/bin/packages/build.js +++ b/bin/packages/build.js @@ -122,7 +122,7 @@ function createStyleEntryTransform() { // block-library package also need rebuilding. if ( packageName === 'block-library' && - [ 'style.scss', 'editor.scss' ].includes( + [ 'style.scss', 'editor.scss', 'theme.scss' ].includes( path.basename( file ) ) ) { @@ -213,6 +213,7 @@ if ( files.length ) { `${ PACKAGES_DIR }/*/src/*.scss`, `${ PACKAGES_DIR }/block-library/src/**/*.js`, `${ PACKAGES_DIR }/block-library/src/*/style.scss`, + `${ PACKAGES_DIR }/block-library/src/*/theme.scss`, `${ PACKAGES_DIR }/block-library/src/*/editor.scss`, `${ PACKAGES_DIR }/block-library/src/*.scss`, ], diff --git a/lib/blocks.php b/lib/blocks.php index e04842e8a9445..608a1c4e6aadd 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -203,6 +203,50 @@ function gutenberg_register_core_block_styles( $block_name ) { wp_register_style( "wp-block-{$block_name}", false ); } + // If the current theme supports wp-block-styles, dequeue the full stylesheet + // and instead attach each block's theme-styles to their block styles stylesheet. + if ( current_theme_supports( 'wp-block-styles' ) ) { + + // Dequeue the full stylesheet. + // Make sure this only runs once, it doesn't need to run for every block. + static $stylesheet_removed; + if ( ! $stylesheet_removed ) { + add_action( + 'wp_enqueue_scripts', + function() { + wp_dequeue_style( 'wp-block-library-theme' ); + } + ); + $stylesheet_removed = true; + } + + // Get the path to the block's stylesheet. + $theme_style_path = is_rtl() + ? "build/block-library/blocks/$block_name/theme-rtl.css" + : "build/block-library/blocks/$block_name/theme.css"; + + // If the file exists, enqueue it. + if ( file_exists( gutenberg_dir_path() . $theme_style_path ) ) { + + if ( file_exists( gutenberg_dir_path() . $style_path ) ) { + // If there is a main stylesheet for this block, append the theme styles to main styles. + wp_add_inline_style( + "wp-block-{$block_name}", + file_get_contents( gutenberg_dir_path() . $theme_style_path ) + ); + } else { + // If there is no main stylesheet for this block, register theme style. + wp_register_style( + "wp-block-{$block_name}", + gutenberg_url( $theme_style_path ), + array(), + filemtime( gutenberg_dir_path() . $theme_style_path ) + ); + wp_style_add_data( "wp-block-{$block_name}", 'path', gutenberg_dir_path() . $theme_style_path ); + } + } + } + if ( file_exists( gutenberg_dir_path() . $editor_style_path ) ) { wp_deregister_style( "wp-block-{$block_name}-editor" ); wp_register_style( diff --git a/webpack.config.js b/webpack.config.js index af7269181c007..dd928625f136a 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -238,6 +238,22 @@ module.exports = { to: 'build/block-library/blocks/[1]/editor-rtl.css', transform: stylesTransform, }, + { + from: './packages/block-library/build-style/*/theme.css', + test: new RegExp( + `([\\w-]+)${ escapeRegExp( sep ) }theme\\.css$` + ), + to: 'build/block-library/blocks/[1]/theme.css', + transform: stylesTransform, + }, + { + from: './packages/block-library/build-style/*/theme-rtl.css', + test: new RegExp( + `([\\w-]+)${ escapeRegExp( sep ) }theme-rtl\\.css$` + ), + to: 'build/block-library/blocks/[1]/theme-rtl.css', + transform: stylesTransform, + }, ] ), new CopyWebpackPlugin( Object.entries( {