From 2154a2b167c9e90eb95035446e782e2e157d496f Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 12 May 2022 12:34:04 +0300
Subject: [PATCH 01/11] Split paragraph styles to small parts

---
 .../block-library/src/paragraph/style.scss    | 53 +++----------------
 .../src/paragraph/styles/has-background.scss  |  3 ++
 .../src/paragraph/styles/has-drop-cap.scss    | 18 +++++++
 .../src/paragraph/styles/has-text-color.scss  |  7 +++
 .../src/paragraph/styles/is-large-text.scss   |  3 ++
 .../src/paragraph/styles/is-larger-text.scss  |  3 ++
 .../src/paragraph/styles/is-regular-text.scss |  3 ++
 .../src/paragraph/styles/is-small-text.scss   |  3 ++
 8 files changed, 47 insertions(+), 46 deletions(-)
 create mode 100644 packages/block-library/src/paragraph/styles/has-background.scss
 create mode 100644 packages/block-library/src/paragraph/styles/has-drop-cap.scss
 create mode 100644 packages/block-library/src/paragraph/styles/has-text-color.scss
 create mode 100644 packages/block-library/src/paragraph/styles/is-large-text.scss
 create mode 100644 packages/block-library/src/paragraph/styles/is-larger-text.scss
 create mode 100644 packages/block-library/src/paragraph/styles/is-regular-text.scss
 create mode 100644 packages/block-library/src/paragraph/styles/is-small-text.scss

diff --git a/packages/block-library/src/paragraph/style.scss b/packages/block-library/src/paragraph/style.scss
index 810787c64692a..13bef62289b02 100644
--- a/packages/block-library/src/paragraph/style.scss
+++ b/packages/block-library/src/paragraph/style.scss
@@ -1,46 +1,7 @@
-.is-small-text {
-	font-size: 0.875em;
-}
-
-.is-regular-text {
-	font-size: 1em;
-}
-
-.is-large-text {
-	font-size: 2.25em;
-}
-
-.is-larger-text {
-	font-size: 3em;
-}
-
-// Don't show the drop cap when editing the paragraph's content. It causes a
-// number of bugs in combination with `contenteditable` fields. The caret
-// cannot be set around it, caret position calculation fails in Chrome, and
-// typing at the end of the paragraph doesn't work.
-.has-drop-cap:not(:focus)::first-letter {
-	float: left;
-	font-size: 8.4em;
-	line-height: 0.68;
-	font-weight: 100;
-	margin: 0.05em 0.1em 0 0;
-	text-transform: uppercase;
-	font-style: normal;
-}
-
-// Prevent the dropcap from breaking out of the box when a background is applied.
-p.has-drop-cap.has-background {
-	overflow: hidden;
-}
-
-p.has-background {
-	padding: $block-bg-padding--v $block-bg-padding--h;
-}
-
-// Use :where to contain the specificity of this rule
-// so it's easily overrideable by any theme that targets
-// links using the a element.
-// For example, this is what global styles does.
-:where(p.has-text-color:not(.has-link-color)) a {
-	color: inherit;
-}
+@import "./styles/is-small-text.scss";
+@import "./styles/is-regular-text.scss";
+@import "./styles/is-large-text.scss";
+@import "./styles/is-larger-text.scss";
+@import "./styles/has-drop-cap.scss";
+@import "./styles/has-background.scss";
+@import "./styles/has-text-color.scss";
diff --git a/packages/block-library/src/paragraph/styles/has-background.scss b/packages/block-library/src/paragraph/styles/has-background.scss
new file mode 100644
index 0000000000000..2e50144a1019e
--- /dev/null
+++ b/packages/block-library/src/paragraph/styles/has-background.scss
@@ -0,0 +1,3 @@
+p.has-background {
+	padding: $block-bg-padding--v $block-bg-padding--h;
+}
diff --git a/packages/block-library/src/paragraph/styles/has-drop-cap.scss b/packages/block-library/src/paragraph/styles/has-drop-cap.scss
new file mode 100644
index 0000000000000..e1722b9509620
--- /dev/null
+++ b/packages/block-library/src/paragraph/styles/has-drop-cap.scss
@@ -0,0 +1,18 @@
+// Don't show the drop cap when editing the paragraph's content. It causes a
+// number of bugs in combination with `contenteditable` fields. The caret
+// cannot be set around it, caret position calculation fails in Chrome, and
+// typing at the end of the paragraph doesn't work.
+.has-drop-cap:not(:focus)::first-letter {
+	float: left;
+	font-size: 8.4em;
+	line-height: 0.68;
+	font-weight: 100;
+	margin: 0.05em 0.1em 0 0;
+	text-transform: uppercase;
+	font-style: normal;
+}
+
+// Prevent the dropcap from breaking out of the box when a background is applied.
+p.has-drop-cap.has-background {
+	overflow: hidden;
+}
diff --git a/packages/block-library/src/paragraph/styles/has-text-color.scss b/packages/block-library/src/paragraph/styles/has-text-color.scss
new file mode 100644
index 0000000000000..a1ffc5ac260df
--- /dev/null
+++ b/packages/block-library/src/paragraph/styles/has-text-color.scss
@@ -0,0 +1,7 @@
+// Use :where to contain the specificity of this rule
+// so it's easily overrideable by any theme that targets
+// links using the a element.
+// For example, this is what global styles does.
+:where(p.has-text-color:not(.has-link-color)) a {
+	color: inherit;
+}
diff --git a/packages/block-library/src/paragraph/styles/is-large-text.scss b/packages/block-library/src/paragraph/styles/is-large-text.scss
new file mode 100644
index 0000000000000..d23945669e5c2
--- /dev/null
+++ b/packages/block-library/src/paragraph/styles/is-large-text.scss
@@ -0,0 +1,3 @@
+.is-large-text {
+	font-size: 2.25em;
+}
diff --git a/packages/block-library/src/paragraph/styles/is-larger-text.scss b/packages/block-library/src/paragraph/styles/is-larger-text.scss
new file mode 100644
index 0000000000000..a3ba88911f179
--- /dev/null
+++ b/packages/block-library/src/paragraph/styles/is-larger-text.scss
@@ -0,0 +1,3 @@
+.is-larger-text {
+	font-size: 3em;
+}
diff --git a/packages/block-library/src/paragraph/styles/is-regular-text.scss b/packages/block-library/src/paragraph/styles/is-regular-text.scss
new file mode 100644
index 0000000000000..24c1014a0496f
--- /dev/null
+++ b/packages/block-library/src/paragraph/styles/is-regular-text.scss
@@ -0,0 +1,3 @@
+.is-regular-text {
+	font-size: 1em;
+}
diff --git a/packages/block-library/src/paragraph/styles/is-small-text.scss b/packages/block-library/src/paragraph/styles/is-small-text.scss
new file mode 100644
index 0000000000000..78b494d6ca7b5
--- /dev/null
+++ b/packages/block-library/src/paragraph/styles/is-small-text.scss
@@ -0,0 +1,3 @@
+.is-small-text {
+	font-size: 0.875em;
+}

