@wordpress/editor 14.33.3 → 14.34.0

package/src/hooks/media-upload.js

@@ -2,10 +2,30 @@
  * WordPress dependencies
  */
 import { addFilter } from '@wordpress/hooks';
-import { MediaUpload } from '@wordpress/media-utils';
+import {
+	MediaUpload,
+	privateApis as mediaUtilsPrivateApis,
+} from '@wordpress/media-utils';
 
-addFilter(
-	'editor.MediaUpload',
-	'core/editor/components/media-upload',
-	() => MediaUpload
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+
+const { MediaUploadModal: MediaUploadModalComponent } = unlock(
+	mediaUtilsPrivateApis
 );
+
+if ( window.__experimentalDataViewsMediaModal ) {
+	// Create a new filter for the MediaUploadModal component
+	addFilter(
+		'editor.MediaUploadModal',
+		'core/editor/components/media-upload-modal',
+		() => {
+			return MediaUploadModalComponent;
+		}
+	);
+}
+addFilter( 'editor.MediaUpload', 'core/editor/components/media-upload', () => {
+	return MediaUpload;
+} );

package/src/hooks/push-changes-to-global-styles/index.js

@@ -0,0 +1,391 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import {
+	InspectorAdvancedControls,
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+	useBlockEditingMode,
+} from '@wordpress/block-editor';
+import { BaseControl, Button } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	__EXPERIMENTAL_STYLE_PROPERTY,
+	getBlockType,
+	hasBlockSupport,
+	store as blocksStore,
+} from '@wordpress/blocks';
+import { useMemo, useCallback } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import setNestedValue from '../../utils/set-nested-value';
+import { useGlobalStyles } from '../../components/global-styles/hooks';
+
+const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
+
+// Block Gap is a special case and isn't defined within the blocks
+// style properties config. We'll add it here to allow it to be pushed
+// to global styles as well.
+const STYLE_PROPERTY = {
+	...__EXPERIMENTAL_STYLE_PROPERTY,
+	blockGap: { value: [ 'spacing', 'blockGap' ] },
+};
+
+// TODO: Temporary duplication of constant in @wordpress/block-editor. Can be
+// removed by moving PushChangesToGlobalStylesControl to
+// @wordpress/block-editor.
+const STYLE_PATH_TO_CSS_VAR_INFIX = {
+	'border.color': 'color',
+	'color.background': 'color',
+	'color.text': 'color',
+	'elements.link.color.text': 'color',
+	'elements.link.:hover.color.text': 'color',
+	'elements.link.typography.fontFamily': 'font-family',
+	'elements.link.typography.fontSize': 'font-size',
+	'elements.button.color.text': 'color',
+	'elements.button.color.background': 'color',
+	'elements.button.typography.fontFamily': 'font-family',
+	'elements.button.typography.fontSize': 'font-size',
+	'elements.caption.color.text': 'color',
+	'elements.heading.color': 'color',
+	'elements.heading.color.background': 'color',
+	'elements.heading.typography.fontFamily': 'font-family',
+	'elements.heading.gradient': 'gradient',
+	'elements.heading.color.gradient': 'gradient',
+	'elements.h1.color': 'color',
+	'elements.h1.color.background': 'color',
+	'elements.h1.typography.fontFamily': 'font-family',
+	'elements.h1.color.gradient': 'gradient',
+	'elements.h2.color': 'color',
+	'elements.h2.color.background': 'color',
+	'elements.h2.typography.fontFamily': 'font-family',
+	'elements.h2.color.gradient': 'gradient',
+	'elements.h3.color': 'color',
+	'elements.h3.color.background': 'color',
+	'elements.h3.typography.fontFamily': 'font-family',
+	'elements.h3.color.gradient': 'gradient',
+	'elements.h4.color': 'color',
+	'elements.h4.color.background': 'color',
+	'elements.h4.typography.fontFamily': 'font-family',
+	'elements.h4.color.gradient': 'gradient',
+	'elements.h5.color': 'color',
+	'elements.h5.color.background': 'color',
+	'elements.h5.typography.fontFamily': 'font-family',
+	'elements.h5.color.gradient': 'gradient',
+	'elements.h6.color': 'color',
+	'elements.h6.color.background': 'color',
+	'elements.h6.typography.fontFamily': 'font-family',
+	'elements.h6.color.gradient': 'gradient',
+	'color.gradient': 'gradient',
+	blockGap: 'spacing',
+	'typography.fontSize': 'font-size',
+	'typography.fontFamily': 'font-family',
+};
+
+// TODO: Temporary duplication of constant in @wordpress/block-editor. Can be
+// removed by moving PushChangesToGlobalStylesControl to
+// @wordpress/block-editor.
+const STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = {
+	'border.color': 'borderColor',
+	'color.background': 'backgroundColor',
+	'color.text': 'textColor',
+	'color.gradient': 'gradient',
+	'typography.fontSize': 'fontSize',
+	'typography.fontFamily': 'fontFamily',
+};
+
+const SUPPORTED_STYLES = [ 'border', 'color', 'spacing', 'typography' ];
+
+const getValueFromObjectPath = ( object, path ) => {
+	let value = object;
+	path.forEach( ( fieldName ) => {
+		value = value?.[ fieldName ];
+	} );
+	return value;
+};
+
+const flatBorderProperties = [ 'borderColor', 'borderWidth', 'borderStyle' ];
+const sides = [ 'top', 'right', 'bottom', 'left' ];
+
+function getBorderStyleChanges( border, presetColor, userStyle ) {
+	if ( ! border && ! presetColor ) {
+		return [];
+	}
+
+	const changes = [
+		...getFallbackBorderStyleChange( 'top', border, userStyle ),
+		...getFallbackBorderStyleChange( 'right', border, userStyle ),
+		...getFallbackBorderStyleChange( 'bottom', border, userStyle ),
+		...getFallbackBorderStyleChange( 'left', border, userStyle ),
+	];
+
+	// Handle a flat border i.e. all sides the same, CSS shorthand.
+	const { color: customColor, style, width } = border || {};
+	const hasColorOrWidth = presetColor || customColor || width;
+
+	if ( hasColorOrWidth && ! style ) {
+		// Global Styles need individual side configurations to overcome
+		// theme.json configurations which are per side as well.
+		sides.forEach( ( side ) => {
+			// Only add fallback border-style if global styles don't already
+			// have something set.
+			if ( ! userStyle?.[ side ]?.style ) {
+				changes.push( {
+					path: [ 'border', side, 'style' ],
+					value: 'solid',
+				} );
+			}
+		} );
+	}
+
+	return changes;
+}
+
+function getFallbackBorderStyleChange( side, border, globalBorderStyle ) {
+	if ( ! border?.[ side ] || globalBorderStyle?.[ side ]?.style ) {
+		return [];
+	}
+
+	const { color, style, width } = border[ side ];
+	const hasColorOrWidth = color || width;
+
+	if ( ! hasColorOrWidth || style ) {
+		return [];
+	}
+
+	return [ { path: [ 'border', side, 'style' ], value: 'solid' } ];
+}
+
+function useChangesToPush( name, attributes, userConfig ) {
+	const supports = useSelect(
+		( select ) => {
+			return unlock( select( blocksStore ) ).getSupportedStyles( name );
+		},
+		[ name ]
+	);
+	const blockUserConfig = userConfig?.styles?.blocks?.[ name ];
+
+	return useMemo( () => {
+		const changes = supports.flatMap( ( key ) => {
+			if ( ! STYLE_PROPERTY[ key ] ) {
+				return [];
+			}
+			const { value: path } = STYLE_PROPERTY[ key ];
+			const presetAttributeKey = path.join( '.' );
+			const presetAttributeValue =
+				attributes[
+					STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE[ presetAttributeKey ]
+				];
+			const value = presetAttributeValue
+				? `var:preset|${ STYLE_PATH_TO_CSS_VAR_INFIX[ presetAttributeKey ] }|${ presetAttributeValue }`
+				: getValueFromObjectPath( attributes.style, path );
+
+			// Links only have a single support entry but have two element
+			// style properties, color and hover color. The following check
+			// will add the hover color to the changes if required.
+			if ( key === 'linkColor' ) {
+				const linkChanges = value ? [ { path, value } ] : [];
+				const hoverPath = [
+					'elements',
+					'link',
+					':hover',
+					'color',
+					'text',
+				];
+				const hoverValue = getValueFromObjectPath(
+					attributes.style,
+					hoverPath
+				);
+
+				if ( hoverValue ) {
+					linkChanges.push( { path: hoverPath, value: hoverValue } );
+				}
+
+				return linkChanges;
+			}
+
+			// The shorthand border styles can't be mapped directly as global
+			// styles requires longhand config.
+			if ( flatBorderProperties.includes( key ) && value ) {
+				// The shorthand config path is included to clear the block attribute.
+				const borderChanges = [ { path, value } ];
+				sides.forEach( ( side ) => {
+					const currentPath = [ ...path ];
+					currentPath.splice( -1, 0, side );
+					borderChanges.push( { path: currentPath, value } );
+				} );
+				return borderChanges;
+			}
+
+			return value ? [ { path, value } ] : [];
+		} );
+
+		// To ensure display of a visible border, global styles require a
+		// default border style if a border color or width is present.
+		getBorderStyleChanges(
+			attributes.style?.border,
+			attributes.borderColor,
+			blockUserConfig?.border
+		).forEach( ( change ) => changes.push( change ) );
+
+		return changes;
+	}, [ supports, attributes, blockUserConfig ] );
+}
+
+function PushChangesToGlobalStylesControl( {
+	name,
+	attributes,
+	setAttributes,
+} ) {
+	const { user: userConfig, setUser: setUserConfig } = useGlobalStyles();
+
+	const changes = useChangesToPush( name, attributes, userConfig );
+
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+	const { createSuccessNotice } = useDispatch( noticesStore );
+
+	const pushChanges = useCallback( () => {
+		if ( changes.length === 0 ) {
+			return;
+		}
+
+		if ( changes.length > 0 ) {
+			const { style: blockStyles } = attributes;
+
+			const newBlockStyles = structuredClone( blockStyles );
+			const newUserConfig = structuredClone( userConfig );
+
+			for ( const { path, value } of changes ) {
+				setNestedValue( newBlockStyles, path, undefined );
+				setNestedValue(
+					newUserConfig,
+					[ 'styles', 'blocks', name, ...path ],
+					value
+				);
+			}
+
+			const newBlockAttributes = {
+				borderColor: undefined,
+				backgroundColor: undefined,
+				textColor: undefined,
+				gradient: undefined,
+				fontSize: undefined,
+				fontFamily: undefined,
+				style: cleanEmptyObject( newBlockStyles ),
+			};
+
+			// @wordpress/core-data doesn't support editing multiple entity types in
+			// a single undo level. So for now, we disable @wordpress/core-data undo
+			// tracking and implement our own Undo button in the snackbar
+			// notification.
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( newBlockAttributes );
+			setUserConfig( newUserConfig, { undoIgnore: true } );
+			createSuccessNotice(
+				sprintf(
+					// translators: %s: Title of the block e.g. 'Heading'.
+					__( '%s styles applied.' ),
+					getBlockType( name ).title
+				),
+				{
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Undo' ),
+							onClick() {
+								__unstableMarkNextChangeAsNotPersistent();
+								setAttributes( attributes );
+								setUserConfig( userConfig, {
+									undoIgnore: true,
+								} );
+							},
+						},
+					],
+				}
+			);
+		}
+	}, [
+		__unstableMarkNextChangeAsNotPersistent,
+		attributes,
+		changes,
+		createSuccessNotice,
+		name,
+		setAttributes,
+		setUserConfig,
+		userConfig,
+	] );
+
+	return (
+		<BaseControl
+			__nextHasNoMarginBottom
+			className="editor-push-changes-to-global-styles-control"
+			help={ sprintf(
+				// translators: %s: Title of the block e.g. 'Heading'.
+				__(
+					'Apply this block’s typography, spacing, dimensions, and color styles to all %s blocks.'
+				),
+				getBlockType( name ).title
+			) }
+		>
+			<BaseControl.VisualLabel>
+				{ __( 'Styles' ) }
+			</BaseControl.VisualLabel>
+			<Button
+				__next40pxDefaultSize
+				variant="secondary"
+				accessibleWhenDisabled
+				disabled={ changes.length === 0 }
+				onClick={ pushChanges }
+			>
+				{ __( 'Apply globally' ) }
+			</Button>
+		</BaseControl>
+	);
+}
+
+function PushChangesToGlobalStyles( props ) {
+	const blockEditingMode = useBlockEditingMode();
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
+	const supportsStyles = SUPPORTED_STYLES.some( ( feature ) =>
+		hasBlockSupport( props.name, feature )
+	);
+	const isDisplayed =
+		blockEditingMode === 'default' && supportsStyles && isBlockBasedTheme;
+
+	if ( ! isDisplayed ) {
+		return null;
+	}
+
+	return (
+		<InspectorAdvancedControls>
+			<PushChangesToGlobalStylesControl { ...props } />
+		</InspectorAdvancedControls>
+	);
+}
+
+const withPushChangesToGlobalStyles = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => (
+		<>
+			<BlockEdit key="edit" { ...props } />
+			{ props.isSelected && <PushChangesToGlobalStyles { ...props } /> }
+		</>
+	)
+);
+
+addFilter(
+	'editor.BlockEdit',
+	'core/editor/push-changes-to-global-styles',
+	withPushChangesToGlobalStyles
+);

