@wordpress/edit-site 5.5.0 → 5.6.0

package/src/components/editor/index.js

@@ -32,7 +32,7 @@ import WelcomeGuide from '../welcome-guide';
 import StartTemplateOptions from '../start-template-options';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesRenderer } from '../global-styles-renderer';
-import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
+
 import useTitle from '../routes/use-title';
 import CanvasSpinner from '../canvas-spinner';
 import { unlock } from '../../private-apis';
@@ -157,70 +157,66 @@ export default function Editor() {
 					type={ editedPostType }
 					id={ editedPostId }
 				>
-					<GlobalStylesProvider>
-						<BlockContextProvider value={ blockContext }>
-							<SidebarComplementaryAreaFills />
-							{ isEditMode && <StartTemplateOptions /> }
-							<InterfaceSkeleton
-								enableRegionNavigation={ false }
-								className={
-									showIconLabels && 'show-icon-labels'
-								}
-								notices={ isEditMode && <EditorSnackbars /> }
-								content={
-									<>
-										<GlobalStylesRenderer />
-										{ isEditMode && <EditorNotices /> }
-										{ showVisualEditor && editedPost && (
-											<BlockEditor />
-										) }
-										{ editorMode === 'text' &&
-											editedPost &&
-											isEditMode && <CodeEditor /> }
-										{ hasLoadedPost && ! editedPost && (
-											<Notice
-												status="warning"
-												isDismissible={ false }
-											>
-												{ __(
-													"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
-												) }
-											</Notice>
-										) }
-										{ isEditMode && (
-											<KeyboardShortcutsEditMode />
-										) }
-									</>
-								}
-								secondarySidebar={
-									isEditMode &&
-									( ( shouldShowInserter && (
-										<InserterSidebar />
-									) ) ||
-										( shouldShowListView && (
-											<ListViewSidebar />
-										) ) )
-								}
-								sidebar={
-									isEditMode &&
-									isRightSidebarOpen && (
-										<ComplementaryArea.Slot scope="core/edit-site" />
-									)
-								}
-								footer={
-									showBlockBreakcrumb && (
-										<BlockBreadcrumb
-											rootLabelText={ __( 'Template' ) }
-										/>
-									)
-								}
-								labels={ {
-									...interfaceLabels,
-									secondarySidebar: secondarySidebarLabel,
-								} }
-							/>
-						</BlockContextProvider>
-					</GlobalStylesProvider>
+					<BlockContextProvider value={ blockContext }>
+						<SidebarComplementaryAreaFills />
+						{ isEditMode && <StartTemplateOptions /> }
+						<InterfaceSkeleton
+							enableRegionNavigation={ false }
+							className={ showIconLabels && 'show-icon-labels' }
+							notices={ isEditMode && <EditorSnackbars /> }
+							content={
+								<>
+									<GlobalStylesRenderer />
+									{ isEditMode && <EditorNotices /> }
+									{ showVisualEditor && editedPost && (
+										<BlockEditor />
+									) }
+									{ editorMode === 'text' &&
+										editedPost &&
+										isEditMode && <CodeEditor /> }
+									{ hasLoadedPost && ! editedPost && (
+										<Notice
+											status="warning"
+											isDismissible={ false }
+										>
+											{ __(
+												"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
+											) }
+										</Notice>
+									) }
+									{ isEditMode && (
+										<KeyboardShortcutsEditMode />
+									) }
+								</>
+							}
+							secondarySidebar={
+								isEditMode &&
+								( ( shouldShowInserter && (
+									<InserterSidebar />
+								) ) ||
+									( shouldShowListView && (
+										<ListViewSidebar />
+									) ) )
+							}
+							sidebar={
+								isEditMode &&
+								isRightSidebarOpen && (
+									<ComplementaryArea.Slot scope="core/edit-site" />
+								)
+							}
+							footer={
+								showBlockBreakcrumb && (
+									<BlockBreadcrumb
+										rootLabelText={ __( 'Template' ) }
+									/>
+								)
+							}
+							labels={ {
+								...interfaceLabels,
+								secondarySidebar: secondarySidebarLabel,
+							} }
+						/>
+					</BlockContextProvider>
 				</EntityProvider>
 			</EntityProvider>
 		</>

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

@@ -1,215 +1,40 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalBorderRadiusControl as BorderRadiusControl,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-import {
-	__experimentalBorderBoxControl as BorderBoxControl,
-	__experimentalHasSplitBorders as hasSplitBorders,
-	__experimentalIsDefinedBorder as isDefinedBorder,
-	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { useSupportedStyles, useColorsPerOrigin } from './hooks';
 import { unlock } from '../../private-apis';
 
-const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
-
-export function useHasBorderPanel( name ) {
-	const controls = [
-		useHasBorderColorControl( name ),
-		useHasBorderRadiusControl( name ),
-		useHasBorderStyleControl( name ),
-		useHasBorderWidthControl( name ),
-	];
-
-	return controls.some( Boolean );
-}
-
-function useHasBorderColorControl( name ) {
-	const supports = useSupportedStyles( name );
-	return (
-		useGlobalSetting( 'border.color', name )[ 0 ] &&
-		supports.includes( 'borderColor' )
-	);
-}
-
-function useHasBorderRadiusControl( name ) {
-	const supports = useSupportedStyles( name );
-	return (
-		useGlobalSetting( 'border.radius', name )[ 0 ] &&
-		supports.includes( 'borderRadius' )
-	);
-}
-
-function useHasBorderStyleControl( name ) {
-	const supports = useSupportedStyles( name );
-	return (
-		useGlobalSetting( 'border.style', name )[ 0 ] &&
-		supports.includes( 'borderStyle' )
-	);
-}
-
-function useHasBorderWidthControl( name ) {
-	const supports = useSupportedStyles( name );
-	return (
-		useGlobalSetting( 'border.width', name )[ 0 ] &&
-		supports.includes( 'borderWidth' )
-	);
-}
-
-function applyFallbackStyle( border ) {
-	if ( ! border ) {
-		return border;
-	}
-
-	if ( ! border.style && ( border.color || border.width ) ) {
-		return { ...border, style: 'solid' };
-	}
-
-	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 );
-}
+const {
+	useGlobalStyle,
+	useGlobalSetting,
+	useSettingsForBlockElement,
+	BorderPanel: StylesBorderPanel,
+} = unlock( blockEditorPrivateApis );
 
 export default function BorderPanel( { name, variation = '' } ) {
-	const prefix = variation ? `variations.${ variation }.` : '';
-	// To better reflect if the user has customized a value we need to
-	// ensure the style value being checked is from the `user` origin.
-	const [ userBorderStyles ] = useGlobalStyle(
-		`${ prefix }border`,
-		name,
-		'user'
-	);
-	const [ border, setBorder ] = useGlobalStyle( `${ prefix }border`, name );
-	const colors = useColorsPerOrigin( name );
-
-	const showBorderColor = useHasBorderColorControl( name );
-	const showBorderStyle = useHasBorderStyleControl( name );
-	const showBorderWidth = useHasBorderWidthControl( name );
-
-	// Border radius.
-	const showBorderRadius = useHasBorderRadiusControl( name );
-	const [ borderRadiusValues, setBorderRadius ] = useGlobalStyle(
-		`${ prefix }border.radius`,
-		name
-	);
-	const hasBorderRadius = () => {
-		const borderValues = userBorderStyles?.radius;
-		if ( typeof borderValues === 'object' ) {
-			return Object.entries( borderValues ).some( Boolean );
-		}
-		return !! borderValues;
-	};
-
-	const resetBorder = () => {
-		if ( hasBorderRadius() ) {
-			return setBorder( { radius: userBorderStyles.radius } );
-		}
-
-		setBorder( undefined );
-	};
-
-	const resetAll = useCallback( () => setBorder( undefined ), [ setBorder ] );
-	const onBorderChange = useCallback(
-		( newBorder ) => {
-			// Ensure we have a visible border style when a border width or
-			// color is being selected.
-			const newBorderWithStyle = applyAllFallbackStyles( newBorder );
-
-			// As we can't conditionally generate styles based on if other
-			// style properties have been set we need to force split border
-			// definitions for user set 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 updatedBorder = ! hasSplitBorders( newBorderWithStyle )
-				? {
-						top: newBorderWithStyle,
-						right: newBorderWithStyle,
-						bottom: newBorderWithStyle,
-						left: newBorderWithStyle,
-				  }
-				: {
-						color: null,
-						style: null,
-						width: null,
-						...newBorderWithStyle,
-				  };
+	let prefixParts = [];
+	if ( variation ) {
+		prefixParts = [ 'variations', variation ].concat( prefixParts );
+	}
+	const prefix = prefixParts.join( '.' );
 
-			// As radius is maintained separately to color, style, and width
-			// maintain its value. Undefined values here will be cleaned when
-			// global styles are saved.
-			setBorder( { radius: border?.radius, ...updatedBorder } );
-		},
-		[ setBorder, border?.radius ]
-	);
+	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 (
-		<ToolsPanel label={ __( 'Border' ) } resetAll={ resetAll }>
-			{ ( showBorderWidth || showBorderColor ) && (
-				<ToolsPanelItem
-					hasValue={ () => isDefinedBorder( userBorderStyles ) }
-					label={ __( 'Border' ) }
-					onDeselect={ () => resetBorder() }
-					isShownByDefault={ true }
-				>
-					<BorderBoxControl
-						colors={ colors }
-						enableAlpha={ true }
-						enableStyle={ showBorderStyle }
-						onChange={ onBorderChange }
-						popoverOffset={ 40 }
-						popoverPlacement="left-start"
-						value={ border }
-						__experimentalIsRenderedInSidebar={ true }
-						size={ '__unstable-large' }
-					/>
-				</ToolsPanelItem>
-			) }
-			{ showBorderRadius && (
-				<ToolsPanelItem
-					hasValue={ hasBorderRadius }
-					label={ __( 'Radius' ) }
-					onDeselect={ () => setBorderRadius( undefined ) }
-					isShownByDefault={ true }
-				>
-					<BorderRadiusControl
-						values={ borderRadiusValues }
-						onChange={ ( value ) => {
-							setBorderRadius( value || undefined );
-						} }
-					/>
-				</ToolsPanelItem>
-			) }
-		</ToolsPanel>
+		<StylesBorderPanel
+			inheritedValue={ inheritedStyle }
+			value={ style }
+			onChange={ setStyle }
+			settings={ settings }
+		/>
 	);
 }

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

@@ -27,7 +27,6 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import { useHasBorderPanel } from './border-panel';
 import { useHasColorPanel } from './color-utils';
 import { useHasFilterPanel } from './filter-utils';
 import { useHasVariationsPanel } from './variations-panel';
@@ -40,6 +39,7 @@ import { unlock } from '../../private-apis';
 const {
 	useHasDimensionsPanel,
 	useHasTypographyPanel,
+	useHasBorderPanel,
 	useGlobalSetting,
 	useSettingsForBlockElement,
 } = unlock( blockEditorPrivateApis );
@@ -49,7 +49,7 @@ function ContextMenu( { name, parentMenu = '' } ) {
 	const settings = useSettingsForBlockElement( rawSettings, name );
 	const hasTypographyPanel = useHasTypographyPanel( settings );
 	const hasColorPanel = useHasColorPanel( name );
-	const hasBorderPanel = useHasBorderPanel( name );
+	const hasBorderPanel = useHasBorderPanel( settings );
 	const hasEffectsPanel = useHasShadowControl( name );
 	const hasFilterPanel = useHasFilterPanel( name );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );

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

@@ -18,7 +18,8 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { unlock } from '../../private-apis';
 import { useSelect } from '@wordpress/data';
 
-const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+const { useGlobalSetting, useColorsPerOrigin: useColorsPerOriginFromSettings } =
+	unlock( blockEditorPrivateApis );
 
 // Enable colord's a11y plugin.
 extend( [ a11yPlugin ] );
@@ -31,41 +32,16 @@ export function useColorsPerOrigin( name ) {
 		'color.defaultPalette'
 	);
 
-	return useMemo( () => {
-		const result = [];
-		if ( themeColors && themeColors.length ) {
-			result.push( {
-				name: _x(
-					'Theme',
-					'Indicates this palette comes from the theme.'
-				),
-				colors: themeColors,
-			} );
-		}
-		if (
-			shouldDisplayDefaultColors &&
-			defaultColors &&
-			defaultColors.length
-		) {
-			result.push( {
-				name: _x(
-					'Default',
-					'Indicates this palette comes from WordPress.'
-				),
-				colors: defaultColors,
-			} );
-		}
-		if ( customColors && customColors.length ) {
-			result.push( {
-				name: _x(
-					'Custom',
-					'Indicates this palette is created by the user.'
-				),
-				colors: customColors,
-			} );
-		}
-		return result;
-	}, [ customColors, themeColors, defaultColors ] );
+	return useColorsPerOriginFromSettings( {
+		color: {
+			palette: {
+				custom: customColors,
+				theme: themeColors,
+				default: defaultColors,
+			},
+			defaultPalette: shouldDisplayDefaultColors,
+		},
+	} );
 }
 
 export function useGradientsPerOrigin( name ) {

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

@@ -20,7 +20,6 @@ import { speak } from '@wordpress/a11y';
 /**
  * Internal dependencies
  */
-import { useHasBorderPanel } from './border-panel';
 import { useHasColorPanel } from './color-utils';
 import { useHasVariationsPanel } from './variations-panel';
 import ScreenHeader from './header';
@@ -30,6 +29,7 @@ import { unlock } from '../../private-apis';
 const {
 	useHasDimensionsPanel,
 	useHasTypographyPanel,
+	useHasBorderPanel,
 	useGlobalSetting,
 	useSettingsForBlockElement,
 } = unlock( blockEditorPrivateApis );
@@ -62,7 +62,7 @@ function BlockMenuItem( { block } ) {
 	const settings = useSettingsForBlockElement( rawSettings, block.name );
 	const hasTypographyPanel = useHasTypographyPanel( settings );
 	const hasColorPanel = useHasColorPanel( block.name );
-	const hasBorderPanel = useHasBorderPanel( block.name );
+	const hasBorderPanel = useHasBorderPanel( settings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
 	const hasVariationsPanel = useHasVariationsPanel( block.name );

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

@@ -2,17 +2,24 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import ScreenHeader from './header';
-import BorderPanel, { useHasBorderPanel } from './border-panel';
+import BorderPanel from './border-panel';
 import BlockPreviewPanel from './block-preview-panel';
 import { getVariationClassName } from './utils';
+import { unlock } from '../../private-apis';
+
+const { useHasBorderPanel, useGlobalSetting, useSettingsForBlockElement } =
+	unlock( blockEditorPrivateApis );
 
 function ScreenBorder( { name, variation = '' } ) {
-	const hasBorderPanel = useHasBorderPanel( name );
+	const [ rawSettings ] = useGlobalSetting( '', name );
+	const settings = useSettingsForBlockElement( rawSettings, name );
+	const hasBorderPanel = useHasBorderPanel( settings );
 	const variationClassName = getVariationClassName( variation );
 	return (
 		<>

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

@@ -51,7 +51,7 @@ function ScreenRoot() {
 	}, [] );
 
 	return (
-		<Card size="small">
+		<Card size="small" className="edit-site-global-styles-screen-root">
 			<CardBody>
 				<VStack spacing={ 4 }>
 					<Card>

package/src/components/global-styles/screen-style-variations.js

@@ -172,7 +172,11 @@ function ScreenStyleVariations() {
 				) }
 			/>
 
-			<Card size="small" isBorderless>
+			<Card
+				size="small"
+				isBorderless
+				className="edit-site-global-styles-screen-style-variations"
+			>
 				<CardBody>
 					<Grid columns={ 2 }>
 						{ withEmptyVariation?.map( ( variation, index ) => (

package/src/components/global-styles/style.scss

@@ -241,3 +241,13 @@
 	height: 24px;
 	width: 24px;
 }
+
+.edit-site-global-styles-screen-root.edit-site-global-styles-screen-root,
+.edit-site-global-styles-screen-style-variations.edit-site-global-styles-screen-style-variations {
+	background: unset;
+	color: inherit;
+}
+
+.edit-site-global-styles-sidebar__panel .block-editor-block-icon svg {
+	fill: currentColor;
+}

package/src/components/layout/index.js

@@ -277,6 +277,21 @@ export default function Layout() {
 							{ canvasResizer }
 							{ !! canvasSize.width && (
 								<motion.div
+									whileHover={
+										isEditorPage && canvasMode === 'view'
+											? {
+													scale: 1.005,
+													transition: {
+														duration:
+															disableMotion ||
+															isResizing
+																? 0
+																: 0.5,
+														ease: 'easeOut',
+													},
+											  }
+											: {}
+									}
 									initial={ false }
 									layout="position"
 									className="edit-site-layout__canvas"

package/src/components/layout/style.scss

@@ -49,11 +49,9 @@
 }
 
 .edit-site-layout__content {
+	height: 100%;
 	flex-grow: 1;
 	display: flex;
-
-	// Hide scrollbars during the edit/view animation.
-	overflow: hidden;
 }
 
 .edit-site-layout__sidebar {