@wordpress/block-library 8.14.0 → 8.15.0

package/src/navigation/style.scss

@@ -31,6 +31,7 @@ $navigation-icon-size: 24px;
 
 	// Menu item container.
 	.wp-block-navigation-item {
+		background-color: inherit;
 		display: flex;
 		align-items: center;
 		position: relative;
@@ -398,15 +399,26 @@ button.wp-block-navigation-item__content {
 }
 
 // Default background and font color.
-.wp-block-navigation:not(.has-background) {
+.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
+	// Set a background color for submenus so that they're not transparent.
+	// NOTE TO DEVS - if refactoring this code, please double-check that
+	// submenus have a default background color, this feature has regressed
+	// several times, so care needs to be taken.
+	background-color: #fff;
+	border: 1px solid rgba(0, 0, 0, 0.15);
+}
+
+// If we do have a background color selected, inherit it from the navigation block
+.wp-block-navigation.has-background {
 	.wp-block-navigation__submenu-container {
-		// Set a background color for submenus so that they're not transparent.
-		// NOTE TO DEVS - if refactoring this code, please double-check that
-		// submenus have a default background color, this feature has regressed
-		// several times, so care needs to be taken.
-		background-color: #fff;
+		background-color: inherit;
+	}
+}
+
+.wp-block-navigation:not(.has-text-color) {
+	.wp-block-navigation__submenu-container {
+		// Set a default color for submenu text if none is selected
 		color: #000;
-		border: 1px solid rgba(0, 0, 0, 0.15);
 	}
 }
 
@@ -458,7 +470,8 @@ button.wp-block-navigation-item__content {
 	right: 0;
 	bottom: 0;
 
-	.wp-block-navigation-link a {
+	// Low specificity so that themes can override.
+	& :where(.wp-block-navigation-item a) {
 		color: inherit;
 	}
 
@@ -579,6 +592,7 @@ button.wp-block-navigation-item__content {
 		// Remove background colors for items inside the overlay menu.
 		// Has to be !important to override global styles.
 		.wp-block-navigation-item .wp-block-navigation__submenu-container,
+		.wp-block-navigation__container,
 		.wp-block-navigation-item,
 		.wp-block-page-list {
 			color: inherit !important;
@@ -620,9 +634,14 @@ button.wp-block-navigation-item__content {
 .wp-block-navigation:not(.has-background)
 .wp-block-navigation__responsive-container.is-menu-open {
 	background-color: #fff;
+}
+
+.wp-block-navigation:not(.has-text-color)
+.wp-block-navigation__responsive-container.is-menu-open {
 	color: #000;
 }
 
+
 // Overlay menu toggle button label
 .wp-block-navigation__toggle_button_label {
 	font-size: 1rem;

package/src/navigation/use-navigation-menu.js

@@ -4,85 +4,61 @@
 import {
 	store as coreStore,
 	useResourcePermissions,
+	useEntityRecords,
 } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { SELECT_NAVIGATION_MENUS_ARGS } from './constants';
+import { PRELOADED_NAVIGATION_MENUS_QUERY } from './constants';
 
 export default function useNavigationMenu( ref ) {
 	const permissions = useResourcePermissions( 'navigation', ref );
 
-	return useSelect(
+	const {
+		navigationMenu,
+		isNavigationMenuResolved,
+		isNavigationMenuMissing,
+	} = useSelect(
 		( select ) => {
-			const {
-				canCreate,
-				canUpdate,
-				canDelete,
-				isResolving,
-				hasResolved,
-			} = permissions;
-
-			const {
-				navigationMenus,
-				isResolvingNavigationMenus,
-				hasResolvedNavigationMenus,
-			} = selectNavigationMenus( select );
-
-			const {
-				navigationMenu,
-				isNavigationMenuResolved,
-				isNavigationMenuMissing,
-			} = selectExistingMenu( select, ref );
-
-			return {
-				navigationMenus,
-				isResolvingNavigationMenus,
-				hasResolvedNavigationMenus,
-
-				navigationMenu,
-				isNavigationMenuResolved,
-				isNavigationMenuMissing,
-
-				canSwitchNavigationMenu: ref
-					? navigationMenus?.length > 1
-					: navigationMenus?.length > 0,
-
-				canUserCreateNavigationMenu: canCreate,
-				isResolvingCanUserCreateNavigationMenu: isResolving,
-				hasResolvedCanUserCreateNavigationMenu: hasResolved,
-
-				canUserUpdateNavigationMenu: canUpdate,
-				hasResolvedCanUserUpdateNavigationMenu: ref
-					? hasResolved
-					: undefined,
-
-				canUserDeleteNavigationMenu: canDelete,
-				hasResolvedCanUserDeleteNavigationMenu: ref
-					? hasResolved
-					: undefined,
-			};
+			return selectExistingMenu( select, ref );
 		},
-		[ ref, permissions ]
+		[ ref ]
 	);
-}
 
-function selectNavigationMenus( select ) {
-	const { getEntityRecords, hasFinishedResolution, isResolving } =
-		select( coreStore );
+	const { canCreate, canUpdate, canDelete, isResolving, hasResolved } =
+		permissions;
+
+	const {
+		records: navigationMenus,
+		isResolving: isResolvingNavigationMenus,
+		hasResolved: hasResolvedNavigationMenus,
+	} = useEntityRecords(
+		'postType',
+		`wp_navigation`,
+		PRELOADED_NAVIGATION_MENUS_QUERY
+	);
+
+	const canSwitchNavigationMenu = ref
+		? navigationMenus?.length > 1
+		: navigationMenus?.length > 0;
 
 	return {
-		navigationMenus: getEntityRecords( ...SELECT_NAVIGATION_MENUS_ARGS ),
-		isResolvingNavigationMenus: isResolving(
-			'getEntityRecords',
-			SELECT_NAVIGATION_MENUS_ARGS
-		),
-		hasResolvedNavigationMenus: hasFinishedResolution(
-			'getEntityRecords',
-			SELECT_NAVIGATION_MENUS_ARGS
-		),
+		navigationMenu,
+		isNavigationMenuResolved,
+		isNavigationMenuMissing,
+		navigationMenus,
+		isResolvingNavigationMenus,
+		hasResolvedNavigationMenus,
+		canSwitchNavigationMenu,
+		canUserCreateNavigationMenu: canCreate,
+		isResolvingCanUserCreateNavigationMenu: isResolving,
+		hasResolvedCanUserCreateNavigationMenu: hasResolved,
+		canUserUpdateNavigationMenu: canUpdate,
+		hasResolvedCanUserUpdateNavigationMenu: ref ? hasResolved : undefined,
+		canUserDeleteNavigationMenu: canDelete,
+		hasResolvedCanUserDeleteNavigationMenu: ref ? hasResolved : undefined,
 	};
 }
 

package/src/navigation/view-interactivity.js

@@ -0,0 +1,196 @@
+/**
+ * WordPress dependencies
+ */
+import { store as wpStore } from '@wordpress/interactivity';
+
+const focusableSelectors = [
+	'a[href]',
+	'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
+	'select:not([disabled]):not([aria-hidden])',
+	'textarea:not([disabled]):not([aria-hidden])',
+	'button:not([disabled]):not([aria-hidden])',
+	'[contenteditable]',
+	'[tabindex]:not([tabindex^="-"])',
+];
+
+const openMenu = ( store, menuOpenedOn ) => {
+	const { context, ref, selectors } = store;
+	selectors.core.navigation.menuOpenedBy( store )[ menuOpenedOn ] = true;
+	context.core.navigation.previousFocus = ref;
+	if ( context.core.navigation.type === 'overlay' ) {
+		// Add a `has-modal-open` class to the <html> root.
+		document.documentElement.classList.add( 'has-modal-open' );
+	}
+};
+
+const closeMenu = ( store, menuClosedOn ) => {
+	const { context, selectors } = store;
+	selectors.core.navigation.menuOpenedBy( store )[ menuClosedOn ] = false;
+	// Check if the menu is still open or not.
+	if ( ! selectors.core.navigation.isMenuOpen( store ) ) {
+		if (
+			context.core.navigation.modal?.contains(
+				window.document.activeElement
+			)
+		) {
+			context.core.navigation.previousFocus.focus();
+		}
+		context.core.navigation.modal = null;
+		context.core.navigation.previousFocus = null;
+		if ( context.core.navigation.type === 'overlay' ) {
+			document.documentElement.classList.remove( 'has-modal-open' );
+		}
+	}
+};
+
+wpStore( {
+	effects: {
+		core: {
+			navigation: {
+				initMenu: ( store ) => {
+					const { context, selectors, ref } = store;
+					if ( selectors.core.navigation.isMenuOpen( store ) ) {
+						const focusableElements =
+							ref.querySelectorAll( focusableSelectors );
+						context.core.navigation.modal = ref;
+						context.core.navigation.firstFocusableElement =
+							focusableElements[ 0 ];
+						context.core.navigation.lastFocusableElement =
+							focusableElements[ focusableElements.length - 1 ];
+					}
+				},
+				focusFirstElement: ( store ) => {
+					const { selectors, ref } = store;
+					if ( selectors.core.navigation.isMenuOpen( store ) ) {
+						ref.querySelector(
+							'.wp-block-navigation-item > *:first-child'
+						).focus();
+					}
+				},
+			},
+		},
+	},
+	selectors: {
+		core: {
+			navigation: {
+				roleAttribute: ( store ) => {
+					const { context, selectors } = store;
+					return context.core.navigation.type === 'overlay' &&
+						selectors.core.navigation.isMenuOpen( store )
+						? 'dialog'
+						: '';
+				},
+				isMenuOpen: ( { context } ) =>
+					// The menu is opened if either `click`, `hover` or `focus` is true.
+					Object.values(
+						context.core.navigation[
+							context.core.navigation.type === 'overlay'
+								? 'overlayOpenedBy'
+								: 'submenuOpenedBy'
+						]
+					).filter( Boolean ).length > 0,
+				menuOpenedBy: ( { context } ) =>
+					context.core.navigation[
+						context.core.navigation.type === 'overlay'
+							? 'overlayOpenedBy'
+							: 'submenuOpenedBy'
+					],
+			},
+		},
+	},
+	actions: {
+		core: {
+			navigation: {
+				openMenuOnHover( store ) {
+					const { navigation } = store.context.core;
+					if (
+						navigation.type === 'submenu' &&
+						// Only open on hover if the overlay is closed.
+						Object.values(
+							navigation.overlayOpenedBy || {}
+						).filter( Boolean ).length === 0
+					)
+						openMenu( store, 'hover' );
+				},
+				closeMenuOnHover( store ) {
+					closeMenu( store, 'hover' );
+				},
+				openMenuOnClick( store ) {
+					openMenu( store, 'click' );
+				},
+				closeMenuOnClick( store ) {
+					closeMenu( store, 'click' );
+					closeMenu( store, 'focus' );
+				},
+				openMenuOnFocus( store ) {
+					openMenu( store, 'focus' );
+				},
+				toggleMenuOnClick: ( store ) => {
+					const { selectors } = store;
+					const menuOpenedBy =
+						selectors.core.navigation.menuOpenedBy( store );
+					if ( menuOpenedBy.click || menuOpenedBy.focus ) {
+						closeMenu( store, 'click' );
+						closeMenu( store, 'focus' );
+					} else {
+						openMenu( store, 'click' );
+					}
+				},
+				handleMenuKeydown: ( store ) => {
+					const { context, selectors, event } = store;
+					if (
+						selectors.core.navigation.menuOpenedBy( store ).click
+					) {
+						// If Escape close the menu.
+						if ( event?.key === 'Escape' ) {
+							closeMenu( store, 'click' );
+							closeMenu( store, 'focus' );
+							return;
+						}
+
+						// Trap focus if it is an overlay (main menu).
+						if (
+							context.core.navigation.type === 'overlay' &&
+							event.key === 'Tab'
+						) {
+							// If shift + tab it change the direction.
+							if (
+								event.shiftKey &&
+								window.document.activeElement ===
+									context.core.navigation
+										.firstFocusableElement
+							) {
+								event.preventDefault();
+								context.core.navigation.lastFocusableElement.focus();
+							} else if (
+								! event.shiftKey &&
+								window.document.activeElement ===
+									context.core.navigation.lastFocusableElement
+							) {
+								event.preventDefault();
+								context.core.navigation.firstFocusableElement.focus();
+							}
+						}
+					}
+				},
+				handleMenuFocusout: ( store ) => {
+					const { context, event } = store;
+					// If focus is outside modal, and in the document, close menu
+					// event.target === The element losing focus
+					// event.relatedTarget === The element receiving focus (if any)
+					// When focusout is outsite the document,
+					// `window.document.activeElement` doesn't change.
+					if (
+						! context.core.navigation.modal?.contains(
+							event.relatedTarget
+						) &&
+						event.target !== window.document.activeElement
+					) {
+						closeMenu( store, 'click' );
+						closeMenu( store, 'focus' );
+					}
+				},
+			},
+		},
+	},
+} );

package/src/navigation/view-modal.js

@@ -0,0 +1,78 @@
+/**
+ * External dependencies
+ */
+import MicroModal from 'micromodal';
+
+// Responsive navigation toggle.
+function navigationToggleModal( modal ) {
+	const dialogContainer = modal.querySelector(
+		`.wp-block-navigation__responsive-dialog`
+	);
+
+	const isHidden = 'true' === modal.getAttribute( 'aria-hidden' );
+
+	modal.classList.toggle( 'has-modal-open', ! isHidden );
+	dialogContainer.toggleAttribute( 'aria-modal', ! isHidden );
+
+	if ( isHidden ) {
+		dialogContainer.removeAttribute( 'role' );
+		dialogContainer.removeAttribute( 'aria-modal' );
+	} else {
+		dialogContainer.setAttribute( 'role', 'dialog' );
+		dialogContainer.setAttribute( 'aria-modal', 'true' );
+	}
+
+	// Add a class to indicate the modal is open.
+	const htmlElement = document.documentElement;
+	htmlElement.classList.toggle( 'has-modal-open' );
+}
+
+function isLinkToAnchorOnCurrentPage( node ) {
+	return (
+		node.hash &&
+		node.protocol === window.location.protocol &&
+		node.host === window.location.host &&
+		node.pathname === window.location.pathname &&
+		node.search === window.location.search
+	);
+}
+
+window.addEventListener( 'load', () => {
+	MicroModal.init( {
+		onShow: navigationToggleModal,
+		onClose: navigationToggleModal,
+		openClass: 'is-menu-open',
+	} );
+
+	// Close modal automatically on clicking anchor links inside modal.
+	const navigationLinks = document.querySelectorAll(
+		'.wp-block-navigation-item__content'
+	);
+
+	navigationLinks.forEach( function ( link ) {
+		// Ignore non-anchor links and anchor links which open on a new tab.
+		if (
+			! isLinkToAnchorOnCurrentPage( link ) ||
+			link.attributes?.target === '_blank'
+		) {
+			return;
+		}
+
+		// Find the specific parent modal for this link
+		// since .close() won't work without an ID if there are
+		// multiple navigation menus in a post/page.
+		const modal = link.closest(
+			'.wp-block-navigation__responsive-container'
+		);
+		const modalId = modal?.getAttribute( 'id' );
+
+		link.addEventListener( 'click', () => {
+			// check if modal exists and is open before trying to close it
+			// otherwise Micromodal will toggle the `has-modal-open` class
+			// on the html tag which prevents scrolling
+			if ( modalId && modal.classList.contains( 'has-modal-open' ) ) {
+				MicroModal.close( modalId );
+			}
+		} );
+	} );
+} );