package/src/hooks/push-changes-to-global-styles/style.scss

@@ -0,0 +1,4 @@
+.editor-push-changes-to-global-styles-control .components-button {
+	justify-content: center;
+	width: 100%;
+}

package/src/hooks/use-global-styles-output.js

@@ -0,0 +1,76 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, store as blocksStore } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { generateGlobalStyles } from '@wordpress/global-styles-engine';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../store';
+import { useSetting, useGlobalStyles } from '../components/global-styles';
+
+/**
+ * Returns the global styles output based on the provided global styles config.
+ *
+ * @param {Object}  mergedConfig       The merged global styles config.
+ * @param {boolean} disableRootPadding Disable root padding styles.
+ *
+ * @return {Array} Array of stylesheets and settings.
+ */
+export function useGlobalStylesOutputWithConfig(
+	mergedConfig = {},
+	disableRootPadding = false
+) {
+	const blockGap = useSetting( 'spacing.blockGap' );
+	const hasBlockGapSupport = blockGap !== null;
+	const hasFallbackGapSupport = ! hasBlockGapSupport;
+
+	const { disableLayoutStyles, getBlockStyles } = useSelect( ( select ) => {
+		const { getEditorSettings } = select( editorStore );
+		const { getBlockStyles: getBlockStylesSelector } =
+			select( blocksStore );
+		const settings = getEditorSettings();
+		return {
+			disableLayoutStyles: !! settings?.disableLayoutStyles,
+			getBlockStyles: getBlockStylesSelector,
+		};
+	}, [] );
+
+	return useMemo( () => {
+		if ( ! mergedConfig?.styles || ! mergedConfig?.settings ) {
+			return [ [], {} ];
+		}
+
+		const blockTypes = getBlockTypes();
+
+		return generateGlobalStyles( mergedConfig, blockTypes, {
+			hasBlockGapSupport,
+			hasFallbackGapSupport,
+			disableLayoutStyles,
+			disableRootPadding,
+			getBlockStyles,
+		} );
+	}, [
+		hasBlockGapSupport,
+		hasFallbackGapSupport,
+		mergedConfig,
+		disableLayoutStyles,
+		disableRootPadding,
+		getBlockStyles,
+	] );
+}
+
+/**
+ * Returns the global styles output based on the current state of global styles config loaded in the editor context.
+ *
+ * @param {boolean} disableRootPadding Disable root padding styles.
+ *
+ * @return {Array} Array of stylesheets and settings.
+ */
+export function useGlobalStylesOutput( disableRootPadding = false ) {
+	const { merged: mergedConfig } = useGlobalStyles();
+	return useGlobalStylesOutputWithConfig( mergedConfig, disableRootPadding );
+}