From 3c971bdba60b3b4ba699b58d721de2dab6718397 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Fri, 13 May 2022 10:07:01 +0300
Subject: [PATCH 02/11] rename files

---
 ...kground.scss => style-part-has-background.scss} |  0
 ...-drop-cap.scss => style-part-has-drop-cap.scss} |  0
 ...t-color.scss => style-part-has-text-color.scss} |  0
 ...rge-text.scss => style-part-is-large-text.scss} |  0
 ...er-text.scss => style-part-is-larger-text.scss} |  0
 ...r-text.scss => style-part-is-regular-text.scss} |  0
 ...all-text.scss => style-part-is-small-text.scss} |  0
 packages/block-library/src/paragraph/style.scss    | 14 +++++++-------
 8 files changed, 7 insertions(+), 7 deletions(-)
 rename packages/block-library/src/paragraph/{styles/has-background.scss => style-part-has-background.scss} (100%)
 rename packages/block-library/src/paragraph/{styles/has-drop-cap.scss => style-part-has-drop-cap.scss} (100%)
 rename packages/block-library/src/paragraph/{styles/has-text-color.scss => style-part-has-text-color.scss} (100%)
 rename packages/block-library/src/paragraph/{styles/is-large-text.scss => style-part-is-large-text.scss} (100%)
 rename packages/block-library/src/paragraph/{styles/is-larger-text.scss => style-part-is-larger-text.scss} (100%)
 rename packages/block-library/src/paragraph/{styles/is-regular-text.scss => style-part-is-regular-text.scss} (100%)
 rename packages/block-library/src/paragraph/{styles/is-small-text.scss => style-part-is-small-text.scss} (100%)

