@wordpress/block-library 6.0.20 → 6.0.26

package/src/gallery/constants.js

@@ -1,3 +1,5 @@
 export const LINK_DESTINATION_NONE = 'none';
 export const LINK_DESTINATION_MEDIA = 'media';
 export const LINK_DESTINATION_ATTACHMENT = 'attachment';
+export const LINK_DESTINATION_MEDIA_WP_CORE = 'file';
+export const LINK_DESTINATION_ATTACHMENT_WP_CORE = 'post';

package/src/gallery/style.scss

@@ -30,6 +30,7 @@
 		margin-top: auto;
 		margin-bottom: auto;
 		flex-direction: column;
+		max-width: 100%;
 
 		> div,
 		> a {
@@ -41,7 +42,9 @@
 		img {
 			display: block;
 			height: auto;
-			max-width: 100%;
+			// Ensure max-width is not overridden on the img when the parent gallery has
+			// wide or full alignment.
+			max-width: 100% !important;
 			width: auto;
 		}
 

package/src/gallery/transforms.js

@@ -291,7 +291,10 @@ const transforms = {
 									url,
 									alt,
 									caption,
-									imageSizeSlug,
+									sizeSlug: imageSizeSlug,
+									linkDestination,
+									href,
+									linkTarget,
 								},
 							} ) =>
 								createBlock( 'core/image', {
@@ -301,6 +304,9 @@ const transforms = {
 									caption,
 									sizeSlug: imageSizeSlug,
 									align,
+									linkDestination,
+									href,
+									linkTarget,
 								} )
 						);
 					}

package/src/gallery/utils.js

