@wordpress/block-library 6.0.20 → 6.1.0

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

@@ -20,7 +20,12 @@ exports[`File block renders file error state without crashing 1`] = `
     }
   />
   <View
-    accessible={true}
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
+    accessible={false}
     focusable={true}
     onClick={[Function]}
     onLayout={[Function]}
@@ -30,6 +35,7 @@ exports[`File block renders file error state without crashing 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    testID="file-edit-container"
   >
     <Text
       onTextLayout={[Function]}
@@ -95,6 +101,7 @@ exports[`File block renders file error state without crashing 1`] = `
               "eventCount": undefined,
               "linkTextColor": undefined,
               "selection": null,
+              "tag": "p",
               "text": "<p>File name</p>",
             }
           }
@@ -105,11 +112,9 @@ exports[`File block renders file error state without crashing 1`] = `
       <View>
         Svg
         <TextInput
-          allowFontScaling={true}
           editable={false}
           fontFamily="serif"
           onChange={[Function]}
-          rejectResponderTermination={true}
           scrollEnabled={false}
           style={
             Array [
@@ -119,7 +124,6 @@ exports[`File block renders file error state without crashing 1`] = `
               undefined,
             ]
           }
-          underlineColorAndroid="transparent"
           value="Error"
         />
       </View>
@@ -191,6 +195,7 @@ exports[`File block renders file error state without crashing 1`] = `
               "eventCount": undefined,
               "linkTextColor": undefined,
               "selection": null,
+              "tag": "p",
               "text": "<p>Download</p>",
             }
           }
@@ -223,7 +228,12 @@ exports[`File block renders file without crashing 1`] = `
     }
   />
   <View
-    accessible={true}
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
+    accessible={false}
     focusable={true}
     onClick={[Function]}
     onLayout={[Function]}
@@ -233,6 +243,7 @@ exports[`File block renders file without crashing 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    testID="file-edit-container"
   >
     <Text
       onTextLayout={[Function]}
@@ -298,6 +309,7 @@ exports[`File block renders file without crashing 1`] = `
               "eventCount": undefined,
               "linkTextColor": undefined,
               "selection": null,
+              "tag": "p",
               "text": "<p>File name</p>",
             }
           }
@@ -373,6 +385,7 @@ exports[`File block renders file without crashing 1`] = `
               "eventCount": undefined,
               "linkTextColor": undefined,
               "selection": null,
+              "tag": "p",
               "text": "<p>Download</p>",
             }
           }

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

@@ -1,12 +1,15 @@
 /**
  * External dependencies
  */
-import renderer from 'react-test-renderer';
+import { render, fireEvent } from 'test/helpers';
 
 /**
  * WordPress dependencies
  */
