Add handling of feature selectors

WordPress · Dec 19, 2022 · 8f51e02 · 8f51e02
1 parent dd82d71
commit 8f51e02
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 2 deletions.
diff --git a/packages/edit-site/src/components/global-styles/border-panel.js b/packages/edit-site/src/components/global-styles/border-panel.js
@@ -97,8 +97,12 @@ function applyAllFallbackStyles( border ) {
 export default function BorderPanel( { name, variationPath = '' } ) {
 	// To better reflect if the user has customized a value we need to
 	// ensure the style value being checked is from the `user` origin.
-	const [ userBorderStyles ] = useStyle( 'border', name, 'user' );
-	const [ border, setBorder ] = useStyle( 'border', name );
+	const [ userBorderStyles ] = useStyle(
+		`${ variationPath }border`,
+		name,
+		'user'
+	);
+	const [ border, setBorder ] = useStyle( `${ variationPath }border`, name );
 	const colors = useColorsPerOrigin( name );
 
 	const showBorderColor = useHasBorderColorControl( name );

diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
@@ -691,6 +691,60 @@ export const toStyles = (
 				Object.entries( styleVariationSelectors ).forEach(
 					( [ styleVariationName, styleVariationSelector ] ) => {
 						if ( styles?.variations?.[ styleVariationName ] ) {
+							// If the block uses any custom selectors for block support, add those first.
+							if ( featureSelectors ) {
+								Object.entries( featureSelectors ).forEach(
+									( [ featureName, featureSelector ] ) => {
+										if (
+											styles?.variations?.[
+												styleVariationName
+											]?.[ featureName ]
+										) {
+											const featureStyles = {
+												[ featureName ]:
+													styles.variations[
+														styleVariationName
+													][ featureName ],
+											};
+											const featureDeclarations =
+												getStylesDeclarations(
+													featureStyles
+												);
+											delete styles.variations[
+												styleVariationName
+											][ featureName ];
+
+											if (
+												!! featureDeclarations.length
+											) {
+												const _featureSelectors =
+													featureSelector.split(
+														','
+													);
+												const combinedSelectors = [];
+												_featureSelectors.forEach(
+													( _featureSelector ) => {
+														combinedSelectors.push(
+															`${ styleVariationSelector.trim() }${ _featureSelector.trim() }`
+														);
+													}
+												);
+												const combinedSelectorString =
+													combinedSelectors.join(
+														', '
+													);
+
+												ruleset =
+													ruleset +
+													`${ combinedSelectorString }{${ featureDeclarations.join(
+														';'
+													) } }`;
+											}
+										}
+									}
+								);
+							}
+							// Otherwise add regular selectors.
 							const styleVariationDeclarations =
 								getStylesDeclarations(
 									styles?.variations?.[ styleVariationName ],