@wordpress/block-library 7.18.0 → 8.0.0

package/src/navigation-submenu/edit.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import escapeHtml from 'escape-html';
 
 /**
  * WordPress dependencies
@@ -10,50 +9,45 @@ import escapeHtml from 'escape-html';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	PanelBody,
-	Popover,
 	TextControl,
 	TextareaControl,
 	ToolbarButton,
 	ToolbarGroup,
 } from '@wordpress/components';
 import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import {
 	BlockControls,
 	InnerBlocks,
 	useInnerBlocksProps,
 	InspectorControls,
 	RichText,
-	__experimentalLinkControl as LinkControl,
 	useBlockProps,
 	store as blockEditorStore,
 	getColorClassName,
 } from '@wordpress/block-editor';
-import { isURL, prependHTTP, safeDecodeURI } from '@wordpress/url';
-import {
-	Fragment,
-	useState,
-	useEffect,
-	useRef,
-	createInterpolateElement,
-} from '@wordpress/element';
+import { isURL, prependHTTP } from '@wordpress/url';
+import { Fragment, useState, useEffect, useRef } from '@wordpress/element';
 import { placeCaretAtHorizontalEdge } from '@wordpress/dom';
 import { link as linkIcon, removeSubmenu } from '@wordpress/icons';
-import {
-	useResourcePermissions,
-	store as coreStore,
-} from '@wordpress/core-data';
+import { useResourcePermissions } from '@wordpress/core-data';
 import { speak } from '@wordpress/a11y';
 import { createBlock } from '@wordpress/blocks';
-import { useMergeRefs } from '@wordpress/compose';
+import { useMergeRefs, usePrevious } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { ItemSubmenuIcon } from './icons';
 import { name } from './block.json';
+import { LinkUI } from '../navigation-link/link-ui';
+import { updateAttributes } from '../navigation-link/update-attributes';
 
-const ALLOWED_BLOCKS = [ 'core/navigation-link', 'core/navigation-submenu' ];
+const ALLOWED_BLOCKS = [
+	'core/navigation-link',
+	'core/navigation-submenu',
+	'core/page-list',
+];
 
 const DEFAULT_BLOCK = {
 	name: 'core/navigation-link',
@@ -110,36 +104,6 @@ const useIsDraggingWithin = ( elementRef ) => {
 	return isDraggingWithin;
 };
 
-/**
- * Given the Link block's type attribute, return the query params to give to
- * /wp/v2/search.
- *
- * @param {string} type Link block's type attribute.
- * @param {string} kind Link block's entity of kind (post-type|taxonomy)
- * @return {{ type?: string, subtype?: string }} Search query params.
- */
-function getSuggestionsQuery( type, kind ) {
-	switch ( type ) {
-		case 'post':
-		case 'page':
-			return { type: 'post', subtype: type };
-		case 'category':
-			return { type: 'term', subtype: 'category' };
-		case 'tag':
-			return { type: 'term', subtype: 'post_tag' };
-		case 'post_format':
-			return { type: 'post-format' };
-		default:
-			if ( kind === 'taxonomy' ) {
-				return { type: 'term', subtype: type };
-			}
-			if ( kind === 'post-type' ) {
-				return { type: 'post', subtype: type };
-			}
-			return {};
-	}
-}
-
 /**
  * Determine the colors for a menu.
  *
@@ -214,64 +178,6 @@ function getColors( context, isSubMenu ) {
  * @property {string}               [title]         Link title attribute.
  */
 