-import { MediaUploadProgress } from '@wordpress/block-editor';
+import {
+	subscribeMediaUpload,
+	sendMediaUpload,
+} from '@wordpress/react-native-bridge';
 
 /**
  * Internal dependencies
@@ -17,10 +20,21 @@ import { FileEdit } from '../edit.native.js';
 // snapshot testing where we want to keep the original component.
 jest.unmock( '@wordpress/react-native-aztec' );
 
+const MEDIA_UPLOAD_STATE_FAILED = 3;
+
+let uploadCallBack;
+subscribeMediaUpload.mockImplementation( ( callback ) => {
+	uploadCallBack = callback;
+} );
+sendMediaUpload.mockImplementation( ( payload ) => {
+	uploadCallBack( payload );
+} );
+
 const getTestComponentWithContent = ( attributes = {} ) => {
-	return renderer.create(
+	return render(
 		<FileEdit
 			attributes={ attributes }
+			isSelected
 			setAttributes={ jest.fn() }
 			getMedia={ jest.fn() }
 			getStylesFromColorScheme={ jest.fn() }
@@ -45,29 +59,33 @@ describe( 'File block', () => {
 			id: '1',
 		} );
 
-		component
-			.getInstance()
-			.onLayout( { nativeEvent: { layout: { width: 100 } } } );
+		fireEvent( component.getByTestId( 'file-edit-container' ), 'layout', {
+			nativeEvent: { layout: { width: 100 } },
+		} );
 
 		const rendered = component.toJSON();
 		expect( rendered ).toMatchSnapshot();
 	} );
 
 	it( 'renders file error state without crashing', () => {
+		const MEDIA_ID = '1';
 		const component = getTestComponentWithContent( {
 			showDownloadButton: true,
 			downloadButtonText: 'Download',
 			href: 'https://wordpress.org/latest.zip',
 			fileName: 'File name',
 			textLinkHref: 'https://wordpress.org/latest.zip',
-			id: '1',
+			id: MEDIA_ID,
+		} );
+		fireEvent( component.getByTestId( 'file-edit-container' ), 'layout', {
+			nativeEvent: { layout: { width: 100 } },
 		} );
-		component
-			.getInstance()
-			.onLayout( { nativeEvent: { layout: { width: 100 } } } );
 
-		const mediaUpload = component.root.findByType( MediaUploadProgress );
-		mediaUpload.instance.finishMediaUploadWithFailure( { mediaId: -1 } );
+		const payloadFail = {
+			state: MEDIA_UPLOAD_STATE_FAILED,
+			mediaId: MEDIA_ID,
+		};
+		sendMediaUpload( payloadFail );
 
 		const rendered = component.toJSON();
 		expect( rendered ).toMatchSnapshot();

package/src/freeform/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/freeform",
 	"title": "Classic",

package/src/gallery/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/gallery",
 	"title": "Gallery",

package/src/gallery/deprecated.js

@@ -192,6 +192,10 @@ const v6 = {
 			type: 'boolean',
 			default: true,
 		},
+		fixedHeight: {
+			type: 'boolean',
+			default: true,
+		},
 		linkTo: {
 			type: 'string',
 		},

package/src/gallery/edit.js

@@ -22,6 +22,8 @@ import {
 	MediaPlaceholder,
 	InspectorControls,
 	useBlockProps,
+	BlockControls,
+	MediaReplaceFlow,
 } from '@wordpress/block-editor';
 import { Platform, useEffect, useMemo } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
@@ -97,6 +99,7 @@ function GalleryEdit( props ) {
 		__unstableMarkNextChangeAsNotPersistent,
 		replaceInnerBlocks,
 		updateBlockAttributes,
+		multiSelect,
 	} = useDispatch( blockEditorStore );
 	const { createSuccessNotice } = useDispatch( noticesStore );
 
@@ -118,6 +121,16 @@ function GalleryEdit( props ) {
 		[ clientId ]
 	);
 
+	const wasBlockJustInserted = useSelect(
+		( select ) => {
+			return select( blockEditorStore ).wasBlockJustInserted(
+				clientId,
+				'inserter_menu'
+			);
+		},
+		[ clientId ]
+	);
+
 	const images = useMemo(
 		() =>
 			innerBlockImages?.map( ( block ) => ( {
@@ -283,6 +296,14 @@ function GalleryEdit( props ) {
 					newOrderMap[ b.attributes.id ]
 			)
 		);
+
+		// If new blocks added select the first of these so they scroll into view.
+		if ( newBlocks?.length && existingImageBlocks?.length ) {
+			multiSelect(
+				newBlocks[ 0 ].clientId,
+				newBlocks[ newBlocks.length - 1 ].clientId
+			);
+		}
 	}
 
 	function onUploadError( message ) {
@@ -410,24 +431,22 @@ function GalleryEdit( props ) {
 
 	const mediaPlaceholder = (
 		<MediaPlaceholder
-			addToGallery={ hasImageIds }
+			addToGallery={ false }
 			handleUpload={ false }
-			isAppender={ hasImages }
-			disableMediaButtons={
-				( hasImages && ! isSelected ) || imagesUploading
-			}
-			icon={ ! hasImages && sharedIcon }
+			disableMediaButtons={ imagesUploading }
+			icon={ sharedIcon }
 			labels={ {
-				title: ! hasImages && __( 'Gallery' ),
-				instructions: ! hasImages && PLACEHOLDER_TEXT,
+				title: __( 'Gallery' ),
+				instructions: PLACEHOLDER_TEXT,
 			} }
 			onSelect={ updateImages }
 			accept="image/*"
 			allowedTypes={ ALLOWED_MEDIA_TYPES }
 			multiple
-			value={ hasImageIds ? images : {} }
+			value={ {} }
 			onError={ onUploadError }
-			notices={ hasImages ? undefined : noticeUI }
+			notices={ noticeUI }
+			autoOpenMediaUpload={ isSelected && wasBlockJustInserted }
 		/>
 	);
 
@@ -502,11 +521,23 @@ function GalleryEdit( props ) {
 					) }
 				</PanelBody>
 			</InspectorControls>
+			<BlockControls group="other">
+				<MediaReplaceFlow
+					allowedTypes={ ALLOWED_MEDIA_TYPES }
+					accept="image/*"
+					handleUpload={ false }
+					onSelect={ updateImages }
+					name={ __( 'Add' ) }
+					multiple={ true }
+					mediaIds={ images.map( ( image ) => image.id ) }
+					addToGallery={ hasImageIds }
+				/>
+			</BlockControls>
 			{ noticeUI }
 			<Gallery
 				{ ...props }
 				images={ images }
-				mediaPlaceholder={ mediaPlaceholder }
+				mediaPlaceholder={ ! hasImages ? mediaPlaceholder : undefined }
 				blockProps={ blockProps }
 				insertBlocksAfter={ insertBlocksAfter }
 			/>

package/src/gallery/editor.scss

@@ -45,20 +45,6 @@ figure.wp-block-gallery {
 	}
 	.block-editor-media-placeholder {
 		margin: 0;
-
-		&::before {
-			box-shadow: 0 0 0 $border-width $white inset, 0 0 0 3px var(--wp-admin-theme-color) inset;
-			content: "";
-			// Shown in Windows 10 high contrast mode.
-			outline: 2px solid transparent;
-			position: absolute;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			z-index: 1;
-			pointer-events: none;
-		}
 		.components-placeholder__label {
 			display: flex;
 		}
@@ -207,13 +193,13 @@ figure.wp-block-gallery {
 }
 
 .wp-block-update-gallery-modal {
-	max-width: 400px;
-	.wp-block-update-gallery-modal-buttons {
-		display: flex;
-		justify-content: flex-end;
-
-		.components-button {
-			margin-left: $grid-unit-15;
-		}
+	@include break-small() {
+		max-width: $break-mobile;
 	}
 }
+
+.wp-block-update-gallery-modal-buttons {
+	display: flex;
+	justify-content: flex-end;
+	gap: $grid-unit-15;
+}

package/src/gallery/gallery.native.js

@@ -35,6 +35,7 @@ export const Gallery = ( props ) => {
 	const {
 		mediaPlaceholder,
 		attributes,
+		images,
 		isNarrow,
 		onBlur,
 		insertBlocksAfter,
@@ -49,7 +50,6 @@ export const Gallery = ( props ) => {
 	}, [ sizes ] );
 
 	const {
-		images,
 		align,
 		columns = defaultColumnsNumber( images.length ),
 	} = attributes;

package/src/gallery/style.scss

@@ -63,6 +63,10 @@
 			img {
 				display: inline;
 			}
+
+			a {
+				color: inherit;
+			}
 		}
 
 		&.is-style-rounded {

package/src/gallery/test/use-get-new-images.js

@@ -0,0 +1,93 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import useGetNewImages from '../use-get-new-images';
+
+const TestComponent = ( { images, imageData } ) => {
+	const newImages = useGetNewImages( images, imageData );
+	return <div title="testResult">{ JSON.stringify( newImages ) }</div>;
+};
+
+describe( 'gallery block useGetNewImages hook', () => {
+	it( 'returns null if no images currently in the gallery', () => {
+		render( <TestComponent images={ [] } imageData={ [] } /> );
+		expect( screen.getByTitle( 'testResult' ) ).toHaveTextContent( 'null' );
+	} );
+
+	it( 'should not return images that have been loaded from the saved post content', () => {
+		render(
+			<TestComponent
+				images={ [
+					{ clientId: 'abc123', id: 1, fromSavedContent: true },
+				] }
+				imageData={ [ { id: 1 } ] }
+			/>
+		);
+		expect( screen.getByTitle( 'testResult' ) ).toHaveTextContent( 'null' );
+	} );
+
+	it( 'returns array of new images that have been added since the last render', () => {
+		const { rerender } = render(
+			<TestComponent
+				images={ [ { clientId: 'abc123', id: 1 } ] }
+				imageData={ [ { id: 1 } ] }
+			/>
+		);
+
+		expect( screen.getByTitle( 'testResult' ) ).toHaveTextContent(
+			'[{"clientId":"abc123","id":1}]'
+		);
+
+		rerender(
+			<TestComponent
+				images={ [
+					{ clientId: 'abc123', id: 1 },
+					{ clientId: 'efg456', id: 2 },
+				] }
+				imageData={ [ { id: 1 }, { id: 2 } ] }
+			/>
+		);
+
+		expect( screen.getByTitle( 'testResult' ) ).toHaveTextContent(
+			'[{"clientId":"efg456","id":2}]'
+		);
+	} );
+
+	it( 'sees an image as new if it has been deleted and added again', () => {
+		const { rerender } = render(
+			<TestComponent
+				images={ [
+					{ clientId: 'abc123', id: 1 },
+					{ clientId: 'efg456', id: 2 },
+				] }
+				imageData={ [ { id: 1 }, { id: 2 } ] }
+			/>
+		);
+
+		rerender(
+			<TestComponent
+				images={ [ { clientId: 'abc123', id: 1 } ] }
+				imageData={ [ { id: 1 } ] }
+			/>
+		);
+
+		rerender(
+			<TestComponent
+				images={ [
+					{ clientId: 'abc123', id: 1 },
+					{ clientId: 'efg456', id: 2 },
+				] }
+				imageData={ [ { id: 1 }, { id: 2 } ] }
+			/>
+		);
+
+		expect( screen.getByTitle( 'testResult' ) ).toHaveTextContent(
+			'[{"clientId":"efg456","id":2}]'
+		);
+	} );
+} );

package/src/group/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/group",
 	"title": "Group",
@@ -36,7 +37,24 @@
 			"color": true,
 			"radius": true,
 			"style": true,
-			"width": true
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		},
 		"__experimentalLayout": true
 	},

package/src/group/theme.scss

@@ -1,6 +1,5 @@
-.wp-block-group {
-	&:where(.has-background) {
-		// Matches paragraph Block padding
-		padding: $block-bg-padding--v $block-bg-padding--h;
-	}
+// Add low specificity default padding to groups with backgrounds.
+:where(.wp-block-group.has-background) {
+	// Matches paragraph block padding.
+	padding: $block-bg-padding--v $block-bg-padding--h;
 }

package/src/heading/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/heading",
 	"title": "Heading",

package/src/heading/edit.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useEffect } from '@wordpress/element';
+import { useEffect, Platform } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import {
@@ -120,6 +120,7 @@ function HeadingEdit( {
 				aria-label={ __( 'Heading text' ) }
 				placeholder={ placeholder || __( 'Heading' ) }
 				textAlign={ textAlign }
+				{ ...( Platform.isNative && { deleteEnter: true } ) } // setup RichText on native mobile to delete the "Enter" key as it's handled by the JS/RN side
 				{ ...blockProps }
 			/>
 		</>

package/src/home-link/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/home-link",
 	"category": "design",

package/src/home-link/index.php

@@ -114,9 +114,9 @@ function block_core_home_link_build_li_wrapper_attributes( $context ) {
 /**
  * Renders the `core/home-link` block.
  *
- * @param array $attributes The block attributes.
- * @param array $content    The saved content.
- * @param array $block      The parsed block.
+ * @param array    $attributes The block attributes.
+ * @param string   $content    The saved content.
+ * @param WP_Block $block      The parsed block.
  *
  * @return string Returns the post content with the home url added.
  */

