This commit adds a new filter for block supports controls for global …

…styles so we can hook into the global styles context.

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

@@ -156,7 +156,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/gap.js

@@ -129,6 +129,7 @@ export function GapEdit( props ) {
 		attributes: { style },
 		name: blockName,
 		setAttributes,
+		setBlockGlobalStyles,
 	} = props;
 
 	const spacingSizes = useSetting( 'spacing.spacingSizes' );
@@ -175,6 +176,11 @@ export function GapEdit( props ) {
 			style: cleanEmptyObject( newStyle ),
 		} );
 
+		setBlockGlobalStyles(
+			'spacing.blockGap',
+			cleanEmptyObject( newStyle )
+		);
+
 		// In Safari, changing the `gap` CSS value on its own will not trigger the layout
 		// to be recalculated / re-rendered. To force the updated gap to re-render, here
 		// we replace the block's node with itself.

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

@@ -27,3 +27,7 @@ export { getSpacingClassesAndStyles } from './use-spacing-props';
 export { getTypographyClassesAndStyles } from './use-typography-props';
 export { getGapCSSValue } from './gap';
 export { useCachedTruthy } from './use-cached-truthy';
+export { BORDER_SUPPORT_KEY, BorderPanel } from './border';
+export { COLOR_SUPPORT_KEY, ColorEdit } from './color';
+export { TypographyPanel, TYPOGRAPHY_SUPPORT_KEY } from './typography';
+export { SPACING_SUPPORT_KEY, DimensionsPanel } from './dimensions';

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

@@ -137,10 +137,7 @@ export function PaddingEdit( props ) {
 			style: cleanEmptyObject( newStyle ),
 		} );
 
-		setBlockGlobalStyles(
-			'spacing.padding',
-			cleanEmptyObject( newStyle )
-		);
+		setBlockGlobalStyles( 'spacing.padding', cleanEmptyObject( newStyle ) );
 	};
 
 	return Platform.select( {

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

@@ -425,14 +425,12 @@ export const withBlockControls = createHigherOrderComponent(
 		const shouldDisplayControls = useDisplayBlockControls();
 
 		return (
-			<>
+			<BlockGlobalStylesProvider>
 				{ shouldDisplayControls && (
-					<BlockGlobalStylesProvider>
-						<StylePanels { ...props } />
-					</BlockGlobalStylesProvider>
+					<StylePanels { ...props } />
 				) }
 				<BlockEdit { ...props } />
-			</>
+			</BlockGlobalStylesProvider>
 		);
 	},
 	'withToolbarControls'

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

@@ -1,4 +1,4 @@
-/**
+	/**
  * WordPress dependencies
  */
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';

packages/block-editor/src/index.js

@@ -14,6 +14,10 @@ export {
 	useCachedTruthy,
 	useLayoutClasses as __experimentaluseLayoutClasses,
 	useLayoutStyles as __experimentaluseLayoutStyles,
+	ColorEdit,
+	TypographyPanel,
+	BorderPanel,
+	DimensionsPanel,
 } from './hooks';
 export * from './components';
 export * from './elements';

packages/edit-site/src/components/global-styles/use-global-styles-output.js

@@ -18,6 +18,7 @@ import {
 	__unstablePresetDuotoneFilter as PresetDuotoneFilter,
 	__experimentalGetGapCSSValue as getGapCSSValue,
 	store as blockEditorStore,
+	BlockGlobalStylesContext,
 } from '@wordpress/block-editor';
 
 /**
@@ -883,7 +884,10 @@ function updateConfigWithSeparator( config ) {
 
 export function useGlobalStylesOutput() {
 	let { merged: mergedConfig } = useContext( GlobalStylesContext );
-
+	const { merged: mergedBlockStyles } = useContext(
+		BlockGlobalStylesContext
+	);
+	console.log( 'mergedBlockStyles', mergedBlockStyles );
 	const [ blockGap ] = useSetting( 'spacing.blockGap' );
 	const hasBlockGapSupport = blockGap !== null;
 	const hasFallbackGapSupport = ! hasBlockGapSupport; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback styles support.

packages/edit-site/src/hooks/block-supports-styles.js

@@ -0,0 +1,102 @@
+/**
+ * External dependencies
+ */
+import { set } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { useContext, useState } from '@wordpress/element';
+import {
+	ColorEdit,
+	TypographyPanel,
+	BorderPanel,
+	DimensionsPanel,
+	useDisplayBlockControls,
+	InspectorControls,
+} from '@wordpress/block-editor';
+import { Button, PanelBody } from '@wordpress/components';
+import { getCSSVarFromStyleValue } from '@wordpress/style-engine';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { GlobalStylesContext } from '../components/global-styles/context';
+
+export const withEditBlockControls = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		const { name } = props;
+		const [ shouldPushToGlobalStyles, setShouldPushToGlobalStyles ] =
+			useState( false );
+		const { setUserConfig } = useContext( GlobalStylesContext );
+
+		const shouldDisplayControls = useDisplayBlockControls();
+		const blockSupportControlProps = {
+			...props,
+			setBlockGlobalStyles: ( path, newValue ) => {
+				if ( ! shouldPushToGlobalStyles ) {
+					return;
+				}
+				const fullPath = `styles.blocks.${ name }.${ path }`;
+				setUserConfig( ( currentConfig ) => {
+					// Deep clone `currentConfig` to avoid mutating it later.
+					const newUserConfig = JSON.parse(
+						JSON.stringify( currentConfig )
+					);
+					set( newUserConfig, fullPath, getCSSVarFromStyleValue( newValue ) );
+					return newUserConfig;
+				} );
+			},
+		};
+
+		return (
+			<>
+				{ shouldDisplayControls && (
+					<>
+						<ColorEdit { ...blockSupportControlProps } />
+						<TypographyPanel { ...blockSupportControlProps } />
+						<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>
+						</InspectorControls>
+					</>
+				) }
+				<BlockEdit { ...props } />
+			</>
+		);
+	},
+	'withEditBlockControls'
+);
+
+addFilter(
+	'editor.BlockEdit',
+	'core/edit-site/block-supports-styles',
+	withEditBlockControls
+);

