@wordpress/block-library 7.9.0 → 7.12.0

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,
 		};
 	}
 
@@ -429,8 +414,10 @@ function GalleryEdit( props ) {
 
 	const hasImages = !! images.length;
 	const hasImageIds = hasImages && images.some( ( image ) => !! image.id );
-	const imagesUploading = images.some(
-		( img ) => ! img.id && img.url?.indexOf( 'blob:' ) === 0
+	const imagesUploading = images.some( ( img ) =>
+		! Platform.isNative
+			? ! img.id && img.url?.indexOf( 'blob:' ) === 0
+			: img.url?.indexOf( 'file:' ) === 0
 	);
 
 	// MediaPlaceholder props are different between web and native hence, we provide a platform-specific set.
@@ -547,7 +534,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/style.scss

@@ -22,6 +22,10 @@ figure.wp-block-gallery.has-nested-images {
 		position: relative;
 		flex-direction: column;
 		max-width: 100%;
+		// Prevents theme.json and global styles borders that apply to the outer
+		// wrapper from incorrectly enlarging gallery images to a point they
+		// result in a single column gallery.
+		box-sizing: border-box;
 
 		> div,
 		> a {
@@ -63,7 +67,12 @@ figure.wp-block-gallery.has-nested-images {
 			}
 		}
 
-		&.is-style-rounded {
+		&.has-custom-border img {
+			box-sizing: border-box;
+		}
+
+		&.is-style-rounded,
+		&.has-custom-border {
 			> div,
 			> a {
 				flex: 1 1 auto;

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/gallery/use-get-media.native.js

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+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.
+ *
+ * @param {Array} innerBlockImages An array of the innerBlock images currently in the gallery.
+ *
+ * @return {Array} An array of media info options for each gallery image.
+ */
+export default function useGetMedia( innerBlockImages ) {
+	return useSelect(
+		( select ) => {
+			const imagesUploading = innerBlockImages.some(
+				( { attributes } ) => attributes?.url?.indexOf( 'file:' ) === 0
+			);
+			const imageIds = innerBlockImages
+				.filter( ( { attributes } ) => {
+					const { id, url } = attributes;
+					return id !== undefined && url?.indexOf( 'file:' ) !== 0;
+				} )
+				.map( ( imageBlock ) => imageBlock.attributes.id );
+
+			if ( imageIds.length === 0 || imagesUploading ) {
+				return EMPTY_IMAGE_MEDIA;
+			}
+
+			return (
+				select( coreStore ).getMediaItems( {
+					include: imageIds.join( ',' ),
+					per_page: imageIds.length,
+					orderby: 'include',
+				} ) ?? EMPTY_IMAGE_MEDIA
+			);
+		},
+		[ innerBlockImages ]
+	);
+}

package/src/group/block.json

@@ -18,6 +18,7 @@
 		}
 	},
 	"supports": {
+		"__experimentalOnEnter": true,
 		"__experimentalSettings": true,
 		"align": [ "wide", "full" ],
 		"anchor": true,

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/group/transforms.js

@@ -47,6 +47,13 @@ const transforms = {
 			},
 		},
 	],
+	to: [
+		{
+			type: 'block',
+			blocks: [ '*' ],
+			transform: ( attributes, innerBlocks ) => innerBlocks,
+		},
+	],
 };
 
 export default transforms;

package/src/group/variations.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { group, row, stack } from '@wordpress/icons';
 
 const variations = [
@@ -19,7 +19,7 @@ const variations = [
 	},
 	{
 		name: 'group-row',
-		title: __( 'Row' ),
+		title: _x( 'Row', 'single horizontal line' ),
 		description: __( 'Arrange blocks horizontally.' ),
 		attributes: { layout: { type: 'flex', flexWrap: 'nowrap' } },
 		scope: [ 'inserter', 'transform' ],

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/home-link/index.php

@@ -89,7 +89,7 @@ function block_core_home_link_build_css_font_sizes( $context ) {
  * Builds an array with classes and style for the li wrapper
  *
  * @param  array $context    Home link block context.
- * @return array The li wrapper attributes.
+ * @return string The li wrapper attributes.
  */
 function block_core_home_link_build_li_wrapper_attributes( $context ) {
 	$colors          = block_core_home_link_build_css_colors( $context );
@@ -125,24 +125,15 @@ function render_block_core_home_link( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$wrapper_attributes = block_core_home_link_build_li_wrapper_attributes( $block->context );
-
 	$aria_current = is_home() || ( is_front_page() && 'page' === get_option( 'show_on_front' ) ) ? ' aria-current="page"' : '';
 
-	$html = '<li ' . $wrapper_attributes . '><a class="wp-block-home-link__content wp-block-navigation-item__content" rel="home"' . $aria_current;
-
-	// Start appending HTML attributes to anchor tag.
-	$html .= ' href="' . esc_url( home_url() ) . '"';
-
-	// End appending HTML attributes to anchor tag.
-	$html .= '>';
-
-	if ( isset( $attributes['label'] ) ) {
-		$html .= wp_kses_post( $attributes['label'] );
-	}
-
-	$html .= '</a></li>';
-	return $html;
+	return sprintf(
+		'<li %1$s><a class="wp-block-home-link__content wp-block-navigation-item__content" href="%2$s" "rel="home"%3$s>%4$s</a><li>',
+		block_core_home_link_build_li_wrapper_attributes( $block->context ),
+		esc_url( home_url() ),
+		$aria_current,
+		wp_kses_post( $attributes['label'] )
+	);
 }
 
 /**

package/src/image/block.json

@@ -84,9 +84,15 @@
 			"background": false
 		},
 		"__experimentalBorder": {
+			"color": true,
 			"radius": true,
+			"width": true,
+			"__experimentalSelector": "img, .wp-block-image__crop-area",
+			"__experimentalSkipSerialization": true,
 			"__experimentalDefaultControls": {
-				"radius": true
+				"color": true,
+				"radius": true,
+				"width": true
 			}
 		},
 		"__experimentalStyle": {

package/src/image/deprecated.js

@@ -31,6 +31,12 @@ const blockAttributes = {
 		source: 'html',
 		selector: 'figcaption',
 	},
+	title: {
+		type: 'string',
+		source: 'attribute',
+		selector: 'img',
+		attribute: 'title',
+	},
 	href: {
 		type: 'string',
 		source: 'attribute',
@@ -58,6 +64,9 @@ const blockAttributes = {
 	height: {
 		type: 'number',
 	},
+	sizeSlug: {
+		type: 'string',
+	},
 	linkDestination: {
 		type: 'string',
 	},
@@ -85,6 +94,83 @@ const blockSupports = {
 };
 
 const deprecated = [
+	// The following deprecation moves existing border radius styles onto the
+	// inner img element where new border block support styles must be applied.
+	// It will also add a new `.has-custom-border` class for existing blocks
+	// with border radii set. This class is required to improve caption position
+	// and styling when an image within a gallery has a custom border or
+	// rounded corners.
+	//
+	// See: https://github.com/WordPress/gutenberg/pull/31366/
+	{
+		attributes: blockAttributes,
+		supports: blockSupports,
+		save( { attributes } ) {
+			const {
+				url,
+				alt,
+				caption,
+				align,
+				href,
+				rel,
+				linkClass,
+				width,
+				height,
+				id,
+				linkTarget,
+				sizeSlug,
+				title,
+			} = attributes;
+
+			const newRel = isEmpty( rel ) ? undefined : rel;
+
+			const classes = classnames( {
+				[ `align${ align }` ]: align,
+				[ `size-${ sizeSlug }` ]: sizeSlug,
+				'is-resized': width || height,
+			} );
+
+			const image = (
+				<img
+					src={ url }
+					alt={ alt }
+					className={ id ? `wp-image-${ id }` : null }
+					width={ width }
+					height={ height }
+					title={ title }
+				/>
+			);
+
+			const figure = (
+				<>
+					{ href ? (
+						<a
+							className={ linkClass }
+							href={ href }
+							target={ linkTarget }
+							rel={ newRel }
+						>
+							{ image }
+						</a>
+					) : (
+						image
+					) }
+					{ ! RichText.isEmpty( caption ) && (
+						<RichText.Content
+							tagName="figcaption"
+							value={ caption }
+						/>
+					) }
+				</>
+			);
+
+			return (
+				<figure { ...useBlockProps.save( { className: classes } ) }>
+					{ figure }
+				</figure>
+			);
+		},
+	},
 	{
 		attributes: {
 			...blockAttributes,

package/src/image/edit.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { get, has, omit, pick } from 'lodash';
+import { get, has, isEmpty, omit, pick } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -17,6 +17,7 @@ import {
 	MediaPlaceholder,
 	useBlockProps,
 	store as blockEditorStore,
+	__experimentalUseBorderProps as useBorderProps,
 } from '@wordpress/block-editor';
 import { useEffect, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -296,10 +297,14 @@ export function ImageEdit( {
 		/>
 	);
 
+	const borderProps = useBorderProps( attributes );
+
 	const classes = classnames( className, {
 		'is-transient': temporaryURL,
 		'is-resized': !! width || !! height,
 		[ `size-${ sizeSlug }` ]: sizeSlug,
+		'has-custom-border':
+			!! borderProps.className || ! isEmpty( borderProps.style ),
 	} );
 
 	const blockProps = useBlockProps( {

package/src/image/edit.native.js

@@ -268,11 +268,15 @@ export class ImageEdit extends Component {
 	componentDidUpdate( previousProps ) {
 		const { image, attributes, setAttributes, featuredImageId } =
 			this.props;
+		const { url } = attributes;
 		if ( ! previousProps.image && image ) {
-			const url =
-				getUrlForSlug( image, attributes?.sizeSlug ) ||
-				image.source_url;
-			setAttributes( { url } );
+			if ( ! hasQueryArg( url, 'w' ) && attributes?.sizeSlug ) {
+				const updatedUrl =
+					getUrlForSlug( image, attributes.sizeSlug ) ||
+					image.source_url;
+
+				setAttributes( { url: updatedUrl } );
+			}
 		}
 
 		const { id } = attributes;
@@ -574,7 +578,7 @@ export class ImageEdit extends Component {
 					<>
 						{ __(
 							'Describe the purpose of the image. Leave empty if the image is purely decorative.'
-						) }
+						) }{ ' ' }
 						<FooterMessageLink
 							href={
 								'https://www.w3.org/WAI/tutorials/images/decision-tree/'
@@ -665,6 +669,7 @@ export class ImageEdit extends Component {
 			context,
 			featuredImageId,
 			wasBlockJustInserted,
+			shouldUseFastImage,
 		} = this.props;
 		const { align, url, alt, id, sizeSlug, className } = attributes;
 		const hasImageContext = context
@@ -845,6 +850,9 @@ export class ImageEdit extends Component {
 											isUploadInProgress={
 												isUploadInProgress
 											}
+											shouldUseFastImage={
+												shouldUseFastImage
+											}
 											onSelectMediaUploadOption={
 												this.onSelectMediaUploadOption
 											}
@@ -904,7 +912,8 @@ export default compose( [
 			isSelected,
 			clientId,
 		} = props;
-		const { imageSizes, imageDefaultSize } = getSettings();
+		const { imageSizes, imageDefaultSize, shouldUseFastImage } =
+			getSettings();
 		const isNotFileUrl = id && getProtocol( url ) !== 'file:';
 		const featuredImageId = getEditedPostAttribute( 'featured_media' );
 
@@ -916,11 +925,13 @@ export default compose( [
 				isNotFileUrl &&
 				url &&
 				! hasQueryArg( url, 'w' ) );
+		const image = shouldGetMedia ? getMedia( id ) : null;
 
 		return {
-			image: shouldGetMedia ? getMedia( id ) : null,
+			image,
 			imageSizes,
 			imageDefaultSize,
+			shouldUseFastImage,
 			featuredImageId,
 			wasBlockJustInserted: wasBlockJustInserted(
 				clientId,

package/src/image/editor.scss

@@ -22,10 +22,6 @@ figure.wp-block-image:not(.wp-block) {
 		margin-top: -9px;
 		margin-left: -9px;
 	}
-
-	&:not(.is-style-rounded) > div:not(.components-placeholder) {
-		border-radius: inherit;
-	}
 }
 
 // This is necessary for the editor resize handles to accurately work on a non-floated, non-resized, small image.
@@ -94,6 +90,15 @@ figure.wp-block-image:not(.wp-block) {
 	position: relative;
 	max-width: 100%;
 	width: 100%;
+	overflow: hidden;
+
+	// This removes the border from the img within the image cropper so it
+	// can be applied to the cropper itself. This then allows the image to be
+	// cropped within the visual border providing more accurate editing and
+	// smoother UX.
+	.reactEasyCrop_Container .reactEasyCrop_Image {
+		border: none;
+	}
 }
 
 .wp-block-image__crop-icon {