@wordpress/block-library 5.0.1 → 6.0.1

package/src/navigation/view.js

@@ -3,6 +3,7 @@
  */
 import MicroModal from 'micromodal';
 
+// Responsive navigation toggle.
 function navigationToggleModal( modal ) {
 	const triggerButton = document.querySelector(
 		`button[data-micromodal-trigger="${ modal.id }"]`
@@ -20,8 +21,77 @@ function navigationToggleModal( modal ) {
 	htmlElement.classList.toggle( 'has-modal-open' );
 }
 
-MicroModal.init( {
-	onShow: navigationToggleModal,
-	onClose: navigationToggleModal,
-	openClass: 'is-menu-open',
+// Open on click functionality.
+function closeSubmenus( element ) {
+	element
+		.querySelectorAll( '[aria-expanded="true"]' )
+		.forEach( function ( toggle ) {
+			toggle.setAttribute( 'aria-expanded', 'false' );
+		} );
+}
+
+function toggleSubmenuOnClick( event ) {
+	const buttonToggle = event.target.closest( '[aria-expanded]' );
+	const isSubmenuOpen = buttonToggle.getAttribute( 'aria-expanded' );
+
+	if ( isSubmenuOpen === 'true' ) {
+		closeSubmenus( buttonToggle.closest( '.wp-block-navigation-item' ) );
+	} else {
+		// Close all sibling submenus.
+		const parentElement = buttonToggle.closest(
+			'.wp-block-navigation-item'
+		);
+		const navigationParent = buttonToggle.closest(
+			'.wp-block-navigation__submenu-container, .wp-block-navigation__container, .wp-block-page-list'
+		);
+		navigationParent
+			.querySelectorAll( '.wp-block-navigation-item' )
+			.forEach( function ( child ) {
+				if ( child !== parentElement ) {
+					closeSubmenus( child );
+				}
+			} );
+		// Open submenu.
+		buttonToggle.setAttribute( 'aria-expanded', 'true' );
+	}
+}
+
+const submenuButtons = document.querySelectorAll(
+	'.wp-block-navigation-submenu__toggle'
+);
+
+submenuButtons.forEach( function ( button ) {
+	button.addEventListener( 'click', toggleSubmenuOnClick );
 } );
+
+// Close on click outside.
+document.addEventListener( 'click', function ( event ) {
+	const navigationBlocks = document.querySelectorAll(
+		'.wp-block-navigation'
+	);
+	navigationBlocks.forEach( function ( block ) {
+		if ( ! block.contains( event.target ) ) {
+			closeSubmenus( block );
+		}
+	} );
+} );
+// Close on focus outside.
+document.addEventListener( 'keyup', function ( event ) {
+	const submenuBlocks = document.querySelectorAll(
+		'.wp-block-navigation-item.has-child'
+	);
+	submenuBlocks.forEach( function ( block ) {
+		if ( ! block.contains( event.target ) ) {
+			closeSubmenus( block );
+		}
+	} );
+} );
+
+// Necessary for some themes such as TT1 Blocks, where
+// scripts could be loaded before the body.
+window.onload = () =>
+	MicroModal.init( {
+		onShow: navigationToggleModal,
+		onClose: navigationToggleModal,
+		openClass: 'is-menu-open',
+	} );

package/src/navigation-link/block.json

@@ -57,7 +57,8 @@
 	],
 	"supports": {
 		"reusable": false,
-		"html": false
+		"html": false,
+		"__experimentalSlashInserter": true
 	},
 	"editorStyle": "wp-block-navigation-link-editor",
 	"style": "wp-block-navigation-link"

package/src/navigation-link/edit.js

@@ -10,20 +10,18 @@ import { escape } from 'lodash';
 import { createBlock } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
-	KeyboardShortcuts,
 	PanelBody,
 	Popover,
 	TextControl,
 	TextareaControl,
 	ToolbarButton,
+	Tooltip,
 	ToolbarGroup,
 } from '@wordpress/components';
-import { rawShortcut, displayShortcut } from '@wordpress/keycodes';
+import { displayShortcut, isKeyboardEvent, ENTER } from '@wordpress/keycodes';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	BlockControls,
-	InnerBlocks,
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
 	InspectorControls,
 	RichText,
 	__experimentalLinkControl as LinkControl,
@@ -46,11 +44,8 @@ import { store as coreStore } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import { ItemSubmenuIcon } from './icons';
 import { name } from './block.json';
 
-const ALLOWED_BLOCKS = [ 'core/navigation-link' ];
-
 const MAX_NESTING = 5;
 
 /**
@@ -290,9 +285,11 @@ export default function NavigationLinkEdit( {
 		url,
 		opensInNewTab,
 	};
-	const { showSubmenuIcon } = context;
 	const { saveEntityRecord } = useDispatch( coreStore );
-	const { insertBlock } = useDispatch( blockEditorStore );
+	const {
+		replaceBlock,
+		__unstableMarkNextChangeAsNotPersistent,
+	} = useDispatch( blockEditorStore );
 	const [ isLinkOpen, setIsLinkOpen ] = useState( false );
 	const listItemRef = useRef( null );
 	const isDraggingWithin = useIsDraggingWithin( listItemRef );
@@ -300,18 +297,19 @@ export default function NavigationLinkEdit( {
 	const ref = useRef();
 
 	const {
+		innerBlocks,
 		isAtMaxNesting,
 		isTopLevelLink,
 		isParentOfSelectedBlock,
-		isImmediateParentOfSelectedBlock,
 		hasDescendants,
-		selectedBlockHasDescendants,
-		numberOfDescendants,
 		userCanCreatePages,
 		userCanCreatePosts,
 	} = useSelect(
 		( select ) => {
 			const {
+				getBlocks,
+				getBlockName,
+				getBlockRootClientId,
 				getClientIdsOfDescendants,
 				hasSelectedInnerBlock,
 				getSelectedBlockClientId,
@@ -324,11 +322,15 @@ export default function NavigationLinkEdit( {
 				.length;
 
 			return {
+				innerBlocks: getBlocks( clientId ),
 				isAtMaxNesting:
-					getBlockParentsByBlockName( clientId, name ).length >=
-					MAX_NESTING,
+					getBlockParentsByBlockName( clientId, [
+						name,
+						'core/navigation-submenu',
+					] ).length >= MAX_NESTING,
 				isTopLevelLink:
-					getBlockParentsByBlockName( clientId, name ).length === 0,
+					getBlockName( getBlockRootClientId( clientId ) ) ===
+					'core/navigation',
 				isParentOfSelectedBlock: hasSelectedInnerBlock(
 					clientId,
 					true
@@ -341,7 +343,6 @@ export default function NavigationLinkEdit( {
 				selectedBlockHasDescendants: !! getClientIdsOfDescendants( [
 					selectedBlockId,
 				] )?.length,
-				numberOfDescendants: descendants,
 				userCanCreatePages: select( coreStore ).canUser(
 					'create',
 					'pages'
@@ -355,26 +356,39 @@ export default function NavigationLinkEdit( {
 		[ clientId ]
 	);
 
-	// Store the colors from context as attributes for rendering
-	useEffect( () => setAttributes( { isTopLevelLink } ), [ isTopLevelLink ] );
+	useEffect( () => {
+		// This side-effect should not create an undo level as those should
+		// only be created via user interactions. Mark this change as
+		// not persistent to avoid undo level creation.
+		// See https://github.com/WordPress/gutenberg/issues/34564.
+		__unstableMarkNextChangeAsNotPersistent();
+		setAttributes( { isTopLevelLink } );
+	}, [ isTopLevelLink ] );
 
 	/**
-	 * Insert a link block when submenu is added.
+	 * Transform to submenu block.
 	 */
-	function insertLinkBlock() {
-		const insertionPoint = numberOfDescendants;
-		const blockToInsert = createBlock( 'core/navigation-link' );
-		insertBlock( blockToInsert, insertionPoint, clientId );
+	function transformToSubmenu() {
+		const newSubmenu = createBlock(
+			'core/navigation-submenu',
+			attributes,
+			innerBlocks
+		);
+		replaceBlock( clientId, newSubmenu );
 	}
 
-	// Show the LinkControl on mount if the URL is empty
-	// ( When adding a new menu item)
-	// This can't be done in the useState call because it conflicts
-	// with the autofocus behavior of the BlockListBlock component.
 	useEffect( () => {
+		// Show the LinkControl on mount if the URL is empty
+		// ( When adding a new menu item)
+		// This can't be done in the useState call because it conflicts
+		// with the autofocus behavior of the BlockListBlock component.
 		if ( ! url ) {
 			setIsLinkOpen( true );
 		}
+		// If block has inner blocks, transform to Submenu.
+		if ( hasDescendants ) {
+			transformToSubmenu();
+		}
 	}, [] );
 
 	/**
@@ -467,9 +481,18 @@ export default function NavigationLinkEdit( {
 		customBackgroundColor,
 	} = getColors( context, ! isTopLevelLink );
 
+	function onKeyDown( event ) {
+		if (
+			isKeyboardEvent.primary( event, 'k' ) ||
+			( ! url && event.keyCode === ENTER )
+		) {
+			setIsLinkOpen( true );
+		}
+	}
+
 	const blockProps = useBlockProps( {
 		ref: listItemRef,
-		className: classnames( {
+		className: classnames( 'wp-block-navigation-item', {
 			'is-editing': isSelected || isParentOfSelectedBlock,
 			'is-dragging-within': isDraggingWithin,
 			'has-link': !! url,
@@ -486,51 +509,21 @@ export default function NavigationLinkEdit( {
 			color: ! textColor && customTextColor,
 			backgroundColor: ! backgroundColor && customBackgroundColor,
 		},
+		onKeyDown,
 	} );
 
 	if ( ! url ) {
 		blockProps.onClick = () => setIsLinkOpen( true );
 	}
 
-	// Always use overlay colors for submenus
-	const innerBlocksColors = getColors( context, true );
-	const innerBlocksProps = useInnerBlocksProps(
+	const classes = classnames(
+		'wp-block-navigation-link__content',
+		'wp-block-navigation-item__content',
 		{
-			className: classnames( 'wp-block-navigation-link__container', {
-				'is-parent-of-selected-block': isParentOfSelectedBlock,
-				'has-text-color': !! (
-					innerBlocksColors.textColor ||
-					innerBlocksColors.customTextColor
-				),
-				[ `has-${ innerBlocksColors.textColor }-color` ]: !! innerBlocksColors.textColor,
-				'has-background': !! (
-					innerBlocksColors.backgroundColor ||
-					innerBlocksColors.customBackgroundColor
-				),
-				[ `has-${ innerBlocksColors.backgroundColor }-background-color` ]: !! innerBlocksColors.backgroundColor,
-			} ),
-			style: {
-				color: innerBlocksColors.customTextColor,
-				backgroundColor: innerBlocksColors.customBackgroundColor,
-			},
-		},
-		{
-			allowedBlocks: ALLOWED_BLOCKS,
-			renderAppender:
-				( isSelected && hasDescendants ) ||
-				( isImmediateParentOfSelectedBlock &&
-					! selectedBlockHasDescendants ) ||
-				// Show the appender while dragging to allow inserting element between item and the appender.
-				hasDescendants
-					? InnerBlocks.DefaultAppender
-					: false,
+			'wp-block-navigation-link__placeholder': ! url,
 		}
 	);
 
-	const classes = classnames( 'wp-block-navigation-link__content', {
-		'wp-block-navigation-link__placeholder': ! url,
-	} );
-
 	let missingText = '';
 	switch ( type ) {
 		case 'post':
@@ -558,13 +551,6 @@ export default function NavigationLinkEdit( {
 		<Fragment>
 			<BlockControls>
 				<ToolbarGroup>
-					<KeyboardShortcuts
-						bindGlobal
-						shortcuts={ {
-							[ rawShortcut.primary( 'k' ) ]: () =>
-								setIsLinkOpen( true ),
-						} }
-					/>
 					<ToolbarButton
 						name="link"
 						icon={ linkIcon }
@@ -577,7 +563,7 @@ export default function NavigationLinkEdit( {
 							name="submenu"
 							icon={ addSubmenu }
 							title={ __( 'Add submenu' ) }
-							onClick={ insertLinkBlock }
+							onClick={ transformToSubmenu }
 						/>
 					) }
 				</ToolbarGroup>
@@ -618,13 +604,12 @@ export default function NavigationLinkEdit( {
 					{ /* eslint-enable */ }
 					{ ! url ? (
 						<div className="wp-block-navigation-link__placeholder-text">
-							<KeyboardShortcuts
-								shortcuts={ {
-									enter: () =>
-										isSelected && setIsLinkOpen( true ),
-								} }
-							/>
-							{ missingText }
+							<Tooltip
+								position="top center"
+								text={ __( 'This item is missing a link' ) }
+							>
+								<span>{ missingText }</span>
+							</Tooltip>
 						</div>
 					) : (
 						<RichText
@@ -664,12 +649,6 @@ export default function NavigationLinkEdit( {
 							onClose={ () => setIsLinkOpen( false ) }
 							anchorRef={ listItemRef.current }
 						>
-							<KeyboardShortcuts
-								bindGlobal
-								shortcuts={ {
-									escape: () => setIsLinkOpen( false ),
-								} }
-							/>
 							<LinkControl
 								className="wp-block-navigation-link__inline-link-input"
 								value={ link }
@@ -711,13 +690,7 @@ export default function NavigationLinkEdit( {
 							/>
 						</Popover>
 					) }
-					{ hasDescendants && showSubmenuIcon && (
-						<span className="wp-block-navigation-link__submenu-icon">
-							<ItemSubmenuIcon />
-						</span>
-					) }
 				</a>
-				<div { ...innerBlocksProps } />
 			</div>
 		</Fragment>
 	);

package/src/navigation-link/editor.scss

@@ -1,5 +1,5 @@
 // Normalize Link and edit containers, to look mostly the same.
-.wp-block-navigation-link__container {
+.wp-block-navigation__submenu-container {
 	border-radius: 0;
 
 	// Make it the same height as the appender to prevent a jump.
@@ -15,25 +15,26 @@
 .wp-block-navigation .has-child {
 	cursor: pointer;
 
-	.submenu-container,
-	.wp-block-navigation-link__container {
-		z-index: z-index(".has-child .wp-block-navigation-link__container");
+	.wp-block-navigation__submenu-container {
+		z-index: z-index(".has-child .wp-block-navigation__submenu-container");
 	}
 
 	&:hover {
-		.submenu-container,
-		.wp-block-navigation-link__container {
-			z-index: z-index(".has-child:hover .wp-block-navigation-link__container");
+		.wp-block-navigation__submenu-container {
+			z-index: z-index(".has-child:hover .wp-block-navigation__submenu-container");
 		}
 	}
 
 	// Show on editor selected, even if on frontend it only stays open on focus-within.
 	&.is-selected,
 	&.has-child-selected {
-		> .wp-block-navigation-link__container {
+		> .wp-block-navigation__submenu-container {
 			// We use important here because if the parent block is selected and submenus are present, they should always be visible.
 			visibility: visible !important;
 			opacity: 1 !important;
+			min-width: 200px !important;
+			height: auto !important;
+			width: auto !important;
 		}
 	}
 }
@@ -43,12 +44,12 @@
  * Navigation Items.
  */
 
-.wp-block-navigation-link {
-	.wp-block-navigation-link__container {
+.wp-block-navigation-item {
+	.wp-block-navigation__submenu-container {
 		display: block;
 	}
 
-	.wp-block-navigation-link__content {
+	.wp-block-navigation-item__content {
 		cursor: text;
 	}
 
@@ -80,23 +81,37 @@
 .wp-block-navigation-link__placeholder {
 	position: relative;
 
+	// While in a placeholder state, hide any underlines the theme might add.
+	text-decoration: none !important;
+	box-shadow: none !important;
+	background-image: none !important;
+
 	// Draw a wavy underline.
-	.wp-block-navigation-link__placeholder-text {
+	.wp-block-navigation-link__placeholder-text span {
 		$blur: 10%;
 		$width: 6%;
 		$stop1: 30%;
 		$stop2: 64%;
 
+		--wp-underline-color: var(--wp-admin-theme-color);
+		.is-dark-theme & {
+			--wp-underline-color: #{ $dark-theme-focus };
+		}
+
 		background-image:
-			linear-gradient(45deg, transparent ($stop1 - $blur), currentColor $stop1, currentColor ($stop1 + $width), transparent ($stop1 + $width + $blur)),
-			linear-gradient(135deg, transparent ($stop2 - $blur), currentColor $stop2, currentColor ($stop2 + $width), transparent ($stop2 + $width + $blur));
+			linear-gradient(45deg, transparent ($stop1 - $blur), var(--wp-underline-color) $stop1, var(--wp-underline-color) ($stop1 + $width), transparent ($stop1 + $width + $blur)),
+			linear-gradient(135deg, transparent ($stop2 - $blur), var(--wp-underline-color) $stop2, var(--wp-underline-color) ($stop2 + $width), transparent ($stop2 + $width + $blur));
 		background-position: 0 100%;
 		background-size: 6px 3px;
 		background-repeat: repeat-x;
+
+		// Since applied to a span, it doesn't change the footprint of the item,
+		// but it does vertically shift the underline to better align.
+		padding-bottom: 0.1em;
 	}
 
 	// This needs extra specificity.
-	&.wp-block-navigation-link__content {
+	&.wp-block-navigation-item__content {
 		cursor: pointer;
 	}
 }

package/src/navigation-link/index.js

@@ -13,6 +13,7 @@ import metadata from './block.json';
 import edit from './edit';
 import save from './save';
 import { enhanceNavigationLinkVariations } from './hooks';
+import transforms from './transforms';
 
 const { name } = metadata;
 
@@ -84,6 +85,7 @@ export const settings = {
 			},
 		},
 	],
+	transforms,
 };
 
 // importing this file includes side effects. This is whitelisted in block-library/package.json under sideEffects

package/src/navigation-link/index.php

@@ -127,10 +127,10 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 	$is_post_type           = isset( $attributes['kind'] ) && 'post-type' === $attributes['kind'];
 	$is_post_type           = $is_post_type || isset( $attributes['type'] ) && ( 'post' === $attributes['type'] || 'page' === $attributes['type'] );
 
-	// Don't render the block's subtree if it is a draft.
+	// Don't render the block's subtree if it is a draft or if the ID does not exist.
 	if ( $is_post_type && $navigation_link_has_id ) {
 		$post = get_post( $attributes['id'] );
-		if ( 'publish' !== $post->post_status ) {
+		if ( ! $post || 'publish' !== $post->post_status ) {
 			return '';
 		}
 	}
@@ -160,13 +160,13 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
-			'class' => $css_classes . ( $has_submenu ? ' has-child' : '' ) .
+			'class' => $css_classes . ' wp-block-navigation-item' . ( $has_submenu ? ' has-child' : '' ) .
 				( $is_active ? ' current-menu-item' : '' ),
 			'style' => $style_attribute,
 		)
 	);
 	$html               = '<li ' . $wrapper_attributes . '>' .
-		'<a class="wp-block-navigation-link__content" ';
+		'<a class="wp-block-navigation-link__content wp-block-navigation-item__content" ';
 
 	// Start appending HTML attributes to anchor tag.
 	if ( isset( $attributes['url'] ) ) {
@@ -220,7 +220,7 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 
 	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-link__submenu-icon">' . block_core_navigation_link_render_submenu_icon() . '</span>';
+		$html .= '<span class="wp-block-navigation-link__submenu-icon wp-block-navigation__submenu-icon">' . block_core_navigation_link_render_submenu_icon() . '</span>';
 	}
 
 	$html .= '</a>';
@@ -233,7 +233,7 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 		}
 
 		$html .= sprintf(
-			'<ul class="wp-block-navigation-link__container">%s</ul>',
+			'<ul class="wp-block-navigation-link__container wp-block-navigation__submenu-container">%s</ul>',
 			$inner_blocks_html
 		);
 	}
@@ -323,7 +323,7 @@ function register_block_core_navigation_link() {
 	if ( $post_types ) {
 		foreach ( $post_types as $post_type ) {
 			$variation = build_variation_for_navigation_link( $post_type, 'post-type' );
-			if ( 'post' === $variation['name'] || 'page' === $variation['name'] ) {
+			if ( $post_type->_builtin ) {
 				$built_ins[] = $variation;
 			} else {
 				$variations[] = $variation;
@@ -333,7 +333,7 @@ function register_block_core_navigation_link() {
 	if ( $taxonomies ) {
 		foreach ( $taxonomies as $taxonomy ) {
 			$variation = build_variation_for_navigation_link( $taxonomy, 'taxonomy' );
-			if ( 'category' === $variation['name'] || 'tag' === $variation['name'] || 'post_format' === $variation['name'] ) {
+			if ( $taxonomy->_builtin ) {
 				$built_ins[] = $variation;
 			} else {
 				$variations[] = $variation;

package/src/navigation-link/transforms.js

@@ -0,0 +1,93 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+	from: [
+		{
+			type: 'block',
+			blocks: [ 'core/site-logo' ],
+			transform: () => {
+				return createBlock( 'core/navigation-link' );
+			},
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/spacer' ],
+			transform: () => {
+				return createBlock( 'core/navigation-link' );
+			},
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/home-link' ],
+			transform: () => {
+				return createBlock( 'core/navigation-link' );
+			},
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/social-links' ],
+			transform: () => {
+				return createBlock( 'core/navigation-link' );
+			},
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/search' ],
+			transform: () => {
+				return createBlock( 'core/navigation-link' );
+			},
+		},
+	],
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/navigation-submenu' ],
+			transform: ( attributes, innerBlocks ) =>
+				createBlock(
+					'core/navigation-submenu',
+					attributes,
+					innerBlocks
+				),
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/spacer' ],
+			transform: () => {
+				return createBlock( 'core/spacer' );
+			},
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/site-logo' ],
+			transform: () => {
+				return createBlock( 'core/site-logo' );
+			},
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/home-link' ],
+			transform: () => {
+				return createBlock( 'core/home-link' );
+			},
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/social-links' ],
+			transform: () => {
+				return createBlock( 'core/social-links' );
+			},
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/search' ],
+			transform: () => {
+				return createBlock( 'core/search' );
+			},
+		},
+	],
+};
+
+export default transforms;