Block editor: add consolidated styles to store

lib/class-wp-rest-block-editor-settings-controller.php

@@ -149,7 +149,7 @@ public function get_item_schema() {
 				'__experimentalStyles'                   => array(
 					'description' => __( 'Styles consolidated from core, theme, and user origins.', 'gutenberg' ),
 					'type'        => 'object',
-					'context'     => array( 'mobile' ),
+					'context'     => array( 'mobile', 'post-editor' ),
 				),
 
 				'alignWide'                              => array(

lib/global-styles.php

@@ -81,6 +81,19 @@ function gutenberg_experimental_global_styles_enqueue_assets() {
 function gutenberg_experimental_global_styles_settings( $settings ) {
 	// Set what is the context for this data request.
 	$context = 'all';
+
+	// Is it a block editor on site that supports block templates?
+	if (
+		is_callable( 'get_current_screen' ) &&
+		get_current_screen()->is_block_editor() &&
+		function_exists( 'gutenberg_is_edit_site_page' ) &&
+		! gutenberg_is_edit_site_page( get_current_screen()->id ) &&
+		WP_Theme_JSON_Resolver_Gutenberg::theme_has_support() &&
+		gutenberg_supports_block_templates()
+	) {
+		$context = 'post-editor';
+	}
+
 	if (
 		is_callable( 'get_current_screen' ) &&
 		function_exists( 'gutenberg_is_edit_site_page' ) &&
@@ -111,7 +124,7 @@ function_exists( 'gutenberg_is_edit_site_page' ) &&
 	}
 	$consolidated = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( $settings, $origin );
 
-	if ( 'mobile' === $context ) {
+	if ( 'mobile' === $context || 'post-editor' === $context ) {
 		$settings['__experimentalStyles'] = $consolidated->get_raw_data()['styles'];
 	}
 

packages/block-editor/README.md

@@ -554,6 +554,7 @@ _Properties_
 -   _\_\_experimentalBlockDirectory_ `boolean`: Whether the user has enabled the Block Directory
 -   _\_\_experimentalBlockPatterns_ `Array`: Array of objects representing the block patterns
 -   _\_\_experimentalBlockPatternCategories_ `Array`: Array of objects representing the block pattern categories
+-   _\_\_experimentalStyles_ `Array`: Array of objects consolidated styles from core, theme, and user origins.
 
 ### SkipToSelectedBlock
 

packages/block-editor/src/components/use-consolidated-styles/index.js

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { useBlockEditContext } from '../block-edit';
+import { store as blockEditorStore } from '../../store';
+
+/**
+ * // TODO This is an example targeted at specific style properties. We could consolidate at the highest level, e.g., return a merged styles object for all in packages/block-editor/src/hooks/style.js
+ * Hook that retrieves consolidated styles from the block editor store,
+ * and merges them with incoming user styles for a particular property.
+ *
+ * @param  {Object} userStyles    User-selected styles from the editor.
+ * @param  {string} styleProperty Targets a specific property. If not passed then we return the entire merged object.
+ *
+ * @return {Object}               The merged user styles, or original user styles if no consolidated styles.
+ *
+ * @example
+ * ```js
+ * const consolidatedStyles = useConsolidatedStyles( props.attributes?.style, 'border' );
+ * ```
+ */
+export default function useConsolidatedStyles( userStyles, styleProperty ) {
+	const { name: blockName } = useBlockEditContext();
+
+	const consolidatedStyles = useSelect(
+		( select ) => {
+			const { getSettings } = select( blockEditorStore );
+			const consolidatedBlockStyles =
+				getSettings().__experimentalStyles?.blocks || {};
+
+			return consolidatedBlockStyles &&
+				consolidatedBlockStyles[ blockName ]
+				? consolidatedBlockStyles[ blockName ]
+				: undefined;
+		},
+		[ blockName, styleProperty ]
+	);
+
+	if ( ! userStyles || ! styleProperty ) {
+		return userStyles;
+	}
+
+	if ( consolidatedStyles ) {
+		return {
+			...userStyles,
+			[ styleProperty ]: {
+				...consolidatedStyles[ styleProperty ],
+				...userStyles[ styleProperty ],
+			},
+		};
+	}
+
+	return userStyles;
+}

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

@@ -11,6 +11,7 @@ import { __ } from '@wordpress/i18n';
  */
 import InspectorControls from '../components/inspector-controls';
 import useSetting from '../components/use-setting';
+import useConsolidatedStyles from '../components/use-consolidated-styles';
 import { BorderColorEdit } from './border-color';
 import { BorderRadiusEdit } from './border-radius';
 import { BorderStyleEdit } from './border-style';
@@ -38,6 +39,29 @@ export function BorderPanel( props ) {
 		useSetting( 'border.customWidth' ) &&
 		hasBorderSupport( props.name, 'width' );
 
+	// TODO
+	// This is an example targeted at border for now while testing.
+	// We could consolidate at the highest level: packages/block-editor/src/hooks/style.js
+	const consolidatedStyles = useConsolidatedStyles(
+		props.attributes?.style,
+		'border'
+	);
+
+	// TODO abstract this to the hook?
+	// TODO We'll have to revisit defaults here.
+	// E.g., if the user removes a value from the post editor, what does that mean?
+	// Do we automatically default to the global style value, or do we interpret empty as `0` for border width for example?
+	// At which point do we reinstate the global style value?
+	const mergedProps = {
+		...props,
+		attributes: {
+			...props.attributes,
+			style: {
+				...consolidatedStyles,
+			},
+		},
+	};
+
 	if ( isDisabled || ! isSupported ) {
 		return null;
 	}
@@ -51,12 +75,16 @@ export function BorderPanel( props ) {
 			>
 				{ ( isWidthSupported || isStyleSupported ) && (
 					<div className="block-editor-hooks__border-controls-row">
-						{ isWidthSupported && <BorderWidthEdit { ...props } /> }
-						{ isStyleSupported && <BorderStyleEdit { ...props } /> }
+						{ isWidthSupported && (
+							<BorderWidthEdit { ...mergedProps } />
+						) }
+						{ isStyleSupported && (
+							<BorderStyleEdit { ...mergedProps } />
+						) }
 					</div>
 				) }
-				{ isColorSupported && <BorderColorEdit { ...props } /> }
-				{ isRadiusSupported && <BorderRadiusEdit { ...props } /> }
+				{ isColorSupported && <BorderColorEdit { ...mergedProps } /> }
+				{ isRadiusSupported && <BorderRadiusEdit { ...mergedProps } /> }
 			</PanelBody>
 		</InspectorControls>
 	);

packages/block-editor/src/store/defaults.js

@@ -28,6 +28,7 @@ export const PREFERENCES_DEFAULTS = {
  * @property {boolean}       __experimentalBlockDirectory           Whether the user has enabled the Block Directory
  * @property {Array}         __experimentalBlockPatterns            Array of objects representing the block patterns
  * @property {Array}         __experimentalBlockPatternCategories   Array of objects representing the block pattern categories
+ * @property {Array}         __experimentalStyles   				Array of objects consolidated styles from core, theme, and user origins.
  */
 export const SETTINGS_DEFAULTS = {
 	alignWide: false,
@@ -155,6 +156,7 @@ export const SETTINGS_DEFAULTS = {
 	__experimentalBlockPatterns: [],
 	__experimentalBlockPatternCategories: [],
 	__experimentalSpotlightEntityBlocks: [],
+	__experimentalStyles: [],
 
 	// gradients setting is not used anymore now defaults are passed from theme.json on the server and core has its own defaults.
 	// The setting is only kept for backward compatibility purposes.

packages/editor/src/components/provider/use-block-editor-settings.js

@@ -77,6 +77,7 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 				'__experimentalGlobalStylesUserEntityId',
 				'__experimentalPreferredStyleVariations',
 				'__experimentalSetIsInserterOpened',
+				'__experimentalStyles',
 				'alignWide',
 				'allowedBlockTypes',
 				'bodyPlaceholder',