Use toggle button

Apply global styles reset in resetAllFilters Appearance and line height reset methods
WordPress · Dec 8, 2022 · 7877bc0 · 7877bc0
1 parent e0950bc
commit 7877bc0
Show file tree

Hide file tree

Showing 7 changed files with 148 additions and 71 deletions.
diff --git a/packages/block-editor/README.md b/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

diff --git a/packages/block-editor/src/hooks/font-appearance.js b/packages/block-editor/src/hooks/font-appearance.js
@@ -31,6 +31,7 @@ export function FontAppearanceEdit( props ) {
 	const {
 		attributes: { style },
 		setAttributes,
+		setBlockGlobalStyles,
 	} = props;
 
 	const hasFontStyles = ! useIsFontStyleDisabled( props );
@@ -47,6 +48,8 @@ export function FontAppearanceEdit( props ) {
 				},
 			} ),
 		} );
+		setBlockGlobalStyles( 'typography.fontStyle', newStyles.fontStyle );
+		setBlockGlobalStyles( 'typography.fontWeight', newStyles.fontWeight );
 	};
 
 	const fontStyle = style?.typography?.fontStyle;
@@ -126,11 +129,16 @@ export function hasFontAppearanceValue( props ) {
  * when disabling the font appearance 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 resetFontAppearance( { attributes = {}, setAttributes } ) {
+export function resetFontAppearance( {
+	attributes = {},
+	setAttributes,
+	setBlockGlobalStyles,
+} ) {
 	const { style } = attributes;
 
 	setAttributes( {
@@ -143,4 +151,6 @@ export function resetFontAppearance( { attributes = {}, setAttributes } ) {
 			},
 		} ),
 	} );
+	setBlockGlobalStyles( 'typography.fontStyle', undefined );
+	setBlockGlobalStyles( 'typography.fontWeight', undefined );
 }
diff --git a/packages/block-editor/src/hooks/line-height.js b/packages/block-editor/src/hooks/line-height.js
@@ -77,11 +77,16 @@ export function hasLineHeightValue( props ) {
  * disabling the line height 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 resetLineHeight( { attributes = {}, setAttributes } ) {
+export function resetLineHeight( {
+	attributes = {},
+	setAttributes,
+	setBlockGlobalStyles,
+} ) {
 	const { style } = attributes;
 
 	setAttributes( {
@@ -93,4 +98,5 @@ export function resetLineHeight( { attributes = {}, setAttributes } ) {
 			},
 		} ),
 	} );
+	setBlockGlobalStyles( LINE_HEIGHT_SUPPORT_KEY, undefined );
 }
diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
@@ -339,6 +339,7 @@ export function addEditProps( settings ) {
 function StylePanels( props ) {
 	const newProps = {
 		...props,
+		// Assign a noop value for method that only appears in site editor.
 		setBlockGlobalStyles: () => {},
 	};
 	return (

diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js
@@ -1,11 +1,10 @@
-	/**
+/**
  * WordPress dependencies
  */
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
 import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-
 /**
  * Internal dependencies
  */
@@ -100,16 +99,26 @@ export function TypographyPanel( props ) {
 		'__experimentalDefaultControls',
 	] );
 
-	const createResetAllFilter = ( attribute ) => ( newAttributes ) => ( {
-		...newAttributes,
-		style: {
-			...newAttributes.style,
-			typography: {
-				...newAttributes.style?.typography,
-				[ attribute ]: undefined,
-			},
-		},
-	} );
+	const createResetAllFilter =
+		( styleProperty, customAttribute ) => ( newAttributes ) => {
+			props?.setBlockGlobalStyles(
+				`typography.${ styleProperty }`,
+				undefined
+			);
+			return {
+				...newAttributes,
+				...( !! customAttribute && { [ customAttribute ]: undefined } ),
+				style: {
+					...newAttributes.style,
+					typography: {
+						...newAttributes.style?.typography,
+						...( !! styleProperty && {
+							[ styleProperty ]: undefined,
+						} ),
+					},
+				},
+			};
+		};
 
 	return (
 		<InspectorControls __experimentalGroup="typography">
@@ -119,10 +128,10 @@ export function TypographyPanel( props ) {
 					label={ __( 'Font family' ) }
 					onDeselect={ () => resetFontFamily( props ) }
 					isShownByDefault={ defaultControls?.fontFamily }
-					resetAllFilter={ ( newAttributes ) => ( {
-						...newAttributes,
-						fontFamily: undefined,
-					} ) }
+					resetAllFilter={ createResetAllFilter(
+						'fontFamily',
+						'fontFamily'
+					) }
 					panelId={ clientId }
 				>
 					<FontFamilyEdit { ...props } />
@@ -135,17 +144,10 @@ export function TypographyPanel( props ) {
 					label={ __( 'Font size' ) }
 					onDeselect={ () => resetFontSize( props ) }
 					isShownByDefault={ defaultControls?.fontSize }
-					resetAllFilter={ ( newAttributes ) => ( {
-						...newAttributes,
-						fontSize: undefined,
-						style: {
-							...newAttributes.style,
-							typography: {
-								...newAttributes.style?.typography,
-								fontSize: undefined,
-							},
-						},
-					} ) }
+					resetAllFilter={ createResetAllFilter(
+						'fontSize',
+						'fontSize'
+					) }
 					panelId={ clientId }
 				>
 					<FontSizeEdit { ...props } />
@@ -161,17 +163,27 @@ export function TypographyPanel( props ) {
 					) }
 					onDeselect={ () => resetFontAppearance( props ) }
 					isShownByDefault={ defaultControls?.fontAppearance }
-					resetAllFilter={ ( newAttributes ) => ( {
-						...newAttributes,
-						style: {
-							...newAttributes.style,
-							typography: {
-								...newAttributes.style?.typography,
-								fontStyle: undefined,
-								fontWeight: undefined,
+					resetAllFilter={ ( newAttributes ) => {
+						props.setBlockGlobalStyles(
+							'typography.fontStyle',
+							undefined
+						);
+						props.setBlockGlobalStyles(
+							'typography.fontWeight',
+							undefined
+						);
+						return {
+							...newAttributes,
+							style: {
+								...newAttributes.style,
+								typography: {
+									...newAttributes.style?.typography,
+									fontStyle: undefined,
+									fontWeight: undefined,
+								},
 							},
-						},
-					} ) }
+						};
+					} }
 					panelId={ clientId }
 				>
 					<FontAppearanceEdit { ...props } />

diff --git a/packages/edit-site/src/hooks/block-supports-styles.js b/packages/edit-site/src/hooks/block-supports-styles.js
@@ -17,7 +17,7 @@ import {
 	useDisplayBlockControls,
 	InspectorControls,
 } from '@wordpress/block-editor';
-import { Button, PanelBody } from '@wordpress/components';
+import { ToggleControl } from '@wordpress/components';
 import { getCSSVarFromStyleValue } from '@wordpress/style-engine';
 import { __ } from '@wordpress/i18n';
 
@@ -46,7 +46,11 @@ export const withEditBlockControls = createHigherOrderComponent(
 					const newUserConfig = JSON.parse(
 						JSON.stringify( currentConfig )
 					);
-					set( newUserConfig, fullPath, getCSSVarFromStyleValue( newValue ) );
+					set(
+						newUserConfig,
+						fullPath,
+						getCSSVarFromStyleValue( newValue )
+					);
 					return newUserConfig;
 				} );
 			},
@@ -61,30 +65,26 @@ export const withEditBlockControls = createHigherOrderComponent(
 						<BorderPanel { ...blockSupportControlProps } />
 						<DimensionsPanel { ...blockSupportControlProps } />
 						<InspectorControls __experimentalGroup="advanced">
-							<PanelBody
-								title={ __( 'Apply styles to all blocks' ) }
-							>
-								<Button
-									variant={
-										! shouldPushToGlobalStyles
-											? 'primary'
-											: 'secondary'
-									}
-									isPressed={ shouldPushToGlobalStyles }
-									onClick={ () => {
-										setShouldPushToGlobalStyles(
-											! shouldPushToGlobalStyles
-										);
-									} }
-								>
-									{ shouldPushToGlobalStyles ? __( 'Do not apply changes' ) : __( 'Apply changes' ) }
-								</Button>
-								<p>
-									{ __(
-										"When activated, all changes to this block's styles will be applied to all blocks of this type. Note that only typography, dimensions, color and border styles will be copied."
-									) }
-								</p>
-							</PanelBody>
+							<ToggleControl
+								checked={ shouldPushToGlobalStyles }
+								onChange={ () => {
+									setShouldPushToGlobalStyles(
+										( state ) => ! state
+									);
+								} }
+								label={
+									shouldPushToGlobalStyles
+										? __( 'Apply styles to all blocks' )
+										: __(
+												'Do not apply styles to all blocks'
+										  )
+								}
+								type="checkbox"
+								size="small"
+								help={ __(
+									"When activated, all changes to this block's styles will be applied to all blocks of this type. Note that only typography, dimensions, color and border styles will be copied."
+								) }
+							/>
 						</InspectorControls>
 					</>
 				) }

diff --git a/packages/style-engine/README.md b/packages/style-engine/README.md
@@ -237,6 +237,18 @@ _Changelog_
 
 `6.1.0` Introduced in WordPress core.
 
+### getCSSVarFromStyleValue
+
+Returns a CSS var value from incoming style value following the pattern `var:description|context|slug`.
+
+_Parameters_
+
+-   _styleValue_ `string`: A raw style value.
+
+_Returns_
+
+-   `string`: string A CSS var value.
+
 <!-- END TOKEN(Autogenerated API docs) -->
 
 ## Glossary