Split core blocks assets loading for FSE themes (#25220)

* Poorly split css files

* Add style & editorStyle in block.json for all blocks

* change prefix from "core" to "wp"

* Enqueue core block styles

* Only load styles for rendered blocks

* remove is_feed() condition

* Enqueue outside the is_registered() check

* Use register_block_type_from_metadata function to register site-logo

* Add separate style for no-blocks

* PHPCS fixes

* Try splitting block-styles compiling

* bugfixes

* these will now be taken care of in webpack

* rename file

* tweak paths & add editor styles

* resolve merge conflict

* Add styles that were recently added

* Bugfix: styles now get properly loaded only when used

* Add recently introduced stylesheet for the query loop

* code block styles were recently moved from editor to styles

* Add verse styles

* "classic" is called "freeform"

* add stylesTransform

bin/packages/build.js

@@ -193,7 +193,14 @@ if ( files.length ) {
 	bar.tick( 0 );
 
 	stream = glob.stream(
-		[ `${ PACKAGES_DIR }/*/src/**/*.js`, `${ PACKAGES_DIR }/*/src/*.scss` ],
+		[
+			`${ PACKAGES_DIR }/*/src/**/*.js`,
+			`${ PACKAGES_DIR }/*/src/*.scss`,
+			`${ PACKAGES_DIR }/block-library/src/**/*.js`,
+			`${ PACKAGES_DIR }/block-library/src/*/style.scss`,
+			`${ PACKAGES_DIR }/block-library/src/*/editor.scss`,
+			`${ PACKAGES_DIR }/block-library/src/*.scss`,
+		],
 		{
 			ignore: [
 				`**/benchmark/**`,

lib/blocks.php

@@ -17,7 +17,7 @@ function gutenberg_reregister_core_block_types() {
 				'audio',
 				'button',
 				'buttons',
-				'classic',
+				'freeform',
 				'code',
 				'column',
 				'columns',
@@ -120,6 +120,7 @@ function gutenberg_reregister_core_block_types() {
 				$registry->unregister( $metadata['name'] );
 			}
 
+			gutenberg_register_core_block_styles( $folder_name );
 			register_block_type_from_metadata( $block_json_file );
 		}
 
@@ -132,11 +133,13 @@ function gutenberg_reregister_core_block_types() {
 				if ( $registry->is_registered( $block_names ) ) {
 					$registry->unregister( $block_names );
 				}
+				gutenberg_register_core_block_styles( $block_names );
 			} elseif ( is_array( $block_names ) ) {
 				foreach ( $block_names as $block_name ) {
 					if ( $registry->is_registered( $block_name ) ) {
 						$registry->unregister( $block_name );
 					}
+					gutenberg_register_core_block_styles( $block_name );
 				}
 			}
 
@@ -147,6 +150,46 @@ function gutenberg_reregister_core_block_types() {
 
 add_action( 'init', 'gutenberg_reregister_core_block_types' );
 
+/**
+ * Registers block styles for a core block.
+ *
+ * @param string $block_name The block-name.
+ *
+ * @return void
+ */
+function gutenberg_register_core_block_styles( $block_name ) {
+	if ( ! gutenberg_should_load_separate_block_styles() ) {
+		return;
+	}
+
+	$block_name = str_replace( 'core/', '', $block_name );
+
+	$style_path        = is_rtl()
+		? "build/block-library/blocks/$block_name/style-rtl.css"
+		: "build/block-library/blocks/$block_name/style.css";
+	$editor_style_path = is_rtl()
+		? "build/block-library/blocks/$block_name/style-editor-rtl.css"
+		: "build/block-library/blocks/$block_name/style-editor.css";
+
+	if ( file_exists( gutenberg_dir_path() . $style_path ) ) {
+		wp_register_style(
+			'wp-block-' . $block_name,
+			gutenberg_url( $style_path ),
+			array(),
+			filemtime( gutenberg_dir_path() . $style_path )
+		);
+	}
+
+	if ( file_exists( gutenberg_dir_path() . $editor_style_path ) ) {
+		wp_register_style(
+			'wp-block-' . $block_name . '-editor',
+			gutenberg_url( $editor_style_path ),
+			array(),
+			filemtime( gutenberg_dir_path() . $editor_style_path )
+		);
+	}
+}
+
 /**
  * Complements the implementation of block type `core/social-icon`, whether it
  * be provided by core or the plugin, with derived block types for each

lib/client-assets.php

@@ -335,12 +335,13 @@ function gutenberg_register_packages_styles( $styles ) {
 	);
 	$styles->add_data( 'wp-components', 'rtl', 'replace' );
 
+	$block_library_filename = gutenberg_should_load_separate_block_styles() ? 'common' : 'style';
 	gutenberg_override_style(
 		$styles,
 		'wp-block-library',
-		gutenberg_url( 'build/block-library/style.css' ),
+		gutenberg_url( 'build/block-library/' . $block_library_filename . '.css' ),
 		array(),
-		filemtime( gutenberg_dir_path() . 'build/block-library/style.css' )
+		filemtime( gutenberg_dir_path() . 'build/block-library/' . $block_library_filename . '.css' )
 	);
 	$styles->add_data( 'wp-block-library', 'rtl', 'replace' );
 

lib/compat.php

@@ -412,6 +412,48 @@ function gutenberg_render_block_with_assigned_block_context( $pre_render, $parse
 }
 add_filter( 'pre_render_block', 'gutenberg_render_block_with_assigned_block_context', 9, 2 );
 
+/**
+ * Determine if the current theme needs to load separate block styles or not.
+ *
+ * @return bool
+ */
+function gutenberg_should_load_separate_block_styles() {
+	$load_separate_styles = gutenberg_is_fse_theme();
+	/**
+	 * Determine if separate styles will be loaded for blocks on-render or not.
+	 *
+	 * @param bool $load_separate_styles Whether separate styles will be loaded or not.
+	 *
+	 * @return bool
+	 */
+	return apply_filters( 'load_separate_block_styles', $load_separate_styles );
+}
+
+/**
+ * Remove the `wp_enqueue_registered_block_scripts_and_styles` hook if needed.
+ *
+ * @return void
+ */
+function gutenberg_remove_hook_wp_enqueue_registered_block_scripts_and_styles() {
+	if ( gutenberg_should_load_separate_block_styles() ) {
+		/**
+		 * Avoid enqueueing block assets of all registered blocks for all posts, instead
+		 * deferring to block render mechanics to enqueue scripts, thereby ensuring only
+		 * blocks of the content have their assets enqueued.
+		 *
+		 * This can be removed once minimum support for the plugin is outside the range
+		 * of the version associated with closure of the following ticket.
+		 *
+		 * @see https://core.trac.wordpress.org/ticket/50328
+		 *
+		 * @see WP_Block::render
+		 */
+		remove_action( 'enqueue_block_assets', 'wp_enqueue_registered_block_scripts_and_styles' );
+	}
+}
+
+add_action( 'init', 'gutenberg_remove_hook_wp_enqueue_registered_block_scripts_and_styles' );
+
 /**
  * Callback hooked to the register_block_type_args filter.
  *

packages/block-library/src/archives/block.json

@@ -15,5 +15,6 @@
 	"supports": {
 		"align": true,
 		"html": false
-	}
+	},
+	"editorStyle": "wp-block-archives-editor"
 }

packages/block-library/src/audio/block.json

@@ -39,5 +39,7 @@
 	"supports": {
 		"anchor": true,
 		"align": true
-	}
+	},
+	"editorStyle": "wp-block-audio-editor",
+	"style": "wp-block-audio"
 }

packages/block-library/src/block/block.json

@@ -11,5 +11,6 @@
 		"customClassName": false,
 		"html": false,
 		"inserter": false
-	}
+	},
+	"editorStyle": "wp-block-editor"
 }

packages/block-library/src/button/block.json

@@ -63,5 +63,7 @@
 		"alignWide": false,
 		"reusable": false,
 		"__experimentalSelector": ".wp-block-button > a"
-	}
+	},
+	"editorStyle": "wp-block-button-editor",
+	"style": "wp-block-button"
 }

packages/block-library/src/buttons/block.json

@@ -14,5 +14,7 @@
 	"supports": {
 		"anchor": true,
 		"align": [ "wide", "full" ]
-	}
+	},
+	"editorStyle": "wp-block-buttons-editor",
+	"style": "wp-block-buttons"
 }

packages/block-library/src/calendar/block.json

@@ -12,5 +12,6 @@
 	},
 	"supports": {
 		"align": true
-	}
+	},
+	"style": "wp-block-calendar"
 }

packages/block-library/src/categories/block.json

@@ -19,5 +19,7 @@
 	"supports": {
 		"align": true,
 		"html": false
-	}
+	},
+	"editorStyle": "wp-block-categories-editor",
+	"style": "wp-block-categories"
 }

packages/block-library/src/code/block.json

@@ -12,5 +12,6 @@
 	"supports": {
 		"anchor": true,
 		"fontSize": true
-	}
+	},
+	"style": "wp-block-code"
 }

packages/block-library/src/columns/block.json

@@ -18,5 +18,7 @@
 			"gradients": true,
 			"link": true
 		}
-	}
+	},
+	"editorStyle": "wp-block-columns-editor",
+	"style": "wp-block-columns"
 }

packages/block-library/src/common.scss

@@ -0,0 +1,66 @@
+// The following selectors have increased specificity (using the :root prefix)
+// to assure colors take effect over another base class color, mainly to let
+// the colors override the added specificity by link states such as :hover.
+
+:root {
+	// Background colors.
+	@include background-colors();
+
+	// Foreground colors.
+	@include foreground-colors();
+
+	// Gradients
+	@include gradient-colors();
+
+	.has-link-color a {
+		color: var(--wp--style--color--link, #00e);
+	}
+}
+
+// Font sizes.
+.has-small-font-size {
+	font-size: 0.8125em;
+}
+
+.has-regular-font-size, // Not used now, kept because of backward compatibility.
+.has-normal-font-size {
+	font-size: 1em;
+}
+
+.has-medium-font-size {
+	font-size: 1.25em;
+}
+
+.has-large-font-size {
+	font-size: 2.25em;
+}
+
+.has-larger-font-size, // Not used now, kept because of backward compatibility.
+.has-huge-font-size {
+	font-size: 2.625em;
+}
+
+// Text alignments.
+.has-text-align-center {
+	text-align: center;
+}
+
+.has-text-align-left {
+	/*rtl:ignore*/
+	text-align: left;
+}
+
+.has-text-align-right {
+	/*rtl:ignore*/
+	text-align: right;
+}
+
+// This tag marks the end of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor.
+#end-resizable-editor-section {
+	display: none;
+}
+
+// Block alignments.
+.aligncenter {
+	clear: both;
+}

packages/block-library/src/cover/block.json

@@ -57,5 +57,7 @@
 		"spacing": {
 			"padding": true
 		}
-	}
+	},
+	"editorStyle": "wp-block-cover-editor",
+	"style": "wp-block-cover"
 }

packages/block-library/src/editor.scss

@@ -13,7 +13,7 @@
 @import "./cover/editor.scss";
 @import "./embed/editor.scss";
 @import "./file/editor.scss";
-@import "./classic/editor.scss";
+@import "./freeform/editor.scss";
 @import "./gallery/editor.scss";
 @import "./group/editor.scss";
 @import "./heading/editor.scss";

packages/block-library/src/embed/block.json

@@ -34,5 +34,7 @@
 		"align": true,
 		"reusable": false,
 		"html": false
-	}
+	},
+	"editorStyle": "wp-block-embed-editor",
+	"style": "wp-block-embed"
 }

