@wordpress/block-library 7.0.1 → 7.1.0-next.e230fbab09.0

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

@@ -4,23 +4,58 @@
 import { serialize } from '@wordpress/blocks';
 import { store as coreStore } from '@wordpress/core-data';
 import { useDispatch } from '@wordpress/data';
-import { useCallback } from '@wordpress/element';
+import { useState, useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import useGenerateDefaultNavigationTitle from './use-generate-default-navigation-title';
 
+export const CREATE_NAVIGATION_MENU_SUCCESS = 'success';
+export const CREATE_NAVIGATION_MENU_ERROR = 'error';
+export const CREATE_NAVIGATION_MENU_PENDING = 'pending';
+export const CREATE_NAVIGATION_MENU_IDLE = 'idle';
+
 export default function useCreateNavigationMenu( clientId ) {
+	const [ status, setStatus ] = useState( CREATE_NAVIGATION_MENU_IDLE );
+	const [ value, setValue ] = useState( null );
+	const [ error, setError ] = useState( null );
+
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const generateDefaultTitle = useGenerateDefaultNavigationTitle( clientId );
 
 	// This callback uses data from the two placeholder steps and only creates
 	// a new navigation menu when the user completes the final step.
-	return useCallback(
+	const create = useCallback(
 		async ( title = null, blocks = [] ) => {
+			// Guard against creating Navigations without a title.
+			// Note you can pass no title, but if one is passed it must be
+			// a string otherwise the title may end up being empty.
+			if ( title && typeof title !== 'string' ) {
+				setError(
+					'Invalid title supplied when creating Navigation Menu.'
+				);
+				setStatus( CREATE_NAVIGATION_MENU_ERROR );
+				throw new Error(
+					`Value of supplied title argument was not a string.`
+				);
+			}
+
+			setStatus( CREATE_NAVIGATION_MENU_PENDING );
+			setValue( null );
+			setError( null );
+
 			if ( ! title ) {
-				title = await generateDefaultTitle();
+				title = await generateDefaultTitle().catch( ( err ) => {
+					setError( err?.message );
+					setStatus( CREATE_NAVIGATION_MENU_ERROR );
+					throw new Error(
+						'Failed to create title when saving new Navigation Menu.',
+						{
+							cause: err,
+						}
+					);
+				} );
 			}
 			const record = {
 				title,
@@ -28,12 +63,28 @@ export default function useCreateNavigationMenu( clientId ) {
 				status: 'publish',
 			};
 
-			return await saveEntityRecord(
-				'postType',
-				'wp_navigation',
-				record
-			);
+			// Return affords ability to await on this function directly
+			return saveEntityRecord( 'postType', 'wp_navigation', record )
+				.then( ( response ) => {
+					setValue( response );
+					setStatus( CREATE_NAVIGATION_MENU_SUCCESS );
+					return response;
+				} )
+				.catch( ( err ) => {
+					setError( err?.message );
+					setStatus( CREATE_NAVIGATION_MENU_ERROR );
+					throw new Error( 'Unable to save new Navigation Menu', {
+						cause: err,
+					} );
+				} );
 		},
 		[ serialize, saveEntityRecord ]
 	);
+
+	return {
+		create,
+		status,
+		value,
+		error,
+	};
 }

package/src/navigation/edit/use-navigation-notice.js

@@ -5,19 +5,19 @@ import { useRef } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { store as noticeStore } from '@wordpress/notices';
 
-function useNavigationNotice( { name, message } = {} ) {
+function useNavigationNotice( { name, message = '' } = {} ) {
 	const noticeRef = useRef();
 
 	const { createWarningNotice, removeNotice } = useDispatch( noticeStore );
 
-	const showNotice = () => {
+	const showNotice = ( customMsg ) => {
 		if ( noticeRef.current ) {
 			return;
 		}
 
 		noticeRef.current = name;
 
-		createWarningNotice( message, {
+		createWarningNotice( customMsg || message, {
 			id: noticeRef.current,
 			type: 'snackbar',
 		} );

package/src/navigation/editor.scss

@@ -119,7 +119,6 @@
 	display: none;
 }
 
-
 /**
  * Colors Selector component
  */
@@ -262,6 +261,10 @@ $color-control-label-height: 20px;
 	}
 }
 
+.wp-block-navigation-placeholder .components-spinner {
+	margin-top: 0;
+}
+
 // Unselected state.
 .wp-block-navigation-placeholder__preview {
 	display: flex;
@@ -558,6 +561,12 @@ body.editor-styles-wrapper
 	}
 }
 
+// Space spinner to give it breathing
+// room when block is selected and has focus outline.
+.wp-block-navigation .components-spinner {
+	padding: $grid-unit-10 $grid-unit-15;
+}
+
 .wp-block-navigation__unsaved-changes {
 	position: relative;
 
@@ -608,3 +617,16 @@ body.editor-styles-wrapper
 		background-color: $white;
 	}
 }
+
+// Temp - hide toolbar component when Nav Menu Selector is empty.
+// TODO - extract state to common hook or parent component to avoid render.
+.wp-block-navigation__toolbar-menu-selector.components-toolbar-group:empty {
+	display: none;
+}
+
+// Temp - hide adjacent <hr>s when Nav Menu Selector is empty.
+// TODO - extract state to common hook or parent component to avoid render of <hr>.
+.wp-block-navigation-placeholder__actions hr + hr {
+	display: none;
+}
+

package/src/navigation/index.php

@@ -515,7 +515,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		)
 	);
 
-	$modal_unique_id = uniqid();
+	$modal_unique_id = wp_unique_id( 'modal-' );
 
 	// Determine whether or not navigation elements should be wrapped in the markup required to make it responsive,
 	// return early if they don't.
@@ -544,12 +544,12 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	$toggle_button_content     = $should_display_icon_label ? $toggle_button_icon : 'Menu';
 
 	$responsive_container_markup = sprintf(
-		'<button aria-haspopup="true" aria-label="%3$s" class="%6$s" data-micromodal-trigger="modal-%1$s">%9$s</button>
-			<div class="%5$s" style="%7$s" id="modal-%1$s">
+		'<button aria-haspopup="true" aria-label="%3$s" class="%6$s" data-micromodal-trigger="%1$s">%9$s</button>
+			<div class="%5$s" style="%7$s" id="%1$s">
 				<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
 					<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s">
 							<button aria-label="%4$s" data-micromodal-close class="wp-block-navigation__responsive-container-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg></button>
-						<div class="wp-block-navigation__responsive-container-content" id="modal-%1$s-content">
+						<div class="wp-block-navigation__responsive-container-content" id="%1$s-content">
 							%2$s
 						</div>
 					</div>

package/src/navigation/menu-items-to-blocks.js

@@ -78,7 +78,7 @@ function mapMenuItemsToBlocks( menuItems ) {
 		// Create block with nested "innerBlocks".
 		const block = createBlock( blockType, attributes, nestedBlocks );
 
-		// Create mapping for menuItem -> block
+		// Create mapping for menuItem -> block.
 		mapping[ menuItem.id ] = block.clientId;
 
 		return block;

package/src/navigation/style.scss

@@ -85,7 +85,6 @@ $navigation-icon-size: 24px;
 		align-self: center; // This one affects nested submenu indicators.
 		line-height: 0;
 		display: inline-block;
-		vertical-align: middle;
 		font-size: inherit;
 
 		// Affect the button as well.
@@ -95,15 +94,18 @@ $navigation-icon-size: 24px;
 		border: none;
 
 		// Scale to font size.
-		margin-left: 0.25em;
 		width: 0.6em;
 		height: 0.6em;
+		margin-left: 0.25em;
 
 		svg {
 			display: inline-block;
 			stroke: currentColor;
 			width: inherit;
 			height: inherit;
+
+			// Position the arrow to balance with the the text.
+			margin-top: 0.075em;
 		}
 	}
 
@@ -216,6 +218,11 @@ $navigation-icon-size: 24px;
 				}
 			}
 
+			// Push inwards from right edge of submenu.
+			.wp-block-navigation__submenu-icon {
+				margin-right: 0.25em;
+			}
+
 			// Reset the submenu indicator for horizontal flyouts.
 			.wp-block-navigation__submenu-icon svg {
 				transform: rotate(-90deg);
@@ -245,7 +252,7 @@ $navigation-icon-size: 24px;
 	}
 
 	// Show submenus on click.
-	.wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
+	.wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
 		visibility: visible;
 		overflow: visible;
 		opacity: 1;
@@ -300,6 +307,18 @@ button.wp-block-navigation-item__content {
 	cursor: pointer;
 }
 
+// When set to open on click, a button element is used.
+// We pad it to include the arrow icon in the clickable area.
+// The padding can be blanket for click, since you can't set click and hide the icon.
+.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
+	padding-right: 0.6em + 0.25em; // Same size as icon plus margin.
+
+	+ .wp-block-navigation__submenu-icon {
+		margin-left: -0.6em;
+		pointer-events: none; // Make the icon inert to allow click on the button.
+	}
+}
+
 
 /**
  * Margins

package/src/navigation/test/menu-items-to-blocks.js

@@ -320,7 +320,7 @@ describe( 'converting menu items to blocks', () => {
 				type_label: 'Custom Link',
 				object: 'custom',
 				parent: 0,
-				menu_order: 0, // capturing 0 edge case.
+				menu_order: 0, // Capturing 0 edge case.
 				target: '',
 				classes: [ '' ],
 				xfn: [ '' ],

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

@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
+import {
+	store as coreStore,
+	__experimentalUseEntityRecords as useEntityRecords,
+} from '@wordpress/core-data';
 
 /**
  * @typedef {Object} NavigationEntitiesData
@@ -34,31 +37,17 @@ export default function useNavigationEntities( menuId ) {
 }
 
 function useMenuEntities() {
-	const { menus, isResolvingMenus, hasResolvedMenus } = useSelect(
-		( select ) => {
-			const { getMenus, isResolving, hasFinishedResolution } = select(
-				coreStore
-			);
-
-			const menusParameters = [ { per_page: -1, context: 'view' } ];
-
-			return {
-				menus: getMenus( ...menusParameters ),
-				isResolvingMenus: isResolving( 'getMenus', menusParameters ),
-				hasResolvedMenus: hasFinishedResolution(
-					'getMenus',
-					menusParameters
-				),
-			};
-		},
-		[]
+	const { records, isResolving, hasResolved } = useEntityRecords(
+		'root',
+		'menu',
+		{ per_page: -1, context: 'view' }
 	);
 
 	return {
-		menus,
-		isResolvingMenus,
-		hasResolvedMenus,
-		hasMenus: !! ( hasResolvedMenus && menus?.length ),
+		menus: records,
+		isResolvingMenus: isResolving,
+		hasResolvedMenus: hasResolved,
+		hasMenus: !! ( hasResolved && records?.length ),
 	};
 }
 
@@ -100,45 +89,22 @@ function useMenuItemEntities( menuId ) {
 }
 
 function usePageEntities() {
-	const { pages, isResolvingPages, hasResolvedPages } = useSelect(
-		( select ) => {
-			const {
-				getEntityRecords,
-				isResolving,
-				hasFinishedResolution,
-			} = select( coreStore );
-
-			const pagesParameters = [
-				'postType',
-				'page',
-				{
-					parent: 0,
-					order: 'asc',
-					orderby: 'id',
-					per_page: -1,
-					context: 'view',
-				},
-			];
-
-			return {
-				pages: getEntityRecords( ...pagesParameters ) || null,
-				isResolvingPages: isResolving(
-					'getEntityRecords',
-					pagesParameters
-				),
-				hasResolvedPages: hasFinishedResolution(
-					'getEntityRecords',
-					pagesParameters
-				),
-			};
-		},
-		[]
+	const { records, isResolving, hasResolved } = useEntityRecords(
+		'postType',
+		'page',
+		{
+			parent: 0,
+			order: 'asc',
+			orderby: 'id',
+			per_page: -1,
+			context: 'view',
+		}
 	);
 
 	return {
-		pages,
-		isResolvingPages,
-		hasResolvedPages,
-		hasPages: !! ( hasResolvedPages && pages?.length ),
+		pages: records,
+		isResolvingPages: isResolving,
+		hasResolvedPages: hasResolved,
+		hasPages: !! ( hasResolved && records?.length ),
 	};
 }

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

@@ -12,6 +12,7 @@ export default function useNavigationMenu( ref ) {
 				getEditedEntityRecord,
 				getEntityRecords,
 				hasFinishedResolution,
+				isResolving,
 				canUser,
 			} = select( coreStore );
 
@@ -65,22 +66,26 @@ export default function useNavigationMenu( ref ) {
 				),
 				navigationMenu,
 				navigationMenus,
-				canUserUpdateNavigationEntity: ref
+				canUserUpdateNavigationMenu: ref
 					? canUser( 'update', 'navigation', ref )
 					: undefined,
-				hasResolvedCanUserUpdateNavigationEntity: hasFinishedResolution(
+				hasResolvedCanUserUpdateNavigationMenu: hasFinishedResolution(
 					'canUser',
 					[ 'update', 'navigation', ref ]
 				),
-				canUserDeleteNavigationEntity: ref
+				canUserDeleteNavigationMenu: ref
 					? canUser( 'delete', 'navigation', ref )
 					: undefined,
-				hasResolvedCanUserDeleteNavigationEntity: hasFinishedResolution(
+				hasResolvedCanUserDeleteNavigationMenu: hasFinishedResolution(
 					'canUser',
 					[ 'delete', 'navigation', ref ]
 				),
-				canUserCreateNavigation: canUser( 'create', 'navigation' ),
-				hasResolvedCanUserCreateNavigation: hasFinishedResolution(
+				canUserCreateNavigationMenu: canUser( 'create', 'navigation' ),
+				isResolvingCanUserCreateNavigationMenu: isResolving(
+					'canUser',
+					[ 'create', 'navigation' ]
+				),
+				hasResolvedCanUserCreateNavigationMenu: hasFinishedResolution(
 					'canUser',
 					[ 'create', 'navigation' ]
 				),

package/src/navigation-link/fallback-variations.js

@@ -12,7 +12,7 @@ import {
 // FALLBACK: this is only used when the server does not understand the variations property in the
 // register_block_type call. see navigation-link/index.php.
 // Delete this file when supported WP ranges understand the `variations` property when passed to
-// register_block_type in index.php
+// register_block_type in index.php.
 const fallbackVariations = [
 	{
 		name: 'link',

package/src/navigation-link/hooks.js

@@ -35,7 +35,7 @@ export function enhanceNavigationLinkVariations( settings, name ) {
 	}
 
 	// Fallback handling may be deleted after supported WP ranges understand the `variations`
-	// property when passed to register_block_type in index.php
+	// property when passed to register_block_type in index.php.
 	if ( ! settings.variations ) {
 		return {
 			...settings,
@@ -43,7 +43,7 @@ export function enhanceNavigationLinkVariations( settings, name ) {
 		};
 	}
 
-	// Otherwise decorate server passed variations with an icon and isActive function
+	// Otherwise decorate server passed variations with an icon and isActive function.
 	if ( settings.variations ) {
 		const isActive = ( blockAttributes, variationAttributes ) => {
 			return blockAttributes.type === variationAttributes.type;

package/src/navigation-link/index.php

@@ -193,37 +193,18 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 		'<span class="wp-block-navigation-item__label">';
 
 	if ( isset( $attributes['label'] ) ) {
-		$html .= wp_kses(
-			$attributes['label'],
-			array(
-				'code'   => array(),
-				'em'     => array(),
-				'img'    => array(
-					'scale' => array(),
-					'class' => array(),
-					'style' => array(),
-					'src'   => array(),
-					'alt'   => array(),
-				),
-				's'      => array(),
-				'span'   => array(
-					'style' => array(),
-				),
-				'strong' => array(),
-			)
-		);
+		$html .= wp_kses_post( $attributes['label'] );
 	}
 
 	$html .= '</span>';
+	$html .= '</a>';
+	// End anchor tag content.
 
 	if ( isset( $block->context['showSubmenuIcon'] ) && $block->context['showSubmenuIcon'] && $has_submenu ) {
 		// The submenu icon can be hidden by a CSS rule on the Navigation Block.
 		$html .= '<span class="wp-block-navigation__submenu-icon">' . block_core_navigation_link_render_submenu_icon() . '</span>';
 	}
 
-	$html .= '</a>';
-	// End anchor tag content.
-
 	if ( $has_submenu ) {
 		$inner_blocks_html = '';
 		foreach ( $block->inner_blocks as $inner_block ) {

package/src/navigation-link/test/edit.js

@@ -5,8 +5,8 @@ import { updateNavigationLinkBlockAttributes } from '../edit';
 
 describe( 'edit', () => {
 	describe( 'updateNavigationLinkBlockAttributes', () => {
-		// data shapes are linked to fetchLinkSuggestions from
-		// core-data/src/fetch/__experimental-fetch-link-suggestions.js
+		// Data shapes are linked to fetchLinkSuggestions from
+		// core-data/src/fetch/__experimental-fetch-link-suggestions.js.
 		it( 'can update a post link', () => {
 			const setAttributes = jest.fn();
 			const linkSuggestion = {
@@ -193,7 +193,7 @@ describe( 'edit', () => {
 				setAttributes
 			);
 			// post_format returns a slug ID value from the Search API
-			// we do not persist this ID since we expect this value to be a post or term ID
+			// we do not persist this ID since we expect this value to be a post or term ID.
 			expect( setAttributes ).toHaveBeenCalledWith( {
 				kind: 'taxonomy',
 				opensInNewTab: false,
@@ -443,7 +443,7 @@ describe( 'edit', () => {
 					type: 'post',
 					url: 'https://wordpress.local/menu-test/',
 				} );
-				//click on the existing link control, and toggle opens new tab
+				// Click on the existing link control, and toggle opens new tab.
 				updateNavigationLinkBlockAttributes(
 					{
 						url: 'https://wordpress.local/menu-test/',
@@ -488,7 +488,7 @@ describe( 'edit', () => {
 					type: 'post',
 					url: 'https://wordpress.local/menu-test/',
 				} );
-				//click on the existing link control, and toggle opens new tab
+				// Click on the existing link control, and toggle opens new tab.
 				updateNavigationLinkBlockAttributes(
 					{
 						url: 'https://wordpress.local/foo/',