@wordpress/interface 5.31.0 → 5.33.0

package/src/components/complementary-area/index.js

@@ -6,13 +6,25 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Button, Panel, Slot, Fill } from '@wordpress/components';
+import {
+	Button,
+	Panel,
+	Slot,
+	Fill,
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
+} from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { check, starEmpty, starFilled } from '@wordpress/icons';
-import { useEffect, useRef } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
 import { store as viewportStore } from '@wordpress/viewport';
 import { store as preferencesStore } from '@wordpress/preferences';
+import {
+	useReducedMotion,
+	useViewportMatch,
+	usePrevious,
+} from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -24,16 +36,77 @@ import withComplementaryAreaContext from '../complementary-area-context';
 import PinnedItems from '../pinned-items';
 import { store as interfaceStore } from '../../store';
 
+const ANIMATION_DURATION = 0.3;
+
 function ComplementaryAreaSlot( { scope, ...props } ) {
 	return <Slot name={ `ComplementaryArea/${ scope }` } { ...props } />;
 }
 
-function ComplementaryAreaFill( { scope, children, className, id } ) {
+const SIDEBAR_WIDTH = 280;
+const variants = {
+	open: { width: SIDEBAR_WIDTH },
+	closed: { width: 0 },
+	mobileOpen: { width: '100vw' },
+};
+
+function ComplementaryAreaFill( {
+	activeArea,
+	isActive,
+	scope,
+	children,
+	className,
+	id,
+} ) {
+	const disableMotion = useReducedMotion();
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	// This is used to delay the exit animation to the next tick.
+	// The reason this is done is to allow us to apply the right transition properties
+	// When we switch from an open sidebar to another open sidebar.
+	// we don't want to animate in this case.
+	const previousActiveArea = usePrevious( activeArea );
+	const previousIsActive = usePrevious( isActive );
+	const [ , setState ] = useState( {} );
+	useEffect( () => {
+		setState( {} );
+	}, [ isActive ] );
+	const transition = {
+		type: 'tween',
+		duration:
+			disableMotion ||
+			isMobileViewport ||
+			( !! previousActiveArea &&
+				!! activeArea &&
+				activeArea !== previousActiveArea )
+				? 0
+				: ANIMATION_DURATION,
+		ease: [ 0.6, 0, 0.4, 1 ],
+	};
+
 	return (
 		<Fill name={ `ComplementaryArea/${ scope }` }>
-			<div id={ id } className={ className }>
-				{ children }
-			</div>
+			<AnimatePresence initial={ false }>
+				{ ( previousIsActive || isActive ) && (
+					<motion.div
+						variants={ variants }
+						initial="closed"
+						animate={ isMobileViewport ? 'mobileOpen' : 'open' }
+						exit="closed"
+						transition={ transition }
+					>
+						<div
+							id={ id }
+							className={ className }
+							style={ {
+								width: isMobileViewport
+									? '100vw'
+									: SIDEBAR_WIDTH,
+							} }
+						>
+							{ children }
+						</div>
+					</motion.div>
+				) }
+			</AnimatePresence>
 		</Fill>
 	);
 }
@@ -110,6 +183,11 @@ function ComplementaryArea( {
 	toggleShortcut,
 	isActiveByDefault,
 } ) {
+	// This state is used to delay the rendering of the Fill
+	// until the initial effect runs.
+	// This prevents the animation from running on mount if
+	// the complementary area is active by default.
+	const [ isReady, setIsReady ] = useState( false );
 	const {
 		isLoading,
 		isActive,
@@ -163,6 +241,7 @@ function ComplementaryArea( {
 		} else if ( activeArea === undefined && isSmall ) {
 			disableComplementaryArea( scope, identifier );
 		}
+		setIsReady( true );
 	}, [
 		activeArea,
 		isActiveByDefault,
@@ -173,6 +252,10 @@ function ComplementaryArea( {
 		disableComplementaryArea,
 	] );
 
+	if ( ! isReady ) {
+		return;
+	}
+
 	return (
 		<>
 			{ isPinnable && (
@@ -204,59 +287,57 @@ function ComplementaryArea( {
 					{ title }
 				</ComplementaryAreaMoreMenuItem>
 			) }
-			{ isActive && (
-				<ComplementaryAreaFill
-					className={ classnames(
-						'interface-complementary-area',
-						className
-					) }
-					scope={ scope }
-					id={ identifier.replace( '/', ':' ) }
+			<ComplementaryAreaFill
+				activeArea={ activeArea }
+				isActive={ isActive }
+				className={ classnames(
+					'interface-complementary-area',
+					className
+				) }
+				scope={ scope }
+				id={ identifier.replace( '/', ':' ) }
+			>
+				<ComplementaryAreaHeader
+					className={ headerClassName }
+					closeLabel={ closeLabel }
+					onClose={ () => disableComplementaryArea( scope ) }
+					smallScreenTitle={ smallScreenTitle }
+					toggleButtonProps={ {
+						label: closeLabel,
+						shortcut: toggleShortcut,
+						scope,
+						identifier,
+					} }
 				>
-					<ComplementaryAreaHeader
-						className={ headerClassName }
-						closeLabel={ closeLabel }
-						onClose={ () => disableComplementaryArea( scope ) }
-						smallScreenTitle={ smallScreenTitle }
-						toggleButtonProps={ {
-							label: closeLabel,
-							shortcut: toggleShortcut,
-							scope,
-							identifier,
-						} }
-					>
-						{ header || (
-							<>
-								<h2 className="interface-complementary-area-header__title">
-									{ title }
-								</h2>
-								{ isPinnable && (
-									<Button
-										className="interface-complementary-area__pin-unpin-item"
-										icon={
-											isPinned ? starFilled : starEmpty
-										}
-										label={
-											isPinned
-												? __( 'Unpin from toolbar' )
-												: __( 'Pin to toolbar' )
-										}
-										onClick={ () =>
-											( isPinned ? unpinItem : pinItem )(
-												scope,
-												identifier
-											)
-										}
-										isPressed={ isPinned }
-										aria-expanded={ isPinned }
-									/>
-								) }
-							</>
-						) }
-					</ComplementaryAreaHeader>
-					<Panel className={ panelClassName }>{ children }</Panel>
-				</ComplementaryAreaFill>
-			) }
+					{ header || (
+						<>
+							<h2 className="interface-complementary-area-header__title">
+								{ title }
+							</h2>
+							{ isPinnable && (
+								<Button
+									className="interface-complementary-area__pin-unpin-item"
+									icon={ isPinned ? starFilled : starEmpty }
+									label={
+										isPinned
+											? __( 'Unpin from toolbar' )
+											: __( 'Pin to toolbar' )
+									}
+									onClick={ () =>
+										( isPinned ? unpinItem : pinItem )(
+											scope,
+											identifier
+										)
+									}
+									isPressed={ isPinned }
+									aria-expanded={ isPinned }
+								/>
+							) }
+						</>
+					) }
+				</ComplementaryAreaHeader>
+				<Panel className={ panelClassName }>{ children }</Panel>
+			</ComplementaryAreaFill>
 		</>
 	);
 }

package/src/components/complementary-area-more-menu-item/README.md

@@ -5,7 +5,7 @@ Props not referenced here are passed to the component used to render the menu it
 
 ### scope
 
-The scope of the complementary area e.g: "core/edit-post", "core/edit-site", "myplugin/custom-screen-a",
+The scope of the complementary area e.g: "core", "myplugin/custom-screen-a",
 
 -   Type: `String`
 -   Required: Yes

package/src/components/complementary-area-toggle/README.md

@@ -6,7 +6,7 @@
 
 ### scope
 
-The scope of the complementary area e.g: "core/edit-post", "core/edit-site", "myplugin/custom-screen-a",
+The scope of the complementary area e.g: "core", "myplugin/custom-screen-a",
 
 -   Type: `String`
 -   Required: Yes

package/src/components/interface-skeleton/index.js

@@ -10,15 +10,23 @@ import { forwardRef, useEffect } from '@wordpress/element';
 import {
 	__unstableUseNavigateRegions as useNavigateRegions,
 	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
 } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
-import { useMergeRefs } from '@wordpress/compose';
+import {
+	useMergeRefs,
+	useReducedMotion,
+	useViewportMatch,
+	useResizeObserver,
+} from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import NavigableRegion from '../navigable-region';
 
+const ANIMATION_DURATION = 0.25;
+
 function useHTMLClass( className ) {
 	useEffect( () => {
 		const element =
@@ -62,8 +70,16 @@ function InterfaceSkeleton(
 	},
 	ref
 ) {
+	const [ secondarySidebarResizeListener, secondarySidebarSize ] =
+		useResizeObserver();
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const disableMotion = useReducedMotion();
+	const defaultTransition = {
+		type: 'tween',
+		duration: disableMotion ? 0 : ANIMATION_DURATION,
+		ease: [ 0.6, 0, 0.4, 1 ],
+	};
 	const navigateRegionsProps = useNavigateRegions( shortcuts );
-
 	useHTMLClass( 'interface-interface-skeleton__html-container' );
 
 	const defaultLabels = {
@@ -134,14 +150,38 @@ function InterfaceSkeleton(
 					</div>
 				) }
 				<div className="interface-interface-skeleton__body">
-					{ !! secondarySidebar && (
-						<NavigableRegion
-							className="interface-interface-skeleton__secondary-sidebar"
-							ariaLabel={ mergedLabels.secondarySidebar }
-						>
-							{ secondarySidebar }
-						</NavigableRegion>
-					) }
+					<AnimatePresence initial={ false }>
+						{ !! secondarySidebar && (
+							<NavigableRegion
+								className="interface-interface-skeleton__secondary-sidebar"
+								ariaLabel={ mergedLabels.secondarySidebar }
+								as={ motion.div }
+								initial="closed"
+								animate={
+									isMobileViewport ? 'mobileOpen' : 'open'
+								}
+								exit="closed"
+								variants={ {
+									open: { width: secondarySidebarSize.width },
+									closed: { width: 0 },
+									mobileOpen: { width: '100vw' },
+								} }
+								transition={ defaultTransition }
+							>
+								<div
+									style={ {
+										position: 'absolute',
+										width: 'fit-content',
+										height: '100%',
+										right: 0,
+									} }
+								>
+									{ secondarySidebarResizeListener }
+									{ secondarySidebar }
+								</div>
+							</NavigableRegion>
+						) }
+					</AnimatePresence>
 					{ !! notices && (
 						<div className="interface-interface-skeleton__notices">
 							{ notices }

package/src/components/interface-skeleton/style.scss

@@ -102,16 +102,15 @@ html.interface-interface-skeleton__html-container {
 	position: absolute;
 	z-index: z-index(".interface-interface-skeleton__sidebar");
 	top: 0;
-	right: 0;
-	bottom: 0;
 	left: 0;
+	bottom: 0;
 	background: $white;
 	color: $gray-900;
+	width: auto; // Keep the sidebar width flexible.
 
 	// On Mobile the header is fixed to keep HTML as scrollable.
 	@include break-medium() {
 		position: relative !important;
-		width: auto; // Keep the sidebar width flexible.
 
 		// Set this z-index only when the sidebar is opened. When it's closed, the
 		// button to open the sidebar that is shown when navigating regions needs to
@@ -131,6 +130,7 @@ html.interface-interface-skeleton__html-container {
 }
 
 .interface-interface-skeleton__secondary-sidebar {
+	right: 0;
 	@include break-medium() {
 		border-right: $border-width solid $gray-200;
 	}

package/src/components/pinned-items/README.md

@@ -15,7 +15,7 @@ The content to be displayed for the pinned items. Most of the time, a button wit
 
 ### scope
 
-The scope of the pinned items area e.g: "core/edit-post", "core/edit-site", "myplugin/custom-screen-a",
+The scope of the pinned items area e.g: "core", "myplugin/custom-screen-a",
 
 -   Type: `String`
 -   Required: Yes
@@ -28,7 +28,7 @@ A slot that renders the pinned items.
 
 ### scope
 
-The scope of the pinned items area e.g: "core/edit-post", "core/edit-site", "myplugin/custom-screen-a",
+The scope of the pinned items area e.g: "core", "myplugin/custom-screen-a",
 
 -   Type: `String`
 -   Required: Yes

package/src/components/pinned-items/style.scss

@@ -10,8 +10,7 @@
 		&[aria-controls="edit-post:document"],
 		&[aria-controls="edit-post:block"],
 		&[aria-controls="edit-site:template"],
-		&[aria-controls="edit-site:block-inspector"],
-		&[aria-controls="edit-site:global-styles"] {
+		&[aria-controls="edit-site:block-inspector"] {
 			display: flex;
 		}
 

package/src/store/actions.js

@@ -4,6 +4,14 @@
 import deprecated from '@wordpress/deprecated';
 import { store as preferencesStore } from '@wordpress/preferences';
 
+/**
+ * Internal dependencies
+ */
+import {
+	normalizeComplementaryAreaScope,
+	normalizeComplementaryAreaName,
+} from './deprecated';
+
 /**
  * Set a default complementary area.
  *
@@ -12,11 +20,15 @@ import { store as preferencesStore } from '@wordpress/preferences';
  *
  * @return {Object} Action object.
  */
-export const setDefaultComplementaryArea = ( scope, area ) => ( {
-	type: 'SET_DEFAULT_COMPLEMENTARY_AREA',
-	scope,
-	area,
-} );
+export const setDefaultComplementaryArea = ( scope, area ) => {
+	scope = normalizeComplementaryAreaScope( scope );
+	area = normalizeComplementaryAreaName( scope, area );
+	return {
+		type: 'SET_DEFAULT_COMPLEMENTARY_AREA',
+		scope,
+		area,
+	};
+};
 
 /**
  * Enable the complementary area.
@@ -31,6 +43,8 @@ export const enableComplementaryArea =
 		if ( ! area ) {
 			return;
 		}
+		scope = normalizeComplementaryAreaScope( scope );
+		area = normalizeComplementaryAreaName( scope, area );
 
 		const isComplementaryAreaVisible = registry
 			.select( preferencesStore )
@@ -57,6 +71,7 @@ export const enableComplementaryArea =
 export const disableComplementaryArea =
 	( scope ) =>
 	( { registry } ) => {
+		scope = normalizeComplementaryAreaScope( scope );
 		const isComplementaryAreaVisible = registry
 			.select( preferencesStore )
 			.get( scope, 'isComplementaryAreaVisible' );
@@ -84,6 +99,8 @@ export const pinItem =
 			return;
 		}
 
+		scope = normalizeComplementaryAreaScope( scope );
+		item = normalizeComplementaryAreaName( scope, item );
 		const pinnedItems = registry
 			.select( preferencesStore )
 			.get( scope, 'pinnedItems' );
@@ -113,6 +130,8 @@ export const unpinItem =
 			return;
 		}
 
+		scope = normalizeComplementaryAreaScope( scope );
+		item = normalizeComplementaryAreaName( scope, item );
 		const pinnedItems = registry
 			.select( preferencesStore )
 			.get( scope, 'pinnedItems' );

package/src/store/deprecated.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+
+export function normalizeComplementaryAreaScope( scope ) {
+	if ( [ 'core/edit-post', 'core/edit-site' ].includes( scope ) ) {
+		deprecated( `${ scope } interface scope`, {
+			alternative: 'core interface scope',
+			hint: 'core/edit-post and core/edit-site are merging.',
+			version: '6.6',
+		} );
+		return 'core';
+	}
+
+	return scope;
+}
+
+export function normalizeComplementaryAreaName( scope, name ) {
+	if ( scope === 'core' && name === 'edit-site/template' ) {
+		deprecated( `edit-site/template sidebar`, {
+			alternative: 'edit-post/document',
+			version: '6.6',
+		} );
+		return 'edit-post/document';
+	}
+
+	if ( scope === 'core' && name === 'edit-site/block-inspector' ) {
+		deprecated( `edit-site/block-inspector sidebar`, {
+			alternative: 'edit-post/block',
+			version: '6.6',
+		} );
+		return 'edit-post/block';
+	}
+
+	return name;
+}

package/src/store/selectors.js

@@ -5,6 +5,14 @@ import { createRegistrySelector } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import { store as preferencesStore } from '@wordpress/preferences';
 
+/**
+ * Internal dependencies
+ */
+import {
+	normalizeComplementaryAreaScope,
+	normalizeComplementaryAreaName,
+} from './deprecated';
+
 /**
  * Returns the complementary area that is active in a given scope.
  *
@@ -15,6 +23,7 @@ import { store as preferencesStore } from '@wordpress/preferences';
  */
 export const getActiveComplementaryArea = createRegistrySelector(
 	( select ) => ( state, scope ) => {
+		scope = normalizeComplementaryAreaScope( scope );
 		const isComplementaryAreaVisible = select( preferencesStore ).get(
 			scope,
 			'isComplementaryAreaVisible'
@@ -38,6 +47,7 @@ export const getActiveComplementaryArea = createRegistrySelector(
 
 export const isComplementaryAreaLoading = createRegistrySelector(
 	( select ) => ( state, scope ) => {
+		scope = normalizeComplementaryAreaScope( scope );
 		const isVisible = select( preferencesStore ).get(
 			scope,
 			'isComplementaryAreaVisible'
@@ -59,6 +69,8 @@ export const isComplementaryAreaLoading = createRegistrySelector(
  */
 export const isItemPinned = createRegistrySelector(
 	( select ) => ( state, scope, item ) => {
+		scope = normalizeComplementaryAreaScope( scope );
+		item = normalizeComplementaryAreaName( scope, item );
 		const pinnedItems = select( preferencesStore ).get(
 			scope,
 			'pinnedItems'