diff --git a/packages/block-library/src/paragraph/styles/has-background.scss b/packages/block-library/src/paragraph/style-part-has-background.scss
similarity index 100%
rename from packages/block-library/src/paragraph/styles/has-background.scss
rename to packages/block-library/src/paragraph/style-part-has-background.scss
diff --git a/packages/block-library/src/paragraph/styles/has-drop-cap.scss b/packages/block-library/src/paragraph/style-part-has-drop-cap.scss
similarity index 100%
rename from packages/block-library/src/paragraph/styles/has-drop-cap.scss
rename to packages/block-library/src/paragraph/style-part-has-drop-cap.scss
diff --git a/packages/block-library/src/paragraph/styles/has-text-color.scss b/packages/block-library/src/paragraph/style-part-has-text-color.scss
similarity index 100%
rename from packages/block-library/src/paragraph/styles/has-text-color.scss
rename to packages/block-library/src/paragraph/style-part-has-text-color.scss
diff --git a/packages/block-library/src/paragraph/styles/is-large-text.scss b/packages/block-library/src/paragraph/style-part-is-large-text.scss
similarity index 100%
rename from packages/block-library/src/paragraph/styles/is-large-text.scss
rename to packages/block-library/src/paragraph/style-part-is-large-text.scss
diff --git a/packages/block-library/src/paragraph/styles/is-larger-text.scss b/packages/block-library/src/paragraph/style-part-is-larger-text.scss
similarity index 100%
rename from packages/block-library/src/paragraph/styles/is-larger-text.scss
rename to packages/block-library/src/paragraph/style-part-is-larger-text.scss
diff --git a/packages/block-library/src/paragraph/styles/is-regular-text.scss b/packages/block-library/src/paragraph/style-part-is-regular-text.scss
similarity index 100%
rename from packages/block-library/src/paragraph/styles/is-regular-text.scss
rename to packages/block-library/src/paragraph/style-part-is-regular-text.scss
diff --git a/packages/block-library/src/paragraph/styles/is-small-text.scss b/packages/block-library/src/paragraph/style-part-is-small-text.scss
similarity index 100%
rename from packages/block-library/src/paragraph/styles/is-small-text.scss
rename to packages/block-library/src/paragraph/style-part-is-small-text.scss
diff --git a/packages/block-library/src/paragraph/style.scss b/packages/block-library/src/paragraph/style.scss
index 13bef62289b02..a4b20d7469809 100644
--- a/packages/block-library/src/paragraph/style.scss
+++ b/packages/block-library/src/paragraph/style.scss
@@ -1,7 +1,7 @@
-@import "./styles/is-small-text.scss";
-@import "./styles/is-regular-text.scss";
-@import "./styles/is-large-text.scss";
-@import "./styles/is-larger-text.scss";
-@import "./styles/has-drop-cap.scss";
-@import "./styles/has-background.scss";
-@import "./styles/has-text-color.scss";
+@import "./style-part-is-small-text.scss";
+@import "./style-part-is-regular-text.scss";
+@import "./style-part-is-large-text.scss";
+@import "./style-part-is-larger-text.scss";
+@import "./style-part-has-drop-cap.scss";
+@import "./style-part-has-background.scss";
+@import "./style-part-has-text-color.scss";

From 39d7fc618b6e3fe3f015f72033f0f56f2d1238f2 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Fri, 13 May 2022 10:07:52 +0300
Subject: [PATCH 03/11] compile the style-part-* files

---
 bin/packages/build.js   | 10 +++++++---
 tools/webpack/blocks.js |  9 +++++++++
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/bin/packages/build.js b/bin/packages/build.js
index 94db7f63eadee..e4225debccbdc 100755
--- a/bin/packages/build.js
+++ b/bin/packages/build.js
@@ -124,9 +124,12 @@ function createStyleEntryTransform() {
 			// block-library package also need rebuilding.
 			if (
 				packageName === 'block-library' &&
-				[ 'style.scss', 'editor.scss', 'theme.scss' ].includes(
-					path.basename( file )
-				)
+				[
+					'style.scss',
+					'editor.scss',
+					'theme.scss',
+					'style-part-*.scss',
+				].includes( path.basename( file ) )
 			) {
 				entries.push( file );
 			}
@@ -217,6 +220,7 @@ if ( files.length ) {
 			`${ 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/*/style-part-*.scss`,
 			`${ PACKAGES_DIR }/block-library/src/*.scss`,
 		],
 		{
diff --git a/tools/webpack/blocks.js b/tools/webpack/blocks.js
index c9a5af0b631ce..23924fa174fa1 100644
--- a/tools/webpack/blocks.js
+++ b/tools/webpack/blocks.js
@@ -99,6 +99,15 @@ module.exports = {
 					},
 					transform: stylesTransform,
 				} ) ),
