@wordpress/block-library 7.9.0 → 7.10.0

package/src/cover/edit/block-controls.js

@@ -14,22 +14,17 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { ALLOWED_MEDIA_TYPES, IMAGE_BACKGROUND_TYPE } from '../shared';
+import { ALLOWED_MEDIA_TYPES } from '../shared';
 
 export default function CoverBlockControls( {
 	attributes,
 	setAttributes,
 	onSelectMedia,
 	currentSettings,
+	toggleUseFeaturedImage,
 } ) {
-	const {
-		contentPosition,
-		id,
-		useFeaturedImage,
-		dimRatio,
-		minHeight,
-		minHeightUnit,
-	} = attributes;
+	const { contentPosition, id, useFeaturedImage, minHeight, minHeightUnit } =
+		attributes;
 	const { hasInnerBlocks, url } = currentSettings;
 
 	const [ prevMinHeightValue, setPrevMinHeightValue ] = useState( minHeight );
@@ -63,17 +58,6 @@ export default function CoverBlockControls( {
 		} );
 	};
 
-	const toggleUseFeaturedImage = () => {
-		setAttributes( {
-			id: undefined,
-			url: undefined,
-			useFeaturedImage: ! useFeaturedImage,
-			dimRatio: dimRatio === 100 ? 50 : dimRatio,
-			backgroundType: useFeaturedImage
-				? IMAGE_BACKGROUND_TYPE
-				: undefined,
-		} );
-	};
 	return (
 		<>
 			<BlockControls group="block">

package/src/cover/edit/cover-placeholder.js

@@ -16,6 +16,7 @@ export default function CoverPlaceholder( {
 	onSelectMedia,
 	onError,
 	style,
+	toggleUseFeaturedImage,
 } ) {
 	return (
 		<MediaPlaceholder
@@ -30,6 +31,7 @@ export default function CoverPlaceholder( {
 			accept="image/*,video/*"
 			allowedTypes={ ALLOWED_MEDIA_TYPES }
 			disableMediaButtons={ disableMediaButtons }
+			onToggleFeaturedImage={ toggleUseFeaturedImage }
 			onError={ onError }
 			style={ style }
 		>

package/src/cover/edit/index.js

@@ -211,12 +211,25 @@ function CoverEdit( {
 		overlayColor,
 	};
 
+	const toggleUseFeaturedImage = () => {
+		setAttributes( {
+			id: undefined,
+			url: undefined,
+			useFeaturedImage: ! useFeaturedImage,
+			dimRatio: dimRatio === 100 ? 50 : dimRatio,
+			backgroundType: useFeaturedImage
+				? IMAGE_BACKGROUND_TYPE
+				: undefined,
+		} );
+	};
+
 	const blockControls = (
 		<CoverBlockControls
 			attributes={ attributes }
 			setAttributes={ setAttributes }
 			onSelectMedia={ onSelectMedia }
 			currentSettings={ currentSettings }
+			toggleUseFeaturedImage={ toggleUseFeaturedImage }
 		/>
 	);
 
@@ -228,6 +241,7 @@ function CoverEdit( {
 			setOverlayColor={ setOverlayColor }
 			coverRef={ ref }
 			currentSettings={ currentSettings }
+			toggleUseFeaturedImage={ toggleUseFeaturedImage }
 		/>
 	);
 
@@ -249,6 +263,7 @@ function CoverEdit( {
 						style={ {
 							minHeight: minHeightWithUnit || undefined,
 						} }
+						toggleUseFeaturedImage={ toggleUseFeaturedImage }
 					>
 						<div className="wp-block-cover__placeholder-background-options">
 							<ColorPalette
@@ -384,6 +399,7 @@ function CoverEdit( {
 					disableMediaButtons
 					onSelectMedia={ onSelectMedia }
 					onError={ onUploadError }
+					toggleUseFeaturedImage={ toggleUseFeaturedImage }
 				/>
 				<div { ...innerBlocksProps } />
 			</div>

package/src/elements.scss

@@ -0,0 +1,6 @@
+/**
+ * Element styles.
+ */
+.wp-element-button {
+	cursor: pointer;
+}

package/src/gallery/edit.js

@@ -51,7 +51,6 @@ import {
 	LINK_DESTINATION_NONE,
 } from './constants';
 import useImageSizes from './use-image-sizes';
-import useShortCodeTransform from './use-short-code-transform';
 import useGetNewImages from './use-get-new-images';
 import useGetMedia from './use-get-media';
 import GapStyles from './gap-styles';
@@ -87,14 +86,7 @@ function GalleryEdit( props ) {
 		insertBlocksAfter,
 	} = props;
 
-	const {
-		columns,
-		imageCrop,
-		linkTarget,
-		linkTo,
-		shortCodeTransforms,
-		sizeSlug,
-	} = attributes;
+	const { columns, imageCrop, linkTarget, linkTo, sizeSlug } = attributes;
 
 	const {
 		__unstableMarkNextChangeAsNotPersistent,
@@ -151,6 +143,8 @@ function GalleryEdit( props ) {
 
 	useEffect( () => {
 		newImages?.forEach( ( newImage ) => {
+			// Update the images data without creating new undo levels.
+			__unstableMarkNextChangeAsNotPersistent();
 			updateBlockAttributes( newImage.clientId, {
 				...buildImageAttributes( newImage.attributes ),
 				id: newImage.id,
@@ -162,16 +156,6 @@ function GalleryEdit( props ) {
 		}
 	}, [ newImages ] );
 
-	const shortCodeImages = useShortCodeTransform( shortCodeTransforms );
-
-	useEffect( () => {
-		if ( ! shortCodeTransforms || ! shortCodeImages ) {
-			return;
-		}
-		updateImages( shortCodeImages );
-		setAttributes( { shortCodeTransforms: undefined } );
-	}, [ shortCodeTransforms, shortCodeImages ] );
-
 	const imageSizeOptions = useImageSizes(
 		imageData,
 		isSelected,
@@ -208,8 +192,9 @@ function GalleryEdit( props ) {
 			...getHrefAndDestination( image, linkTo ),
 			...getUpdatedLinkTargetSettings( linkTarget, attributes ),
 			className: newClassName,
-			caption: imageAttributes.caption,
 			sizeSlug,
+			caption: imageAttributes.caption || image.caption?.raw,
+			alt: imageAttributes.alt || image.alt_text,
 		};
 	}
 
@@ -547,7 +532,9 @@ function GalleryEdit( props ) {
 					onSelect={ updateImages }
 					name={ __( 'Add' ) }
 					multiple={ true }
-					mediaIds={ images.map( ( image ) => image.id ) }
+					mediaIds={ images
+						.filter( ( image ) => image.id )
+						.map( ( image ) => image.id ) }
 					addToGallery={ hasImageIds }
 				/>
 			</BlockControls>

package/src/gallery/index.php

@@ -81,7 +81,7 @@ function block_core_gallery_render( $attributes, $content ) {
 	}
 
 	// Set the CSS variable to the column value, and the `gap` property to the combined gap value.
-	$style = '.' . $class . '{ --wp--style--unstable-gallery-gap: ' . $gap_column . '; gap: ' . $gap_value . '}';
+	$style = '.wp-block-gallery.' . $class . '{ --wp--style--unstable-gallery-gap: ' . $gap_column . '; gap: ' . $gap_value . '}';
 
 	gutenberg_enqueue_block_support_styles( $style, 11 );
 	return $content;

package/src/gallery/transforms.js

@@ -195,16 +195,6 @@ const transforms = {
 						}
 					},
 				},
-				shortCodeTransforms: {
-					type: 'array',
-					shortcode: ( { named: { ids } } ) => {
-						if ( isGalleryV2Enabled() ) {
-							return parseShortcodeIds( ids ).map( ( id ) => ( {
-								id: parseInt( id ),
-							} ) );
-						}
-					},
-				},
 				columns: {
 					type: 'number',
 					shortcode: ( { named: { columns = '3' } } ) => {
@@ -235,6 +225,31 @@ const transforms = {
 					},
 				},
 			},
+			transform( { named: { ids, columns = 3, link } } ) {
+				const imageIds = parseShortcodeIds( ids ).map( ( id ) =>
+					parseInt( id, 10 )
+				);
+
+				let linkTo = LINK_DESTINATION_NONE;
+				if ( link === 'post' ) {
+					linkTo = LINK_DESTINATION_ATTACHMENT;
+				} else if ( link === 'file' ) {
+					linkTo = LINK_DESTINATION_MEDIA;
+				}
+
+				const galleryBlock = createBlock(
+					'core/gallery',
+					{
+						columns: parseInt( columns, 10 ),
+						linkTo,
+					},
+					imageIds.map( ( imageId ) =>
+						createBlock( 'core/image', { id: imageId } )
+					)
+				);
+
+				return galleryBlock;
+			},
 			isMatch( { named } ) {
 				return undefined !== named.ids;
 			},

package/src/gallery/use-get-media.js

@@ -1,10 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
+const EMPTY_IMAGE_MEDIA = [];
+
 /**
  * Retrieves the extended media info for each gallery image from the store. This is used to
  * determine which image size options are available for the current gallery.
@@ -14,42 +15,24 @@ import { store as coreStore } from '@wordpress/core-data';
  * @return {Array} An array of media info options for each gallery image.
  */
 export default function useGetMedia( innerBlockImages ) {
-	const [ currentImageMedia, setCurrentImageMedia ] = useState( [] );
-
-	const imageMedia = useSelect(
+	return useSelect(
 		( select ) => {
-			if ( ! innerBlockImages?.length ) {
-				return currentImageMedia;
-			}
-
 			const imageIds = innerBlockImages
 				.map( ( imageBlock ) => imageBlock.attributes.id )
 				.filter( ( id ) => id !== undefined );
 
 			if ( imageIds.length === 0 ) {
-				return currentImageMedia;
+				return EMPTY_IMAGE_MEDIA;
 			}
 
-			return select( coreStore ).getMediaItems( {
-				include: imageIds.join( ',' ),
-				per_page: imageIds.length,
-				orderby: 'include',
-			} );
+			return (
+				select( coreStore ).getMediaItems( {
+					include: imageIds.join( ',' ),
+					per_page: imageIds.length,
+					orderby: 'include',
+				} ) ?? EMPTY_IMAGE_MEDIA
+			);
 		},
 		[ innerBlockImages ]
 	);
-
-	if (
-		imageMedia?.length !== currentImageMedia?.length ||
-		imageMedia?.some(
-			( newImage ) =>
-				! currentImageMedia.find(
-					( currentImage ) => currentImage.id === newImage.id
-				)
-		)
-	) {
-		setCurrentImageMedia( imageMedia );
-		return imageMedia;
-	}
-	return currentImageMedia;
 }

package/src/group/edit.js

@@ -52,9 +52,7 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 	const { type = 'default' } = usedLayout;
 	const layoutSupportEnabled = themeSupportsLayout || type !== 'default';
 
-	const blockProps = useBlockProps( {
-		className: `is-layout-${ type }`,
-	} );
+	const blockProps = useBlockProps();
 
 	const innerBlocksProps = useInnerBlocksProps(
 		layoutSupportEnabled

package/src/heading/heading-level-dropdown.js

@@ -60,6 +60,7 @@ export default function HeadingLevelDropdown( { selectedLevel, onChange } ) {
 						onClick() {
 							onChange( targetLevel );
 						},
+						role: 'menuitemradio',
 					};
 				}
 			} ) }

package/src/heading/index.js

@@ -31,9 +31,15 @@ export const settings = {
 		},
 	},
 	__experimentalLabel( attributes, { context } ) {
-		if ( context === 'accessibility' ) {
-			const { content, level } = attributes;
+		const { content, level } = attributes;
+
+		// In the list view, use the block's content as the label.
+		// If the content is empty, fall back to the default label.
+		if ( context === 'list-view' && content ) {
+			return content;
+		}
 
+		if ( context === 'accessibility' ) {
 			return isEmpty( content )
 				? sprintf(
 						/* translators: accessibility text. %s: heading level. */

package/src/latest-posts/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, includes, invoke, pickBy } from 'lodash';
+import { get, includes, pickBy } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -432,11 +432,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 			</BlockControls>
 			<ul { ...blockProps }>
 				{ displayPosts.map( ( post, i ) => {
-					const titleTrimmed = invoke( post, [
-						'title',
-						'rendered',
-						'trim',
-					] );
+					const titleTrimmed = post.title.rendered.trim();
 					let excerpt = post.excerpt.rendered;
 					const currentAuthor = authorList?.find(
 						( author ) => author.id === post.author

package/src/more/edit.js

@@ -53,17 +53,15 @@ export default function MoreEdit( {
 				</PanelBody>
 			</InspectorControls>
 			<div { ...useBlockProps() }>
-				<div className="wp-block-more">
-					<input
-						aria-label={ __( 'Read more link text' ) }
-						type="text"
-						value={ customText }
-						placeholder={ DEFAULT_TEXT }
-						onChange={ onChangeInput }
-						onKeyDown={ onKeyDown }
-						style={ style }
-					/>
-				</div>
+				<input
+					aria-label={ __( 'Read more link text' ) }
+					type="text"
+					value={ customText }
+					placeholder={ DEFAULT_TEXT }
+					onChange={ onChangeInput }
+					onKeyDown={ onKeyDown }
+					style={ style }
+				/>
 			</div>
 		</>
 	);

package/src/navigation/style.scss

@@ -105,7 +105,7 @@ $navigation-icon-size: 24px;
 			width: inherit;
 			height: inherit;
 
-			// Position the arrow to balance with the the text.
+			// Position the arrow to balance with the text.
 			margin-top: 0.075em;
 		}
 	}

package/src/navigation/view.js

@@ -4,8 +4,6 @@ function closeSubmenus( element ) {
 		.querySelectorAll( '[aria-expanded="true"]' )
 		.forEach( function ( toggle ) {
 			toggle.setAttribute( 'aria-expanded', 'false' );
-			// Always focus the trigger, this becomes especially useful in closing submenus with escape key to ensure focus doesn't get trapped.
-			toggle.focus();
 		} );
 }
 
@@ -63,11 +61,13 @@ window.addEventListener( 'load', () => {
 			'.wp-block-navigation-item.has-child'
 		);
 		submenuBlocks.forEach( function ( block ) {
-			if (
-				! block.contains( event.target ) ||
-				( block.contains( event.target ) && event.key === 'Escape' )
-			) {
+			if ( ! block.contains( event.target ) ) {
+				closeSubmenus( block );
+			} else if ( event.key === 'Escape' ) {
+				const toggle = block.querySelector( '[aria-expanded="true"]' );
 				closeSubmenus( block );
+				// Focus the submenu trigger so focus does not get trapped in the closed submenu.
+				toggle?.focus();
 			}
 		} );
 	} );

package/src/navigation-link/hooks.js

@@ -9,11 +9,6 @@ import {
 	customPostType,
 } from '@wordpress/icons';
 
-/**
- * Internal dependencies
- */
-import fallbackVariations from './fallback-variations';
-
 function getIcon( variationName ) {
 	switch ( variationName ) {
 		case 'post':
@@ -34,15 +29,6 @@ export function enhanceNavigationLinkVariations( settings, name ) {
 		return settings;
 	}
 
-	// Fallback handling may be deleted after supported WP ranges understand the `variations`
-	// property when passed to register_block_type in index.php.
-	if ( ! settings.variations ) {
-		return {
-			...settings,
-			variations: fallbackVariations,
-		};
-	}
-
 	// Otherwise decorate server passed variations with an icon and isActive function.
 	if ( settings.variations ) {
 		const isActive = ( blockAttributes, variationAttributes ) => {

package/src/navigation-link/index.js

@@ -88,7 +88,7 @@ export const settings = {
 	transforms,
 };
 
-// importing this file includes side effects. This is whitelisted in block-library/package.json under sideEffects
+// importing this file includes side effects. This is added in block-library/package.json under sideEffects
 addFilter(
 	'blocks.registerBlockType',
 	'core/navigation-link',

package/src/navigation-link/test/__snapshots__/hooks.js.snap

@@ -1,98 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`hooks enhanceNavigationLinkVariations adds fallback variations when variations are missing 1`] = `
-Object {
-  "name": "core/navigation-link",
-  "one": "one",
-  "three": "three",
-  "two": "two",
-  "variations": Array [
-    Object {
-      "attributes": Object {},
-      "description": "A link to a custom URL.",
-      "isActive": [Function],
-      "isDefault": true,
-      "name": "link",
-      "title": "Custom Link",
-    },
-    Object {
-      "attributes": Object {
-        "kind": "post-type",
-        "type": "post",
-      },
-      "description": "A link to a post.",
-      "icon": <SVG
-        viewBox="0 0 24 24"
-        xmlns="https://www.w3.org/2000/svg"
-      >
-        <Path
-          d="M4 20h16v-1.5H4V20zm0-4.8h16v-1.5H4v1.5zm0-6.4v1.5h16V8.8H4zM16 4H4v1.5h12V4z"
-        />
-      </SVG>,
-      "isActive": [Function],
-      "name": "post",
-      "title": "Post Link",
-    },
-    Object {
-      "attributes": Object {
-        "kind": "post-type",
-        "type": "page",
-      },
-      "description": "A link to a page.",
-      "icon": <SVG
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <Path
-          d="M7 5.5h10a.5.5 0 01.5.5v12a.5.5 0 01-.5.5H7a.5.5 0 01-.5-.5V6a.5.5 0 01.5-.5zM17 4H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V6a2 2 0 00-2-2zm-1 3.75H8v1.5h8v-1.5zM8 11h8v1.5H8V11zm6 3.25H8v1.5h6v-1.5z"
-        />
-      </SVG>,
-      "isActive": [Function],
-      "name": "page",
-      "title": "Page Link",
-    },
-    Object {
-      "attributes": Object {
-        "kind": "taxonomy",
-        "type": "category",
-      },
-      "description": "A link to a category.",
-      "icon": <SVG
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <Path
-          clipRule="evenodd"
-          d="M6 5.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5H6a.5.5 0 01-.5-.5V6a.5.5 0 01.5-.5zM4 6a2 2 0 012-2h3a2 2 0 012 2v3a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm11-.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5h-3a.5.5 0 01-.5-.5V6a.5.5 0 01.5-.5zM13 6a2 2 0 012-2h3a2 2 0 012 2v3a2 2 0 01-2 2h-3a2 2 0 01-2-2V6zm5 8.5h-3a.5.5 0 00-.5.5v3a.5.5 0 00.5.5h3a.5.5 0 00.5-.5v-3a.5.5 0 00-.5-.5zM15 13a2 2 0 00-2 2v3a2 2 0 002 2h3a2 2 0 002-2v-3a2 2 0 00-2-2h-3zm-9 1.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5H6a.5.5 0 01-.5-.5v-3a.5.5 0 01.5-.5zM4 15a2 2 0 012-2h3a2 2 0 012 2v3a2 2 0 01-2 2H6a2 2 0 01-2-2v-3z"
-          fillRule="evenodd"
-        />
-      </SVG>,
-      "isActive": [Function],
-      "name": "category",
-      "title": "Category Link",
-    },
-    Object {
-      "attributes": Object {
-        "kind": "taxonomy",
-        "type": "tag",
-      },
-      "description": "A link to a tag.",
-      "icon": <SVG
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <Path
-          d="M20.1 11.2l-6.7-6.7c-.1-.1-.3-.2-.5-.2H5c-.4-.1-.8.3-.8.7v7.8c0 .2.1.4.2.5l6.7 6.7c.2.2.5.4.7.5s.6.2.9.2c.3 0 .6-.1.9-.2.3-.1.5-.3.8-.5l5.6-5.6c.4-.4.7-1 .7-1.6.1-.6-.2-1.2-.6-1.6zM19 13.4L13.4 19c-.1.1-.2.1-.3.2-.2.1-.4.1-.6 0-.1 0-.2-.1-.3-.2l-6.5-6.5V5.8h6.8l6.5 6.5c.2.2.2.4.2.6 0 .1 0 .3-.2.5zM9 8c-.6 0-1 .4-1 1s.4 1 1 1 1-.4 1-1-.4-1-1-1z"
-        />
-      </SVG>,
-      "isActive": [Function],
-      "name": "tag",
-      "title": "Tag Link",
-    },
-  ],
-}
-`;
-
 exports[`hooks enhanceNavigationLinkVariations enhances variations with icon and isActive functions 1`] = `
 Object {
   "extraProp": "extraProp",

package/src/navigation-link/test/hooks.js

@@ -26,18 +26,6 @@ describe( 'hooks', () => {
 				three: 'three',
 			} );
 		} );
-		it( 'adds fallback variations when variations are missing', () => {
-			const updatedSettings = enhanceNavigationLinkVariations(
-				{
-					name: 'core/navigation-link',
-					one: 'one',
-					two: 'two',
-					three: 'three',
-				},
-				'core/navigation-link'
-			);
-			expect( updatedSettings ).toMatchSnapshot();
-		} );
 		it( 'enhances variations with icon and isActive functions', () => {
 			const updatedSettings = enhanceNavigationLinkVariations(
 				{

package/src/navigation-submenu/view.js

@@ -3,8 +3,6 @@ const closeSubmenus = ( element ) => {
 		.querySelectorAll( '[aria-expanded="true"]' )
 		.forEach( ( toggle ) => {
 			toggle.setAttribute( 'aria-expanded', 'false' );
-			// Always focus the trigger, this becomes especially useful in closing submenus with escape key to ensure focus doesn't get trapped.
-			toggle.focus();
 		} );
 };
 
@@ -57,11 +55,13 @@ document.addEventListener( 'keyup', function ( event ) {
 		'.wp-block-navigation-submenu'
 	);
 	submenuBlocks.forEach( ( block ) => {
-		if (
-			! block.contains( event.target ) ||
-			( block.contains( event.target ) && event.key === 'Escape' )
-		) {
+		if ( ! block.contains( event.target ) ) {
+			closeSubmenus( block );
+		} else if ( event.key === 'Escape' ) {
+			const toggle = block.querySelector( '[aria-expanded="true"]' );
 			closeSubmenus( block );
+			// Focus the submenu trigger so focus does not get trapped in the closed submenu.
+			toggle?.focus();
 		}
 	} );
 } );

package/src/nextpage/edit.js

@@ -7,9 +7,7 @@ import { useBlockProps } from '@wordpress/block-editor';
 export default function NextPageEdit() {
 	return (
 		<div { ...useBlockProps() }>
-			<div className="wp-block-nextpage">
-				<span>{ __( 'Page break' ) }</span>
-			</div>
+			<span>{ __( 'Page break' ) }</span>
 		</div>
 	);
 }

package/src/page-list/edit.js

@@ -76,11 +76,9 @@ export default function PageListEdit( { context, clientId } ) {
 
 			{ hasResolvedPages && totalPages === null && (
 				<div { ...blockProps }>
-					<div { ...blockProps }>
-						<Notice status={ 'warning' } isDismissible={ false }>
-							{ __( 'Page List: Cannot retrieve Pages.' ) }
-						</Notice>
-					</div>
+					<Notice status={ 'warning' } isDismissible={ false }>
+						{ __( 'Page List: Cannot retrieve Pages.' ) }
+					</Notice>
 				</div>
 			) }