packages/block-library/src/file/block.json

@@ -39,5 +39,7 @@
 	"supports": {
 		"anchor": true,
 		"align": true
-	}
+	},
+	"editorStyle": "wp-block-file-editor",
+	"style": "wp-block-file"
 }

packages/block-library/src/classic/block.json → packages/block-library/src/freeform/block.json

@@ -12,5 +12,6 @@
 		"className": false,
 		"customClassName": false,
 		"reusable": false
-	}
+	},
+	"editorStyle": "wp-block-freeform-editor"
 }

packages/block-library/src/gallery/block.json

@@ -79,5 +79,7 @@
 	"supports": {
 		"anchor": true,
 		"align": true
-	}
+	},
+	"editorStyle": "wp-block-gallery-editor",
+	"style": "wp-block-gallery"
 }

packages/block-library/src/group/block.json

@@ -25,5 +25,7 @@
 		"spacing": {
 			"padding": true
 		}
-	}
+	},
+	"editorStyle": "wp-block-group-editor",
+	"style": "wp-block-group"
 }

packages/block-library/src/heading/block.json

@@ -74,5 +74,7 @@
 			}
 		},
 		"__unstablePasteTextInline": true
-	}
+	},
+	"editorStyle": "wp-block-heading-editor",
+	"style": "wp-block-heading"
 }

packages/block-library/src/html/block.json

@@ -12,5 +12,6 @@
 		"customClassName": false,
 		"className": false,
 		"html": false
-	}
+	},
+	"editorStyle": "wp-block-html-editor"
 }

packages/block-library/src/image/block.json

@@ -72,5 +72,7 @@
 	},
 	"supports": {
 		"anchor": true
-	}
+	},
+	"editorStyle": "wp-block-image-editor",
+	"style": "wp-block-image"
 }

packages/block-library/src/index.js

@@ -57,7 +57,7 @@ import * as textColumns from './text-columns';
 import * as verse from './verse';
 import * as video from './video';
 import * as tagCloud from './tag-cloud';
-import * as classic from './classic';
+import * as classic from './freeform';
 import * as socialLinks from './social-links';
 import * as socialLink from './social-link';