@wordpress/block-library 6.1.0 → 7.0.1

package/src/latest-posts/edit.js

@@ -7,7 +7,6 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { RawHTML } from '@wordpress/element';
 import {
 	BaseControl,
 	PanelBody,
@@ -55,6 +54,17 @@ const USERS_LIST_QUERY = {
 	context: 'view',
 };
 
+function getFeaturedImageDetails( post, size ) {
+	const image = get( post, [ '_embedded', 'wp:featuredmedia', '0' ] );
+
+	return {
+		url:
+			image?.media_details?.sizes?.[ size ]?.source_url ??
+			image?.source_url,
+		alt: image?.alt_text,
+	};
+}
+
 export default function LatestPostsEdit( { attributes, setAttributes } ) {
 	const {
 		postsToShow,
@@ -77,7 +87,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 		addLinkToFeaturedImage,
 	} = attributes;
 	const {
-		imageSizeOptions,
+		imageSizes,
 		latestPosts,
 		defaultImageWidth,
 		defaultImageHeight,
@@ -85,11 +95,8 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 		authorList,
 	} = useSelect(
 		( select ) => {
-			const { getEntityRecords, getMedia, getUsers } = select(
-				coreStore
-			);
-			const { getSettings } = select( blockEditorStore );
-			const { imageSizes, imageDimensions } = getSettings();
+			const { getEntityRecords, getUsers } = select( coreStore );
+			const settings = select( blockEditorStore ).getSettings();
 			const catIds =
 				categories && categories.length > 0
 					? categories.map( ( cat ) => cat.id )
@@ -101,59 +108,28 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 					order,
 					orderby: orderBy,
 					per_page: postsToShow,
+					_embed: 'wp:featuredmedia',
 				},
 				( value ) => ! isUndefined( value )
 			);
 
-			const posts = getEntityRecords(
-				'postType',
-				'post',
-				latestPostsQuery
-			);
-
 			return {
 				defaultImageWidth: get(
-					imageDimensions,
+					settings.imageDimensions,
 					[ featuredImageSizeSlug, 'width' ],
 					0
 				),
 				defaultImageHeight: get(
-					imageDimensions,
+					settings.imageDimensions,
 					[ featuredImageSizeSlug, 'height' ],
 					0
 				),
-				imageSizeOptions: imageSizes
-					.filter( ( { slug } ) => slug !== 'full' )
-					.map( ( { name, slug } ) => ( {
-						value: slug,
-						label: name,
-					} ) ),
-				latestPosts: ! Array.isArray( posts )
-					? posts
-					: posts.map( ( post ) => {
-							if ( ! post.featured_media ) return post;
-
-							const image = getMedia( post.featured_media );
-							let url = get(
-								image,
-								[
-									'media_details',
-									'sizes',
-									featuredImageSizeSlug,
-									'source_url',
-								],
-								null
-							);
-							if ( ! url ) {
-								url = get( image, 'source_url', null );
-							}
-							const featuredImageInfo = {
-								url,
-								// eslint-disable-next-line camelcase
-								alt: image?.alt_text,
-							};
-							return { ...post, featuredImageInfo };
-					  } ),
+				imageSizes: settings.imageSizes,
+				latestPosts: getEntityRecords(
+					'postType',
+					'post',
+					latestPostsQuery
+				),
 				categoriesList: getEntityRecords(
 					'taxonomy',
 					'category',
@@ -171,6 +147,13 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 			selectedAuthor,
 		]
 	);
+
+	const imageSizeOptions = imageSizes
+		.filter( ( { slug } ) => slug !== 'full' )
+		.map( ( { name, slug } ) => ( {
+			value: slug,
+			label: name,
+		} ) );
 	const categorySuggestions =
 		categoriesList?.reduce(
 			( accumulator, category ) => ( {
@@ -451,11 +434,9 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 						'';
 
 					const {
-						featuredImageInfo: {
-							url: imageSourceUrl,
-							alt: featuredImageAlt,
-						} = {},
-					} = post;
+						url: imageSourceUrl,
+						alt: featuredImageAlt,
+					} = getFeaturedImageDetails( post, featuredImageSizeSlug );
 					const imageClasses = classnames( {
 						'wp-block-latest-posts__featured-image': true,
 						[ `align${ featuredImageAlign }` ]: !! featuredImageAlign,
@@ -509,12 +490,18 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 									) }
 								</div>
 							) }
-							<a href={ post.link } rel="noreferrer noopener">
-								{ titleTrimmed ? (
-									<RawHTML>{ titleTrimmed }</RawHTML>
-								) : (
-									__( '(no title)' )
-								) }
+							<a
+								href={ post.link }
+								rel="noreferrer noopener"
+								dangerouslySetInnerHTML={
+									!! titleTrimmed
+										? {
+												__html: titleTrimmed,
+										  }
+										: undefined
+								}
+							>
+								{ ! titleTrimmed ? __( '(no title)' ) : null }
 							</a>
 							{ displayAuthor && currentAuthor && (
 								<div className="wp-block-latest-posts__post-author">
@@ -541,11 +528,12 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 								) }
 							{ displayPostContent &&
 								displayPostContentRadio === 'full_post' && (
-									<div className="wp-block-latest-posts__post-full-content">
-										<RawHTML key="html">
-											{ post.content.raw.trim() }
-										</RawHTML>
-									</div>
+									<div
+										className="wp-block-latest-posts__post-full-content"
+										dangerouslySetInnerHTML={ {
+											__html: post.content.raw.trim(),
+										} }
+									/>
 								) }
 						</li>
 					);

package/src/latest-posts/index.php

@@ -119,7 +119,7 @@ function render_block_core_latest_posts( $attributes ) {
 			if ( ! empty( $author_display_name ) ) {
 				$list_items_markup .= sprintf(
 					'<div class="wp-block-latest-posts__post-author">%1$s</div>',
-					esc_html( $byline )
+					$byline
 				);
 			}
 		}
@@ -128,7 +128,7 @@ function render_block_core_latest_posts( $attributes ) {
 			$list_items_markup .= sprintf(
 				'<time datetime="%1$s" class="wp-block-latest-posts__post-date">%2$s</time>',
 				esc_attr( get_the_date( 'c', $post ) ),
-				esc_html( get_the_date( '', $post ) )
+				get_the_date( '', $post )
 			);
 		}
 
@@ -143,7 +143,7 @@ function render_block_core_latest_posts( $attributes ) {
 
 			$list_items_markup .= sprintf(
 				'<div class="wp-block-latest-posts__post-excerpt">%1$s</div>',
-				esc_html( $trimmed_excerpt )
+				$trimmed_excerpt
 			);
 		}
 

package/src/list/block.json

@@ -52,7 +52,11 @@
 		},
 		"color": {
 			"gradients": true,
-			"link": true
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
 		},
 		"__unstablePasteTextInline": true,
 		"__experimentalSelector": "ol,ul",

