From 6a70645956a5b78964c6bd02a96237d813b580a0 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Wed, 15 Jun 2022 14:50:41 +1000
Subject: [PATCH 01/10] Initial commit. Migrate elements style generation to
 the style engine. Split parsing of elements and other styles in hooks/style
 using style engine methods

---
 packages/block-editor/src/hooks/style.js      | 76 +++++++++++--------
 packages/style-engine/package.json            |  1 +
 .../style-engine/src/styles/elements/index.ts | 54 +++++++++++++
 packages/style-engine/src/styles/index.ts     |  2 +
 packages/style-engine/src/test/index.js       | 46 ++++++++++-
 5 files changed, 142 insertions(+), 37 deletions(-)
 create mode 100644 packages/style-engine/src/styles/elements/index.ts

diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
index 400ebd0a84263f..846dd655d62974 100644
--- a/packages/block-editor/src/hooks/style.js
+++ b/packages/block-editor/src/hooks/style.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, has, isEmpty, kebabCase, omit } from 'lodash';
+import { get, has, isEmpty, omit } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -13,10 +13,12 @@ import {
 	getBlockSupport,
 	hasBlockSupport,
 	__EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY,
-	__EXPERIMENTAL_ELEMENTS as ELEMENTS,
 } from '@wordpress/blocks';
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
-import { getCSSRules } from '@wordpress/style-engine';
+import {
+	getCSSRules,
+	generate as generateStyles,
+} from '@wordpress/style-engine';
 
 /**
  * Internal dependencies
@@ -97,7 +99,11 @@ export function getInlineStyles( styles = {} ) {
 
 	// The goal is to move everything to server side generated engine styles
 	// This is temporary as we absorb more and more styles into the engine.
-	const extraRules = getCSSRules( styles );
+	// Elements is already handled by compileElementsStyles()
+	const extraRules = getCSSRules( {
+		...styles,
+		elements: undefined,
+	} );
 	extraRules.forEach( ( rule ) => {
 		output[ rule.key ] = rule.value;
 	} );
@@ -106,25 +112,22 @@ export function getInlineStyles( styles = {} ) {
 }
 
 function compileElementsStyles( selector, elements = {} ) {
-	return Object.entries( elements )
-		.map( ( [ element, styles ] ) => {
-			const elementStyles = getInlineStyles( styles );
-			if ( ! isEmpty( elementStyles ) ) {
-				// The .editor-styles-wrapper selector is required on elements styles. As it is
-				// added to all other editor styles, not providing it causes reset and global
-				// styles to override element styles because of higher specificity.
-				return [
-					`.editor-styles-wrapper .${ selector } ${ ELEMENTS[ element ] }{`,
-					...Object.entries( elementStyles ).map(
-						( [ cssProperty, value ] ) =>
-							`\t${ kebabCase( cssProperty ) }: ${ value };`
-					),
-					'}',
-				].join( '\n' );
-			}
-			return '';
-		} )
-		.join( '\n' );
+	if ( isEmpty( elements ) ) {
+		return null;
+	}
+
+	const elementStyles = generateStyles( elements, {
+		// The .editor-styles-wrapper selector is required on elements styles. As it is
+		// added to all other editor styles, not providing it causes reset and global
+		// styles to override element styles because of higher specificity.
+		selector: `.editor-styles-wrapper .${ selector }`,
+	} );
+
+	if ( ! elementStyles ) {
+		return null;
+	}
+
+	return elementStyles;
 }
 
 /**
@@ -323,23 +326,30 @@ const withElementsStyles = createHigherOrderComponent(
 			'link'
 		);
 
-		// The Elements API only supports link colors for now,
-		// hence the specific omission of `link` in the elements styles.
-		// This might need to be refactored or removed if the Elements API
-		// changes or `link` supports styles beyond `color`.
-		const elements = skipLinkColorSerialization
-			? omit( props.attributes.style?.elements, [ 'link' ] )
-			: props.attributes.style?.elements;
+		const rawElementsStyles = props.attributes.style?.elements;
+
+		// Remove values based on whether serialization has been skipped for a specific style.
+		const filteredElementsStyles = {
+			elements: {
+				...rawElementsStyles,
+				link: {
+					...rawElementsStyles?.link,
+					color: ! skipLinkColorSerialization
+						? rawElementsStyles?.link?.color
+						: undefined,
+				},
+			},
+		};
 
 		const styles = compileElementsStyles(
 			blockElementsContainerIdentifier,
-			elements
+			filteredElementsStyles
 		);
 		const element = useContext( BlockList.__unstableElementContext );
 
 		return (
 			<>
-				{ elements &&
+				{ styles &&
 					element &&
 					createPortal(
 						<style
@@ -353,7 +363,7 @@ const withElementsStyles = createHigherOrderComponent(
 				<BlockListBlock
 					{ ...props }
 					className={
-						elements
+						styles
 							? classnames(
 									props.className,
 									blockElementsContainerIdentifier
diff --git a/packages/style-engine/package.json b/packages/style-engine/package.json
index 65d02d6e51c177..9b532fc9ee7be8 100644
--- a/packages/style-engine/package.json
+++ b/packages/style-engine/package.json
@@ -29,6 +29,7 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
+		"@wordpress/blocks": "file:../blocks",
 		"lodash": "^4.17.21"
 	},
 	"publishConfig": {
diff --git a/packages/style-engine/src/styles/elements/index.ts b/packages/style-engine/src/styles/elements/index.ts
new file mode 100644
index 00000000000000..5bb562bbe30ad0
--- /dev/null
+++ b/packages/style-engine/src/styles/elements/index.ts
@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+// @ts-ignore (Reason: Could not find a declaration file for module '@wordpress/blocks)
+import { __EXPERIMENTAL_ELEMENTS as ELEMENTS } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import type { Style, StyleOptions, GeneratedCSSRule } from '../../types';
+import { getCSSRules } from '../../';
+
+const elements = {
+	name: 'elements',
+	generate: ( style: Style, options: StyleOptions ) => {
+		const elementsStyles: object | undefined = get( style, [ 'elements' ] );
+
+		if ( elementsStyles ) {
+			const selectorRules = Object.entries( elementsStyles ).reduce(
+				(
+					acc: GeneratedCSSRule[][],
+					[ elementName, elementStyles ]: [ string, Style ]
+				) => {
+					const elementTag = ELEMENTS[ elementName ];
+
+					if ( ! elementTag ) {
+						return acc;
+					}
+
+					const newOptions = {
+						...options,
+						selector: options?.selector
+							? `${ options?.selector } ${ elementTag }`
+							: elementTag,
+					};
+
+					acc.push( getCSSRules( elementStyles, newOptions ) );
+					return acc;
+				},
+				[]
+			);
+			return selectorRules.flat();
+		}
+
+		return [];
+	},
+};
+
+export default [ elements ];
diff --git a/packages/style-engine/src/styles/index.ts b/packages/style-engine/src/styles/index.ts
index 290c319778e292..8fb4d5cbdb8fb6 100644
--- a/packages/style-engine/src/styles/index.ts
+++ b/packages/style-engine/src/styles/index.ts
@@ -3,12 +3,14 @@
  */
 import border from './border';
 import color from './color';
