@wordpress/interface 5.34.0 → 6.0.0

package/src/components/complementary-area/style.scss

@@ -24,7 +24,7 @@
 		top: 0;
 		z-index: z-index(".interface-complementary-area .components-panel__header");
 
-		&.edit-post-sidebar__panel-tabs {
+		&.editor-sidebar__panel-tabs {
 			top: $panel-header-height;
 
 			@include break-medium() {
@@ -39,6 +39,7 @@
 
 	h2 {
 		font-size: $default-font-size;
+		font-weight: 500;
 		color: $gray-900;
 		margin-bottom: 1.5em;
 	}

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -33,7 +33,7 @@ const ComplementaryAreaHeader = ( {
 				{ toggleButton }
 			</div>
 			<div
-				className={ classnames(
+				className={ clsx(
 					'components-panel__header',
 					'interface-complementary-area-header',
 					className

package/src/components/complementary-area-header/style.scss

@@ -17,7 +17,8 @@
 
 .interface-complementary-area-header {
 	background: $white;
-	padding-right: $grid-unit-05;
+	padding-right: $grid-unit-15; // Reduced padding to account for close buttons.
+	gap: $grid-unit-10; // Always ensure space between contents and close buttons.
 
 	.interface-complementary-area-header__title {
 		margin: 0;
@@ -36,11 +37,3 @@
 		}
 	}
 }
-
-// This overrides the negative margins between two consecutives panels.
-// since the first panel is hidden.
-.components-panel__header + .interface-complementary-area-header {
-	@include break-medium() {
-		margin-top: 0;
-	}
-}

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -26,6 +26,11 @@ import {
 import NavigableRegion from '../navigable-region';
 
 const ANIMATION_DURATION = 0.25;
+const commonTransition = {
+	type: 'tween',
+	duration: ANIMATION_DURATION,
+	ease: [ 0.6, 0, 0.4, 1 ],
+};
 
 function useHTMLClass( className ) {
 	useEffect( () => {
@@ -42,12 +47,30 @@ function useHTMLClass( className ) {
 }
 
 const headerVariants = {
-	hidden: { opacity: 0 },
-	hover: {
+	hidden: { opacity: 1, marginTop: -60 },
+	visible: { opacity: 1, marginTop: 0 },
+	distractionFreeHover: {
 		opacity: 1,
-		transition: { type: 'tween', delay: 0.2, delayChildren: 0.2 },
+		marginTop: 0,
+		transition: {
+			...commonTransition,
+			delay: 0.2,
+			delayChildren: 0.2,
+		},
+	},
+	distractionFreeHidden: {
+		opacity: 0,
+		marginTop: -60,
+	},
+	distractionFreeDisabled: {
+		opacity: 0,
+		marginTop: 0,
+		transition: {
+			...commonTransition,
+			delay: 0.8,
+			delayChildren: 0.8,
+		},
 	},
-	distractionFreeInactive: { opacity: 1, transition: { delay: 0 } },
 };
 
 function InterfaceSkeleton(
@@ -58,7 +81,6 @@ function InterfaceSkeleton(
 		editorNotices,
 		sidebar,
 		secondarySidebar,
-		notices,
 		content,
 		actions,
 		labels,
@@ -106,7 +128,7 @@ function InterfaceSkeleton(
 				ref,
 				enableRegionNavigation ? navigateRegionsProps.ref : undefined,
 			] ) }
-			className={ classnames(
+			className={ clsx(
 				className,
 				'interface-interface-skeleton',
 				navigateRegionsProps.className,
@@ -114,36 +136,39 @@ function InterfaceSkeleton(
 			) }
 		>
 			<div className="interface-interface-skeleton__editor">
-				{ !! header && (
-					<NavigableRegion
-						as={ motion.div }
-						className="interface-interface-skeleton__header"
-						aria-label={ mergedLabels.header }
-						initial={
-							isDistractionFree
-								? 'hidden'
-								: 'distractionFreeInactive'
-						}
-						whileHover={
-							isDistractionFree
-								? 'hover'
-								: 'distractionFreeInactive'
-						}
-						animate={
-							isDistractionFree
-								? 'hidden'
-								: 'distractionFreeInactive'
-						}
-						variants={ headerVariants }
-						transition={
-							isDistractionFree
-								? { type: 'tween', delay: 0.8 }
-								: undefined
-						}
-					>
-						{ header }
-					</NavigableRegion>
-				) }
+				<AnimatePresence initial={ false }>
+					{ !! header && (
+						<NavigableRegion
+							as={ motion.div }
+							className="interface-interface-skeleton__header"
+							aria-label={ mergedLabels.header }
+							initial={
+								isDistractionFree
+									? 'distractionFreeHidden'
+									: 'hidden'
+							}
+							whileHover={
+								isDistractionFree
+									? 'distractionFreeHover'
+									: 'visible'
+							}
+							animate={
+								isDistractionFree
+									? 'distractionFreeDisabled'
+									: 'visible'
+							}
+							exit={
+								isDistractionFree
+									? 'distractionFreeHidden'
+									: 'hidden'
+							}
+							variants={ headerVariants }
+							transition={ defaultTransition }
+						>
+							{ header }
+						</NavigableRegion>
+					) }
+				</AnimatePresence>
 				{ isDistractionFree && (
 					<div className="interface-interface-skeleton__header">
 						{ editorNotices }
@@ -184,11 +209,6 @@ function InterfaceSkeleton(
 							</NavigableRegion>
 						) }
 					</AnimatePresence>
-					{ !! notices && (
-						<div className="interface-interface-skeleton__notices">
-							{ notices }
-						</div>
-					) }
 					<NavigableRegion
 						className="interface-interface-skeleton__content"
 						ariaLabel={ mergedLabels.body }

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

@@ -5,8 +5,10 @@ html.interface-interface-skeleton__html-container {
 	width: 100%;
 
 	@include break-medium() {
-		position: initial;
-		width: initial;
+		&:not(:has(.is-zoom-out)) {
+			position: initial;
+			width: initial;
+		}
 	}
 }
 
@@ -123,26 +125,32 @@ html.interface-interface-skeleton__html-container {
 }
 
 .interface-interface-skeleton__sidebar {
+	border-top: $border-width solid $gray-200;
 	overflow: hidden;
 
 	@include break-medium() {
-		border-left: $border-width solid $gray-200;
+		box-shadow: -$border-width $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
+		outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
 	}
 }
 
 .interface-interface-skeleton__secondary-sidebar {
+	border-top: $border-width solid $gray-200;
 	right: 0;
+
 	@include break-medium() {
-		border-right: $border-width solid $gray-200;
+		box-shadow: $border-width $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
+		outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
 	}
 }
 
 .interface-interface-skeleton__header {
 	flex-shrink: 0;
 	height: auto;  // Keep the height flexible.
-	border-bottom: $border-width solid $gray-200;
+	box-shadow: 0 $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
 	z-index: z-index(".interface-interface-skeleton__header");
 	color: $gray-900;
+	outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
 }
 
 .interface-interface-skeleton__footer {

package/src/components/navigable-region/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 export default function NavigableRegion( {
 	children,
@@ -12,7 +12,7 @@ export default function NavigableRegion( {
 } ) {
 	return (
 		<Tag
-			className={ classnames( 'interface-navigable-region', className ) }
+			className={ clsx( 'interface-navigable-region', className ) }
 			aria-label={ ariaLabel }
 			role="region"
 			tabIndex="-1"

package/src/components/pinned-items/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -18,7 +18,7 @@ function PinnedItemsSlot( { scope, className, ...props } ) {
 			{ ( fills ) =>
 				fills?.length > 0 && (
 					<div
-						className={ classnames(
+						className={ clsx(
 							className,
 							'interface-pinned-items'
 						) }