@wordpress/block-library 8.2.0 → 8.3.1

package/src/navigation-link/edit.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { unescape } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -35,6 +34,7 @@ import {
 	placeCaretAtHorizontalEdge,
 	__unstableStripHTML as stripHTML,
 } from '@wordpress/dom';
+import { decodeEntities } from '@wordpress/html-entities';
 import { link as linkIcon, addSubmenu } from '@wordpress/icons';
 import {
 	store as coreStore,
@@ -312,12 +312,17 @@ export default function NavigationLinkEdit( {
 	 */
 	function removeLink() {
 		// Reset all attributes that comprise the link.
+		// It is critical that all attributes are reset
+		// to their default values otherwise this may
+		// in advertently trigger side effects because
+		// the values will have "changed".
 		setAttributes( {
-			url: '',
-			label: '',
-			id: '',
-			kind: '',
-			type: '',
+			url: undefined,
+			label: undefined,
+			id: undefined,
+			kind: undefined,
+			type: undefined,
+			opensInNewTab: false,
 		} );
 
 		// Close the link editing UI.
@@ -432,6 +437,7 @@ export default function NavigationLinkEdit( {
 			<InspectorControls>
 				<PanelBody title={ __( 'Link settings' ) }>
 					<TextControl
+						__nextHasNoMarginBottom
 						value={ label ? stripHTML( label ) : '' }
 						onChange={ ( labelValue ) => {
 							setAttributes( { label: labelValue } );
@@ -440,6 +446,7 @@ export default function NavigationLinkEdit( {
 						autoComplete="off"
 					/>
 					<TextControl
+						__nextHasNoMarginBottom
 						value={ url || '' }
 						onChange={ ( urlValue ) => {
 							updateAttributes(
@@ -463,6 +470,7 @@ export default function NavigationLinkEdit( {
 						) }
 					/>
 					<TextControl
+						__nextHasNoMarginBottom
 						value={ title || '' }
 						onChange={ ( titleValue ) => {
 							setAttributes( { title: titleValue } );
@@ -471,6 +479,7 @@ export default function NavigationLinkEdit( {
 						autoComplete="off"
 					/>
 					<TextControl
+						__nextHasNoMarginBottom
 						value={ rel || '' }
 						onChange={ ( relValue ) => {
 							setAttributes( { rel: relValue } );
@@ -567,7 +576,7 @@ export default function NavigationLinkEdit( {
 													// Unescape is used here to "recover" the escaped characters
 													// so they display without encoding.
 													// See `updateAttributes` for more details.
-													`${ unescape(
+													`${ decodeEntities(
 														label
 													) } ${ placeholderText }`.trim()
 												}

package/src/navigation-link/index.php

@@ -372,38 +372,6 @@ function register_block_core_navigation_link() {
 }
 add_action( 'init', 'register_block_core_navigation_link' );
 
-/**
- * Disables the display of block inspector tabs for the Navigation Link block.
- *
- * This is only a temporary measure until we have a TabPanel and mechanism that
- * will allow the Navigation Link 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_link_block( $settings ) {
-	$current_tab_settings = _wp_array_get(
-		$settings,
-		array( 'blockInspectorTabs' ),
-		array()
-	);
-
-	$settings['blockInspectorTabs'] = array_merge(
-		$current_tab_settings,
-		array( 'core/navigation-link' => false )
-	);
-
-	return $settings;
-}
-
-add_filter( 'block_editor_settings_all', 'gutenberg_disable_tabs_for_navigation_link_block' );
-
 /**
  * Enables animation of the block inspector for the Navigation Link block.
  *
@@ -414,7 +382,7 @@ add_filter( 'block_editor_settings_all', 'gutenberg_disable_tabs_for_navigation_
  * @param array $settings Default editor settings.
  * @return array Filtered editor settings.
  */
-function gutenberg_enable_animation_for_navigation_link_inspector( $settings ) {
+function block_core_navigation_link_enable_inspector_animation( $settings ) {
 	$current_animation_settings = _wp_array_get(
 		$settings,
 		array( '__experimentalBlockInspectorAnimation' ),
@@ -434,4 +402,4 @@ function gutenberg_enable_animation_for_navigation_link_inspector( $settings ) {
 	return $settings;
 }
 
-add_filter( 'block_editor_settings_all', 'gutenberg_enable_animation_for_navigation_link_inspector' );
+add_filter( 'block_editor_settings_all', 'block_core_navigation_link_enable_inspector_animation' );

package/src/navigation-submenu/edit.js

@@ -393,6 +393,7 @@ export default function NavigationSubmenuEdit( {
 			<InspectorControls>
 				<PanelBody title={ __( 'Link settings' ) }>
 					<TextControl
+						__nextHasNoMarginBottom
 						value={ label || '' }
 						onChange={ ( labelValue ) => {
 							setAttributes( { label: labelValue } );
@@ -401,6 +402,7 @@ export default function NavigationSubmenuEdit( {
 						autoComplete="off"
 					/>
 					<TextControl
+						__nextHasNoMarginBottom
 						value={ url || '' }
 						onChange={ ( urlValue ) => {
 							setAttributes( { url: urlValue } );
@@ -422,6 +424,7 @@ export default function NavigationSubmenuEdit( {
 						) }
 					/>
 					<TextControl
+						__nextHasNoMarginBottom
 						value={ title || '' }
 						onChange={ ( titleValue ) => {
 							setAttributes( { title: titleValue } );
@@ -430,6 +433,7 @@ export default function NavigationSubmenuEdit( {
 						autoComplete="off"
 					/>
 					<TextControl
+						__nextHasNoMarginBottom
 						value={ rel || '' }
 						onChange={ ( relValue ) => {
 							setAttributes( { rel: relValue } );

package/src/navigation-submenu/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { addSubmenu } from '@wordpress/icons';
+import { page, addSubmenu } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -17,7 +17,13 @@ const { name } = metadata;
 export { metadata, name };
 
 export const settings = {
-	icon: addSubmenu,
+	icon: ( { context } ) => {
+		if ( context === 'list-view' ) {
+			return page;
+		}
+
+		return addSubmenu;
+	},
 
 	__experimentalLabel: ( { label } ) => label,
 

package/src/navigation-submenu/index.php

@@ -290,38 +290,6 @@ 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( 'blockInspectorTabs' ),
-		array()
-	);
-
-	$settings['blockInspectorTabs'] = 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' );
-
 /**
  * Enables animation of the block inspector for the Navigation Submenu block.
  *
@@ -332,7 +300,7 @@ add_filter( 'block_editor_settings_all', 'gutenberg_disable_tabs_for_navigation_
  * @param array $settings Default editor settings.
  * @return array Filtered editor settings.
  */
-function gutenberg_enable_animation_for_navigation_submenu_inspector( $settings ) {
+function block_core_navigation_submenu_enable_inspector_animation( $settings ) {
 	$current_animation_settings = _wp_array_get(
 		$settings,
 		array( '__experimentalBlockInspectorAnimation' ),
@@ -352,4 +320,4 @@ function gutenberg_enable_animation_for_navigation_submenu_inspector( $settings
 	return $settings;
 }
 
-add_filter( 'block_editor_settings_all', 'gutenberg_enable_animation_for_navigation_submenu_inspector' );
+add_filter( 'block_editor_settings_all', 'block_core_navigation_submenu_enable_inspector_animation' );

package/src/page-list/block.json

@@ -33,6 +33,7 @@
 		"openSubmenusOnClick"
 	],
 	"supports": {
+		"anchor": true,
 		"reusable": false,
 		"html": false,
 		"typography": {

package/src/page-list/edit.js

@@ -23,24 +23,138 @@ import {
 	Notice,
 	ComboboxControl,
 	Button,
+	Modal,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useMemo, useState, useEffect } from '@wordpress/element';
 import { useEntityRecords } from '@wordpress/core-data';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import ConvertToLinksModal from './convert-to-links-modal';
-import { convertToNavigationLinks } from './convert-to-navigation-links';
-import { convertDescription } from './constants';
+import { useConvertToNavigationLinks } from './use-convert-to-navigation-links';
 
 // We only show the edit option when page count is <= MAX_PAGE_COUNT
 // Performance of Navigation Links is not good past this value.
 const MAX_PAGE_COUNT = 100;
 const NOOP = () => {};
 
+const convertDescription = __(
+	'This menu is automatically kept in sync with pages on your site. You can manage the menu yourself by clicking "Edit" below.'
+);
+
+function BlockContent( {
+	blockProps,
+	innerBlocksProps,
+	hasResolvedPages,
+	blockList,
+	pages,
+	parentPageID,
+} ) {
+	if ( ! hasResolvedPages ) {
+		return (
+			<div { ...blockProps }>
+				<Spinner />
+			</div>
+		);
+	}
+
+	if ( pages === null ) {
+		return (
+			<div { ...blockProps }>
+				<Notice status={ 'warning' } isDismissible={ false }>
+					{ __( 'Page List: Cannot retrieve Pages.' ) }
+				</Notice>
+			</div>
+		);
+	}
+
+	if ( pages.length === 0 ) {
+		return (
+			<div { ...blockProps }>
+				<Notice status={ 'info' } isDismissible={ false }>
+					{ __( 'Page List: Cannot retrieve Pages.' ) }
+				</Notice>
+			</div>
+		);
+	}
+
+	if ( blockList.length === 0 ) {
+		const parentPageDetails = pages.find(
+			( page ) => page.id === parentPageID
+		);
+
+		if ( parentPageDetails?.title?.rendered ) {
+			return (
+				<div { ...blockProps }>
+					<Warning>
+						{ sprintf(
+							// translators: %s: Page title.
+							__( 'Page List: "%s" page has no children.' ),
+							parentPageDetails.title.rendered
+						) }
+					</Warning>
+				</div>
+			);
+		}
+
+		return (
+			<div { ...blockProps }>
+				<Notice status={ 'warning' } isDismissible={ false }>
+					{ __( 'Page List: Cannot retrieve Pages.' ) }
+				</Notice>
+			</div>
+		);
+	}
+
+	if ( pages.length > 0 ) {
+		return <ul { ...innerBlocksProps }></ul>;
+	}
+}
+
+function ConvertToLinksModal( { onClick, disabled } ) {
+	const [ isOpen, setOpen ] = useState( false );
+	const openModal = () => setOpen( true );
+	const closeModal = () => setOpen( false );
+
+	return (
+		<>
+			<BlockControls group="other">
+				<ToolbarButton title={ __( 'Edit' ) } onClick={ openModal }>
+					{ __( 'Edit' ) }
+				</ToolbarButton>
+			</BlockControls>
+			{ isOpen && (
+				<Modal
+					onRequestClose={ closeModal }
+					title={ __( 'Edit this menu' ) }
+					className={ 'wp-block-page-list-modal' }
+					aria={ {
+						describedby: 'wp-block-page-list-modal__description',
+					} }
+				>
+					<p id={ 'wp-block-page-list-modal__description' }>
+						{ convertDescription }
+					</p>
+					<div className="wp-block-page-list-modal-buttons">
+						<Button variant="tertiary" onClick={ closeModal }>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							variant="primary"
+							disabled={ disabled }
+							onClick={ onClick }
+						>
+							{ __( 'Edit' ) }
+						</Button>
+					</div>
+				</Modal>
+			) }
+		</>
+	);
+}
+
 export default function PageListEdit( {
 	context,
 	clientId,
@@ -48,16 +162,56 @@ export default function PageListEdit( {
 	setAttributes,
 } ) {
 	const { parentPageID } = attributes;
-	const [ pages ] = useGetPages();
-	const { pagesByParentId, totalPages, hasResolvedPages } = usePageData();
 
-	const isNavigationChild = 'showSubmenuIcon' in context;
+	const { records: pages, hasResolved: hasResolvedPages } = useEntityRecords(
+		'postType',
+		'page',
+		{
+			per_page: MAX_PAGE_COUNT,
+			_fields: [ 'id', 'link', 'menu_order', 'parent', 'title', 'type' ],
+			// TODO: When https://core.trac.wordpress.org/ticket/39037 REST API support for multiple orderby
+			// values is resolved, update 'orderby' to [ 'menu_order', 'post_title' ] to provide a consistent
+			// sort.
+			orderby: 'menu_order',
+			order: 'asc',
+		}
+	);
+
 	const allowConvertToLinks =
-		isNavigationChild && totalPages <= MAX_PAGE_COUNT;
+		'showSubmenuIcon' in context &&
+		pages?.length > 0 &&
+		pages?.length <= MAX_PAGE_COUNT;
 
-	const [ isOpen, setOpen ] = useState( false );
-	const openModal = () => setOpen( true );
-	const closeModal = () => setOpen( false );
+	const convertToNavigationLinks = useConvertToNavigationLinks( {
+		clientId,
+		pages,
+	} );
+
+	const pagesByParentId = useMemo( () => {
+		if ( pages === null ) {
+			return new Map();
+		}
+
+		// TODO: Once the REST API supports passing multiple values to
+		// 'orderby', this can be removed.
+		// https://core.trac.wordpress.org/ticket/39037
+		const sortedPages = pages.sort( ( a, b ) => {
+			if ( a.menu_order === b.menu_order ) {
+				return a.title.rendered.localeCompare( b.title.rendered );
+			}
+			return a.menu_order - b.menu_order;
+		} );
+
+		return sortedPages.reduce( ( accumulator, page ) => {
+			const { parent } = page;
+			if ( accumulator.has( parent ) ) {
+				accumulator.get( parent ).push( page );
+			} else {
+				accumulator.set( parent, [ page ] );
+			}
+			return accumulator;
+		}, new Map() );
+	}, [ pages ] );
 
 	const blockProps = useBlockProps( {
 		className: classnames( 'wp-block-page-list', {
@@ -137,77 +291,16 @@ export default function PageListEdit( {
 		value: blockList,
 	} );
 
-	const getBlockContent = () => {
-		if ( ! hasResolvedPages ) {
-			return (
-				<div { ...blockProps }>
-					<Spinner />
-				</div>
-			);
-		}
-
-		if ( totalPages === null ) {
-			return (
-				<div { ...blockProps }>
-					<Notice status={ 'warning' } isDismissible={ false }>
-						{ __( 'Page List: Cannot retrieve Pages.' ) }
-					</Notice>
-				</div>
-			);
-		}
-
-		if ( totalPages === 0 ) {
-			return (
-				<div { ...blockProps }>
-					<Notice status={ 'info' } isDismissible={ false }>
-						{ __( 'Page List: Cannot retrieve Pages.' ) }
-					</Notice>
-				</div>
-			);
-		}
-
-		if ( blockList.length === 0 ) {
-			const parentPageDetails =
-				pages && pages.find( ( page ) => page.id === parentPageID );
-			return (
-				<div { ...blockProps }>
-					<Warning>
-						{ sprintf(
-							// translators: %s: Page title.
-							__( '"%s" page has no children.' ),
-							parentPageDetails.title.rendered
-						) }
-					</Warning>
-				</div>
-			);
-		}
-
-		if ( totalPages > 0 ) {
-			return <ul { ...innerBlocksProps }></ul>;
-		}
-	};
-
-	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
-
-	const { parentNavBlockClientId, isNested } = useSelect(
+	const { isNested } = useSelect(
 		( select ) => {
-			const { getSelectedBlockClientId, getBlockParentsByBlockName } =
-				select( blockEditorStore );
-
-			const _selectedBlockClientId = getSelectedBlockClientId();
-
+			const { getBlockParentsByBlockName } = select( blockEditorStore );
+			const blockParents = getBlockParentsByBlockName(
+				clientId,
+				'core/navigation-submenu',
+				true
+			);
 			return {
-				parentNavBlockClientId: getBlockParentsByBlockName(
-					_selectedBlockClientId,
-					'core/navigation',
-					true
-				)[ 0 ],
-				isNested:
-					getBlockParentsByBlockName(
-						clientId,
-						'core/navigation-submenu',
-						true
-					).length > 0,
+				isNested: blockParents.length > 0,
 			};
 		},
 		[ clientId ]
@@ -220,27 +313,6 @@ export default function PageListEdit( {
 	return (
 		<>
 			<InspectorControls>
-				{ isNavigationChild && pages?.length > 0 && (
-					<PanelBody title={ __( 'Customize this menu' ) }>
-						<p>{ convertDescription }</p>
-						<Button
-							variant="primary"
-							disabled={ ! hasResolvedPages }
-							onClick={ () => {
-								const navigationLinks =
-									convertToNavigationLinks( pages );
-
-								// Replace the Page List block with the Navigation Links.
-								replaceBlock( clientId, navigationLinks );
-
-								// Select the Navigation block to reveal the changes.
-								selectBlock( parentNavBlockClientId );
-							} }
-						>
-							{ __( 'Customize' ) }
-						</Button>
-					</PanelBody>
-				) }
 				{ pagesTree.length > 0 && (
 					<PanelBody>
 						<ComboboxControl
@@ -257,70 +329,33 @@ export default function PageListEdit( {
 						/>
 					</PanelBody>
 				) }
+				{ allowConvertToLinks && (
+					<PanelBody title={ __( 'Edit this menu' ) }>
+						<p>{ convertDescription }</p>
+						<Button
+							variant="primary"
+							disabled={ ! hasResolvedPages }
+							onClick={ convertToNavigationLinks }
+						>
+							{ __( 'Edit' ) }
+						</Button>
+					</PanelBody>
+				) }
 			</InspectorControls>
-			{ allowConvertToLinks && totalPages > 0 && (
-				<BlockControls group="other">
-					<ToolbarButton title={ __( 'Edit' ) } onClick={ openModal }>
-						{ __( 'Edit' ) }
-					</ToolbarButton>
-				</BlockControls>
-			) }
-			{ allowConvertToLinks && isOpen && (
+			{ allowConvertToLinks && (
 				<ConvertToLinksModal
-					onClose={ closeModal }
-					clientId={ clientId }
+					disabled={ ! hasResolvedPages }
+					onClick={ convertToNavigationLinks }
 				/>
 			) }
-
-			{ getBlockContent() }
+			<BlockContent
+				blockProps={ blockProps }
+				innerBlocksProps={ innerBlocksProps }
+				hasResolvedPages={ hasResolvedPages }
+				blockList={ blockList }
+				pages={ pages }
+				parentPageID={ parentPageID }
+			/>
 		</>
 	);
 }
-
-function useGetPages() {
-	const { records: pages, hasResolved: hasResolvedPages } = useEntityRecords(
-		'postType',
-		'page',
-		{
-			orderby: 'menu_order',
-			order: 'asc',
-			_fields: [ 'id', 'link', 'parent', 'title', 'menu_order' ],
-			per_page: -1,
-			context: 'view',
-		}
-	);
-
-	return [ pages, hasResolvedPages ];
-}
-
-function usePageData( pageId = 0 ) {
-	const [ pages, hasResolvedPages ] = useGetPages();
-
-	return useMemo( () => {
-		// TODO: Once the REST API supports passing multiple values to
-		// 'orderby', this can be removed.
-		// https://core.trac.wordpress.org/ticket/39037
-
-		const sortedPages = [ ...( pages ?? [] ) ].sort( ( a, b ) => {
-			if ( a.menu_order === b.menu_order ) {
-				return a.title.rendered.localeCompare( b.title.rendered );
-			}
-			return a.menu_order - b.menu_order;
-		} );
-		const pagesByParentId = sortedPages.reduce( ( accumulator, page ) => {
-			const { parent } = page;
-			if ( accumulator.has( parent ) ) {
-				accumulator.get( parent ).push( page );
-			} else {
-				accumulator.set( parent, [ page ] );
-			}
-			return accumulator;
-		}, new Map() );
-
-		return {
-			pagesByParentId,
-			hasResolvedPages,
-			totalPages: pages?.length ?? null,
-		};
-	}, [ pageId, pages, hasResolvedPages ] );
-}

package/src/page-list/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { pages, update } from '@wordpress/icons';
+import { pages } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -15,13 +15,7 @@ const { name } = metadata;
 export { metadata, name };
 
 export const settings = {
-	icon: ( { context } ) => {
-		if ( context === 'list-view' ) {
-			return update;
-		}
-
-		return pages;
-	},
+	icon: pages,
 	example: {},
 	edit,
 };

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

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 
-import { convertToNavigationLinks } from '../convert-to-navigation-links';
+import { convertToNavigationLinks } from '../use-convert-to-navigation-links';
 
 // Mock createBlock to avoid creating the blocks in test environment
 // as convertToNavigationLinks calls this method internally.