@wordpress/block-library 7.19.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/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 } from 'lodash';
+import { get, isEmpty, map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -195,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,
@@ -211,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;
@@ -220,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 ) {
@@ -299,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 } )
@@ -403,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

@@ -69,7 +69,9 @@
 				"fontSize": true
 			}
 		},
-		"__experimentalLayout": true
+		"__experimentalLayout": {
+			"allowSizingOnChildren": true
+		}
 	},
 	"editorStyle": "wp-block-group-editor",
 	"style": "wp-block-group"

package/src/group/edit.js

@@ -12,7 +12,6 @@ import {
 } from '@wordpress/block-editor';
 import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -123,13 +122,10 @@ function GroupEdit( {
 	);
 
 	const { selectBlock } = useDispatch( blockEditorStore );
-	const updateSelection = useCallback(
-		( newClientId ) => selectBlock( newClientId, -1 ),
-		[ selectBlock ]
-	);
+
 	const selectVariation = ( nextVariation ) => {
 		setAttributes( nextVariation.attributes );
-		updateSelection( clientId );
+		selectBlock( clientId, -1 );
 		setShowPlaceholder( false );
 	};
 

package/src/group/placeholder.js

@@ -24,10 +24,7 @@ const getGroupPlaceholderIcons = ( name = 'group' ) => {
 				height="32"
 				viewBox="0 0 44 32"
 			>
-				<Path
-					d="M42 0H2C.9 0 0 .9 0 2v28c0 1.1.9 2 2 2h40c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2z"
-					// style="fill:#ccc"
-				/>
+				<Path d="M42 0H2C.9 0 0 .9 0 2v28c0 1.1.9 2 2 2h40c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2z" />
 			</SVG>
 		),
 		'group-row': (
@@ -37,10 +34,7 @@ const getGroupPlaceholderIcons = ( name = 'group' ) => {
 				height="32"
 				viewBox="0 0 44 32"
 			>
-				<Path
-					d="M42 0H23.5c-.6 0-1 .4-1 1v30c0 .6.4 1 1 1H42c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2zM20.5 0H2C.9 0 0 .9 0 2v28c0 1.1.9 2 2 2h18.5c.6 0 1-.4 1-1V1c0-.6-.4-1-1-1z"
-					// style="fill:#ccc"
-				/>
+				<Path d="M42 0H23.5c-.6 0-1 .4-1 1v30c0 .6.4 1 1 1H42c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2zM20.5 0H2C.9 0 0 .9 0 2v28c0 1.1.9 2 2 2h18.5c.6 0 1-.4 1-1V1c0-.6-.4-1-1-1z" />
 			</SVG>
 		),
 		'group-stack': (
@@ -50,10 +44,7 @@ const getGroupPlaceholderIcons = ( name = 'group' ) => {
 				height="32"
 				viewBox="0 0 44 32"
 			>
-				<Path
-					d="M42 0H2C.9 0 0 .9 0 2v12.5c0 .6.4 1 1 1h42c.6 0 1-.4 1-1V2c0-1.1-.9-2-2-2zm1 16.5H1c-.6 0-1 .4-1 1V30c0 1.1.9 2 2 2h40c1.1 0 2-.9 2-2V17.5c0-.6-.4-1-1-1z"
-					// style="fill:#ccc"
-				/>
+				<Path d="M42 0H2C.9 0 0 .9 0 2v12.5c0 .6.4 1 1 1h42c.6 0 1-.4 1-1V2c0-1.1-.9-2-2-2zm1 16.5H1c-.6 0-1 .4-1 1V30c0 1.1.9 2 2 2h40c1.1 0 2-.9 2-2V17.5c0-.6-.4-1-1-1z" />
 			</SVG>
 		),
 	};
@@ -130,23 +121,13 @@ export function useShouldShowPlaceHolder( {
  * @return {JSX.Element}                The placeholder.
  */
 function GroupPlaceHolder( { name, onSelect } ) {
-	const { defaultVariation, variations } = useSelect(
-		( select ) => {
-			const { getBlockVariations, getDefaultBlockVariation } =
-				select( blocksStore );
-			return {
-				defaultVariation: getDefaultBlockVariation( name, 'block' ),
-				variations: getBlockVariations( name, 'block' ) || [],
-			};
-		},
+	const variations = useSelect(
+		( select ) => select( blocksStore ).getBlockVariations( name, 'block' ),
 		[ name ]
 	);
 	const blockProps = useBlockProps( {
 		className: 'wp-block-group__placeholder',
 	} );
-	const selectVariation = ( nextVariation = defaultVariation ) =>
-		onSelect( nextVariation );
-
 	return (
 		<div { ...blockProps }>
 			<Placeholder
@@ -171,7 +152,7 @@ function GroupPlaceHolder( { name, onSelect } ) {
 									variation.name
 								) }
 								iconSize={ 44 }
-								onClick={ () => selectVariation( variation ) }
+								onClick={ () => onSelect( variation ) }
 								className="wp-block-group-placeholder__variation-button"
 								label={ `${ variation.title }: ${ variation.description }` }
 							/>

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

@@ -3,7 +3,7 @@
 exports[`Group block inserts block and adds a Heading block as an inner block 1`] = `
 "<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
 <div class=\\"wp-block-group\\"><!-- wp:heading -->
-<h2></h2>
+<h2 class=\\"wp-block-heading\\"></h2>
 <!-- /wp:heading --></div>
 <!-- /wp:group -->"
 `;

package/src/heading/block.json

@@ -29,7 +29,7 @@
 	"supports": {
 		"align": [ "wide", "full" ],
 		"anchor": true,
-		"className": false,
+		"className": true,
 		"color": {
 			"gradients": true,
 			"link": true,
@@ -57,7 +57,6 @@
 				"textTransform": true
 			}
 		},
-		"__experimentalSelector": "h1,h2,h3,h4,h5,h6",
 		"__unstablePasteTextInline": true,
 		"__experimentalSlashInserter": true
 	},