+import elements from './elements';
 import spacing from './spacing';
 import typography from './typography';
 
 export const styleDefinitions = [
 	...border,
 	...color,
+	...elements,
 	...spacing,
 	...typography,
 ];
diff --git a/packages/style-engine/src/test/index.js b/packages/style-engine/src/test/index.js
index 1b516d85ff2ce3..ef0bf6e22df03f 100644
--- a/packages/style-engine/src/test/index.js
+++ b/packages/style-engine/src/test/index.js
@@ -72,14 +72,21 @@ describe( 'generate', () => {
 		);
 	} );
 
-	it( 'should parse preset values (use for elements.link.color.text)', () => {
+	it( 'should parse preset values', () => {
 		expect(
 			generate( {
-				color: {
-					text: 'var:preset|color|ham-sandwich',
+				elements: {
+					link: {
+						color: {
+							text: 'var:preset|color|ham-sandwich',
+						},
+						spacing: { margin: '3px' },
+					},
 				},
 			} )
-		).toEqual( 'color: var(--wp--preset--color--ham-sandwich);' );
+		).toEqual(
+			'color: var(--wp--preset--color--ham-sandwich); margin: 3px;'
+		);
 	} );
 
 	it( 'should parse border rules', () => {
@@ -278,4 +285,35 @@ describe( 'getCSSRules', () => {
 			},
 		] );
 	} );
+
+	it( 'should handle styles for elements with CSS vars', () => {
+		expect(
+			getCSSRules(
+				{
+					elements: {
+						link: {
+							color: {
+								text: 'var:preset|color|bomba-picante',
+							},
+							spacing: { padding: '11px' },
+						},
+					},
+				},
+				{
+					selector: '.some-selector',
+				}
+			)
+		).toEqual( [
+			{
+				selector: '.some-selector a',
+				key: 'color',
+				value: 'var(--wp--preset--color--bomba-picante)',
+			},
+			{
+				selector: '.some-selector a',
+				key: 'padding',
+				value: '11px',
+			},
+		] );
+	} );
 } );