package/src/media-text/block.json

@@ -92,7 +92,11 @@
 		"html": false,
 		"color": {
 			"gradients": true,
-			"link": true
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-media-text-editor",

package/src/missing/test/edit-integration.native.js

@@ -40,7 +40,7 @@ describe( 'Unsupported block', () => {
 		const initialHtml = `<!-- wp:table -->
 			 <figure class="wp-block-table"><table><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table></figure>
 			 <!-- /wp:table -->`;
-		const { getByA11yLabel } = initializeEditor( {
+		const { getByA11yLabel } = await initializeEditor( {
 			initialHtml,
 		} );
 
@@ -59,7 +59,7 @@ describe( 'Unsupported block', () => {
 		const initialHtml = `<!-- wp:table -->
 		 <figure class="wp-block-table"><table><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table></figure>
 		 <!-- /wp:table -->`;
-		const { getByA11yLabel, getByText } = initializeEditor( {
+		const { getByA11yLabel, getByText } = await initializeEditor( {
 			initialHtml,
 		} );
 

package/src/navigation/edit/existing-menus-options.js

@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuGroup, MenuItem } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
+
+const ExistingMenusOptions = ( {
+	showNavigationMenus,
+	showClassicMenus = false,
+	navigationMenus,
+	classicMenus,
+	onSelectNavigationMenu,
+	onSelectClassicMenu,
+	actionLabel,
+} ) => {
+	const hasNavigationMenus = !! navigationMenus?.length;
+	const hasClassicMenus = !! classicMenus?.length;
+
+	/* translators: %s: The name of a menu. */
+	const createActionLabel = __( "Create from '%s'" );
+
+	actionLabel = actionLabel || createActionLabel;
+
+	return (
+		<>
+			{ showNavigationMenus && hasNavigationMenus && (
+				<MenuGroup label={ __( 'Menus' ) }>
+					{ navigationMenus.map( ( menu ) => {
+						const label = decodeEntities( menu.title.rendered );
+						return (
+							<MenuItem
+								onClick={ () => {
+									onSelectNavigationMenu( menu );
+								} }
+								key={ menu.id }
+								aria-label={ sprintf( actionLabel, label ) }
+							>
+								{ label }
+							</MenuItem>
+						);
+					} ) }
+				</MenuGroup>
+			) }
+			{ showClassicMenus && hasClassicMenus && (
+				<MenuGroup label={ __( 'Classic Menus' ) }>
+					{ classicMenus.map( ( menu ) => {
+						const label = decodeEntities( menu.name );
+						return (
+							<MenuItem
+								onClick={ () => {
+									onSelectClassicMenu( menu );
+								} }
+								key={ menu.id }
+								aria-label={ sprintf(
+									createActionLabel,
+									label
+								) }
+							>
+								{ label }
+							</MenuItem>
+						);
+					} ) }
+				</MenuGroup>
+			) }
+		</>
+	);
+};
+
+export default ExistingMenusOptions;

package/src/navigation/edit/index.js

@@ -107,7 +107,6 @@ function Navigation( {
 	hasSubmenuIndicatorSetting = true,
 	hasColorSettings = true,
 	customPlaceholder: CustomPlaceholder = null,
-	customAppender: CustomAppender = null,
 } ) {
 	const {
 		openSubmenusOnClick,
@@ -125,7 +124,7 @@ function Navigation( {
 		setAreaMenu = noop;
 	// Navigation areas are deprecated and on their way out. Let's not perform
 	// the request unless we're in an environment where the endpoint exists.
-	if ( process.env.GUTENBERG_PHASE === 2 ) {
+	if ( process.env.IS_GUTENBERG_PLUGIN ) {
 		// eslint-disable-next-line react-hooks/rules-of-hooks
 		[ areaMenu, setAreaMenu ] = useEntityProp(
 			'root',
@@ -500,6 +499,9 @@ function Navigation( {
 										canUserCreateNavigation={
 											canUserCreateNavigation
 										}
+										canUserSwitchNavigation={
+											canSwitchNavigationMenu
+										}
 									/>
 								) }
 							</ToolbarDropdownMenu>
@@ -696,7 +698,6 @@ function Navigation( {
 								<NavigationInnerBlocks
 									isVisible={ ! isPlaceholderShown }
 									clientId={ clientId }
-									appender={ CustomAppender }
 									hasCustomPlaceholder={
 										!! CustomPlaceholder
 									}

package/src/navigation/edit/inner-blocks.js

@@ -4,6 +4,7 @@
 import { useEntityBlockEditor } from '@wordpress/core-data';
 import {
 	useInnerBlocksProps,
+	InnerBlocks,
 	__experimentalBlockContentOverlay as BlockContentOverlay,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
@@ -39,7 +40,6 @@ const LAYOUT = {
 export default function NavigationInnerBlocks( {
 	isVisible,
 	clientId,
-	appender: CustomAppender,
 	hasCustomPlaceholder,
 	orientation,
 } ) {
@@ -95,7 +95,6 @@ export default function NavigationInnerBlocks( {
 	const parentOrChildHasSelection =
 		isSelected ||
 		( isImmediateParentOfSelectedBlock && ! selectedBlockHasDescendants );
-	const appender = isVisible && parentOrChildHasSelection ? undefined : false;
 
 	const placeholder = useMemo( () => <PlaceholderPreview />, [] );
 
@@ -111,7 +110,21 @@ export default function NavigationInnerBlocks( {
 			__experimentalDefaultBlock: DEFAULT_BLOCK,
 			__experimentalDirectInsert: shouldDirectInsert,
 			orientation,
-			renderAppender: CustomAppender || appender,
+
+			// As an exception to other blocks which feature nesting, show
+			// the block appender even when a child block is selected.
+			// This should be a temporary fix, to be replaced by improvements to
+			// the sibling inserter.
+			// See https://github.com/WordPress/gutenberg/issues/37572.
+			renderAppender:
+				isSelected ||
+				( isImmediateParentOfSelectedBlock &&
+					! selectedBlockHasDescendants ) ||
+				// Show the appender while dragging to allow inserting element between item and the appender.
+				parentOrChildHasSelection
+					? InnerBlocks.ButtonBlockAppender
+					: false,
+
 			// Template lock set to false here so that the Nav
 			// Block on the experimental menus screen does not
 			// inherit templateLock={ 'all' }.

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

@@ -1,10 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { MenuGroup, MenuItem, MenuItemsChoice } from '@wordpress/components';
-import { useEntityId } from '@wordpress/core-data';
-import { __, sprintf } from '@wordpress/i18n';
-import { decodeEntities } from '@wordpress/html-entities';
+import { MenuGroup, MenuItem } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
 import { addQueryArgs } from '@wordpress/url';
 
 /**
@@ -14,19 +13,20 @@ 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';
+import ExistingMenusOptions from './existing-menus-options';
 
 export default function NavigationMenuSelector( {
 	clientId,
 	onSelect,
 	onCreateNew,
 	canUserCreateNavigation = false,
+	canUserSwitchNavigation = false,
 } ) {
 	const {
 		menus: classicMenus,
 		hasMenus: hasClassicMenus,
 	} = useNavigationEntities();
 	const { navigationMenus } = useNavigationMenu();
-	const ref = useEntityId( 'postType', 'wp_navigation' );
 
 	const createNavigationMenu = useCreateNavigationMenu( clientId );
 
@@ -49,66 +49,42 @@ export default function NavigationMenuSelector( {
 		onFinishMenuCreation
 	);
 
+	const showSelectMenus =
+		( canUserSwitchNavigation || canUserCreateNavigation ) &&
+		( navigationMenus?.length || hasClassicMenus );
+
+	if ( ! showSelectMenus ) {
+		return null;
+	}
+
 	return (
 		<>
-			<MenuGroup label={ __( 'Menus' ) }>
-				<MenuItemsChoice
-					value={ ref }
-					onSelect={ ( selectedId ) =>
-						onSelect(
-							navigationMenus.find(
-								( post ) => post.id === selectedId
-							)
-						)
-					}
-					choices={ navigationMenus.map( ( { id, title } ) => {
-						const label = decodeEntities( title.rendered );
-						return {
-							value: id,
-							label,
-							'aria-label': sprintf(
-								/* translators: %s: The name of a menu. */
-								__( "Switch to '%s'" ),
-								label
-							),
-						};
-					} ) }
-				/>
-			</MenuGroup>
+			<ExistingMenusOptions
+				showNavigationMenus={ canUserSwitchNavigation }
+				showClassicMenus={ canUserCreateNavigation }
+				navigationMenus={ navigationMenus }
+				classicMenus={ classicMenus }
+				onSelectNavigationMenu={ onSelect }
+				onSelectClassicMenu={ ( { id, name } ) =>
+					convertClassicMenuToBlocks( id, name )
+				}
+				/* translators: %s: The name of a menu. */
+				actionLabel={ __( "Switch to '%s'" ) }
+			/>
+
 			{ 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>
-				</>
+				<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/overlay-menu-icon.js

@@ -10,7 +10,6 @@ export default function OverlayMenuIcon() {
 			viewBox="0 0 24 24"
 			width="24"
 			height="24"
-			role="img"
 			aria-hidden="true"
 			focusable="false"
 		>