Push local block styles to global block style

packages/block-editor/README.md

@@ -282,6 +282,10 @@ _Related_
 
 -   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-vertical-alignment-control/README.md>
 
+### BorderPanel
+
+Undocumented declaration.
+
 ### ButtonBlockAppender
 
 _Related_
@@ -294,6 +298,18 @@ _Related_
 
 Use `ButtonBlockAppender` instead.
 
+### ColorEdit
+
+Inspector control panel containing the color related configuration
+
+_Parameters_
+
+-   _props_ `Object`:
+
+_Returns_
+
+-   `WPElement`: Color edit element.
+
 ### ColorPalette
 
 Undocumented declaration.
@@ -348,6 +364,18 @@ _Returns_
 
 Undocumented declaration.
 
+### DimensionsPanel
+
+Inspector controls for dimensions support.
+
+_Parameters_
+
+-   _props_ `Object`: Block props.
+
+_Returns_
+
+-   `WPElement`: Inspector controls for dimensions and spacing support features.
+
 ### FontSizePicker
 
 _Related_
@@ -706,6 +734,10 @@ Ensures that the text selection keeps the same vertical distance from the
 viewport during keyboard events within this component. The vertical distance
 can vary. It is the last clicked or scrolled to position.
 
+### TypographyPanel
+
+Undocumented declaration.
+
 ### URLInput
 
 _Related_
@@ -787,6 +819,10 @@ _Returns_
 
 -   `any`: value
 
+### useDisplayBlockControls
+
+Undocumented declaration.
+
 ### useInnerBlocksProps
 
 This hook is used to lightly mark an element as an inner blocks wrapper

packages/block-editor/src/components/index.js

