Add element styles for inner blocks within a variation to site editor

WordPress · Jan 11, 2024 · 562a9fa · 562a9fa
1 parent a003477
commit 562a9fa
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 0 deletions.
diff --git a/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
@@ -41,6 +41,23 @@ describe( 'global styles renderer', () => {
 												fontSize: '3em',
 											},
 										},
+										'core/media-text': {
+											color: {
+												text: 'maroon',
+											},
+											elements: {
+												link: {
+													color: {
+														text: 'firebrick',
+													},
+													':hover': {
+														color: {
+															text: 'coral',
+														},
+													},
+												},
+											},
+										},
 									},
 									elements: {
 										link: {
@@ -131,6 +148,9 @@ describe( 'global styles renderer', () => {
 					selector: '.my-image',
 					featureSelectors: '.my-image img, .my-image .crop-area',
 				},
+				'core/media-text': {
+					selector: '.media-text',
+				},
 			};
 
 			expect( getNodesWithStyles( tree, blockSelectors ) ).toEqual( [
@@ -173,6 +193,27 @@ describe( 'global styles renderer', () => {
 						},
 					},
 				},
+				{
+					selector: '.is-style-foo.my-group .media-text',
+					styles: {
+						color: {
+							text: 'maroon',
+						},
+					},
+				},
+				{
+					selector: '.is-style-foo.my-group .media-text a',
+					styles: {
+						color: {
+							text: 'firebrick',
+						},
+						':hover': {
+							color: {
+								text: 'coral',
+							},
+						},
+					},
+				},
 				{
 					selector: '.is-style-foo.my-group a',
 					styles: {

diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
@@ -717,6 +717,32 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 										variationBlockStyles
 									),
 								} );
+
+								// Process element styles for the inner blocks
+								// of the variation.
+								Object.entries(
+									variationBlockStyles.elements ?? {}
+								).forEach(
+									( [
+										variationBlockElement,
+										variationBlockElementStyles,
+									] ) => {
+										if (
+											variationBlockElementStyles &&
+											ELEMENTS[ variationBlockElement ]
+										) {
+											nodes.push( {
+												styles: variationBlockElementStyles,
+												selector: scopeSelector(
+													variationBlockSelector,
+													ELEMENTS[
+														variationBlockElement
+													]
+												),
+											} );
+										}
+									}
+								);
 							}
 						);