package/src/html/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/html",
 	"title": "Custom HTML",

package/src/image/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/image",
 	"title": "Image",
@@ -83,7 +84,10 @@
 			"background": false
 		},
 		"__experimentalBorder": {
-			"radius": true
+			"radius": true,
+			"__experimentalDefaultControls": {
+				"radius": true
+			}
 		}
 	},
 	"styles": [

package/src/image/edit.js

@@ -87,6 +87,20 @@ function hasDefaultSize( image, defaultSize ) {
 	);
 }
 
+/**
+ * Checks if a media attachment object has been "destroyed",
+ * that is, removed from the media library. The core Media Library
+ * adds a `destroyed` property to a deleted attachment object in the media collection.
+ *
+ * @param {number} id The attachment id.
+ *
+ * @return {boolean} Whether the image has been destroyed.
+ */
+export function isMediaDestroyed( id ) {
+	const attachment = wp?.media?.attachment( id ) || {};
+	return attachment.destroyed;
+}
+
 export function ImageEdit( {
 	attributes,
 	setAttributes,
@@ -127,6 +141,33 @@ export function ImageEdit( {
 		return pick( getSettings(), [ 'imageDefaultSize', 'mediaUpload' ] );
 	}, [] );
 
+	// A callback passed to MediaUpload,
+	// fired when the media modal closes.
+	function onCloseModal() {
+		if ( isMediaDestroyed( attributes?.id ) ) {
+			setAttributes( {
+				url: undefined,
+				id: undefined,
+			} );
+		}
+	}
+
+	/*
+		 Runs an error callback if the image does not load.
+		 If the error callback is triggered, we infer that that image
+		 has been deleted.
+	*/
+	function onImageError( isReplaced = false ) {
+		// If the image block was not replaced with an embed,
+		// clear the attributes and trigger the placeholder.
+		if ( ! isReplaced ) {
+			setAttributes( {
+				url: undefined,
+				id: undefined,
+			} );
+		}
+	}
+
 	function onUploadError( message ) {
 		noticeOperations.removeAllNotices();
 		noticeOperations.createErrorNotice( message );
@@ -324,6 +365,8 @@ export function ImageEdit( {
 					containerRef={ ref }
 					context={ context }
 					clientId={ clientId }
+					onCloseModal={ onCloseModal }
+					onImageLoadError={ onImageError }
 				/>
 			) }
 			{ ! url && (
@@ -340,6 +383,7 @@ export function ImageEdit( {
 				onSelectURL={ onSelectURL }
 				notices={ noticeUI }
 				onError={ onUploadError }
+				onClose={ onCloseModal }
 				accept="image/*"
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
 				value={ { id, src } }