@@ -5,6 +5,8 @@ import {
 	LINK_DESTINATION_ATTACHMENT,
 	LINK_DESTINATION_MEDIA,
 	LINK_DESTINATION_NONE,
+	LINK_DESTINATION_MEDIA_WP_CORE,
+	LINK_DESTINATION_ATTACHMENT_WP_CORE,
 } from './constants';
 import {
 	LINK_DESTINATION_ATTACHMENT as IMAGE_LINK_DESTINATION_ATTACHMENT,
@@ -21,15 +23,17 @@ import {
  * @return {Object}            New attributes to assign to image block.
  */
 export function getHrefAndDestination( image, destination ) {
-	// Need to determine the URL that the selected destination maps to.
-	// Gutenberg and WordPress use different constants so the new link
-	// destination also needs to be tweaked.
+	// Gutenberg and WordPress use different constants so if image_default_link_type
+	// option is set we need to map from the WP Core values.
+
 	switch ( destination ) {
+		case LINK_DESTINATION_MEDIA_WP_CORE:
 		case LINK_DESTINATION_MEDIA:
 			return {
 				href: image?.source_url || image?.url, // eslint-disable-line camelcase
 				linkDestination: IMAGE_LINK_DESTINATION_MEDIA,
 			};
+		case LINK_DESTINATION_ATTACHMENT_WP_CORE:
 		case LINK_DESTINATION_ATTACHMENT:
 			return {
 				href: image?.link,

package/src/heading/edit.js

@@ -8,7 +8,7 @@ import classnames from 'classnames';
  */
 import { __ } from '@wordpress/i18n';
 import { useEffect } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import {
 	AlignmentControl,
@@ -41,6 +41,14 @@ function HeadingEdit( {
 		style,
 	} );
 
+	const { canGenerateAnchors } = useSelect( ( select ) => {
+		const settings = select( blockEditorStore ).getSettings();
+
+		return {
+			canGenerateAnchors: !! settings.__experimentalGenerateAnchors,
+		};
+	}, [] );
+
 	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
 		blockEditorStore
 	);
@@ -48,6 +56,10 @@ function HeadingEdit( {
 	// Initially set anchor for headings that have content but no anchor set.
 	// This is used when transforming a block to heading, or for legacy anchors.
 	useEffect( () => {
+		if ( ! canGenerateAnchors ) {
+			return;
+		}
+
 		if ( ! anchor && content ) {
 			// This side-effect should not create an undo level.
 			__unstableMarkNextChangeAsNotPersistent();
@@ -59,14 +71,15 @@ function HeadingEdit( {
 
 		// Remove anchor map when block unmounts.
 		return () => setAnchor( clientId, null );
-	}, [ content, anchor ] );
+	}, [ anchor, content, clientId, canGenerateAnchors ] );
 
 	const onContentChange = ( value ) => {
 		const newAttrs = { content: value };
 		if (
-			! anchor ||
-			! value ||
-			generateAnchor( clientId, content ) === anchor
+			canGenerateAnchors &&
+			( ! anchor ||
+				! value ||
+				generateAnchor( clientId, content ) === anchor )
 		) {
 			newAttrs.anchor = generateAnchor( clientId, value );
 		}

package/src/image/style.scss

@@ -2,8 +2,6 @@
 	margin: 0 0 1em 0;
 
 	img {
-		height: auto;
-		max-width: 100%;
 		vertical-align: bottom;
 	}
 

package/src/navigation/edit/index.js

@@ -45,6 +45,7 @@ import { __ } from '@wordpress/i18n';
  */
 import useListViewModal from './use-list-view-modal';
 import useNavigationMenu from '../use-navigation-menu';
+import useNavigationEntities from '../use-navigation-entities';
 import Placeholder from './placeholder';
 import PlaceholderPreview from './placeholder/placeholder-preview';
 import ResponsiveWrapper from './responsive-wrapper';
@@ -151,6 +152,10 @@ function Navigation( {
 		`navigationMenu/${ ref }`
 	);
 
+	// Preload classic menus, so that they don't suddenly pop-in when viewing
+	// the Select Menu dropdown.
+	useNavigationEntities();
+
 	const {
 		hasUncontrolledInnerBlocks,
 		uncontrolledInnerBlocks,
@@ -474,12 +479,15 @@ function Navigation( {
 							>
 								{ ( { onClose } ) => (
 									<NavigationMenuSelector
+										clientId={ clientId }
 										onSelect={ ( { id } ) => {
 											setRef( id );
 											onClose();
 										} }
 										onCreateNew={ startWithEmptyMenu }
-										showCreate={ canUserCreateNavigation }
+										canUserCreateNavigation={
+											canUserCreateNavigation
+										}
 									/>
 								) }
 							</ToolbarDropdownMenu>

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

@@ -11,18 +11,47 @@ import { addQueryArgs } from '@wordpress/url';
  * Internal dependencies
  */
 import useNavigationMenu from '../use-navigation-menu';
+import useNavigationEntities from '../use-navigation-entities';
+import useConvertClassicMenu from '../use-convert-classic-menu';
+import useCreateNavigationMenu from './use-create-navigation-menu';
 
 export default function NavigationMenuSelector( {
+	clientId,
 	onSelect,
 	onCreateNew,
-	showCreate = false,
+	canUserCreateNavigation = false,
 } ) {
+	const {
+		menus: classicMenus,
+		hasMenus: hasClassicMenus,
+	} = useNavigationEntities();
 	const { navigationMenus } = useNavigationMenu();
 	const ref = useEntityId( 'postType', 'wp_navigation' );
 
+	const createNavigationMenu = useCreateNavigationMenu( clientId );
+
+	const onFinishMenuCreation = async (
+		blocks,
+		navigationMenuTitle = null
+	) => {
+		if ( ! canUserCreateNavigation ) {
+			return;
+		}
+
+		const navigationMenu = await createNavigationMenu(
+			navigationMenuTitle,
+			blocks
+		);
+		onSelect( navigationMenu );
+	};
+
+	const convertClassicMenuToBlocks = useConvertClassicMenu(
+		onFinishMenuCreation
+	);
+
 	return (
 		<>
-			<MenuGroup>
+			<MenuGroup label={ __( 'Menus' ) }>
 				<MenuItemsChoice
 					value={ ref }
 					onSelect={ ( selectedId ) =>
@@ -46,19 +75,40 @@ export default function NavigationMenuSelector( {
 					} ) }
 				/>
 			</MenuGroup>
-			{ showCreate && (
-				<MenuGroup>
-					<MenuItem onClick={ onCreateNew }>
-						{ __( 'Create new menu' ) }
-					</MenuItem>
-					<MenuItem
-						href={ addQueryArgs( 'edit.php', {
-							post_type: 'wp_navigation',
-						} ) }
-					>
-						{ __( 'Manage menus' ) }
-					</MenuItem>
-				</MenuGroup>
+			{ canUserCreateNavigation && (
+				<>
+					{ hasClassicMenus && (
+						<MenuGroup label={ __( 'Classic Menus' ) }>
+							{ classicMenus.map( ( menu ) => {
+								return (
+									<MenuItem
+										onClick={ () => {
+											convertClassicMenuToBlocks(
+												menu.id,
+												menu.name
+											);
+										} }
+										key={ menu.id }
+									>
+										{ decodeEntities( menu.name ) }
+									</MenuItem>
+								);
+							} ) }
+						</MenuGroup>
+					) }
+					<MenuGroup label={ __( 'Tools' ) }>
+						<MenuItem onClick={ onCreateNew }>
+							{ __( 'Create new menu' ) }
+						</MenuItem>
+						<MenuItem
+							href={ addQueryArgs( 'edit.php', {
+								post_type: 'wp_navigation',
+							} ) }
+						>
+							{ __( 'Manage menus' ) }
+						</MenuItem>
+					</MenuGroup>
+				</>
 			) }
 		</>
 	);

package/src/navigation/edit/placeholder/index.js

@@ -9,7 +9,6 @@ import {
 	MenuGroup,
 	MenuItem,
 } from '@wordpress/components';
-import { useCallback, useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { navigation, Icon } from '@wordpress/icons';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -20,14 +19,13 @@ import { decodeEntities } from '@wordpress/html-entities';
 
 import useNavigationEntities from '../../use-navigation-entities';
 import PlaceholderPreview from './placeholder-preview';
-import menuItemsToBlocks from '../../menu-items-to-blocks';
 import useNavigationMenu from '../../use-navigation-menu';
 import useCreateNavigationMenu from '../use-create-navigation-menu';
+import useConvertClassicMenu from '../../use-convert-classic-menu';
 
 const ExistingMenusDropdown = ( {
 	canSwitchNavigationMenu,
 	navigationMenus,
-	setSelectedMenu,
 	onFinish,
 	menus,
 	onCreateFromMenu,
@@ -53,7 +51,6 @@ const ExistingMenusDropdown = ( {
 								return (
 									<MenuItem
 										onClick={ () => {
-											setSelectedMenu( menu.id );
 											onFinish( menu );
 										} }
 										onClose={ onClose }
@@ -72,8 +69,10 @@ const ExistingMenusDropdown = ( {
 								return (
 									<MenuItem
 										onClick={ () => {
-											setSelectedMenu( menu.id );
-											onCreateFromMenu( menu.name );
+											onCreateFromMenu(
+												menu.id,
+												menu.name
+											);
 										} }
 										onClose={ onClose }
 										key={ menu.id }
@@ -97,9 +96,6 @@ export default function NavigationPlaceholder( {
 	hasResolvedNavigationMenus,
 	canUserCreateNavigation = false,
 } ) {
-	const [ selectedMenu, setSelectedMenu ] = useState();
-	const [ isCreatingFromMenu, setIsCreatingFromMenu ] = useState( false );
-	const [ menuName, setMenuName ] = useState( '' );
 	const createNavigationMenu = useCreateNavigationMenu( clientId );
 
 	const onFinishMenuCreation = async (
@@ -117,39 +113,18 @@ export default function NavigationPlaceholder( {
 		onFinish( navigationMenu, blocks );
 	};
 
+	const convertClassicMenu = useConvertClassicMenu( onFinishMenuCreation );
+
 	const {
 		isResolvingPages,
 		menus,
 		isResolvingMenus,
-		menuItems,
-		hasResolvedMenuItems,
 		hasPages,
 		hasMenus,
-	} = useNavigationEntities( selectedMenu );
+	} = useNavigationEntities();
 
 	const isStillLoading = isResolvingPages || isResolvingMenus;
 
-	const createFromMenu = useCallback(
-		( name ) => {
-			const { innerBlocks: blocks } = menuItemsToBlocks( menuItems );
-			onFinishMenuCreation( blocks, name );
-		},
-		[ menuItems, menuItemsToBlocks, onFinish ]
-	);
-
-	const onCreateFromMenu = ( name ) => {
-		// If we have menu items, create the block right away.
-		if ( hasResolvedMenuItems ) {
-			createFromMenu( name );
-			return;
-		}
-
-		// Otherwise, create the block when resolution finishes.
-		setIsCreatingFromMenu( true );
-		// Store the name to use later.
-		setMenuName( name );
-	};
-
 	const onCreateEmptyMenu = () => {
 		onFinishMenuCreation( [] );
 	};
@@ -159,15 +134,6 @@ export default function NavigationPlaceholder( {
 		onFinishMenuCreation( block );
 	};
 
-	useEffect( () => {
-		// If the user selected a menu but we had to wait for menu items to
-		// finish resolving, then create the block once resolution finishes.
-		if ( isCreatingFromMenu && hasResolvedMenuItems ) {
-			createFromMenu( menuName );
-			setIsCreatingFromMenu( false );
-		}
-	}, [ isCreatingFromMenu, hasResolvedMenuItems, menuName ] );
-
 	const { navigationMenus } = useNavigationMenu();
 
 	return (
@@ -194,10 +160,9 @@ export default function NavigationPlaceholder( {
 											canSwitchNavigationMenu
 										}
 										navigationMenus={ navigationMenus }
-										setSelectedMenu={ setSelectedMenu }
 										onFinish={ onFinish }
 										menus={ menus }
-										onCreateFromMenu={ onCreateFromMenu }
+										onCreateFromMenu={ convertClassicMenu }
 										showClassicMenus={
 											canUserCreateNavigation
 										}

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

@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback, useState, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import useNavigationEntities from './use-navigation-entities';
+import menuItemsToBlocks from './menu-items-to-blocks';
+
+export default function useConvertClassicMenu( onFinish ) {
+	const [ selectedMenu, setSelectedMenu ] = useState();
+	const [
+		isAwaitingMenuItemResolution,
+		setIsAwaitingMenuItemResolution,
+	] = useState( false );
+	const [ menuName, setMenuName ] = useState( '' );
+
+	const { menuItems, hasResolvedMenuItems } = useNavigationEntities(
+		selectedMenu
+	);
+
+	const createFromMenu = useCallback(
+		( name ) => {
+			const { innerBlocks: blocks } = menuItemsToBlocks( menuItems );
+			onFinish( blocks, name );
+		},
+		[ menuItems, menuItemsToBlocks, onFinish ]
+	);
+
+	useEffect( () => {
+		// If the user selected a menu but we had to wait for menu items to
+		// finish resolving, then create the block once resolution finishes.
+		if ( isAwaitingMenuItemResolution && hasResolvedMenuItems ) {
+			createFromMenu( menuName );
+			setIsAwaitingMenuItemResolution( false );
+		}
+	}, [ isAwaitingMenuItemResolution, hasResolvedMenuItems, menuName ] );
+
+	return useCallback(
+		( id, name ) => {
+			setSelectedMenu( id );
+
+			// If we have menu items, create the block right away.
+			if ( hasResolvedMenuItems ) {
+				createFromMenu( name );
+				return;
+			}
+
+			// Otherwise, create the block when resolution finishes.
+			setIsAwaitingMenuItemResolution( true );
+			// Store the name to use later.
+			setMenuName( name );
+		},
+		[ hasResolvedMenuItems, createFromMenu ]
+	);
+}

package/src/page-list/edit.js

@@ -12,7 +12,12 @@ import {
 	useBlockProps,
 	getColorClassName,
 } from '@wordpress/block-editor';
-import { ToolbarButton, Placeholder, Spinner } from '@wordpress/components';
+import {
+	ToolbarButton,
+	Placeholder,
+	Spinner,
+	Notice,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useMemo, useState, memo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
@@ -29,7 +34,7 @@ import { ItemSubmenuIcon } from '../navigation-link/icons';
 const MAX_PAGE_COUNT = 100;
 
 export default function PageListEdit( { context, clientId } ) {
-	const { pagesByParentId, totalPages } = usePagesByParentId();
+	const { pagesByParentId, totalPages, hasResolvedPages } = usePageData();
 
 	const isNavigationChild = 'showSubmenuIcon' in context;
 	const allowConvertToLinks =
@@ -70,16 +75,29 @@ export default function PageListEdit( { context, clientId } ) {
 					clientId={ clientId }
 				/>
 			) }
-			{ totalPages === undefined && (
+			{ ! hasResolvedPages && (
 				<div { ...blockProps }>
 					<Placeholder>
 						<Spinner />
 					</Placeholder>
 				</div>
 			) }
+
+			{ hasResolvedPages && totalPages === null && (
+				<div { ...blockProps }>
+					<div { ...blockProps }>
+						<Notice status={ 'warning' } isDismissible={ false }>
+							{ __( 'Page List: Cannot retrieve Pages.' ) }
+						</Notice>
+					</div>
+				</div>
+			) }
+
 			{ totalPages === 0 && (
 				<div { ...blockProps }>
-					<span>{ __( 'Page List: No pages to show.' ) }</span>
+					<Notice status={ 'info' } isDismissible={ false }>
+						{ __( 'Page List: Cannot retrieve Pages.' ) }
+					</Notice>
 				</div>
 			) }
 			{ totalPages > 0 && (
@@ -94,9 +112,16 @@ export default function PageListEdit( { context, clientId } ) {
 	);
 }
 
-function usePagesByParentId() {
-	const { pages } = useSelect( ( select ) => {
-		const { getEntityRecords } = select( coreStore );
+function useFrontPageId() {
+	return useSelect( ( select ) => {
+		const site = select( coreStore ).getEntityRecord( 'root', 'site' );
+		return site?.show_on_front === 'page' && site?.page_on_front;
+	}, [] );
+}
+
+function usePageData() {
+	const { pages, hasResolvedPages } = useSelect( ( select ) => {
+		const { getEntityRecords, hasFinishedResolution } = select( coreStore );
 
 		return {
 			pages: getEntityRecords( 'postType', 'page', {
@@ -105,6 +130,16 @@ function usePagesByParentId() {
 				_fields: [ 'id', 'link', 'parent', 'title', 'menu_order' ],
 				per_page: -1,
 			} ),
+			hasResolvedPages: hasFinishedResolution( 'getEntityRecords', [
+				'postType',
+				'page',
+				{
+					orderby: 'menu_order',
+					order: 'asc',
+					_fields: [ 'id', 'link', 'parent', 'title', 'menu_order' ],
+					per_page: -1,
+				},
+			] ),
 		};
 	}, [] );
 
@@ -125,9 +160,10 @@ function usePagesByParentId() {
 
 		return {
 			pagesByParentId,
-			totalPages: pages?.length,
+			hasResolvedPages,
+			totalPages: pages?.length ?? null,
 		};
-	}, [ pages ] );
+	}, [ pages, hasResolvedPages ] );
 }
 
 const PageItems = memo( function PageItems( {
@@ -137,6 +173,7 @@ const PageItems = memo( function PageItems( {
 	depth = 0,
 } ) {
 	const pages = pagesByParentId.get( parentId );
+	const frontPageId = useFrontPageId();
 
 	if ( ! pages?.length ) {
 		return [];
@@ -155,6 +192,7 @@ const PageItems = memo( function PageItems( {
 					'open-on-hover-click':
 						! context.openSubmenusOnClick &&
 						context.showSubmenuIcon,
+					'menu-item-home': page.id === frontPageId,
 				} ) }
 			>
 				{ hasChildren && context.openSubmenusOnClick ? (

package/src/page-list/editor.scss

@@ -64,3 +64,7 @@
 		}
 	}
 }
+
+.wp-block-page-list .components-notice {
+	margin-left: 0;
+}

package/src/page-list/index.php

@@ -173,6 +173,11 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 			}
 		}
 
+		$front_page_id = (int) get_option( 'page_on_front' );
+		if ( (int) $page['page_id'] === $front_page_id ) {
+			$css_class .= ' menu-item-home';
+		}
+
 		$title      = wp_kses( $page['title'], wp_kses_allowed_html( 'post' ) );
 		$aria_label = sprintf(
 			/* translators: Accessibility text. %s: Parent page title. */