Refactor Nav Block Overlay CSS

packages/block-library/src/navigation/edit/responsive-wrapper.js

@@ -34,6 +34,7 @@ export default function ResponsiveWrapper( {
 
 	const responsiveContainerClasses = classnames(
 		'wp-block-navigation__responsive-container',
+		'wp-overlay-component',
 		{
 			'has-text-color':
 				!! overlayTextColor.color || !! overlayTextColor?.class,
@@ -47,6 +48,7 @@ export default function ResponsiveWrapper( {
 				overlayBackgroundColor?.slug
 			) ]: !! overlayBackgroundColor?.slug,
 			'is-menu-open': isOpen,
+			'is-overlay-open': isOpen, // alias for new overlay specific style
 			'hidden-by-default': isHiddenByDefault,
 		}
 	);
@@ -61,13 +63,16 @@ export default function ResponsiveWrapper( {
 
 	const openButtonClasses = classnames(
 		'wp-block-navigation__responsive-container-open',
+		'wp-overlay-component__open',
+		'wp-overlay-component__toggle',
 		{ 'always-shown': isHiddenByDefault }
 	);
 
 	const modalId = `${ id }-modal`;
 
 	const dialogProps = {
-		className: 'wp-block-navigation__responsive-dialog',
+		className:
+			'wp-block-navigation__responsive-dialog wp-overlay-component__dialog',
 		...( isOpen && {
 			role: 'dialog',
 			'aria-modal': true,
@@ -95,20 +100,20 @@ export default function ResponsiveWrapper( {
 				id={ modalId }
 			>
 				<div
-					className="wp-block-navigation__responsive-close"
+					className="wp-block-navigation__responsive-close wp-overlay-component__maybe-redundant"
 					tabIndex="-1"
 				>
 					<div { ...dialogProps }>
 						<Button
-							className="wp-block-navigation__responsive-container-close"
+							className="wp-block-navigation__responsive-container-close wp-overlay-component__close wp-overlay-component__toggle"
 							aria-label={ hasIcon && __( 'Close menu' ) }
 							onClick={ () => onToggle( false ) }
 						>
 							{ hasIcon && <Icon icon={ close } /> }
 							{ ! hasIcon && __( 'Close' ) }
 						</Button>
 						<div
-							className="wp-block-navigation__responsive-container-content"
+							className="wp-block-navigation__responsive-container-content wp-overlay-component__content"
 							id={ `${ modalId }-content` }
 						>
 							{ children }

packages/block-library/src/navigation/overlay.scss

@@ -0,0 +1,201 @@
+
+// ********************************************************
+// ANIMATION
+// ********************************************************
+@keyframes overlay-menu__fade-in-animation {
+	from {
+		opacity: 0;
+		transform: translateY(0.5em);
+	}
+
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+
+// ********************************************************
+// ROOT
+// Alias: wp-block-navigation__responsive-container
+// ********************************************************
+.wp-overlay-component {
+	display: none;
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+
+	@include break-small() {
+		&:not(.hidden-by-default):not(.is-overlay-open) {
+			display: block;
+			width: 100%;
+			position: relative;
+			z-index: auto;
+			background-color: inherit;
+		}
+	}
+
+	// STATE: overlay is open.
+	// ********************************************************
+	&.is-overlay-open {
+		display: flex; // Needs to be set to override "none".
+		flex-direction: column;
+		background-color: inherit;
+
+		// Try to inherit any root paddings set, so the X can align to a top-right aligned menu.
+		padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem);
+		padding-right: clamp(1rem, var(--wp--style--root--padding-right), 20rem);
+		padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem);
+		padding-left: clamp(1rem, var(--wp--style--root--padding-left), 20em);
+
+		// Animation.
+		animation: overlay-menu__fade-in-animation 0.1s ease-out;
+		animation-fill-mode: forwards;
+		@include reduce-motion("animation");
+
+		// Allow modal to scroll.
+		overflow: auto;
+
+		// Give it a z-index just higher than the adminbar.
+		z-index: 100000;
+	}
+}
+
+
+// ********************************************************
+// DIALOG
+// Alias: wp-block-navigation__responsive-dialog
+// ********************************************************
+.wp-overlay-component__dialog {
+	position: relative;
+
+	// STATE: overlay is open.
+	// ********************************************************
+	.is-overlay-open & {
+		// Quesiton: why is this conditionally applied?
+		box-sizing: border-box;
+	}
+}
+
+
+// ********************************************************
+// CONTENT
+// Alias: wp-block-navigation__responsive-container-content
+// ********************************************************
+.wp-overlay-component__content {
+
+	// STATE: overlay is open.
+	// ********************************************************
+	.is-overlay-open & {
+
+		// Always align the contents of the menu to the top.
+		justify-content: flex-start;
+
+		// Add padding above to accommodate close button.
+		padding-top: calc(2rem + #{ $navigation-icon-size });
+
+		// Don't crop the focus style.
+		overflow: visible;
+
+		// Override the container flex layout settings
+		// because we want overlay menu to always display
+		// as a column.
+		display: flex;
+		flex-direction: column;
+		flex-wrap: nowrap;
+
+		// Quesiton: why is this conditionally applied?
+		box-sizing: border-box;
+	}
+}
+
+
+// ********************************************************
+// TOGGLE BUTTONS
+// Alias:
+// - .wp-block-navigation__responsive-container-open,
+// - .wp-block-navigation__responsive-container-close
+// ********************************************************
+
+.wp-overlay-component__toggle {
+	vertical-align: middle;
+	cursor: pointer;
+	color: currentColor;
+	background: transparent;
+	border: none;
+	margin: 0;
+	padding: 0;
+	text-transform: inherit;
+
+	svg {
+		fill: currentColor;
+		pointer-events: none;
+		display: block;
+		width: $navigation-icon-size;
+		height: $navigation-icon-size;
+	}
+}
+
+
+// ********************************************************
+// OPEN BUTTON
+// Alias: wp-block-navigation__responsive-container-open
+// ********************************************************
+
+.wp-overlay-component__open {
+	display: flex;
+
+	// When the overlay is always "on" then do not
+	// hide the open button on smaller viewports.
+	&:not(.always-shown) {
+		@include break-small {
+			display: none;
+		}
+	}
+}
+
+// ********************************************************
+// CLOSE BUTTON
+// Alias: wp-block-navigation__responsive-container-close
+// ********************************************************
+
+.wp-overlay-component__close {
+	position: absolute;
+	top: 0;
+	right: 0;
+	z-index: 2; // Needs to be above the modal z index itself.
+
+	// STATE: overlay is open.
+	// ********************************************************
+	.is-overlay-open & {
+		box-sizing: border-box;
+	}
+}
+
+
+// ********************************************************
+// MAYBE REDUNDANT
+// Alias: wp-block-navigation__responsive-close
+// ********************************************************
+.wp-overlay-component__maybe-redundant {
+	width: 100%;
+
+	// STATE: overlay is open.
+	// ********************************************************
+	.has-modal-open & {
+		// Try to inherit wide-width when defined, so the X can align to a top-right aligned menu.
+		max-width: var(--wp--style--global--wide-size, 100%);
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	// This element is not keyboard accessible, and is focusable only using the mouse.
+	// It is part of the MicroModal library that adds a scrim outside of a modal dialog that is not fullscreen,
+	// where clicking that scrim closes the overlay just like the close button.
+	// It should not have a visible focus rectangle.
+	&:focus {
+		outline: none;
+	}
+}