+				{
+					from: `./packages/block-library/build-style/*/style-part-*.css`,
+					to( { absoluteFilename } ) {
+						const parts = absoluteFilename.split( sep );
+						const dirname = parts[ parts.length - 2 ];
+						return `build/block-library/blocks/${ dirname }/[name].css`;
+					},
+					transform: stylesTransform,
+				},
 				Object.entries( {
 					'./packages/block-library/src/':
 						'build/block-library/blocks/',

From 18ca492a97843bac6f898a5f8653f28d9fe82b12 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Fri, 13 May 2022 13:00:50 +0300
Subject: [PATCH 04/11] Define styledClasses in block.json and inline styles

---
 lib/blocks.php                                | 72 +++++++++++++++++++
 .../block-library/src/paragraph/block.json    | 11 ++-
 schemas/json/block.json                       |  4 ++
 3 files changed, 86 insertions(+), 1 deletion(-)

diff --git a/lib/blocks.php b/lib/blocks.php
index 3f0e8a547a868..85304b672e82b 100644
--- a/lib/blocks.php
+++ b/lib/blocks.php
@@ -349,3 +349,75 @@ function gutenberg_register_legacy_social_link_blocks() {
 }
 
 add_action( 'init', 'gutenberg_register_legacy_social_link_blocks' );
+
+if ( ! function_exists( 'wp_maybe_inline_block_style_parts' ) ) {
+	/**
+	 * Inlines tree-shaked CSS for blocks, instead of a single file.
+	 * Filters the settings determined from the block type metadata.
+	 *
+	 * @param array $settings Array of determined settings for registering a block type.
+	 * @param array $metadata Metadata provided for registering a block type.
+	 */
+	function wp_maybe_inline_block_style_parts( $settings, $metadata ) {
+
+		// Bail early if `styledClasses` is not set.
+		if ( empty( $metadata['styledClasses'] ) ) {
+			return $settings;
+		}
+
+		// Bail early if not a frontend request.
+		if ( is_admin() || ( defined( 'DOING_AJAX' ) && DOING_AJAX ) ) {
+			return $settings;
+		}
+
+		// Bail early if the block doesn't have a "style" defined.
+		if ( empty( $settings['style'] ) ) {
+			return $settings;
+		}
+
+		// Get the stylesheet handle.
+		$handle = $settings['style'];
+
+		global $wp_styles;
+		// Remove the default style. We'll be adding style-parts depending on the block content.
+		$wp_styles->registered[ $handle ]->src = '';
+		// Get the block's folder path which will be later used to get the individual files.
+		// Use the folder-path of the style.css file if available, otherwise fallback to the block.json parent folder.
+		$block_path = dirname( $metadata['file'] );
+		if ( ! empty( $wp_styles->registered[ $handle ]->extra['path'] ) ) {
+			$block_path = dirname( $wp_styles->registered[ $handle ]->extra['path'] );
+		}
+
+		// Unset the default style's path to prevent inlining the whole file.
+		unset( $wp_styles->registered[ $handle ]->extra['path'] );
+
+		/**
+		 * Callback to add the style-parts to the block.
+		 *
+		 * @param  string $block_content Rendered block content.
+		 * @param  array  $block         Block object.
+		 * @return string                Filtered block content.
+		 */
+		$callback = static function( $block_content, $block ) use ( $handle, $block_path, $metadata ) {
+			// Check that we're on the right block.
+			if ( $block['blockName'] !== $metadata['name'] ) {
+				return $block_content;
+			}
+
+			// Add inline styles for the class-names that exist in the content.
+			foreach ( $metadata['styledClasses'] as $class_name ) {
+				if ( false === strpos( $block_content, $class_name ) ) {
+					continue;
+				}
+				wp_add_inline_style( $handle, file_get_contents( $block_path . "/style-part-{$class_name}.css" ) );
+			}
+			return $block_content;
+		};
+
+		// Add the callback to the block's render callback.
+		add_filter( 'render_block', $callback, 10, 2 );
+
+		return $settings;
+	}
+}
+add_filter( 'block_type_metadata_settings', 'wp_maybe_inline_block_style_parts', 10, 2 );
diff --git a/packages/block-library/src/paragraph/block.json b/packages/block-library/src/paragraph/block.json
index 2323beff7ae59..005522046a402 100644
--- a/packages/block-library/src/paragraph/block.json
+++ b/packages/block-library/src/paragraph/block.json
@@ -55,5 +55,14 @@
 		"__unstablePasteTextInline": true
 	},
 	"editorStyle": "wp-block-paragraph-editor",
-	"style": "wp-block-paragraph"
+	"style": "wp-block-paragraph",
+	"styledClasses": [
+		"has-background",
+		"has-drop-cap",
+		"has-text-color",
+		"is-large-text",
+		"is-larger-text",
+		"is-regular-text",
+		"is-small-text"
+	]
 }
diff --git a/schemas/json/block.json b/schemas/json/block.json
index 17e9ec519acf6..12567a94941c6 100644
--- a/schemas/json/block.json
+++ b/schemas/json/block.json
@@ -477,6 +477,10 @@
 					}
 				}
 			]
+		},
+		"styledClasses": {
+			"description": "An array of class names that have individual stylesheets. If defined, overrides the 'style' property on the frontend, loading styles only when the class is present.",
+			"type": "array"
 		}
 	},
 	"required": [ "name", "title" ],

From d0f433f2bbbafdd60a5853b641c6830e81b1a8d8 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Fri, 13 May 2022 13:24:57 +0300
Subject: [PATCH 05/11] Add check for wp_should_load_separate_core_block_assets

---
 lib/blocks.php | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/lib/blocks.php b/lib/blocks.php
