@wordpress/block-library 8.32.0 → 8.34.0

package/src/navigation/edit/menu-inspector-controls.js

@@ -49,7 +49,9 @@ function AdditionalBlockContent( { block, insertedBlock, setInsertedBlock } ) {
 
 	const setInsertedBlockAttributes =
 		( _insertedBlockClientId ) => ( _updatedAttributes ) => {
-			if ( ! _insertedBlockClientId ) return;
+			if ( ! _insertedBlockClientId ) {
+				return;
+			}
 			updateBlockAttributes( _insertedBlockClientId, _updatedAttributes );
 		};
 
@@ -102,7 +104,7 @@ const MainContent = ( {
 	const description = navigationMenu
 		? sprintf(
 				/* translators: %s: The name of a menu. */
-				__( 'Structure for navigation menu: %s' ),
+				__( 'Structure for Navigation Menu: %s' ),
 				navigationMenu?.title || __( 'Untitled menu' )
 		  )
 		: __(
@@ -113,7 +115,7 @@ const MainContent = ( {
 		<div className="wp-block-navigation__menu-inspector-controls">
 			{ ! hasChildren && (
 				<p className="wp-block-navigation__menu-inspector-controls__empty-message">
-					{ __( 'This navigation menu is empty.' ) }
+					{ __( 'This Navigation Menu is empty.' ) }
 				</p>
 			) }
 			<PrivateListView

package/src/navigation/edit/navigation-menu-delete-control.js

@@ -43,7 +43,7 @@ export default function NavigationMenuDeleteControl( { onDelete } ) {
 					confirmButtonText={ __( 'Delete' ) }
 				>
 					{ __(
-						'Are you sure you want to delete this Navigation menu?'
+						'Are you sure you want to delete this Navigation Menu?'
 					) }
 				</ConfirmDialog>
 			) }

package/src/navigation/edit/navigation-menu-selector.js

@@ -113,7 +113,7 @@ function NavigationMenuSelector( {
 		selectorLabel = __( 'Loading…' );
 	} else if ( noMenuSelected || noBlockMenus || menuUnavailable ) {
 		// Note: classic Menus may be available.
-		selectorLabel = __( 'Choose or create a Navigation menu' );
+		selectorLabel = __( 'Choose or create a Navigation Menu' );
 	} else {
 		// Current Menu's title.
 		selectorLabel = currentTitle;
@@ -202,7 +202,7 @@ function NavigationMenuSelector( {
 									! hasResolvedNavigationMenus
 								}
 							>
-								{ __( 'Create new menu' ) }
+								{ __( 'Create new Menu' ) }
 							</MenuItem>
 						</MenuGroup>
 					) }

package/src/navigation/edit/test/navigation-menu-selector.js

@@ -89,7 +89,7 @@ describe( 'NavigationMenuSelector', () => {
 			).toBeInTheDocument();
 		} );
 
-		it( 'should show correct dropdown toggle prompt to choose a menu when navigation menus have resolved', async () => {
+		it( 'should show correct dropdown toggle prompt to choose a menu when Navigation Menus have resolved', async () => {
 			useNavigationMenu.mockReturnValue( {
 				navigationMenus: [],
 				hasResolvedNavigationMenus: true,
@@ -101,7 +101,7 @@ describe( 'NavigationMenuSelector', () => {
 
 			expect(
 				screen.getByRole( 'button', {
-					name: 'Choose or create a Navigation menu',
+					name: 'Choose or create a Navigation Menu',
 				} )
 			).toBeInTheDocument();
 		} );
@@ -159,7 +159,7 @@ describe( 'NavigationMenuSelector', () => {
 				render( <NavigationMenuSelector /> );
 
 				const toggleButton = screen.getByRole( 'button', {
-					name: 'Choose or create a Navigation menu',
+					name: 'Choose or create a Navigation Menu',
 				} );
 
 				await user.click( toggleButton );
@@ -169,7 +169,7 @@ describe( 'NavigationMenuSelector', () => {
 				expect( menuPopover ).toHaveAttribute(
 					'aria-label',
 					expect.stringContaining(
-						'Choose or create a Navigation menu'
+						'Choose or create a Navigation Menu'
 					)
 				);
 
@@ -191,7 +191,7 @@ describe( 'NavigationMenuSelector', () => {
 				expect( toolsGroup ).toBeInTheDocument();
 
 				const createMenuButton = screen.getByRole( 'menuitem', {
-					name: 'Create new menu',
+					name: 'Create new Menu',
 				} );
 
 				expect( createMenuButton ).toBeInTheDocument();
@@ -236,7 +236,7 @@ describe( 'NavigationMenuSelector', () => {
 				await user.click( toggleButton );
 
 				const createMenuButton = screen.getByRole( 'menuitem', {
-					name: 'Create new menu',
+					name: 'Create new Menu',
 				} );
 
 				await user.click( createMenuButton );
@@ -268,7 +268,7 @@ describe( 'NavigationMenuSelector', () => {
 
 				await user.click(
 					screen.getByRole( 'menuitem', {
-						name: 'Create new menu',
+						name: 'Create new Menu',
 					} )
 				);
 
@@ -293,7 +293,7 @@ describe( 'NavigationMenuSelector', () => {
 				// Check the "Create menu" button is disabled.
 				expect(
 					screen.queryByRole( 'menuitem', {
-						name: 'Create new menu',
+						name: 'Create new Menu',
 					} )
 				).toBeDisabled();
 
@@ -318,13 +318,13 @@ describe( 'NavigationMenuSelector', () => {
 				// Check the button is enabled again.
 				expect(
 					screen.queryByRole( 'menuitem', {
-						name: 'Create new menu',
+						name: 'Create new Menu',
 					} )
 				).toBeEnabled();
 			} );
 		} );
 
-		describe( 'Navigation menus', () => {
+		describe( 'Navigation Menus', () => {
 			it( 'should not show a list of menus when menus exist but user does not have permission to switch menus', async () => {
 				const user = userEvent.setup();
 
@@ -445,7 +445,7 @@ describe( 'NavigationMenuSelector', () => {
 				expect( menuItem ).toBeChecked();
 			} );
 
-			it( 'should call the handler when the navigation menu is selected', async () => {
+			it( 'should call the handler when the Navigation Menu is selected', async () => {
 				const user = userEvent.setup();
 
 				const handler = jest.fn();

package/src/navigation/view.js

@@ -94,7 +94,9 @@ const { state, actions } = store(
 				const ctx = getContext();
 				const { ref } = getElement();
 				// Safari won't send focus to the clicked element, so we need to manually place it: https://bugs.webkit.org/show_bug.cgi?id=22261
-				if ( window.document.activeElement !== ref ) ref.focus();
+				if ( window.document.activeElement !== ref ) {
+					ref.focus();
+				}
 				const { menuOpenedBy } = state;
 				if ( menuOpenedBy.click || menuOpenedBy.focus ) {
 					actions.closeMenu( 'click' );
@@ -137,7 +139,7 @@ const { state, actions } = store(
 				}
 			},
 			handleMenuFocusout( event ) {
-				const { modal } = getContext();
+				const { modal, type } = getContext();
 				// 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)
@@ -148,7 +150,8 @@ const { state, actions } = store(
 				if (
 					event.relatedTarget === null ||
 					( ! modal?.contains( event.relatedTarget ) &&
-						event.target !== window.document.activeElement )
+						event.target !== window.document.activeElement &&
+						type === 'submenu' )
 				) {
 					actions.closeMenu( 'click' );
 					actions.closeMenu( 'focus' );

package/src/navigation-link/edit.js

@@ -153,6 +153,82 @@ function getMissingText( type ) {
 	return missingText;
 }
 
+/*
+ * Warning, this duplicated in
+ * packages/block-library/src/navigation-submenu/edit.js
+ * Consider reuseing this components for both blocks.
+ */
+function Controls( { attributes, setAttributes, setIsLabelFieldFocused } ) {
+	const { label, url, description, title, rel } = attributes;
+	return (
+		<PanelBody title={ __( 'Settings' ) }>
+			<TextControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
+				value={ label ? stripHTML( label ) : '' }
+				onChange={ ( labelValue ) => {
+					setAttributes( { label: labelValue } );
+				} }
+				label={ __( 'Text' ) }
+				autoComplete="off"
+				onFocus={ () => setIsLabelFieldFocused( true ) }
+				onBlur={ () => setIsLabelFieldFocused( false ) }
+			/>
+			<TextControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
+				value={ url ? safeDecodeURI( url ) : '' }
+				onChange={ ( urlValue ) => {
+					updateAttributes(
+						{ url: urlValue },
+						setAttributes,
+						attributes
+					);
+				} }
+				label={ __( 'Link' ) }
+				autoComplete="off"
+			/>
+			<TextareaControl
+				__nextHasNoMarginBottom
+				value={ description || '' }
+				onChange={ ( descriptionValue ) => {
+					setAttributes( { description: descriptionValue } );
+				} }
+				label={ __( 'Description' ) }
+				help={ __(
+					'The description will be displayed in the menu if the current theme supports it.'
+				) }
+			/>
+			<TextControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
+				value={ title || '' }
+				onChange={ ( titleValue ) => {
+					setAttributes( { title: titleValue } );
+				} }
+				label={ __( 'Title attribute' ) }
+				autoComplete="off"
+				help={ __(
+					'Additional information to help clarify the purpose of the link.'
+				) }
+			/>
+			<TextControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
+				value={ rel || '' }
+				onChange={ ( relValue ) => {
+					setAttributes( { rel: relValue } );
+				} }
+				label={ __( 'Rel attribute' ) }
+				autoComplete="off"
+				help={ __(
+					'The relationship of the linked URL as space-separated link types.'
+				) }
+			/>
+		</PanelBody>
+	);
+}
+
 export default function NavigationLinkEdit( {
 	attributes,
 	isSelected,
@@ -163,7 +239,7 @@ export default function NavigationLinkEdit( {
 	context,
 	clientId,
 } ) {
-	const { id, label, type, url, description, rel, title, kind } = attributes;
+	const { id, label, type, url, description, kind } = attributes;
 
 	const [ isInvalid, isDraft ] = useIsInvalidLink( kind, type, id );
 	const { maxNestingLevel } = context;
@@ -171,9 +247,11 @@ export default function NavigationLinkEdit( {
 	const {
 		replaceBlock,
 		__unstableMarkNextChangeAsNotPersistent,
+		selectBlock,
 		selectPreviousBlock,
 	} = useDispatch( blockEditorStore );
-	const [ isLinkOpen, setIsLinkOpen ] = useState( false );
+	// Have the link editing ui open on mount when lacking a url and selected.
+	const [ isLinkOpen, setIsLinkOpen ] = useState( isSelected && ! url );
 	// Store what element opened the popover, so we know where to return focus to (toolbar button vs navigation link text)
 	const [ openedBy, setOpenedBy ] = useState( null );
 	// Use internal state instead of a ref to make sure that the component
@@ -190,7 +268,6 @@ export default function NavigationLinkEdit( {
 	const [ isLabelFieldFocused, setIsLabelFieldFocused ] = useState( false );
 
 	const {
-		innerBlocks,
 		isAtMaxNesting,
 		isTopLevelLink,
 		isParentOfSelectedBlock,
@@ -198,7 +275,6 @@ export default function NavigationLinkEdit( {
 	} = useSelect(
 		( select ) => {
 			const {
-				getBlocks,
 				getBlockCount,
 				getBlockName,
 				getBlockRootClientId,
@@ -207,7 +283,6 @@ export default function NavigationLinkEdit( {
 			} = select( blockEditorStore );
 
 			return {
-				innerBlocks: getBlocks( clientId ),
 				isAtMaxNesting:
 					getBlockParentsByBlockName( clientId, [
 						'core/navigation-link',
@@ -225,31 +300,25 @@ export default function NavigationLinkEdit( {
 		},
 		[ clientId, maxNestingLevel ]
 	);
+	const { getBlocks } = useSelect( blockEditorStore );
 
 	/**
 	 * Transform to submenu block.
 	 */
 	const transformToSubmenu = () => {
+		let innerBlocks = getBlocks( clientId );
+		if ( innerBlocks.length === 0 ) {
+			innerBlocks = [ createBlock( 'core/navigation-link' ) ];
+			selectBlock( innerBlocks[ 0 ].clientId );
+		}
 		const newSubmenu = createBlock(
 			'core/navigation-submenu',
 			attributes,
-			innerBlocks.length > 0
-				? innerBlocks
-				: [ createBlock( 'core/navigation-link' ) ]
+			innerBlocks
 		);
 		replaceBlock( clientId, newSubmenu );
 	};
 
-	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 );
-		}
-	}, [ url ] );
-
 	useEffect( () => {
 		// If block has inner blocks, transform to Submenu.
 		if ( hasChildren ) {
@@ -260,16 +329,6 @@ export default function NavigationLinkEdit( {
 		}
 	}, [ hasChildren ] );
 
-	/**
-	 * The hook shouldn't be necessary but due to a focus loss happening
-	 * when selecting a suggestion in the link popover, we force close on block unselection.
-	 */
-	useEffect( () => {
-		if ( ! isSelected ) {
-			setIsLinkOpen( false );
-		}
-	}, [ isSelected ] );
-
 	// If the LinkControl popover is open and the URL has changed, close the LinkControl and focus the label text.
 	useEffect( () => {
 		// We only want to do this when the URL has gone from nothing to a new URL AND the label looks like a URL
@@ -421,71 +480,11 @@ export default function NavigationLinkEdit( {
 			</BlockControls>
 			{ /* Warning, this duplicated in packages/block-library/src/navigation-submenu/edit.js */ }
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<TextControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
-						value={ label ? stripHTML( label ) : '' }
-						onChange={ ( labelValue ) => {
-							setAttributes( { label: labelValue } );
-						} }
-						label={ __( 'Text' ) }
-						autoComplete="off"
-						onFocus={ () => setIsLabelFieldFocused( true ) }
-						onBlur={ () => setIsLabelFieldFocused( false ) }
-					/>
-					<TextControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
-						value={ url ? safeDecodeURI( url ) : '' }
-						onChange={ ( urlValue ) => {
-							updateAttributes(
-								{ url: urlValue },
-								setAttributes,
-								attributes
-							);
-						} }
-						label={ __( 'Link' ) }
-						autoComplete="off"
-					/>
-					<TextareaControl
-						__nextHasNoMarginBottom
-						value={ description || '' }
-						onChange={ ( descriptionValue ) => {
-							setAttributes( { description: descriptionValue } );
-						} }
-						label={ __( 'Description' ) }
-						help={ __(
-							'The description will be displayed in the menu if the current theme supports it.'
-						) }
-					/>
-					<TextControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
-						value={ title || '' }
-						onChange={ ( titleValue ) => {
-							setAttributes( { title: titleValue } );
-						} }
-						label={ __( 'Title attribute' ) }
-						autoComplete="off"
-						help={ __(
-							'Additional information to help clarify the purpose of the link.'
-						) }
-					/>
-					<TextControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
-						value={ rel || '' }
-						onChange={ ( relValue ) => {
-							setAttributes( { rel: relValue } );
-						} }
-						label={ __( 'Rel attribute' ) }
-						autoComplete="off"
-						help={ __(
-							'The relationship of the linked URL as space-separated link types.'
-						) }
-					/>
-				</PanelBody>
+				<Controls
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					setIsLabelFieldFocused={ setIsLabelFieldFocused }
+				/>
 			</InspectorControls>
 			<div { ...blockProps }>
 				{ /* eslint-disable jsx-a11y/anchor-is-valid */ }

package/src/navigation-link/index.php

@@ -198,6 +198,13 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 	$kind        = empty( $attributes['kind'] ) ? 'post_type' : str_replace( '-', '_', $attributes['kind'] );
 	$is_active   = ! empty( $attributes['id'] ) && get_queried_object_id() === (int) $attributes['id'] && ! empty( get_queried_object()->$kind );
 
+	if ( is_post_type_archive() ) {
+		$queried_archive_link = get_post_type_archive_link( get_queried_object()->name );
+		if ( $attributes['url'] === $queried_archive_link ) {
+			$is_active = true;
+		}
+	}
+
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
 			'class' => $css_classes . ' wp-block-navigation-item' . ( $has_submenu ? ' has-child' : '' ) .

package/src/navigation-link/link-ui.js

@@ -148,7 +148,6 @@ function LinkUIBlockInserter( { clientId, onBack, onSelectBlock } ) {
 export function LinkUI( props ) {
 	const [ addingBlock, setAddingBlock ] = useState( false );
 	const [ focusAddBlockButton, setFocusAddBlockButton ] = useState( false );
-	const [ showBackdrop, setShowBackdrop ] = useState( true );
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const pagesPermissions = useResourcePermissions( 'pages' );
 	const postsPermissions = useResourcePermissions( 'posts' );
@@ -214,102 +213,88 @@ export function LinkUI( props ) {
 	const { onClose: onSelectBlock } = props;
 
 	return (
-		<>
-			{ showBackdrop && (
+		<Popover
+			placement="bottom"
+			onClose={ props.onClose }
+			anchor={ props.anchor }
+			shift
+		>
+			{ ! addingBlock && (
 				<div
-					className="components-popover-pointer-events-trap"
-					aria-hidden="true"
-					onClick={ () => setShowBackdrop( false ) }
-				/>
-			) }
-			<Popover
-				placement="bottom"
-				onClose={ props.onClose }
-				anchor={ props.anchor }
-				shift
-			>
-				{ ! addingBlock && (
-					<div
-						role="dialog"
-						aria-labelledby={ dialogTitleId }
-						aria-describedby={ dialogDescritionId }
-					>
-						<VisuallyHidden>
-							<h2 id={ dialogTitleId }>{ __( 'Add link' ) }</h2>
+					role="dialog"
+					aria-labelledby={ dialogTitleId }
+					aria-describedby={ dialogDescritionId }
+				>
+					<VisuallyHidden>
+						<h2 id={ dialogTitleId }>{ __( 'Add link' ) }</h2>
 
-							<p id={ dialogDescritionId }>
-								{ __(
-									'Search for and add a link to your Navigation.'
-								) }
-							</p>
-						</VisuallyHidden>
-						<LinkControl
-							hasTextControl
-							hasRichPreviews
-							value={ link }
-							showInitialSuggestions
-							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>'
-									);
-								}
+						<p id={ dialogDescritionId }>
+							{ __(
+								'Search for and add a link to your Navigation.'
+							) }
+						</p>
+					</VisuallyHidden>
+					<LinkControl
+						hasTextControl
+						hasRichPreviews
+						value={ link }
+						showInitialSuggestions
+						withCreateSuggestion={ userCanCreate }
+						createSuggestion={ handleCreate }
+						createSuggestionButtonText={ ( searchTerm ) => {
+							let format;
 
-								return createInterpolateElement(
-									sprintf( format, searchTerm ),
-									{
-										mark: <mark />,
-									}
+							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>'
 								);
-							} }
-							noDirectEntry={ !! type }
-							noURLSuggestion={ !! type }
-							suggestionsQuery={ getSuggestionsQuery(
-								type,
-								kind
-							) }
-							onChange={ props.onChange }
-							onRemove={ props.onRemove }
-							onCancel={ props.onCancel }
-							renderControlBottom={ () =>
-								! link?.url?.length && (
-									<LinkUITools
-										focusAddBlockButton={
-											focusAddBlockButton
-										}
-										setAddingBlock={ () => {
-											setAddingBlock( true );
-											setFocusAddBlockButton( false );
-										} }
-									/>
-								)
 							}
-						/>
-					</div>
-				) }
 
-				{ addingBlock && (
-					<LinkUIBlockInserter
-						clientId={ props.clientId }
-						onBack={ () => {
-							setAddingBlock( false );
-							setFocusAddBlockButton( true );
+							return createInterpolateElement(
+								sprintf( format, searchTerm ),
+								{
+									mark: <mark />,
+								}
+							);
 						} }
-						onSelectBlock={ onSelectBlock }
+						noDirectEntry={ !! type }
+						noURLSuggestion={ !! type }
+						suggestionsQuery={ getSuggestionsQuery( type, kind ) }
+						onChange={ props.onChange }
+						onRemove={ props.onRemove }
+						onCancel={ props.onCancel }
+						renderControlBottom={ () =>
+							! link?.url?.length && (
+								<LinkUITools
+									focusAddBlockButton={ focusAddBlockButton }
+									setAddingBlock={ () => {
+										setAddingBlock( true );
+										setFocusAddBlockButton( false );
+									} }
+								/>
+							)
+						}
 					/>
-				) }
-			</Popover>
-		</>
+				</div>
+			) }
+
+			{ addingBlock && (
+				<LinkUIBlockInserter
+					clientId={ props.clientId }
+					onBack={ () => {
+						setAddingBlock( false );
+						setFocusAddBlockButton( true );
+					} }
+					onSelectBlock={ onSelectBlock }
+				/>
+			) }
+		</Popover>
 	);
 }
 

package/src/navigation-link/style.scss

@@ -28,15 +28,3 @@
 	margin-left: $grid-unit-10;
 	text-transform: uppercase;
 }
-
-// Ensure Popover `onClose` is fired for clicks on the canvas iframe.
-// See https: //github.com/WordPress/gutenberg/pull/57756#discussion_r1475852009.
-.components-popover-pointer-events-trap {
-	// Same z-index as popover, but rendered before the popover element
-	// in DOM order = it will display just under the popover
-	z-index: z-index(".components-popover");
-	position: fixed;
-	inset: 0;
-	background-color: transparent;
-	cursor: pointer;
-}

package/src/navigation-submenu/index.php

@@ -87,6 +87,13 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 	$kind        = empty( $attributes['kind'] ) ? 'post_type' : str_replace( '-', '_', $attributes['kind'] );
 	$is_active   = ! empty( $attributes['id'] ) && get_queried_object_id() === (int) $attributes['id'] && ! empty( get_queried_object()->$kind );
 
+	if ( is_post_type_archive() ) {
+		$queried_archive_link = get_post_type_archive_link( get_queried_object()->name );
+		if ( $attributes['url'] === $queried_archive_link ) {
+			$is_active = true;
+		}
+	}
+
 	$show_submenu_indicators = isset( $block->context['showSubmenuIcon'] ) && $block->context['showSubmenuIcon'];
 	$open_on_click           = isset( $block->context['openSubmenusOnClick'] ) && $block->context['openSubmenusOnClick'];
 	$open_on_hover_and_click = isset( $block->context['openSubmenusOnClick'] ) && ! $block->context['openSubmenusOnClick'] &&

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

@@ -5,7 +5,7 @@ import { Button, Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 export const convertDescription = __(
-	"This navigation menu displays your website's pages. Editing it will enable you to add, delete, or reorder pages. However, new pages will no longer be added automatically."
+	"This Navigation Menu displays your website's pages. Editing it will enable you to add, delete, or reorder pages. However, new pages will no longer be added automatically."
 );
 
 export function ConvertToLinksModal( { onClick, onClose, disabled } ) {