-/**
- * Link Control onChange handler that updates block attributes when a setting is changed.
- *
- * @param {Object}                          updatedValue    New block attributes to update.
- * @param {Function}                        setAttributes   Block attribute update function.
- * @param {WPNavigationLinkBlockAttributes} blockAttributes Current block attributes.
- *
- */
-export const updateNavigationLinkBlockAttributes = (
-	updatedValue = {},
-	setAttributes,
-	blockAttributes = {}
-) => {
-	const {
-		label: originalLabel = '',
-		kind: originalKind = '',
-		type: originalType = '',
-	} = blockAttributes;
-	const {
-		title = '',
-		url = '',
-		opensInNewTab,
-		id,
-		kind: newKind = originalKind,
-		type: newType = originalType,
-	} = updatedValue;
-
-	const normalizedTitle = title.replace( /http(s?):\/\//gi, '' );
-	const normalizedURL = url.replace( /http(s?):\/\//gi, '' );
-	const escapeTitle =
-		title !== '' &&
-		normalizedTitle !== normalizedURL &&
-		originalLabel !== title;
-	const label = escapeTitle
-		? escapeHtml( title )
-		: originalLabel || escapeHtml( normalizedURL );
-
-	// In https://github.com/WordPress/gutenberg/pull/24670 we decided to use "tag" in favor of "post_tag"
-	const type = newType === 'post_tag' ? 'tag' : newType.replace( '-', '_' );
-
-	const isBuiltInType =
-		[ 'post', 'page', 'tag', 'category' ].indexOf( type ) > -1;
-
-	const isCustomLink =
-		( ! newKind && ! isBuiltInType ) || newKind === 'custom';
-	const kind = isCustomLink ? 'custom' : newKind;
-
-	setAttributes( {
-		// Passed `url` may already be encoded. To prevent double encoding, decodeURI is executed to revert to the original string.
-		...( url && { url: encodeURI( safeDecodeURI( url ) ) } ),
-		...( label && { label } ),
-		...( undefined !== opensInNewTab && { opensInNewTab } ),
-		...( id && Number.isInteger( id ) && { id } ),
-		...( kind && { kind } ),
-		...( type && type !== 'URL' && { type } ),
-	} );
-};
-
 export default function NavigationSubmenuEdit( {
 	attributes,
 	isSelected,
@@ -281,14 +187,9 @@ export default function NavigationSubmenuEdit( {
 	context,
 	clientId,
 } ) {
-	const { label, type, opensInNewTab, url, description, rel, title, kind } =
-		attributes;
-	const link = {
-		url,
-		opensInNewTab,
-	};
+	const { label, type, url, description, rel, title } = attributes;
+
 	const { showSubmenuIcon, maxNestingLevel, openSubmenusOnClick } = context;
-	const { saveEntityRecord } = useDispatch( coreStore );
 
 	const { __unstableMarkNextChangeAsNotPersistent, replaceBlock } =
 		useDispatch( blockEditorStore );
@@ -362,6 +263,8 @@ export default function NavigationSubmenuEdit( {
 		[ clientId ]
 	);
 
+	const prevHasChildren = usePrevious( hasChildren );
+
 	// 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
@@ -431,23 +334,6 @@ export default function NavigationSubmenuEdit( {
 		userCanCreate = postsPermissions.canCreate;
 	}
 
-	async function handleCreate( pageTitle ) {
-		const postType = type || 'page';
-
-		const page = await saveEntityRecord( 'postType', postType, {
-			title: pageTitle,
-			status: 'draft',
-		} );
-
-		return {
-			id: page.id,
-			type: postType,
-			title: page.title.rendered,
-			url: page.link,
-			kind: 'post-type',
-		};
-	}
-
 	const {
 		textColor,
 		customTextColor,
@@ -541,6 +427,13 @@ export default function NavigationSubmenuEdit( {
 		replaceBlock( clientId, newLinkBlock );
 	}
 
+	useEffect( () => {
+		// If block becomes empty, transform to Navigation Link.
+		if ( ! hasChildren && prevHasChildren ) {
+			transformToLink();
+		}
+	}, [ hasChildren, prevHasChildren ] );
+
 	const canConvertToLink =
 		! selectedBlockHasChildren || onlyDescendantIsEmptyLink;
 
@@ -568,8 +461,25 @@ export default function NavigationSubmenuEdit( {
 					/>
 				</ToolbarGroup>
 			</BlockControls>
+			{ /* Warning, this duplicated in packages/block-library/src/navigation-link/edit.js */ }
 			<InspectorControls>
 				<PanelBody title={ __( 'Link settings' ) }>
+					<TextControl
+						value={ label || '' }
+						onChange={ ( labelValue ) => {
+							setAttributes( { label: labelValue } );
+						} }
+						label={ __( 'Label' ) }
+						autoComplete="off"
+					/>
+					<TextControl
+						value={ url || '' }
+						onChange={ ( urlValue ) => {
+							setAttributes( { url: urlValue } );
+						} }
+						label={ __( 'URL' ) }
+						autoComplete="off"
+					/>
 					<TextareaControl
 						value={ description || '' }
 						onChange={ ( descriptionValue ) => {
@@ -632,55 +542,25 @@ export default function NavigationSubmenuEdit( {
 						/>
 					}
 					{ ! openSubmenusOnClick && isLinkOpen && (
-						<Popover
-							placement="bottom"
+						<LinkUI
+							className="wp-block-navigation-link__inline-link-input"
+							clientId={ clientId }
+							link={ attributes }
 							onClose={ () => setIsLinkOpen( false ) }
 							anchor={ popoverAnchor }
-							shift
-						>
-							<LinkControl
-								className="wp-block-navigation-link__inline-link-input"
-								value={ link }
-								showInitialSuggestions={ true }
-								withCreateSuggestion={ userCanCreate }
-								createSuggestion={ handleCreate }
-								createSuggestionButtonText={ ( searchTerm ) => {
-									let format;
-									if ( type === 'post' ) {
-										/* translators: %s: search term. */
-										format = __(
-											'Create draft post: <mark>%s</mark>'
-										);
-									} else {
-										/* translators: %s: search term. */
-										format = __(
-											'Create draft page: <mark>%s</mark>'
-										);
-									}
-									return createInterpolateElement(
-										sprintf( format, searchTerm ),
-										{ mark: <mark /> }
-									);
-								} }
-								noDirectEntry={ !! type }
-								noURLSuggestion={ !! type }
-								suggestionsQuery={ getSuggestionsQuery(
-									type,
-									kind
-								) }
-								onChange={ ( updatedValue ) =>
-									updateNavigationLinkBlockAttributes(
-										updatedValue,
-										setAttributes,
-										attributes
-									)
-								}
-								onRemove={ () => {
-									setAttributes( { url: '' } );
-									speak( __( 'Link removed.' ), 'assertive' );
-								} }
-							/>
-						</Popover>
+							hasCreateSuggestion={ userCanCreate }
+							onRemove={ () => {
+								setAttributes( { url: '' } );
+								speak( __( 'Link removed.' ), 'assertive' );
+							} }
+							onChange={ ( updatedValue ) => {
+								updateAttributes(
+									updatedValue,
+									setAttributes,
+									attributes
+								);
+							} }
+						/>
 					) }
 				</ParentElement>
 				{ ( showSubmenuIcon || openSubmenusOnClick ) && (

package/src/navigation-submenu/index.php

@@ -255,6 +255,14 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 			$inner_blocks_html .= $inner_block->render();
 		}
 
+		if ( strpos( $inner_blocks_html, 'current-menu-item' ) ) {
+			$tag_processor = new WP_HTML_Tag_Processor( $html );
+			while ( $tag_processor->next_tag( array( 'class_name' => 'wp-block-navigation-item__content' ) ) ) {
+				$tag_processor->add_class( 'current-menu-ancestor' );
+			}
+			$html = $tag_processor->get_updated_html();
+		}
+
 		$html .= sprintf(
 			'<ul class="wp-block-navigation__submenu-container">%s</ul>',
 			$inner_blocks_html
@@ -281,3 +289,35 @@ function register_block_core_navigation_submenu() {
 	);
 }
 add_action( 'init', 'register_block_core_navigation_submenu' );
+
+/**
+ * Disables display of block inspector tabs for the Navigation Submenu block.
+ *
+ * This is only a temporary measure until we have a TabPanel and mechanism that
+ * will allow the Navigation Submenu to programmatically select a tab when
+ * edited via a specific context.
+ *
+ * See:
+ * - https://github.com/WordPress/gutenberg/issues/45951
+ * - https://github.com/WordPress/gutenberg/pull/46321
+ * - https://github.com/WordPress/gutenberg/pull/46271
+ *
+ * @param array $settings Default editor settings.
+ * @return array Filtered editor settings.
+ */
+function gutenberg_disable_tabs_for_navigation_submenu_block( $settings ) {
+	$current_tab_settings = _wp_array_get(
+		$settings,
+		array( '__experimentalBlockInspectorTabs' ),
+		array()
+	);
+
+	$settings['__experimentalBlockInspectorTabs'] = array_merge(
+		$current_tab_settings,
+		array( 'core/navigation-submenu' => false )
+	);
+
+	return $settings;
+}
+
+add_filter( 'block_editor_settings_all', 'gutenberg_disable_tabs_for_navigation_submenu_block' );

package/src/page-list/block.json

@@ -7,7 +7,12 @@
 	"description": "Display a list of all pages.",
 	"keywords": [ "menu", "navigation" ],
 	"textdomain": "default",
-	"attributes": {},
+	"attributes": {
+		"parentPageID": {
+			"type": "integer",
+			"default": 0
+		}
+	},
 	"usesContext": [
 		"textColor",
 		"customTextColor",

package/src/page-list/constants.js

@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export const convertDescription = __(
+	'This menu is automatically kept in sync with pages on your site. You can manage the menu yourself by clicking customize below.'
+);

package/src/page-list/convert-to-links-modal.js

@@ -5,71 +5,20 @@ import { Button, Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
 import { useEntityRecords } from '@wordpress/core-data';
-import { createBlock as create } from '@wordpress/blocks';
 import { store as blockEditorStore } from '@wordpress/block-editor';
+/**
+ * Internal dependencies
+ */
+import { convertToNavigationLinks } from './convert-to-navigation-links';
+
+/**
+ * Internal dependencies
+ */
+import { convertDescription } from './constants';
 
 const PAGE_FIELDS = [ 'id', 'title', 'link', 'type', 'parent' ];
 const MAX_PAGE_COUNT = 100;
 
-export const convertSelectedBlockToNavigationLinks =
-	( { pages, clientId, replaceBlock, createBlock } ) =>
-	() => {
-		if ( ! pages ) {
-			return;
-		}
-
-		const linkMap = {};
-		const navigationLinks = [];
-		pages.forEach( ( { id, title, link: url, type, parent } ) => {
-			// See if a placeholder exists. This is created if children appear before parents in list.
-			const innerBlocks = linkMap[ id ]?.innerBlocks ?? [];
-			linkMap[ id ] = createBlock(
-				'core/navigation-link',
-				{
-					id,
-					label: title.rendered,
-					url,
-					type,
-					kind: 'post-type',
-				},
-				innerBlocks
-			);
-
-			if ( ! parent ) {
-				navigationLinks.push( linkMap[ id ] );
-			} else {
-				if ( ! linkMap[ parent ] ) {
-					// Use a placeholder if the child appears before parent in list.
-					linkMap[ parent ] = { innerBlocks: [] };
-				}
-				const parentLinkInnerBlocks = linkMap[ parent ].innerBlocks;
-				parentLinkInnerBlocks.push( linkMap[ id ] );
-			}
-		} );
-
-		// Transform all links with innerBlocks into Submenus. This can't be done
-		// sooner because page objects have no information on their children.
-
-		const transformSubmenus = ( listOfLinks ) => {
-			listOfLinks.forEach( ( block, index, listOfLinksArray ) => {
-				const { attributes, innerBlocks } = block;
-				if ( innerBlocks.length !== 0 ) {
-					transformSubmenus( innerBlocks );
-					const transformedBlock = createBlock(
-						'core/navigation-submenu',
-						attributes,
-						innerBlocks
-					);
-					listOfLinksArray[ index ] = transformedBlock;
-				}
-			} );
-		};
-
-		transformSubmenus( navigationLinks );
-
-		replaceBlock( clientId, navigationLinks );
-	};
-
 export default function ConvertToLinksModal( { onClose, clientId } ) {
 	const { records: pages, hasResolved: pagesFinished } = useEntityRecords(
 		'postType',
@@ -91,19 +40,12 @@ export default function ConvertToLinksModal( { onClose, clientId } ) {
 		<Modal
 			closeLabel={ __( 'Close' ) }
 			onRequestClose={ onClose }
-			title={ __( 'Convert to links' ) }
+			title={ __( 'Customize this menu' ) }
 			className={ 'wp-block-page-list-modal' }
 			aria={ { describedby: 'wp-block-page-list-modal__description' } }
 		>
 			<p id={ 'wp-block-page-list-modal__description' }>
-				{ __(
-					'To edit this navigation menu, convert it to single page links. This allows you to add, re-order, remove items, or edit their labels.'
-				) }
-			</p>
-			<p>
-				{ __(
-					"Note: if you add new pages to your site, you'll need to add them to your navigation menu."
-				) }
+				{ convertDescription }
 			</p>
 			<div className="wp-block-page-list-modal-buttons">
 				<Button variant="tertiary" onClick={ onClose }>
@@ -112,14 +54,15 @@ export default function ConvertToLinksModal( { onClose, clientId } ) {
 				<Button
 					variant="primary"
 					disabled={ ! pagesFinished }
-					onClick={ convertSelectedBlockToNavigationLinks( {
-						pages,
-						replaceBlock,
-						clientId,
-						createBlock: create,
-					} ) }
+					onClick={ () => {
+						const navigationLinks =
+							convertToNavigationLinks( pages );
+
+						// Replace the Page List block with the Navigation Links.
+						replaceBlock( clientId, navigationLinks );
+					} }
 				>
-					{ __( 'Convert' ) }
+					{ __( 'Customize' ) }
 				</Button>
 			</div>
 		</Modal>

package/src/page-list/convert-to-navigation-links.js

@@ -0,0 +1,60 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+export const convertToNavigationLinks = ( pages ) => {
+	if ( ! pages ) {
+		return;
+	}
+
+	const linkMap = {};
+	const navigationLinks = [];
+	pages.forEach( ( { id, title, link: url, type, parent } ) => {
+		// See if a placeholder exists. This is created if children appear before parents in list.
+		const innerBlocks = linkMap[ id ]?.innerBlocks ?? [];
+		linkMap[ id ] = createBlock(
+			'core/navigation-link',
+			{
+				id,
+				label: title.rendered,
+				url,
+				type,
+				kind: 'post-type',
+			},
+			innerBlocks
+		);
+
+		if ( ! parent ) {
+			navigationLinks.push( linkMap[ id ] );
+		} else {
+			if ( ! linkMap[ parent ] ) {
+				// Use a placeholder if the child appears before parent in list.
+				linkMap[ parent ] = { innerBlocks: [] };
+			}
+			const parentLinkInnerBlocks = linkMap[ parent ].innerBlocks;
+			parentLinkInnerBlocks.push( linkMap[ id ] );
+		}
+	} );
+
+	// Transform all links with innerBlocks into Submenus. This can't be done
+	// sooner because page objects have no information on their children.
+	const transformSubmenus = ( listOfLinks ) => {
+		listOfLinks.forEach( ( block, index, listOfLinksArray ) => {
+			const { attributes, innerBlocks } = block;
+			if ( innerBlocks.length !== 0 ) {
+				transformSubmenus( innerBlocks );
+				const transformedBlock = createBlock(
+					'core/navigation-submenu',
+					attributes,
+					innerBlocks
+				);
+				listOfLinksArray[ index ] = transformedBlock;
+			}
+		} );
+	};
+
+	transformSubmenus( navigationLinks );
+
+	return navigationLinks;
+};