package/src/private-apis.js

@@ -8,7 +8,6 @@ import * as interfaceApis from '@wordpress/interface';
  */
 import { lock } from './lock-unlock';
 import { EntitiesSavedStatesExtensible } from './components/entities-saved-states';
-import EditorContentSlotFill from './components/editor-interface/content-slot-fill';
 import BackButton from './components/header/back-button';
 import Editor from './components/editor';
 import PluginPostExcerpt from './components/post-excerpt/plugin';
@@ -19,10 +18,6 @@ import usePostFields from './components/post-fields';
 import ToolsMoreMenuGroup from './components/more-menu/tools-more-menu-group';
 import ViewMoreMenuGroup from './components/more-menu/view-more-menu-group';
 import ResizableEditor from './components/resizable-editor';
-import {
-	mergeBaseAndUserConfigs,
-	GlobalStylesProvider,
-} from './components/global-styles-provider';
 import {
 	CreateTemplatePartModal,
 	patternTitleField,
@@ -30,6 +25,10 @@ import {
 } from '@wordpress/fields';
 import { registerCoreBlockBindingsSources } from './bindings/api';
 import { getTemplateInfo } from './utils/get-template-info';
+import GlobalStylesUIWrapper from './components/global-styles';
+import { StyleBookPreview } from './components/style-book';
+import { useGlobalStyles, useStyle } from './components/global-styles/hooks';
+import { GlobalStylesActionMenu } from './components/global-styles/menu';
 
 const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis;
 
@@ -41,9 +40,6 @@ lock( privateApis, {
 	BackButton,
 	EntitiesSavedStatesExtensible,
 	Editor,
-	EditorContentSlotFill,
-	GlobalStylesProvider,
-	mergeBaseAndUserConfigs,
 	PluginPostExcerpt,
 	PostCardPanel,
 	PreferencesModal,
@@ -54,6 +50,12 @@ lock( privateApis, {
 	ResizableEditor,
 	registerCoreBlockBindingsSources,
 	getTemplateInfo,
+	// Global Styles
+	GlobalStylesUIWrapper,
+	GlobalStylesActionMenu,
+	StyleBookPreview,
+	useGlobalStyles,
+	useStyle,
 	// This is a temporary private API while we're updating the site editor to use EditorProvider.
 	interfaceStore,
 	...remainingInterfaceApis,

package/src/store/private-actions.js

@@ -526,3 +526,40 @@ export const setDefaultRenderingMode =
 			.dispatch( preferencesStore )
 			.set( 'core', 'renderingModes', newModes );
 	};
+
+/**
+ * Set the current global styles navigation path.
+ *
+ * @param {string} path The navigation path.
+ * @return {Object} Action object.
+ */
+export function setStylesPath( path ) {
+	return {
+		type: 'SET_STYLES_PATH',
+		path,
+	};
+}
+
+/**
+ * Set whether the stylebook is visible.
+ *
+ * @param {boolean} show Whether to show the stylebook.
+ * @return {Object} Action object.
+ */
+export function setShowStylebook( show ) {
+	return {
+		type: 'SET_SHOW_STYLEBOOK',
+		show,
+	};
+}
+
+/**
+ * Reset the global styles navigation to initial state.
+ *
+ * @return {Object} Action object.
+ */
+export function resetStylesNavigation() {
+	return {
+		type: 'RESET_STYLES_NAVIGATION',
+	};
+}

package/src/store/private-selectors.js

@@ -270,3 +270,23 @@ export const getDefaultRenderingMode = createRegistrySelector(
 		return defaultMode;
 	}
 );
+
+/**
+ * Get the current global styles navigation path.
+ *
+ * @param {Object} state Global application state.
+ * @return {string} The current styles path.
+ */
+export function getStylesPath( state ) {
+	return state.stylesPath ?? '/';
+}
+
+/**
+ * Get whether the stylebook is currently visible.
+ *
+ * @param {Object} state Global application state.
+ * @return {boolean} Whether the stylebook is visible.
+ */
+export function getShowStylebook( state ) {
+	return state.showStylebook ?? false;
+}

package/src/store/reducer.js

@@ -384,6 +384,40 @@ export function publishSidebarActive( state = false, action ) {
 	return state;
 }
 
+/**
+ * Reducer for the current global styles navigation path.
+ *
+ * @param {string} state  Current state.
+ * @param {Object} action Dispatched action.
+ * @return {string} Updated state.
+ */
+export function stylesPath( state = '/', action ) {
+	switch ( action.type ) {
+		case 'SET_STYLES_PATH':
+			return action.path;
+		case 'RESET_STYLES_NAVIGATION':
+			return '/';
+	}
+	return state;
+}
+
+/**
+ * Reducer for whether the stylebook is visible.
+ *
+ * @param {boolean} state  Current state.
+ * @param {Object}  action Dispatched action.
+ * @return {boolean} Updated state.
+ */
+export function showStylebook( state = false, action ) {
+	switch ( action.type ) {
+		case 'SET_SHOW_STYLEBOOK':
+			return action.show;
+		case 'RESET_STYLES_NAVIGATION':
+			return false;
+	}
+	return state;
+}
+
 export default combineReducers( {
 	postId,
 	postType,
@@ -403,5 +437,7 @@ export default combineReducers( {
 	listViewPanel,
 	listViewToggleRef,
 	publishSidebarActive,
+	stylesPath,
+	showStylebook,
 	dataviews: dataviewsReducer,
 } );