index 85304b672e82b..d7257a7b9ca8d 100644
--- a/lib/blocks.php
+++ b/lib/blocks.php
@@ -360,6 +360,11 @@ function gutenberg_register_legacy_social_link_blocks() {
 	 */
 	function wp_maybe_inline_block_style_parts( $settings, $metadata ) {
 
+		// Bail early if wp_should_load_separate_core_block_assets() is false.
+		if ( ! wp_should_load_separate_core_block_assets() ) {
+			return $settings;
+		}
+
 		// Bail early if `styledClasses` is not set.
 		if ( empty( $metadata['styledClasses'] ) ) {
 			return $settings;

From e4cc7bd73c821f394ec8542308de8e8017c34b86 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Fri, 13 May 2022 14:17:53 +0300
Subject: [PATCH 06/11] Account for RTL files

---
 lib/blocks.php | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/lib/blocks.php b/lib/blocks.php
index d7257a7b9ca8d..98990910a43a1 100644
--- a/lib/blocks.php
+++ b/lib/blocks.php
@@ -414,7 +414,11 @@ function wp_maybe_inline_block_style_parts( $settings, $metadata ) {
 				if ( false === strpos( $block_content, $class_name ) ) {
 					continue;
 				}
-				wp_add_inline_style( $handle, file_get_contents( $block_path . "/style-part-{$class_name}.css" ) );
+				$file = $block_path . "/style-part-{$class_name}.css";
+				if ( is_rtl() && file_exists( $block_path . "/style-part-{$class_name}-rtl.css" ) ) {
+					$file = $block_path . "/style-part-{$class_name}-rtl.css";
+				}
+				wp_add_inline_style( $handle, file_get_contents( $file ) );
 			}
 			return $block_content;
 		};

From e0709d1311be5dbcf7d850b4da4acfed447b6773 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Mon, 16 May 2022 08:23:13 +0300
Subject: [PATCH 07/11] Update schemas/json/block.json

Co-authored-by: Alex Lende <alex@lende.xyz>
---
 schemas/json/block.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/schemas/json/block.json b/schemas/json/block.json
index 12567a94941c6..5059829b82d0e 100644
--- a/schemas/json/block.json
+++ b/schemas/json/block.json
@@ -480,7 +480,10 @@
 		},
 		"styledClasses": {
 			"description": "An array of class names that have individual stylesheets. If defined, overrides the 'style' property on the frontend, loading styles only when the class is present.",
-			"type": "array"
+			"type": "array",
+			"items": {
+				"type": "string"
+			}
 		}
 	},
 	"required": [ "name", "title" ],

From ff4668a1ebff2240373840f8647f21376930edb8 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Wed, 18 May 2022 08:09:20 +0300
Subject: [PATCH 08/11] This is already handled in
 wp_should_load_separate_core_block_assets

---
 lib/blocks.php | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/lib/blocks.php b/lib/blocks.php
index 98990910a43a1..0f7d5e6a45abe 100644
--- a/lib/blocks.php
+++ b/lib/blocks.php
@@ -370,11 +370,6 @@ function wp_maybe_inline_block_style_parts( $settings, $metadata ) {
 			return $settings;
 		}
 
-		// Bail early if not a frontend request.
-		if ( is_admin() || ( defined( 'DOING_AJAX' ) && DOING_AJAX ) ) {
-			return $settings;
-		}
-
 		// Bail early if the block doesn't have a "style" defined.
 		if ( empty( $settings['style'] ) ) {
 			return $settings;

From 0932019dbb70f95b4b86cd178eb6db81193218c9 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 19 May 2022 11:08:33 +0300
Subject: [PATCH 09/11] Move styled parts to a subfolder

---
 bin/packages/build.js                              |  4 ++--
 lib/blocks.php                                     |  6 +++---
 packages/block-library/src/paragraph/style.scss    | 14 +++++++-------
 .../has-background.scss}                           |  0
 .../has-drop-cap.scss}                             |  0
 .../has-text-color.scss}                           |  0
 .../is-large-text.scss}                            |  0
 .../is-larger-text.scss}                           |  0
 .../is-regular-text.scss}                          |  0
 .../is-small-text.scss}                            |  0
 tools/webpack/blocks.js                            |  6 +++---
 11 files changed, 15 insertions(+), 15 deletions(-)
 rename packages/block-library/src/paragraph/{style-part-has-background.scss => styles/has-background.scss} (100%)
 rename packages/block-library/src/paragraph/{style-part-has-drop-cap.scss => styles/has-drop-cap.scss} (100%)
 rename packages/block-library/src/paragraph/{style-part-has-text-color.scss => styles/has-text-color.scss} (100%)
 rename packages/block-library/src/paragraph/{style-part-is-large-text.scss => styles/is-large-text.scss} (100%)
 rename packages/block-library/src/paragraph/{style-part-is-larger-text.scss => styles/is-larger-text.scss} (100%)
 rename packages/block-library/src/paragraph/{style-part-is-regular-text.scss => styles/is-regular-text.scss} (100%)
 rename packages/block-library/src/paragraph/{style-part-is-small-text.scss => styles/is-small-text.scss} (100%)