From c9d84777d2d8e74f62ddd58a56254e83f6f91a5b Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Wed, 15 Jun 2022 15:18:50 +1000
Subject: [PATCH 02/10] Update package.json

---
 package-lock.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package-lock.json b/package-lock.json
index f8e9c4aba0abf8..6084138e5be495 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18126,6 +18126,7 @@
 			"version": "file:packages/style-engine",
 			"requires": {
 				"@babel/runtime": "^7.16.0",
+				"@wordpress/blocks": "file:packages/blocks",
 				"lodash": "^4.17.21"
 			}
 		},

From 19b359d154e4771b069b67d472169881315df723 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Fri, 17 Jun 2022 14:25:55 +1000
Subject: [PATCH 03/10] Inlining locators Dismissing Styles Welcome Guide :D

---
 .../style-engine/src/styles/elements/index.ts | 54 -------------------
 packages/style-engine/src/styles/index.ts     |  2 -
 packages/style-engine/src/test/index.js       | 34 ++++++------
 3 files changed, 18 insertions(+), 72 deletions(-)
 delete mode 100644 packages/style-engine/src/styles/elements/index.ts

diff --git a/packages/style-engine/src/styles/elements/index.ts b/packages/style-engine/src/styles/elements/index.ts
deleted file mode 100644
index 5bb562bbe30ad0..00000000000000
--- a/packages/style-engine/src/styles/elements/index.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-// @ts-ignore (Reason: Could not find a declaration file for module '@wordpress/blocks)
-import { __EXPERIMENTAL_ELEMENTS as ELEMENTS } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import type { Style, StyleOptions, GeneratedCSSRule } from '../../types';
-import { getCSSRules } from '../../';
-
-const elements = {
-	name: 'elements',
-	generate: ( style: Style, options: StyleOptions ) => {
-		const elementsStyles: object | undefined = get( style, [ 'elements' ] );
-
-		if ( elementsStyles ) {
-			const selectorRules = Object.entries( elementsStyles ).reduce(
-				(
-					acc: GeneratedCSSRule[][],
-					[ elementName, elementStyles ]: [ string, Style ]
-				) => {
-					const elementTag = ELEMENTS[ elementName ];
-
-					if ( ! elementTag ) {
-						return acc;
-					}
-
-					const newOptions = {
-						...options,
-						selector: options?.selector
-							? `${ options?.selector } ${ elementTag }`
-							: elementTag,
-					};
-
-					acc.push( getCSSRules( elementStyles, newOptions ) );
-					return acc;
-				},
-				[]
-			);
-			return selectorRules.flat();
-		}
-
-		return [];
-	},
-};
-
-export default [ elements ];
diff --git a/packages/style-engine/src/styles/index.ts b/packages/style-engine/src/styles/index.ts
index 8fb4d5cbdb8fb6..290c319778e292 100644
--- a/packages/style-engine/src/styles/index.ts
+++ b/packages/style-engine/src/styles/index.ts
@@ -3,14 +3,12 @@
  */
 import border from './border';
 import color from './color';
-import elements from './elements';
 import spacing from './spacing';
 import typography from './typography';
 
 export const styleDefinitions = [
 	...border,
 	...color,
-	...elements,
 	...spacing,
 	...typography,
 ];
