@wordpress/block-library 7.18.0 → 8.0.0

package/src/file/inspector.js

@@ -56,6 +56,7 @@ export default function FileBlockInspector( {
 						/>
 						{ displayPreview && (
 							<RangeControl
+								__nextHasNoMarginBottom
 								label={ __( 'Height in pixels' ) }
 								min={ MIN_PREVIEW_HEIGHT }
 								max={ Math.max(

package/src/file/test/__snapshots__/edit.native.js.snap

@@ -44,9 +44,7 @@ exports[`File block renders file error state without crashing 1`] = `
           "color": "gray",
         }
       }
-    >
-      
-    </Text>
+    />
     <View
       style={
         Object {
@@ -266,9 +264,7 @@ exports[`File block renders file without crashing 1`] = `
           "color": "gray",
         }
       }
-    >
-      
-    </Text>
+    />
     <View
       style={
         Object {

package/src/gallery/edit.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { find } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -174,7 +173,7 @@ function GalleryEdit( props ) {
 	 */
 	function buildImageAttributes( imageAttributes ) {
 		const image = imageAttributes.id
-			? find( imageData, { id: imageAttributes.id } )
+			? imageData.find( ( { id } ) => id === imageAttributes.id )
 			: null;
 
 		let newClassName;
@@ -217,9 +216,19 @@ function GalleryEdit( props ) {
 	}
 
 	function isValidFileType( file ) {
+		// It's necessary to retrieve the media type from the raw image data for already-uploaded images on native.
+		const nativeFileData =
+			Platform.isNative && file.id
+				? imageData.find( ( { id } ) => id === file.id )
+				: null;
+
+		const mediaTypeSelector = nativeFileData
+			? nativeFileData?.media_type
+			: file.type;
+
 		return (
 			ALLOWED_MEDIA_TYPES.some(
-				( mediaType ) => file.type?.indexOf( mediaType ) === 0
+				( mediaType ) => mediaTypeSelector?.indexOf( mediaType ) === 0
 			) || file.url?.indexOf( 'blob:' ) === 0
 		);
 	}
@@ -323,7 +332,7 @@ function GalleryEdit( props ) {
 		getBlock( clientId ).innerBlocks.forEach( ( block ) => {
 			blocks.push( block.clientId );
 			const image = block.attributes.id
-				? find( imageData, { id: block.attributes.id } )
+				? imageData.find( ( { id } ) => id === block.attributes.id )
 				: null;
 			changedAttributes[ block.clientId ] = getHrefAndDestination(
 				image,
@@ -391,7 +400,7 @@ function GalleryEdit( props ) {
 		getBlock( clientId ).innerBlocks.forEach( ( block ) => {
 			blocks.push( block.clientId );
 			const image = block.attributes.id
-				? find( imageData, { id: block.attributes.id } )
+				? imageData.find( ( { id } ) => id === block.attributes.id )
 				: null;
 			changedAttributes[ block.clientId ] = getImageSizeAttributes(
 				image,
@@ -486,6 +495,7 @@ function GalleryEdit( props ) {
 				<PanelBody title={ __( 'Settings' ) }>
 					{ images.length > 1 && (
 						<RangeControl
+							__nextHasNoMarginBottom
 							label={ __( 'Columns' ) }
 							value={
 								columns

package/src/gallery/gallery.native.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { View } from 'react-native';
-import { isEmpty } from 'lodash';
 
 /**
  * Internal dependencies
@@ -100,7 +99,7 @@ export const Gallery = ( props ) => {
 				isSelected={ isCaptionSelected }
 				accessible={ true }
 				accessibilityLabelCreator={ ( caption ) =>
-					isEmpty( caption )
+					! caption
 						? /* translators: accessibility text. Empty gallery caption. */
 
 						  'Gallery caption. Empty'

package/src/gallery/shared.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, pick } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,12 @@ export function defaultColumnsNumber( imageCount ) {
 }
 
 export const pickRelevantMediaFiles = ( image, sizeSlug = 'large' ) => {
-	const imageProps = pick( image, [ 'alt', 'id', 'link' ] );
+	const imageProps = Object.fromEntries(
+		Object.entries( image ?? {} ).filter( ( [ key ] ) =>
+			[ 'alt', 'id', 'link' ].includes( key )
+		)
+	);
+
 	imageProps.url =
 		get( image, [ 'sizes', sizeSlug, 'url' ] ) ||
 		get( image, [ 'media_details', 'sizes', sizeSlug, 'source_url' ] ) ||
@@ -44,18 +49,9 @@ function getGalleryBlockV2Enabled() {
  * can be removed when minimum supported WP version >=5.9.
  */
 export function isGalleryV2Enabled() {
-	// The logic for the native version is located in a different if statement
-	// due to a lint rule that prohibits a single conditional combining
-	// `process.env.IS_GUTENBERG_PLUGIN` with a native platform check.
 	if ( Platform.isNative ) {
 		return getGalleryBlockV2Enabled();
 	}
 
-	// Only run the Gallery version compat check if the plugin is running, otherwise
-	// assume we are in 5.9 core and enable by default.
-	if ( process.env.IS_GUTENBERG_PLUGIN ) {
-		return getGalleryBlockV2Enabled();
-	}
-
 	return true;
 }

package/src/gallery/test/index.native.js

@@ -100,7 +100,7 @@ describe( 'Gallery block', () => {
 	// is addressed.
 	it.skip( 'displays media options picker when selecting the block', async () => {
 		// Initialize with an empty gallery
-		const { getByA11yLabel, getByText, getByTestId } =
+		const { getByLabelText, getByText, getByTestId } =
 			await initializeEditor( {
 				initialHtml: generateGalleryBlock( 0 ),
 			} );
@@ -121,7 +121,7 @@ describe( 'Gallery block', () => {
 
 		// Observe that the block is selected, this is done by checking if the block settings
 		// button is visible
-		const blockActionsButton = getByA11yLabel( /Open Block Actions Menu/ );
+		const blockActionsButton = getByLabelText( /Open Block Actions Menu/ );
 		expect( blockActionsButton ).toBeVisible();
 	} );
 
@@ -160,18 +160,18 @@ describe( 'Gallery block', () => {
 	// Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc003
 	it( 'sets caption to gallery', async () => {
 		// Initialize with a gallery that contains one item
-		const { getByA11yLabel } = await initializeWithGalleryBlock( {
+		const { getByLabelText } = await initializeWithGalleryBlock( {
 			numberOfItems: 1,
 			media,
 		} );
 
 		// Check gallery item caption is not visible
-		const galleryItemCaption = getByA11yLabel( /Image caption. Empty/ );
+		const galleryItemCaption = getByLabelText( /Image caption. Empty/ );
 		expect( galleryItemCaption ).not.toBeVisible();
 
 		// Set gallery caption
 		const captionField = within(
-			getByA11yLabel( /Gallery caption. Empty/ )
+			getByLabelText( /Gallery caption. Empty/ )
 		).getByPlaceholderText( 'Add caption' );
 		changeTextOfRichText(
 			captionField,
@@ -456,7 +456,7 @@ describe( 'Gallery block', () => {
 		fireEvent.press( galleryItem3 );
 		await act( () =>
 			fireEvent.press(
-				within( galleryItem3 ).getByA11yLabel(
+				within( galleryItem3 ).getByLabelText(
 					/Move block left from position 3 to position 2/
 				)
 			)
@@ -465,7 +465,7 @@ describe( 'Gallery block', () => {
 		fireEvent.press( galleryItem1 );
 		await act( () =>
 			fireEvent.press(
-				within( galleryItem1 ).getByA11yLabel(
+				within( galleryItem1 ).getByLabelText(
 					/Move block right from position 1 to position 2/
 				)
 			)
@@ -563,14 +563,14 @@ describe( 'Gallery block', () => {
 				numberOfItems: 3,
 				media,
 			} );
-			const { getByA11yLabel } = screen;
+			const { getByLabelText } = screen;
 
 			await openBlockSettings( screen );
 
 			// Can't increment due to maximum value
 			// NOTE: Default columns value is 3
 			fireEvent(
-				getByA11yLabel( /Columns\. Value is 3/ ),
+				getByLabelText( /Columns\. Value is 3/ ),
 				'accessibilityAction',
 				{
 					nativeEvent: { actionName: 'increment' },
@@ -585,13 +585,13 @@ describe( 'Gallery block', () => {
 				numberOfItems: 3,
 				media,
 			} );
-			const { getByA11yLabel } = screen;
+			const { getByLabelText } = screen;
 
 			await openBlockSettings( screen );
 
 			// Decrement columns
 			fireEvent(
-				getByA11yLabel( /Columns\. Value is 3/ ),
+				getByLabelText( /Columns\. Value is 3/ ),
 				'accessibilityAction',
 				{
 					nativeEvent: { actionName: 'decrement' },

package/src/gallery/transforms.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { filter } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -144,7 +139,7 @@ const transforms = {
 					? sizeSlug
 					: undefined;
 
-				const validImages = filter( attributes, ( { url } ) => url );
+				const validImages = attributes.filter( ( { url } ) => url );
 
 				if ( isGalleryV2Enabled() ) {
 					const innerBlocks = validImages.map( ( image ) => {

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

@@ -28,7 +28,7 @@ export default function useGetMedia( innerBlockImages ) {
 			return (
 				select( coreStore ).getMediaItems( {
 					include: imageIds.join( ',' ),
-					per_page: imageIds.length,
+					per_page: -1,
 					orderby: 'include',
 				} ) ?? EMPTY_IMAGE_MEDIA
 			);

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

@@ -34,7 +34,8 @@ export default function useGetMedia( innerBlockImages ) {
 			return (
 				select( coreStore ).getMediaItems( {
 					include: imageIds.join( ',' ),
-					per_page: imageIds.length,
+					per_page:
+						imageIds.length /* 'hard' limit necessary as unbounded queries aren't supported on native */,
 					orderby: 'include',
 				} ) ?? EMPTY_IMAGE_MEDIA
 			);

package/src/gallery/v1/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { filter, find, get, isEmpty, map, reduce } from 'lodash';
+import { get, isEmpty, map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -98,34 +98,29 @@ function GalleryEdit( props ) {
 
 	const resizedImages = useMemo( () => {
 		if ( isSelected ) {
-			return reduce(
-				attributes.ids,
+			return ( attributes.ids ?? [] ).reduce(
 				( currentResizedImages, id ) => {
 					if ( ! id ) {
 						return currentResizedImages;
 					}
 					const image = getMedia( id );
-					const sizes = reduce(
-						imageSizes,
-						( currentSizes, size ) => {
-							const defaultUrl = get( image, [
-								'sizes',
-								size.slug,
-								'url',
-							] );
-							const mediaDetailsUrl = get( image, [
-								'media_details',
-								'sizes',
-								size.slug,
-								'source_url',
-							] );
-							return {
-								...currentSizes,
-								[ size.slug ]: defaultUrl || mediaDetailsUrl,
-							};
-						},
-						{}
-					);
+					const sizes = imageSizes.reduce( ( currentSizes, size ) => {
+						const defaultUrl = get( image, [
+							'sizes',
+							size.slug,
+							'url',
+						] );
+						const mediaDetailsUrl = get( image, [
+							'media_details',
+							'sizes',
+							size.slug,
+							'source_url',
+						] );
+						return {
+							...currentSizes,
+							[ size.slug ]: defaultUrl || mediaDetailsUrl,
+						};
+					}, {} );
 					return {
 						...currentResizedImages,
 						[ parseInt( id, 10 ) ]: sizes,
@@ -200,7 +195,7 @@ function GalleryEdit( props ) {
 
 	function onRemoveImage( index ) {
 		return () => {
-			const newImages = filter( images, ( img, i ) => index !== i );
+			const newImages = images.filter( ( img, i ) => index !== i );
 			setSelectedImage();
 			setAttributes( {
 				images: newImages,
@@ -216,7 +211,7 @@ function GalleryEdit( props ) {
 		// string, so ensure comparison works correctly by converting the
 		// newImage.id to a string.
 		const newImageId = newImage.id.toString();
-		const currentImage = find( images, { id: newImageId } );
+		const currentImage = images.find( ( { id } ) => id === newImageId );
 		const currentImageCaption = currentImage
 			? currentImage.caption
 			: newImage.caption;
@@ -225,9 +220,9 @@ function GalleryEdit( props ) {
 			return currentImageCaption;
 		}
 
-		const attachment = find( attachmentCaptions, {
-			id: newImageId,
-		} );
+		const attachment = attachmentCaptions.find(
+			( { id } ) => id === newImageId
+		);
 
 		// If the attachment caption is updated.
 		if ( attachment && attachment.caption !== newImage.caption ) {
@@ -304,7 +299,7 @@ function GalleryEdit( props ) {
 	function getImagesSizeOptions() {
 		const resizedImageSizes = Object.values( resizedImages );
 		return map(
-			filter( imageSizes, ( { slug } ) =>
+			imageSizes.filter( ( { slug } ) =>
 				resizedImageSizes.some( ( sizes ) => sizes[ slug ] )
 			),
 			( { name, slug } ) => ( { value: slug, label: name } )
@@ -408,6 +403,7 @@ function GalleryEdit( props ) {
 				<PanelBody title={ __( 'Settings' ) }>
 					{ images.length > 1 && (
 						<RangeControl
+							__nextHasNoMarginBottom
 							label={ __( 'Columns' ) }
 							value={ columns }
 							onChange={ setColumnsNumber }

package/src/gallery/v1/gallery.native.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { View } from 'react-native';
-import { isEmpty } from 'lodash';
 
 /**
  * Internal dependencies
@@ -142,7 +141,7 @@ export const Gallery = ( props ) => {
 				isSelected={ isCaptionSelected }
 				accessible={ true }
 				accessibilityLabelCreator={ ( caption ) =>
-					isEmpty( caption )
+					! caption
 						? /* translators: accessibility text. Empty gallery caption. */
 						  'Gallery caption. Empty'
 						: sprintf(

package/src/gallery/v1/shared.js

@@ -1,10 +1,15 @@
 /**
  * External dependencies
  */
-import { get, pick } from 'lodash';
+import { get } from 'lodash';
 
 export const pickRelevantMediaFiles = ( image, sizeSlug = 'large' ) => {
-	const imageProps = pick( image, [ 'alt', 'id', 'link', 'caption' ] );
+	const imageProps = Object.fromEntries(
+		Object.entries( image ?? {} ).filter( ( [ key ] ) =>
+			[ 'alt', 'id', 'link', 'caption' ].includes( key )
+		)
+	);
+
 	imageProps.url =
 		get( image, [ 'sizes', sizeSlug, 'url' ] ) ||
 		get( image, [ 'media_details', 'sizes', sizeSlug, 'source_url' ] ) ||

package/src/group/block.json

@@ -41,6 +41,9 @@
 				"blockGap": true
 			}
 		},
+		"dimensions": {
+			"minHeight": true
+		},
 		"__experimentalBorder": {
 			"color": true,
 			"radius": true,
@@ -66,7 +69,9 @@
 				"fontSize": true
 			}
 		},
-		"__experimentalLayout": true
+		"__experimentalLayout": {
+			"allowSizingOnChildren": true
+		}
 	},
 	"editorStyle": "wp-block-group-editor",
 	"style": "wp-block-group"

package/src/group/edit.js

@@ -1,8 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-
+import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	InnerBlocks,
 	useBlockProps,
@@ -14,29 +13,65 @@ import {
 import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-const htmlElementMessages = {
-	header: __(
-		'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'
-	),
-	main: __(
-		'The <main> element should be used for the primary content of your document only. '
-	),
-	section: __(
-		"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
-	),
-	article: __(
-		'The <article> element should represent a self contained, syndicatable portion of the document.'
-	),
-	aside: __(
-		"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
-	),
-	footer: __(
-		'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'
-	),
-};
+/**
+ * Internal dependencies
+ */
+import GroupPlaceHolder, { useShouldShowPlaceHolder } from './placeholder';
+
+/**
+ * Render inspector controls for the Group block.
+ *
+ * @param {Object}   props                 Component props.
+ * @param {string}   props.tagName         The HTML tag name.
+ * @param {Function} props.onSelectTagName onChange function for the SelectControl.
+ *
+ * @return {JSX.Element}                The control group.
+ */
+function GroupEditControls( { tagName, onSelectTagName } ) {
+	const htmlElementMessages = {
+		header: __(
+			'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'
+		),
+		main: __(
+			'The <main> element should be used for the primary content of your document only. '
+		),
+		section: __(
+			"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
+		),
+		article: __(
+			'The <article> element should represent a self-contained, syndicatable portion of the document.'
+		),
+		aside: __(
+			"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
+		),
+		footer: __(
+			'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'
+		),
+	};
+	return (
+		<InspectorControls __experimentalGroup="advanced">
+			<SelectControl
+				label={ __( 'HTML element' ) }
+				options={ [
+					{ label: __( 'Default (<div>)' ), value: 'div' },
+					{ label: '<header>', value: 'header' },
+					{ label: '<main>', value: 'main' },
+					{ label: '<section>', value: 'section' },
+					{ label: '<article>', value: 'article' },
+					{ label: '<aside>', value: 'aside' },
+					{ label: '<footer>', value: 'footer' },
+				] }
+				value={ tagName }
+				onChange={ onSelectTagName }
+				help={ htmlElementMessages[ tagName ] }
+			/>
+		</InspectorControls>
+	);
+}
 
 function GroupEdit( {
 	attributes,
+	name,
 	setAttributes,
 	clientId,
 	__unstableLayoutClassNames: layoutClassNames,
@@ -52,18 +87,26 @@ function GroupEdit( {
 		},
 		[ clientId ]
 	);
-	const defaultLayout = useSetting( 'layout' ) || {};
+
 	const { tagName: TagName = 'div', templateLock, layout = {} } = attributes;
+
+	// Layout settings.
+	const defaultLayout = useSetting( 'layout' ) || {};
 	const usedLayout = ! layout?.type
 		? { ...defaultLayout, ...layout, type: 'default' }
 		: { ...defaultLayout, ...layout };
 	const { type = 'default' } = usedLayout;
 	const layoutSupportEnabled = themeSupportsLayout || type === 'flex';
 
+	// Hooks.
 	const blockProps = useBlockProps( {
 		className: ! layoutSupportEnabled ? layoutClassNames : null,
 	} );
-
+	const [ showPlaceholder, setShowPlaceholder ] = useShouldShowPlaceHolder( {
+		attributes,
+		usedLayoutType: usedLayout?.type,
+		hasInnerBlocks,
+	} );
 	const innerBlocksProps = useInnerBlocksProps(
 		layoutSupportEnabled
 			? blockProps
@@ -78,31 +121,35 @@ function GroupEdit( {
 		}
 	);
 
+	const { selectBlock } = useDispatch( blockEditorStore );
+
+	const selectVariation = ( nextVariation ) => {
+		setAttributes( nextVariation.attributes );
+		selectBlock( clientId, -1 );
+		setShowPlaceholder( false );
+	};
+
 	return (
 		<>
-			<InspectorControls __experimentalGroup="advanced">
-				<SelectControl
-					label={ __( 'HTML element' ) }
-					options={ [
-						{ label: __( 'Default (<div>)' ), value: 'div' },
-						{ label: '<header>', value: 'header' },
-						{ label: '<main>', value: 'main' },
-						{ label: '<section>', value: 'section' },
-						{ label: '<article>', value: 'article' },
-						{ label: '<aside>', value: 'aside' },
-						{ label: '<footer>', value: 'footer' },
-					] }
-					value={ TagName }
-					onChange={ ( value ) =>
-						setAttributes( { tagName: value } )
-					}
-					help={ htmlElementMessages[ TagName ] }
+			<GroupEditControls
+				tagName={ TagName }
+				onSelectTagName={ ( value ) =>
+					setAttributes( { tagName: value } )
+				}
+			/>
+			{ showPlaceholder && (
+				<GroupPlaceHolder
+					clientId={ clientId }
+					name={ name }
+					onSelect={ selectVariation }
 				/>
-			</InspectorControls>
-			{ layoutSupportEnabled && <TagName { ...innerBlocksProps } /> }
+			) }
+			{ layoutSupportEnabled && ! showPlaceholder && (
+				<TagName { ...innerBlocksProps } />
+			) }
 			{ /* Ideally this is not needed but it's there for backward compatibility reason
 				to keep this div for themes that might rely on its presence */ }
-			{ ! layoutSupportEnabled && (
+			{ ! layoutSupportEnabled && ! showPlaceholder && (
 				<TagName { ...blockProps }>
 					<div { ...innerBlocksProps } />
 				</TagName>