diff --git a/bin/packages/build.js b/bin/packages/build.js
index e4225debccbdc..9ea7e3e38829e 100755
--- a/bin/packages/build.js
+++ b/bin/packages/build.js
@@ -128,7 +128,7 @@ function createStyleEntryTransform() {
 					'style.scss',
 					'editor.scss',
 					'theme.scss',
-					'style-part-*.scss',
+					'styles/*.scss',
 				].includes( path.basename( file ) )
 			) {
 				entries.push( file );
@@ -220,7 +220,7 @@ if ( files.length ) {
 			`${ 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/*/style-part-*.scss`,
+			`${ PACKAGES_DIR }/block-library/src/*/styles/*.scss`,
 			`${ PACKAGES_DIR }/block-library/src/*.scss`,
 		],
 		{
diff --git a/lib/blocks.php b/lib/blocks.php
index 0f7d5e6a45abe..6c2515e00ab75 100644
--- a/lib/blocks.php
+++ b/lib/blocks.php
@@ -409,9 +409,9 @@ function wp_maybe_inline_block_style_parts( $settings, $metadata ) {
 				if ( false === strpos( $block_content, $class_name ) ) {
 					continue;
 				}
-				$file = $block_path . "/style-part-{$class_name}.css";
-				if ( is_rtl() && file_exists( $block_path . "/style-part-{$class_name}-rtl.css" ) ) {
-					$file = $block_path . "/style-part-{$class_name}-rtl.css";
+				$file = $block_path . "/styles/{$class_name}.css";
+				if ( is_rtl() && file_exists( $block_path . "/styles/{$class_name}-rtl.css" ) ) {
+					$file = $block_path . "/styles/{$class_name}-rtl.css";
 				}
 				wp_add_inline_style( $handle, file_get_contents( $file ) );
 			}
diff --git a/packages/block-library/src/paragraph/style.scss b/packages/block-library/src/paragraph/style.scss
index a4b20d7469809..13bef62289b02 100644
--- a/packages/block-library/src/paragraph/style.scss
+++ b/packages/block-library/src/paragraph/style.scss
@@ -1,7 +1,7 @@
-@import "./style-part-is-small-text.scss";
-@import "./style-part-is-regular-text.scss";
-@import "./style-part-is-large-text.scss";
-@import "./style-part-is-larger-text.scss";
-@import "./style-part-has-drop-cap.scss";
-@import "./style-part-has-background.scss";
-@import "./style-part-has-text-color.scss";
+@import "./styles/is-small-text.scss";
+@import "./styles/is-regular-text.scss";
+@import "./styles/is-large-text.scss";
+@import "./styles/is-larger-text.scss";
+@import "./styles/has-drop-cap.scss";
+@import "./styles/has-background.scss";
+@import "./styles/has-text-color.scss";
diff --git a/packages/block-library/src/paragraph/style-part-has-background.scss b/packages/block-library/src/paragraph/styles/has-background.scss
similarity index 100%
rename from packages/block-library/src/paragraph/style-part-has-background.scss
rename to packages/block-library/src/paragraph/styles/has-background.scss
diff --git a/packages/block-library/src/paragraph/style-part-has-drop-cap.scss b/packages/block-library/src/paragraph/styles/has-drop-cap.scss
similarity index 100%
rename from packages/block-library/src/paragraph/style-part-has-drop-cap.scss
rename to packages/block-library/src/paragraph/styles/has-drop-cap.scss
diff --git a/packages/block-library/src/paragraph/style-part-has-text-color.scss b/packages/block-library/src/paragraph/styles/has-text-color.scss
similarity index 100%
rename from packages/block-library/src/paragraph/style-part-has-text-color.scss
rename to packages/block-library/src/paragraph/styles/has-text-color.scss
diff --git a/packages/block-library/src/paragraph/style-part-is-large-text.scss b/packages/block-library/src/paragraph/styles/is-large-text.scss
similarity index 100%
rename from packages/block-library/src/paragraph/style-part-is-large-text.scss
rename to packages/block-library/src/paragraph/styles/is-large-text.scss
diff --git a/packages/block-library/src/paragraph/style-part-is-larger-text.scss b/packages/block-library/src/paragraph/styles/is-larger-text.scss
similarity index 100%
rename from packages/block-library/src/paragraph/style-part-is-larger-text.scss
rename to packages/block-library/src/paragraph/styles/is-larger-text.scss
diff --git a/packages/block-library/src/paragraph/style-part-is-regular-text.scss b/packages/block-library/src/paragraph/styles/is-regular-text.scss
similarity index 100%
rename from packages/block-library/src/paragraph/style-part-is-regular-text.scss
rename to packages/block-library/src/paragraph/styles/is-regular-text.scss
diff --git a/packages/block-library/src/paragraph/style-part-is-small-text.scss b/packages/block-library/src/paragraph/styles/is-small-text.scss
similarity index 100%
rename from packages/block-library/src/paragraph/style-part-is-small-text.scss
rename to packages/block-library/src/paragraph/styles/is-small-text.scss
diff --git a/tools/webpack/blocks.js b/tools/webpack/blocks.js
index 23924fa174fa1..c1d023321e8b8 100644
--- a/tools/webpack/blocks.js
+++ b/tools/webpack/blocks.js
@@ -100,11 +100,11 @@ module.exports = {
 					transform: stylesTransform,
 				} ) ),
 				{
-					from: `./packages/block-library/build-style/*/style-part-*.css`,
+					from: `./packages/block-library/build-style/*/styles/*.css`,
 					to( { absoluteFilename } ) {
 						const parts = absoluteFilename.split( sep );
-						const dirname = parts[ parts.length - 2 ];
-						return `build/block-library/blocks/${ dirname }/[name].css`;
+						const dirname = parts[ parts.length - 3 ];
+						return `build/block-library/blocks/${ dirname }/styles/[name].css`;
 					},
 					transform: stylesTransform,
 				},

From ccf235687087686eb09afc964dbd4890bed508c9 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Fri, 20 May 2022 10:54:46 +0300
Subject: [PATCH 10/11] Refactor to use the "style" item in block.json

---
 lib/blocks.php                                | 109 ++++++++++++------
 .../block-library/src/paragraph/block.json    |  22 ++--
 schemas/json/block.json                       |  30 +++--
 3 files changed, 106 insertions(+), 55 deletions(-)

diff --git a/lib/blocks.php b/lib/blocks.php
index 6c2515e00ab75..f72a8f8a9f9f9 100644
--- a/lib/blocks.php
+++ b/lib/blocks.php
@@ -353,43 +353,40 @@ function gutenberg_register_legacy_social_link_blocks() {
 if ( ! function_exists( 'wp_maybe_inline_block_style_parts' ) ) {
 	/**
 	 * Inlines tree-shaked CSS for blocks, instead of a single file.
-	 * Filters the settings determined from the block type metadata.
 	 *
-	 * @param array $settings Array of determined settings for registering a block type.
 	 * @param array $metadata Metadata provided for registering a block type.
 	 */
-	function wp_maybe_inline_block_style_parts( $settings, $metadata ) {
+	function wp_maybe_inline_block_style_parts( $metadata ) {
 
-		// Bail early if wp_should_load_separate_core_block_assets() is false.
-		if ( ! wp_should_load_separate_core_block_assets() ) {
-			return $settings;
+		// Bail early if style is empty or not an array.
+		if ( ! isset( $metadata['style'] ) || ! is_array( $metadata['style'] ) ) {
+			return $metadata;
 		}
 
-		// Bail early if `styledClasses` is not set.
-		if ( empty( $metadata['styledClasses'] ) ) {
-			return $settings;
-		}
+		// Compile an array of style-parts.
+		$styled_parts = array();
+		foreach ( $metadata['style'] as $key => $style ) {
+			// Skip item if "parts" and "style" are not set, or empty.
+			if ( empty( $style['parts'] ) || empty( $style['handle'] ) ) {
+				continue;
+			}
 
-		// Bail early if the block doesn't have a "style" defined.
-		if ( empty( $settings['style'] ) ) {
-			return $settings;
+			// Add the stylesheet to the array to be used below.
+			$styled_parts[ $style['handle'] ] = $style['parts'];
+
+			// Convert $metadata['style'] to an array removing the "parts" and "handle" keys.
+			$metadata['style'][ $key ] = $style['handle'];
 		}
 
-		// Get the stylesheet handle.
-		$handle = $settings['style'];
-
-		global $wp_styles;
-		// Remove the default style. We'll be adding style-parts depending on the block content.
-		$wp_styles->registered[ $handle ]->src = '';
-		// Get the block's folder path which will be later used to get the individual files.
-		// Use the folder-path of the style.css file if available, otherwise fallback to the block.json parent folder.
-		$block_path = dirname( $metadata['file'] );
-		if ( ! empty( $wp_styles->registered[ $handle ]->extra['path'] ) ) {
-			$block_path = dirname( $wp_styles->registered[ $handle ]->extra['path'] );
+		// Bail early if wp_should_load_separate_core_block_assets() is false.
+		if ( ! wp_should_load_separate_core_block_assets() ) {
+			return $metadata;
 		}
 
-		// Unset the default style's path to prevent inlining the whole file.
-		unset( $wp_styles->registered[ $handle ]->extra['path'] );
+		// Bail early if there are no styled parts.
+		if ( empty( $styled_parts ) ) {
+			return $metadata;
+		}
 
 		/**
 		 * Callback to add the style-parts to the block.
@@ -398,30 +395,66 @@ function wp_maybe_inline_block_style_parts( $settings, $metadata ) {
 		 * @param  array  $block         Block object.
 		 * @return string                Filtered block content.
 		 */
-		$callback = static function( $block_content, $block ) use ( $handle, $block_path, $metadata ) {
+		$callback = static function( $block_content, $block ) use ( $metadata, $styled_parts ) {
 			// Check that we're on the right block.
 			if ( $block['blockName'] !== $metadata['name'] ) {
 				return $block_content;
 			}
 
+			// Use a static variable to avoid adding the same part more than once.
+			static $style_parts_added = array();
+			if ( ! isset( $style_parts_added[ $block['blockName'] ] ) ) {
+				$style_parts_added[ $block['blockName'] ] = array();
+			}
+
 			// Add inline styles for the class-names that exist in the content.
-			foreach ( $metadata['styledClasses'] as $class_name ) {
-				if ( false === strpos( $block_content, $class_name ) ) {
-					continue;
+			foreach ( $styled_parts as $handle => $styled_parts ) {
+
+				global $wp_styles;
+				// Remove the default style. We'll be adding style-parts depending on the block content.
+				$wp_styles->registered[ $handle ]->src = '';
+				// Get the block's folder path which will be later used to get the individual files.
+				// Use the folder-path of the style.css file if available, otherwise fallback to the block.json parent folder.
+				$block_path = dirname( $metadata['file'] );
+				if ( ! empty( $wp_styles->registered[ $handle ]->extra['path'] ) ) {
+					$block_path = dirname( $wp_styles->registered[ $handle ]->extra['path'] );
 				}
-				$file = $block_path . "/styles/{$class_name}.css";
-				if ( is_rtl() && file_exists( $block_path . "/styles/{$class_name}-rtl.css" ) ) {
-					$file = $block_path . "/styles/{$class_name}-rtl.css";
+
+				// Unset the default style's path to prevent inlining the whole file.
+				unset( $wp_styles->registered[ $handle ]->extra['path'] );
+
+				// Add the style-parts to the block.
+				foreach ( $styled_parts as $part ) {
+
+					// Make sure this part has not already been added.
+					if ( in_array( $part, $style_parts_added[ $block['blockName'] ], true ) ) {
+						continue;
+					}
+
+					// Skip item if the block does not contain the defined string.
+					if ( false === strpos( $block_content, $part ) ) {
+						continue;
+					}
+
+					$file = $block_path . "/styles/{$part}.css";
+					if ( is_rtl() && file_exists( $block_path . "/styles/{$part}-rtl.css" ) ) {
+						$file = $block_path . "/styles/{$part}-rtl.css";
+					}
+					wp_add_inline_style( $handle, file_get_contents( $file ) );
+
+					// Add the part to the array of added parts.
+					$style_parts_added[ $block['blockName'] ][] = $part;
 				}
-				wp_add_inline_style( $handle, file_get_contents( $file ) );
 			}
 			return $block_content;
 		};
-
-		// Add the callback to the block's render callback.
 		add_filter( 'render_block', $callback, 10, 2 );
 
-		return $settings;
+		return $metadata;
 	}
 }
-add_filter( 'block_type_metadata_settings', 'wp_maybe_inline_block_style_parts', 10, 2 );
+/*
+ * Add the filter. Using a priority of 1 ensures that this filter runs before others,
+ * so the "style" metadata can be properly formatted for subsequent filters.
+ */
+add_filter( 'block_type_metadata', 'wp_maybe_inline_block_style_parts', 1, 2 );
diff --git a/packages/block-library/src/paragraph/block.json b/packages/block-library/src/paragraph/block.json
index 005522046a402..58898f65905a5 100644
--- a/packages/block-library/src/paragraph/block.json
+++ b/packages/block-library/src/paragraph/block.json
@@ -55,14 +55,18 @@
 		"__unstablePasteTextInline": true
 	},
 	"editorStyle": "wp-block-paragraph-editor",
-	"style": "wp-block-paragraph",
-	"styledClasses": [
-		"has-background",
-		"has-drop-cap",
-		"has-text-color",
-		"is-large-text",
-		"is-larger-text",
-		"is-regular-text",
-		"is-small-text"
+	"style": [
+		{
+			"handle": "wp-block-paragraph",
+			"parts": [
+				"has-background",
+				"has-drop-cap",
+				"has-text-color",
+				"is-large-text",
+				"is-larger-text",
+				"is-regular-text",
+				"is-small-text"
+			]
+		}
 	]
 }
diff --git a/schemas/json/block.json b/schemas/json/block.json
index 5059829b82d0e..8c6205c2bbd1a 100644
--- a/schemas/json/block.json
+++ b/schemas/json/block.json
@@ -473,17 +473,31 @@
 				{
 					"type": "array",
 					"items": {
-						"type": "string"
+						"oneOf": [
+							{
+								"type": "string"
+							},
+							{
+								"type": "object",
+								"properties": {
+									"handle": {
+										"description": "The stylesheet handle.",
+										"type": "string"
+									},
+									"parts": {
+										"description": "An array of class names that have individual stylesheets. If defined, overrides the 'handle' property on the frontend, loading styles only when the class is present.",
+										"type": "array",
+										"items": {
+											"type": "string"
+										}
+									}
+								},
+								"required": [ "handle", "parts" ]
+							}
+						]
 					}
 				}
 			]
-		},
-		"styledClasses": {
-			"description": "An array of class names that have individual stylesheets. If defined, overrides the 'style' property on the frontend, loading styles only when the class is present.",
-			"type": "array",
-			"items": {
-				"type": "string"
-			}
 		}
 	},
 	"required": [ "name", "title" ],

From 3531b1e575e3f16c6f44d6765867fc86d6f8abb8 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Fri, 20 May 2022 11:43:17 +0300
Subject: [PATCH 11/11] CS - comment style

---
 lib/blocks.php | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/lib/blocks.php b/lib/blocks.php
index f72a8f8a9f9f9..7b3999bef146c 100644
--- a/lib/blocks.php
+++ b/lib/blocks.php
@@ -453,8 +453,6 @@ function wp_maybe_inline_block_style_parts( $metadata ) {
 		return $metadata;
 	}
 }
-/*
- * Add the filter. Using a priority of 1 ensures that this filter runs before others,
- * so the "style" metadata can be properly formatted for subsequent filters.
- */
+// Add the filter. Using a priority of 1 ensures that this filter runs before others,
+// so the "style" metadata can be properly formatted for subsequent filters.
 add_filter( 'block_type_metadata', 'wp_maybe_inline_block_style_parts', 1, 2 );