diff --git a/packages/style-engine/src/test/index.js b/packages/style-engine/src/test/index.js
index ef0bf6e22df03f..0e9e592137762b 100644
--- a/packages/style-engine/src/test/index.js
+++ b/packages/style-engine/src/test/index.js
@@ -8,6 +8,15 @@ describe( 'generate', () => {
 		expect( generate( {}, '.some-selector' ) ).toEqual( '' );
 	} );
 
+	it( 'should generate empty style with empty keys', () => {
+		expect(
+			generate( {
+				spacing: undefined,
+				color: undefined,
+			} )
+		).toEqual( '' );
+	} );
+
 	it( 'should generate inline styles where there is no selector', () => {
 		expect(
 			generate( {
@@ -75,20 +84,17 @@ describe( 'generate', () => {
 	it( 'should parse preset values', () => {
 		expect(
 			generate( {
-				elements: {
-					link: {
-						color: {
-							text: 'var:preset|color|ham-sandwich',
-						},
-						spacing: { margin: '3px' },
-					},
+				color: {
+					text: 'var:preset|color|ham-sandwich',
 				},
+				spacing: { margin: '3px' },
 			} )
 		).toEqual(
 			'color: var(--wp--preset--color--ham-sandwich); margin: 3px;'
 		);
 	} );
 
+
 	it( 'should parse border rules', () => {
 		expect(
 			generate( {
@@ -286,21 +292,17 @@ describe( 'getCSSRules', () => {
 		] );
 	} );
 
-	it( 'should handle styles for elements with CSS vars', () => {
+	it( 'should handle styles with CSS vars', () => {
 		expect(
 			getCSSRules(
 				{
-					elements: {
-						link: {
-							color: {
-								text: 'var:preset|color|bomba-picante',
-							},
-							spacing: { padding: '11px' },
-						},
+					color: {
+						text: 'var:preset|color|bomba-picante',
 					},
+					spacing: { padding: '11px' },
 				},
 				{
-					selector: '.some-selector',
+					selector: '.some-selector a',
 				}
 			)
 		).toEqual( [

From 6a35ca172aff2a3a65f35612c774c8aecfde9792 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Fri, 17 Jun 2022 14:33:08 +1000
Subject: [PATCH 04/10] Inlining locators Dismissing Styles Welcome Guide :D

---
 packages/block-editor/src/hooks/style.js | 66 ++++++++++--------------
 1 file changed, 28 insertions(+), 38 deletions(-)

diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
index 846dd655d62974..0331265c0d9ca9 100644
--- a/packages/block-editor/src/hooks/style.js
+++ b/packages/block-editor/src/hooks/style.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, has, isEmpty, omit } from 'lodash';
+import { get, has, omit } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -13,6 +13,7 @@ import {
 	getBlockSupport,
 	hasBlockSupport,
 	__EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY,
+	__EXPERIMENTAL_ELEMENTS as ELEMENTS,
 } from '@wordpress/blocks';
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import {
@@ -100,10 +101,7 @@ export function getInlineStyles( styles = {} ) {
 	// The goal is to move everything to server side generated engine styles
 	// This is temporary as we absorb more and more styles into the engine.
 	// Elements is already handled by compileElementsStyles()
-	const extraRules = getCSSRules( {
-		...styles,
-		elements: undefined,
-	} );
+	const extraRules = getCSSRules( styles );
 	extraRules.forEach( ( rule ) => {
 		output[ rule.key ] = rule.value;
 	} );
@@ -111,25 +109,6 @@ export function getInlineStyles( styles = {} ) {
 	return output;
 }
 
-function compileElementsStyles( selector, elements = {} ) {
-	if ( isEmpty( elements ) ) {
-		return null;
-	}
-
-	const elementStyles = generateStyles( elements, {
-		// The .editor-styles-wrapper selector is required on elements styles. As it is
-		// added to all other editor styles, not providing it causes reset and global
-		// styles to override element styles because of higher specificity.
-		selector: `.editor-styles-wrapper .${ selector }`,
-	} );
-
-	if ( ! elementStyles ) {
-		return null;
-	}
-
-	return elementStyles;
-}
-
 /**
  * Filters registered block settings, extending attributes to include `style` attribute.
  *
@@ -326,25 +305,36 @@ const withElementsStyles = createHigherOrderComponent(
 			'link'
 		);
 
-		const rawElementsStyles = props.attributes.style?.elements;
-
 		// Remove values based on whether serialization has been skipped for a specific style.
+		const rawElementsStyles = props.attributes.style?.elements;
 		const filteredElementsStyles = {
-			elements: {
-				...rawElementsStyles,
-				link: {
-					...rawElementsStyles?.link,
-					color: ! skipLinkColorSerialization
-						? rawElementsStyles?.link?.color
-						: undefined,
-				},
+			...rawElementsStyles,
+			link: {
+				...rawElementsStyles?.link,
+				color: ! skipLinkColorSerialization
+					? rawElementsStyles?.link?.color
+					: undefined,
 			},
 		};
 
-		const styles = compileElementsStyles(
-			blockElementsContainerIdentifier,
-			filteredElementsStyles
+		const styles = Object.entries( filteredElementsStyles ).reduce(
+			( acc, [ elementName, elementStyles ] ) => {
+				const cssRule = generateStyles( elementStyles, {
+					// The .editor-styles-wrapper selector is required on elements styles. As it is
+					// added to all other editor styles, not providing it causes reset and global
+					// styles to override element styles because of higher specificity.
+					selector: `.editor-styles-wrapper .${ blockElementsContainerIdentifier } ${ ELEMENTS[ elementName ] }`,
+				} );
+
+				if ( !! cssRule ) {
+					acc.push( cssRule );
+				}
+
+				return acc;
+			},
+			[]
 		);
+
 		const element = useContext( BlockList.__unstableElementContext );
 
 		return (
@@ -354,7 +344,7 @@ const withElementsStyles = createHigherOrderComponent(
 					createPortal(
 						<style
 							dangerouslySetInnerHTML={ {
-								__html: styles,
+								__html: styles.join( ' ' ),
 							} }
 						/>,
 						element

From 9e325dd1d9764565826fb380b7fbd7997f78559d Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Fri, 17 Jun 2022 14:39:33 +1000
Subject: [PATCH 05/10] Checking for the existence of element styles before
 outputting style tags

---
 packages/block-editor/src/hooks/style.js | 64 +++++++++++++-----------
 1 file changed, 35 insertions(+), 29 deletions(-)

diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
index 0331265c0d9ca9..1b58fd9030220e 100644
--- a/packages/block-editor/src/hooks/style.js
+++ b/packages/block-editor/src/hooks/style.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, has, omit } from 'lodash';
+import { get, has, isEmpty, omit } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -305,41 +305,47 @@ const withElementsStyles = createHigherOrderComponent(
 			'link'
 		);
 
+		let styles = [];
+
 		// Remove values based on whether serialization has been skipped for a specific style.
 		const rawElementsStyles = props.attributes.style?.elements;
-		const filteredElementsStyles = {
-			...rawElementsStyles,
-			link: {
-				...rawElementsStyles?.link,
-				color: ! skipLinkColorSerialization
-					? rawElementsStyles?.link?.color
-					: undefined,
-			},
-		};
-
-		const styles = Object.entries( filteredElementsStyles ).reduce(
-			( acc, [ elementName, elementStyles ] ) => {
-				const cssRule = generateStyles( elementStyles, {
-					// The .editor-styles-wrapper selector is required on elements styles. As it is
-					// added to all other editor styles, not providing it causes reset and global
-					// styles to override element styles because of higher specificity.
-					selector: `.editor-styles-wrapper .${ blockElementsContainerIdentifier } ${ ELEMENTS[ elementName ] }`,
-				} );
-
-				if ( !! cssRule ) {
-					acc.push( cssRule );
-				}
 
-				return acc;
-			},
-			[]
-		);
+		if ( ! isEmpty( rawElementsStyles ) ) {
+			const filteredElementsStyles = {
+				...rawElementsStyles,
+				link: {
+					...rawElementsStyles?.link,
+					color: ! skipLinkColorSerialization
+						? rawElementsStyles?.link?.color
+						: undefined,
+				},
+			};
+
+			styles = Object.entries( filteredElementsStyles ).reduce(
+				( acc, [ elementName, elementStyles ] ) => {
+					const cssRule = generateStyles( elementStyles, {
+						// The .editor-styles-wrapper selector is required on elements styles. As it is
+						// added to all other editor styles, not providing it causes reset and global
+						// styles to override element styles because of higher specificity.
+						selector: `.editor-styles-wrapper .${ blockElementsContainerIdentifier } ${ ELEMENTS[ elementName ] }`,
+					} );
+
+					if ( !! cssRule ) {
+						acc.push( cssRule );
+					}
+
+					return acc;
+				},
+				[]
+			);
+		}
 
 		const element = useContext( BlockList.__unstableElementContext );
+		const hasElementStyles = styles.length;
 
 		return (
 			<>
-				{ styles &&
+				{ hasElementStyles &&
 					element &&
 					createPortal(
 						<style
@@ -353,7 +359,7 @@ const withElementsStyles = createHigherOrderComponent(
 				<BlockListBlock
 					{ ...props }
 					className={
-						styles
+						hasElementStyles
 							? classnames(
 									props.className,
 									blockElementsContainerIdentifier

From a8b3fae9b9f7158393540b21d6b464a431eafbd3 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Mon, 20 Jun 2022 19:54:24 +1000
Subject: [PATCH 06/10] Memoizing styles result Removing isEmpty Cleaning up
 optional chaining

---
 packages/block-editor/src/hooks/style.js | 63 ++++++++++++------------
 1 file changed, 31 insertions(+), 32 deletions(-)

diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
index 1b58fd9030220e..31fb1bfdd24d45 100644
--- a/packages/block-editor/src/hooks/style.js
+++ b/packages/block-editor/src/hooks/style.js
@@ -1,13 +1,13 @@
 /**
  * External dependencies
  */
-import { get, has, isEmpty, omit } from 'lodash';
+import { get, has, omit } from 'lodash';
 import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
-import { useContext, createPortal } from '@wordpress/element';
+import { useContext, useMemo, createPortal } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 import {
 	getBlockSupport,
@@ -305,52 +305,51 @@ const withElementsStyles = createHigherOrderComponent(
 			'link'
 		);
 
-		let styles = [];
-
-		// Remove values based on whether serialization has been skipped for a specific style.
-		const rawElementsStyles = props.attributes.style?.elements;
-
-		if ( ! isEmpty( rawElementsStyles ) ) {
-			const filteredElementsStyles = {
-				...rawElementsStyles,
-				link: {
-					...rawElementsStyles?.link,
-					color: ! skipLinkColorSerialization
-						? rawElementsStyles?.link?.color
-						: undefined,
-				},
-			};
-
-			styles = Object.entries( filteredElementsStyles ).reduce(
-				( acc, [ elementName, elementStyles ] ) => {
+		const styles = useMemo( () => {
+			const rawElementsStyles = props.attributes.style?.elements;
+			const elementCssRules = [];
+			if (
+				rawElementsStyles &&
+				Object.keys( rawElementsStyles ).length > 0
+			) {
+				// Remove values based on whether serialization has been skipped for a specific style.
+				const filteredElementsStyles = {
+					...rawElementsStyles,
+					link: {
+						...rawElementsStyles.link,
+						color: ! skipLinkColorSerialization
+							? rawElementsStyles.link?.color
+							: undefined,
+					},
+				};
+
+				for ( const [ elementName, elementStyles ] of Object.entries(
+					filteredElementsStyles
+				) ) {
 					const cssRule = generateStyles( elementStyles, {
 						// The .editor-styles-wrapper selector is required on elements styles. As it is
 						// added to all other editor styles, not providing it causes reset and global
 						// styles to override element styles because of higher specificity.
 						selector: `.editor-styles-wrapper .${ blockElementsContainerIdentifier } ${ ELEMENTS[ elementName ] }`,
 					} );
-
 					if ( !! cssRule ) {
-						acc.push( cssRule );
+						elementCssRules.push( cssRule );
 					}
-
-					return acc;
-				},
-				[]
-			);
-		}
+				}
+			}
+			return elementCssRules.length > 0 ? elementCssRules : undefined;
+		}, [ props.attributes.style?.elements ] );
 
 		const element = useContext( BlockList.__unstableElementContext );
-		const hasElementStyles = styles.length;
 
 		return (
 			<>
-				{ hasElementStyles &&
+				{ styles &&
 					element &&
 					createPortal(
 						<style
 							dangerouslySetInnerHTML={ {
-								__html: styles.join( ' ' ),
+								__html: styles.join( '\n' ),
 							} }
 						/>,
 						element
@@ -359,7 +358,7 @@ const withElementsStyles = createHigherOrderComponent(
 				<BlockListBlock
 					{ ...props }
 					className={
-						hasElementStyles
+						props.attributes.style?.elements
 							? classnames(
 									props.className,
 									blockElementsContainerIdentifier

From 9c0bbf5bc7e391db125114b274b236800b648b3a Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Tue, 28 Jun 2022 14:47:57 +1000
Subject: [PATCH 07/10] Fixing linting errors on md file

---
 package-lock.json                  | 1 -
 packages/style-engine/package.json | 1 -
 2 files changed, 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6084138e5be495..f8e9c4aba0abf8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18126,7 +18126,6 @@
 			"version": "file:packages/style-engine",
 			"requires": {
 				"@babel/runtime": "^7.16.0",
-				"@wordpress/blocks": "file:packages/blocks",
 				"lodash": "^4.17.21"
 			}
 		},
diff --git a/packages/style-engine/package.json b/packages/style-engine/package.json
index 9b532fc9ee7be8..65d02d6e51c177 100644
--- a/packages/style-engine/package.json
+++ b/packages/style-engine/package.json
@@ -29,7 +29,6 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/blocks": "file:../blocks",
 		"lodash": "^4.17.21"
 	},
 	"publishConfig": {

From 06eab43ab9da71b0eae534dbacfec4a7fcce2795 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Tue, 28 Jun 2022 15:02:11 +1000
Subject: [PATCH 08/10] Lint fixes

---
 packages/style-engine/src/test/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/style-engine/src/test/index.js b/packages/style-engine/src/test/index.js
index 0e9e592137762b..c2fad7f77d39a0 100644
--- a/packages/style-engine/src/test/index.js
+++ b/packages/style-engine/src/test/index.js
@@ -94,7 +94,6 @@ describe( 'generate', () => {
 		);
 	} );
 
-
 	it( 'should parse border rules', () => {
 		expect(
 			generate( {

From bd5a4e2366279cad387c18e1d56bae47f21d68ed Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Wed, 6 Jul 2022 10:37:18 +1000
Subject: [PATCH 09/10] We don't need to join style, only join together in
 peaceful harmony as fellow humans

---
 packages/block-editor/src/hooks/style.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
index 31fb1bfdd24d45..098d15ed97f21f 100644
--- a/packages/block-editor/src/hooks/style.js
+++ b/packages/block-editor/src/hooks/style.js
@@ -349,7 +349,7 @@ const withElementsStyles = createHigherOrderComponent(
 					createPortal(
 						<style
 							dangerouslySetInnerHTML={ {
-								__html: styles.join( '\n' ),
+								__html: styles,
 							} }
 						/>,
 						element

From 4da5f69b9beaa7a1307a2384ed48cf721b270d49 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Thu, 7 Jul 2022 09:10:55 +1000
Subject: [PATCH 10/10] Removed comment that refers to a deleted function
 (compileElementsStyles).

---
 packages/block-editor/src/hooks/style.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
index 098d15ed97f21f..7627cd545b6857 100644
--- a/packages/block-editor/src/hooks/style.js
+++ b/packages/block-editor/src/hooks/style.js
@@ -100,7 +100,6 @@ export function getInlineStyles( styles = {} ) {
 
 	// The goal is to move everything to server side generated engine styles
 	// This is temporary as we absorb more and more styles into the engine.
-	// Elements is already handled by compileElementsStyles()
 	const extraRules = getCSSRules( styles );
 	extraRules.forEach( ( rule ) => {
 		output[ rule.key ] = rule.value;