packages/edit-site/src/hooks/index.js

@@ -3,3 +3,4 @@
  */
 import './components';
 import './template-part-edit';
+import './block-supports-styles';

packages/edit-site/src/index.js

@@ -18,7 +18,7 @@ import { store as preferencesStore } from '@wordpress/preferences';
 import { __ } from '@wordpress/i18n';
 import { store as viewportStore } from '@wordpress/viewport';
 import { getQueryArgs } from '@wordpress/url';
-import { addFilter } from '@wordpress/hooks';
+import { addFilter, removeFilter } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
@@ -167,6 +167,10 @@ export function initializeEditor( id, settings ) {
 	reinitializeEditor( target, settings );
 }
 
+// Removes the block supports edit controls added in packages/block-editor/src/hooks/style.js,
+// so that we can register another in packages/edit-site/src/hooks/block-supports-styles.js.
+removeFilter( 'editor.BlockEdit', 'core/style/with-block-controls' );
+
 export { default as __experimentalNavigationToggle } from './components/navigation-sidebar/navigation-toggle';
 export { default as PluginSidebar } from './components/sidebar-edit-mode/plugin-sidebar';
 export { default as PluginSidebarMoreMenuItem } from './components/header-edit-mode/plugin-sidebar-more-menu-item';

packages/style-engine/src/index.ts

@@ -12,7 +12,7 @@ import type {
 	GeneratedCSSRule,
 	StyleDefinition,
 } from './types';
-import { styleDefinitions } from './styles';
+import { styleDefinitions, getCSSVarFromStyleValue } from './styles';
 
 /**
  * Generates a stylesheet for a given style object and selector.
@@ -78,3 +78,6 @@ export function getCSSRules(
 
 	return rules;
 }
+
+/* Styles utility functions */
+export { getCSSVarFromStyleValue };

packages/style-engine/src/styles/index.ts

@@ -8,8 +8,9 @@ import shadow from './shadow';
 import outline from './outline';
 import spacing from './spacing';
 import typography from './typography';
+import { getCSSVarFromStyleValue } from './utils';
 
-export const styleDefinitions = [
+const styleDefinitions = [
 	...border,
 	...color,
 	...dimensions,
@@ -18,3 +19,5 @@ export const styleDefinitions = [
 	...typography,
 	...shadow,
 ];
+
+export { getCSSVarFromStyleValue, styleDefinitions };