@@ -157,7 +157,7 @@ export {
 export { default as __experimentalBlockPatternsList } from './block-patterns-list';
 export { default as __experimentalPublishDateTimePicker } from './publish-date-time-picker';
 export { default as __experimentalInspectorPopoverHeader } from './inspector-popover-header';
-
+export { default as useDisplayBlockControls } from './use-display-block-controls';
 /*
  * State Related Components
  */

packages/block-editor/src/hooks/border-radius.js

@@ -16,6 +16,7 @@ export function BorderRadiusEdit( props ) {
 	const {
 		attributes: { style },
 		setAttributes,
+		setBlockGlobalStyles,
 	} = props;
 
 	const onChange = ( newRadius ) => {
@@ -28,6 +29,7 @@ export function BorderRadiusEdit( props ) {
 		} );
 
 		setAttributes( { style: newStyle } );
+		setBlockGlobalStyles( 'border.radius', newRadius );
 	};
 
 	return (
@@ -60,11 +62,17 @@ export function hasBorderRadiusValue( props ) {
  * disabling the border radius support controls for a block via a progressive
  * discovery panel.
  *
- * @param {Object} props               Block props.
- * @param {Object} props.attributes    Block's attributes.
- * @param {Object} props.setAttributes Function to set block's attributes.
+ * @param {Object} props                      Block props.
+ * @param {Object} props.attributes           Block's attributes.
+ * @param {Function} props.setAttributes        Function to set block's attributes.
+ * @param {Function} props.setBlockGlobalStyles Function to set block's global styles.
  */
-export function resetBorderRadius( { attributes = {}, setAttributes } ) {
+export function resetBorderRadius( {
+	attributes = {},
+	setAttributes,
+	setBlockGlobalStyles,
+} ) {
 	const { style } = attributes;
 	setAttributes( { style: removeBorderAttribute( style, 'radius' ) } );
+	setBlockGlobalStyles( 'border.radius', undefined );
 }

packages/block-editor/src/hooks/border.js

@@ -43,29 +43,41 @@ const hasBorderValue = ( props ) => {
 
 // The border color, style, and width are omitted so they get undefined. The
 // border radius is separate and must retain its selection.
-const resetBorder = ( { attributes = {}, setAttributes } ) => {
+const resetBorder = ( {
+	attributes = {},
+	setAttributes,
+	setBlockGlobalStyles,
+} ) => {
 	const { style } = attributes;
+	const border = cleanEmptyObject( {
+		radius: style?.border?.radius,
+	} );
 	setAttributes( {
 		borderColor: undefined,
 		style: {
 			...style,
-			border: cleanEmptyObject( {
-				radius: style?.border?.radius,
-			} ),
+			border,
 		},
 	} );
+
+	setBlockGlobalStyles( 'border', border );
 };
 
-const resetBorderFilter = ( newAttributes ) => ( {
-	...newAttributes,
-	borderColor: undefined,
-	style: {
-		...newAttributes.style,
-		border: {
-			radius: newAttributes.style?.border?.radius,
+const resetBorderFilter = ( newAttributes, { setBlockGlobalStyles } ) => {
+	setBlockGlobalStyles( 'border', {
+		radius: newAttributes.style?.border?.radius,
+	} );
+	return {
+		...newAttributes,
+		borderColor: undefined,
+		style: {
+			...newAttributes.style,
+			border: {
+				radius: newAttributes.style?.border?.radius,
+			},
 		},
-	},
-} );
+	};
+};
 
 const getColorByProperty = ( colors, property, value ) => {
 	let matchedColor;
@@ -157,7 +169,7 @@ function getColorSlugFromVariable( value ) {
 }
 
 export function BorderPanel( props ) {
-	const { attributes, clientId, setAttributes } = props;
+	const { attributes, clientId, setAttributes, setBlockGlobalStyles } = props;
 	const { style } = attributes;
 	const { colors } = useMultipleOriginColorsAndGradients();
 
@@ -250,6 +262,15 @@ export function BorderPanel( props ) {
 			style: newStyle,
 			borderColor: newBorderColor,
 		} );
+
+		// @TODO check if this will overwrite existing, saved global styles.
+		setBlockGlobalStyles( 'border', {
+			radius: style?.border?.radius,
+			...newBorderStyles,
+			color: newBorderColor
+				? `var:preset|color|${ newBorderColor }`
+				: newBorderStyles.color,
+		} );
 	};
 
 	const hydratedBorder = getBorderObject( attributes, colors );
@@ -262,7 +283,9 @@ export function BorderPanel( props ) {
 					label={ __( 'Border' ) }
 					onDeselect={ () => resetBorder( props ) }
 					isShownByDefault={ showBorderByDefault }
-					resetAllFilter={ resetBorderFilter }
+					resetAllFilter={ ( newAttributes ) =>
+						resetBorderFilter( newAttributes, props )
+					}
 					panelId={ clientId }
 				>
 					<BorderBoxControl

packages/block-editor/src/hooks/color.js

@@ -96,46 +96,62 @@ const clearColorFromStyles = ( path, style ) =>
 /**
  * Clears text color related properties from supplied attributes.
  *
- * @param {Object} attributes Block attributes.
+ * @param {Object}   attributes                 Block attributes.
+ * @param {Object}   root0
+ * @param {Function} root0.setBlockGlobalStyles A function to set global style for a block.
  * @return {Object} Update block attributes with text color properties omitted.
  */
-const resetAllTextFilter = ( attributes ) => ( {
-	textColor: undefined,
-	style: clearColorFromStyles( [ 'color', 'text' ], attributes.style ),
-} );
+const resetAllTextFilter = ( attributes, { setBlockGlobalStyles } ) => {
+	setBlockGlobalStyles( 'color.text', undefined );
+	return {
+		textColor: undefined,
+		style: clearColorFromStyles( [ 'color', 'text' ], attributes.style ),
+	};
+};
 
 /**
  * Clears link color related properties from supplied attributes.
  *
- * @param {Object} attributes Block attributes.
+ * @param {Object}   attributes                 Block attributes.
+ * @param {Object}   root0
+ * @param {Function} root0.setBlockGlobalStyles A function to set global style for a block.
  * @return {Object} Update block attributes with link color properties omitted.
  */
-const resetAllLinkFilter = ( attributes ) => ( {
-	style: clearColorFromStyles(
-		[ 'elements', 'link', 'color', 'text' ],
-		attributes.style
-	),
-} );
+const resetAllLinkFilter = ( attributes, { setBlockGlobalStyles } ) => {
+	setBlockGlobalStyles( 'elements.link.color.text', undefined );
+	return {
+		style: clearColorFromStyles(
+			[ 'elements', 'link', 'color', 'text' ],
+			attributes.style
+		),
+	};
+};
 
 /**
  * Clears all background color related properties including gradients from
  * supplied block attributes.
  *
- * @param {Object} attributes Block attributes.
+ * @param {Object}   attributes                 Block attributes.
+ * @param {Object}   root0
+ * @param {Function} root0.setBlockGlobalStyles A function to set global style for a block
  * @return {Object} Block attributes with background and gradient omitted.
  */
-const clearBackgroundAndGradient = ( attributes ) => ( {
-	backgroundColor: undefined,
-	gradient: undefined,
-	style: {
-		...attributes.style,
-		color: {
-			...attributes.style?.color,
-			background: undefined,
-			gradient: undefined,
+const clearBackgroundAndGradient = ( attributes, { setBlockGlobalStyles } ) => {
+	setBlockGlobalStyles( 'color.background', undefined );
+	setBlockGlobalStyles( 'color.gradient', undefined );
+	return {
+		backgroundColor: undefined,
+		gradient: undefined,
+		style: {
+			...attributes.style,
+			color: {
+				...attributes.style?.color,
+				background: undefined,
+				gradient: undefined,
+			},
 		},
-	},
-} );
+	};
+};
 
 /**
  * Filters registered block settings, extending attributes to include
@@ -290,7 +306,7 @@ const getLinkColorFromAttributeValue = ( colors, value ) => {
  * @return {WPElement} Color edit element.
  */
 export function ColorEdit( props ) {
-	const { name: blockName, attributes } = props;
+	const { name: blockName, attributes, setBlockGlobalStyles } = props;
 	// Some color settings have a special handling for deprecated flags in `useSetting`,
 	// so we can't unwrap them by doing const { ... } = useSetting('color')
 	// until https://github.com/WordPress/gutenberg/issues/37094 is fixed.
@@ -393,6 +409,11 @@ export function ColorEdit( props ) {
 			...localAttributes.current,
 			...newAttributes,
 		};
+
+		setBlockGlobalStyles(
+			`color.${ name }`,
+			colorObject?.slug ? `var:preset|color|${ colorObject.slug }` : value
+		);
 	};
 
 	const onChangeGradient = ( value ) => {
@@ -424,6 +445,10 @@ export function ColorEdit( props ) {
 			};
 		}
 		props.setAttributes( newAttributes );
+		setBlockGlobalStyles(
+			'color.gradient',
+			slug ? `var:preset|gradient|${ slug }` : value
+		);
 		localAttributes.current = {
 			...localAttributes.current,
 			...newAttributes,
@@ -444,6 +469,7 @@ export function ColorEdit( props ) {
 			)
 		);
 		props.setAttributes( { style: newStyle } );
+		setBlockGlobalStyles( 'elements.link.color.text', newLinkColorValue );
 		localAttributes.current = {
 			...localAttributes.current,
 			...{ style: newStyle },
@@ -487,7 +513,9 @@ export function ColorEdit( props ) {
 									style?.color?.text
 								).color,
 								isShownByDefault: defaultColorControls?.text,
-								resetAllFilter: resetAllTextFilter,
+								resetAllFilter: ( newAttributes ) => {
+									resetAllTextFilter( newAttributes, props );
+								},
 							},
 					  ]
 					: [] ),
@@ -509,7 +537,12 @@ export function ColorEdit( props ) {
 									: undefined,
 								isShownByDefault:
 									defaultColorControls?.background,
-								resetAllFilter: clearBackgroundAndGradient,
+								resetAllFilter: ( newAttributes ) => {
+									clearBackgroundAndGradient(
+										newAttributes,
+										props
+									);
+								},
 							},
 					  ]
 					: [] ),
@@ -525,7 +558,9 @@ export function ColorEdit( props ) {
 								clearable:
 									!! style?.elements?.link?.color?.text,
 								isShownByDefault: defaultColorControls?.link,
-								resetAllFilter: resetAllLinkFilter,
+								resetAllFilter: ( newAttributes ) => {
+									resetAllLinkFilter( newAttributes, props );
+								},
 							},
 					  ]
 					: [] ),