@wordpress/edit-site 5.7.0 → 5.9.0

package/src/components/editor-canvas-container/index.js

@@ -0,0 +1,115 @@
+/**
+ * WordPress dependencies
+ */
+import { Children, cloneElement, useState, useMemo } from '@wordpress/element';
+import {
+	Button,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { ESCAPE } from '@wordpress/keycodes';
+import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { closeSmall } from '@wordpress/icons';
+import { useFocusOnMount, useFocusReturn } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../private-apis';
+import { store as editSiteStore } from '../../store';
+
+/**
+ * Returns a translated string for the title of the editor canvas container.
+ *
+ * @param {string} view Editor canvas container view.
+ *
+ * @return {string} Translated string corresponding to value of view. Default is ''.
+ */
+export function getEditorCanvasContainerTitle( view ) {
+	switch ( view ) {
+		case 'style-book':
+			return __( 'Style Book' );
+		default:
+			return '';
+	}
+}
+
+// Creates a private slot fill.
+const { createPrivateSlotFill } = unlock( componentsPrivateApis );
+const SLOT_FILL_NAME = 'EditSiteEditorCanvasContainerSlot';
+const { Slot: EditorCanvasContainerSlot, Fill: EditorCanvasContainerFill } =
+	createPrivateSlotFill( SLOT_FILL_NAME );
+
+function EditorCanvasContainer( {
+	children,
+	closeButtonLabel,
+	onClose = () => {},
+} ) {
+	const editorCanvasContainerView = useSelect(
+		( select ) =>
+			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
+		[]
+	);
+	const [ isClosed, setIsClosed ] = useState( false );
+	const { setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
+	const focusOnMountRef = useFocusOnMount( 'firstElement' );
+	const sectionFocusReturnRef = useFocusReturn();
+	const title = useMemo(
+		() => getEditorCanvasContainerTitle( editorCanvasContainerView ),
+		[ editorCanvasContainerView ]
+	);
+	function onCloseContainer() {
+		onClose();
+		setEditorCanvasContainerView( undefined );
+		setIsClosed( true );
+	}
+
+	function closeOnEscape( event ) {
+		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
+			event.preventDefault();
+			onCloseContainer();
+		}
+	}
+
+	const childrenWithProps = Array.isArray( children )
+		? Children.map( children, ( child, index ) =>
+				index === 0
+					? cloneElement( child, {
+							ref: sectionFocusReturnRef,
+					  } )
+					: child
+		  )
+		: cloneElement( children, {
+				ref: sectionFocusReturnRef,
+		  } );
+
+	if ( isClosed ) {
+		return null;
+	}
+
+	return (
+		<EditorCanvasContainerFill>
+			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
+			<section
+				className="edit-site-editor-canvas-container"
+				ref={ focusOnMountRef }
+				onKeyDown={ closeOnEscape }
+				aria-label={ title }
+			>
+				<Button
+					className="edit-site-editor-canvas-container__close-button"
+					icon={ closeSmall }
+					label={ closeButtonLabel || __( 'Close' ) }
+					onClick={ onCloseContainer }
+					showTooltip={ false }
+				/>
+				{ childrenWithProps }
+			</section>
+		</EditorCanvasContainerFill>
+	);
+}
+
+EditorCanvasContainer.Slot = EditorCanvasContainerSlot;
+export default EditorCanvasContainer;

package/src/components/editor-canvas-container/style.scss

@@ -0,0 +1,19 @@
+.edit-site-editor-canvas-container {
+	background: $white; // Fallback color, overridden by JavaScript.
+	border-radius: $radius-block-ui;
+	bottom: 0;
+	left: 0;
+	overflow: hidden;
+	position: absolute;
+	right: 0;
+	top: 0;
+	transition: all 0.3s; // Match .block-editor-iframe__body transition.
+}
+
+.edit-site-editor-canvas-container__close-button {
+	position: absolute;
+	right: $grid-unit-10;
+	top: math.div($grid-unit-60 - $button-size, 2); // ( tab height - button size ) / 2
+	z-index: 1;
+	background: $white;
+}

package/src/components/global-styles/border-panel.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { __experimentalHasSplitBorders as hasSplitBorders } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -15,6 +16,41 @@ const {
 	BorderPanel: StylesBorderPanel,
 } = unlock( blockEditorPrivateApis );
 
+function applyFallbackStyle( border ) {
+	if ( ! border ) {
+		return border;
+	}
+
+	const hasColorOrWidth = border.color || border.width;
+
+	if ( ! border.style && hasColorOrWidth ) {
+		return { ...border, style: 'solid' };
+	}
+
+	if ( border.style && ! hasColorOrWidth ) {
+		return undefined;
+	}
+
+	return border;
+}
+
+function applyAllFallbackStyles( border ) {
+	if ( ! border ) {
+		return border;
+	}
+
+	if ( hasSplitBorders( border ) ) {
+		return {
+			top: applyFallbackStyle( border.top ),
+			right: applyFallbackStyle( border.right ),
+			bottom: applyFallbackStyle( border.bottom ),
+			left: applyFallbackStyle( border.left ),
+		};
+	}
+
+	return applyFallbackStyle( border );
+}
+
 export default function BorderPanel( { name, variation = '' } ) {
 	let prefixParts = [];
 	if ( variation ) {
@@ -29,11 +65,47 @@ export default function BorderPanel( { name, variation = '' } ) {
 	const [ rawSettings ] = useGlobalSetting( '', name );
 	const settings = useSettingsForBlockElement( rawSettings, name );
 
+	const onChange = ( newStyle ) => {
+		if ( ! newStyle?.border ) {
+			setStyle( newStyle );
+			return;
+		}
+
+		// As Global Styles can't conditionally generate styles based on if
+		// other style properties have been set, we need to force split
+		// border definitions for user set global border styles. Border
+		// radius is derived from the same property i.e. `border.radius` if
+		// it is a string that is used. The longhand border radii styles are
+		// only generated if that property is an object.
+		//
+		// For borders (color, style, and width) those are all properties on
+		// the `border` style property. This means if the theme.json defined
+		// split borders and the user condenses them into a flat border or
+		// vice-versa we'd get both sets of styles which would conflict.
+		const { radius, ...newBorder } = newStyle.border;
+		const border = applyAllFallbackStyles( newBorder );
+		const updatedBorder = ! hasSplitBorders( border )
+			? {
+					top: border,
+					right: border,
+					bottom: border,
+					left: border,
+			  }
+			: {
+					color: null,
+					style: null,
+					width: null,
+					...border,
+			  };
+
+		setStyle( { ...newStyle, border: { ...updatedBorder, radius } } );
+	};
+
 	return (
 		<StylesBorderPanel
 			inheritedValue={ inheritedStyle }
 			value={ style }
-			onChange={ setStyle }
+			onChange={ onChange }
 			settings={ settings }
 		/>
 	);

package/src/components/global-styles/context-menu.js

@@ -27,12 +27,10 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import { useHasFilterPanel } from './filter-utils';
 import { useHasVariationsPanel } from './variations-panel';
 import { NavigationButtonAsItem } from './navigation-button';
 import { IconWithCurrentColor } from './icon-with-current-color';
 import { ScreenVariations } from './screen-variations';
-import { useHasShadowControl } from './shadow-panel';
 import { unlock } from '../../private-apis';
 
 const {
@@ -40,6 +38,8 @@ const {
 	useHasTypographyPanel,
 	useHasBorderPanel,
 	useHasColorPanel,
+	useHasEffectsPanel,
+	useHasFiltersPanel,
 	useGlobalSetting,
 	useSettingsForBlockElement,
 } = unlock( blockEditorPrivateApis );
@@ -50,8 +50,8 @@ function ContextMenu( { name, parentMenu = '' } ) {
 	const hasTypographyPanel = useHasTypographyPanel( settings );
 	const hasColorPanel = useHasColorPanel( settings );
 	const hasBorderPanel = useHasBorderPanel( settings );
-	const hasEffectsPanel = useHasShadowControl( name );
-	const hasFilterPanel = useHasFilterPanel( name );
+	const hasEffectsPanel = useHasEffectsPanel( settings );
+	const hasFilterPanel = useHasFiltersPanel( settings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasLayoutPanel = hasDimensionsPanel;
 	const hasVariationsPanel = useHasVariationsPanel( name, parentMenu );
@@ -109,9 +109,9 @@ function ContextMenu( { name, parentMenu = '' } ) {
 					<NavigationButtonAsItem
 						icon={ shadow }
 						path={ parentMenu + '/effects' }
-						aria-label={ __( 'Shadow' ) }
+						aria-label={ __( 'Effects' ) }
 					>
-						{ __( 'Shadow' ) }
+						{ __( 'Effects' ) }
 					</NavigationButtonAsItem>
 				) }
 				{ hasFilterPanel && (

package/src/components/global-styles/dimensions-panel.js

@@ -16,6 +16,16 @@ const {
 	DimensionsPanel: StylesDimensionsPanel,
 } = unlock( blockEditorPrivateApis );
 
+const DEFAULT_CONTROLS = {
+	contentSize: true,
+	wideSize: true,
+	padding: true,
+	margin: true,
+	blockGap: true,
+	minHeight: true,
+	childLayout: false,
+};
+
 export default function DimensionsPanel( { name, variation = '' } ) {
 	let prefixParts = [];
 	if ( variation ) {
@@ -66,6 +76,7 @@ export default function DimensionsPanel( { name, variation = '' } ) {
 			onChange={ onChange }
 			settings={ settings }
 			includeLayoutControls
+			defaultControls={ DEFAULT_CONTROLS }
 		/>
 	);
 }

package/src/components/global-styles/effects-panel.js

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../private-apis';
+
+const {
+	useGlobalSetting,
+	useGlobalStyle,
+	EffectsPanel: StylesEffectsPanel,
+	useSettingsForBlockElement,
+} = unlock( blockEditorPrivateApis );
+
+export default function EffectsPanel( { name, variation = '' } ) {
+	let prefixParts = [];
+	if ( variation ) {
+		prefixParts = [ 'variations', variation ].concat( prefixParts );
+	}
+	const prefix = prefixParts.join( '.' );
+
+	const [ style ] = useGlobalStyle( prefix, name, 'user', false );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {
+		shouldDecodeEncode: false,
+	} );
+	const [ rawSettings ] = useGlobalSetting( '', name );
+	const settings = useSettingsForBlockElement( rawSettings, name );
+
+	return (
+		<StylesEffectsPanel
+			inheritedValue={ inheritedStyle }
+			value={ style }
+			onChange={ setStyle }
+			settings={ settings }
+		/>
+	);
+}

package/src/components/global-styles/filters-panel.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../private-apis';
+const {
+	useGlobalStyle,
+	useGlobalSetting,
+	useSettingsForBlockElement,
+	FiltersPanel: StylesFiltersPanel,
+} = unlock( blockEditorPrivateApis );
+
+export default function FiltersPanel( { name } ) {
+	const [ style ] = useGlobalStyle( '', name, 'user', false );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', name, 'all', {
+		shouldDecodeEncode: false,
+	} );
+	const [ rawSettings ] = useGlobalSetting( '', name );
+	const settings = useSettingsForBlockElement( rawSettings, name );
+
+	return (
+		<StylesFiltersPanel
+			inheritedValue={ inheritedStyle }
+			value={ style }
+			onChange={ setStyle }
+			settings={ {
+				...settings,
+				color: {
+					...settings.color,
+					customDuotone: false, //TO FIX: Custom duotone only works on the block level right now
+				},
+			} }
+		/>
+	);
+}

package/src/components/global-styles/global-styles-provider.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { mergeWith, isEmpty, mapValues } from 'lodash';
+import { mergeWith } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -17,7 +17,9 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import CanvasSpinner from '../canvas-spinner';
 import { unlock } from '../../private-apis';
 
-const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+const { GlobalStylesContext, cleanEmptyObject } = unlock(
+	blockEditorPrivateApis
+);
 
 function mergeTreesCustomizer( _, srcValue ) {
 	// We only pass as arrays the presets,
@@ -32,22 +34,6 @@ export function mergeBaseAndUserConfigs( base, user ) {
 	return mergeWith( {}, base, user, mergeTreesCustomizer );
 }
 
-const cleanEmptyObject = ( object ) => {
-	if (
-		object === null ||
-		typeof object !== 'object' ||
-		Array.isArray( object )
-	) {
-		return object;
-	}
-	const cleanedNestedObjects = Object.fromEntries(
-		Object.entries( mapValues( object, cleanEmptyObject ) ).filter(
-			( [ , value ] ) => Boolean( value )
-		)
-	);
-	return isEmpty( cleanedNestedObjects ) ? undefined : cleanedNestedObjects;
-};
-
 function useGlobalStylesUserConfig() {
 	const { globalStylesId, isReady, settings, styles } = useSelect(
 		( select ) => {

package/src/components/global-styles/preview.js

@@ -130,7 +130,7 @@ const StylesPreview = ( { label, isFocused, withHoverView } ) => {
 							height: normalizedHeight * ratio,
 							width: '100%',
 							background: gradientValue ?? backgroundColor,
-							cursor: 'pointer',
+							cursor: withHoverView ? 'pointer' : undefined,
 						} }
 						initial="start"
 						animate={

package/src/components/global-styles/screen-block-list.js

@@ -57,21 +57,25 @@ function useSortedBlockTypes() {
 	return [ ...coreItems, ...nonCoreItems ];
 }
 
-function BlockMenuItem( { block } ) {
-	const [ rawSettings ] = useGlobalSetting( '', block.name );
-	const settings = useSettingsForBlockElement( rawSettings, block.name );
+export function useBlockHasGlobalStyles( blockName ) {
+	const [ rawSettings ] = useGlobalSetting( '', blockName );
+	const settings = useSettingsForBlockElement( rawSettings, blockName );
 	const hasTypographyPanel = useHasTypographyPanel( settings );
 	const hasColorPanel = useHasColorPanel( settings );
 	const hasBorderPanel = useHasBorderPanel( settings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
-	const hasVariationsPanel = useHasVariationsPanel( block.name );
-	const hasBlockMenuItem =
+	const hasVariationsPanel = useHasVariationsPanel( blockName );
+	const hasGlobalStyles =
 		hasTypographyPanel ||
 		hasColorPanel ||
 		hasLayoutPanel ||
 		hasVariationsPanel;
+	return hasGlobalStyles;
+}
 
+function BlockMenuItem( { block } ) {
+	const hasBlockMenuItem = useBlockHasGlobalStyles( block.name );
 	if ( ! hasBlockMenuItem ) {
 		return null;
 	}

package/src/components/global-styles/screen-css.js

@@ -38,7 +38,7 @@ function ScreenCSS( { name } ) {
 					<>
 						{ description }
 						<ExternalLink
-							href="https://wordpress.org/support/article/css/"
+							href="https://wordpress.org/documentation/article/css/"
 							className="edit-site-global-styles-screen-css-help-link"
 						>
 							{ __( 'Learn more about CSS' ) }

package/src/components/global-styles/screen-effects.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -9,17 +10,23 @@ import { __ } from '@wordpress/i18n';
 import ScreenHeader from './header';
 import BlockPreviewPanel from './block-preview-panel';
 import { getVariationClassName } from './utils';
-import ShadowPanel, { useHasShadowControl } from './shadow-panel';
+import { unlock } from '../../private-apis';
+import EffectsPanel from './effects-panel';
+
+const { useGlobalSetting, useSettingsForBlockElement, useHasEffectsPanel } =
+	unlock( blockEditorPrivateApis );
 
 function ScreenEffects( { name, variation = '' } ) {
+	const [ rawSettings ] = useGlobalSetting( '', name );
+	const settings = useSettingsForBlockElement( rawSettings, name );
 	const variationClassName = getVariationClassName( variation );
-	const hasShadowPanel = useHasShadowControl( name );
+	const hasEffectsPanel = useHasEffectsPanel( settings );
 	return (
 		<>
-			<ScreenHeader title={ __( 'Shadow' ) } />
+			<ScreenHeader title={ __( 'Effects' ) } />
 			<BlockPreviewPanel name={ name } variation={ variationClassName } />
-			{ hasShadowPanel && (
-				<ShadowPanel name={ name } variation={ variation } />
+			{ hasEffectsPanel && (
+				<EffectsPanel name={ name } variation={ variation } />
 			) }
 		</>
 	);

package/src/components/global-styles/screen-filters.js

@@ -6,7 +6,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import DuotonePanel from './duotone-panel';
+import FiltersPanel from './filters-panel';
 import BlockPreviewPanel from './block-preview-panel';
 
 /**
@@ -19,7 +19,7 @@ function ScreenFilters( { name } ) {
 		<>
 			<ScreenHeader title={ __( 'Filters' ) } />
 			<BlockPreviewPanel name={ name } />
-			<DuotonePanel name={ name } />
+			<FiltersPanel name={ name } />
 		</>
 	);
 }