@wordpress/block-library 6.0.23 → 7.0.0

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/constants.js

@@ -1,3 +1,5 @@
 export const LINK_DESTINATION_NONE = 'none';
 export const LINK_DESTINATION_MEDIA = 'media';
 export const LINK_DESTINATION_ATTACHMENT = 'attachment';
+export const LINK_DESTINATION_MEDIA_WP_CORE = 'file';
+export const LINK_DESTINATION_ATTACHMENT_WP_CORE = 'post';

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 ) => ( {
@@ -142,6 +155,14 @@ function GalleryEdit( props ) {
 				align: undefined,
 			} );
 		} );
+
+		// If new blocks added select the first of these so they scroll into view.
+		if ( newImages?.length ) {
+			multiSelect(
+				newImages[ 0 ].clientId,
+				newImages[ newImages?.length - 1 ].clientId
+			);
+		}
 	}, [ newImages ] );
 
 	const shortCodeImages = useShortCodeTransform( shortCodeTransforms );
@@ -408,26 +429,38 @@ function GalleryEdit( props ) {
 		( img ) => ! img.id && img.url?.indexOf( 'blob:' ) === 0
 	);
 
+	// MediaPlaceholder props are different between web and native hence, we provide a platform-specific set.
+	const mediaPlaceholderProps = Platform.select( {
+		web: {
+			addToGallery: false,
+			disableMediaButtons: imagesUploading,
+			value: {},
+		},
+		native: {
+			addToGallery: hasImageIds,
+			isAppender: hasImages,
+			disableMediaButtons:
+				( hasImages && ! isSelected ) || imagesUploading,
+			value: hasImageIds ? images : {},
+			autoOpenMediaUpload:
+				! hasImages && isSelected && wasBlockJustInserted,
+		},
+	} );
 	const mediaPlaceholder = (
 		<MediaPlaceholder
-			addToGallery={ hasImageIds }
 			handleUpload={ false }
-			isAppender={ hasImages }
-			disableMediaButtons={
-				( hasImages && ! isSelected ) || imagesUploading
-			}
-			icon={ ! hasImages && sharedIcon }
+			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 : {} }
 			onError={ onUploadError }
-			notices={ hasImages ? undefined : noticeUI }
+			notices={ noticeUI }
+			{ ...mediaPlaceholderProps }
 		/>
 	);
 
@@ -502,11 +535,27 @@ 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 || Platform.isNative
+						? 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/shared.js

@@ -31,7 +31,7 @@ export const pickRelevantMediaFiles = ( image, sizeSlug = 'large' ) => {
 export function isGalleryV2Enabled() {
 	// 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.GUTENBERG_PHASE === 2 ) {
+	if ( process.env.IS_GUTENBERG_PLUGIN ) {
 		// We want to fail early here, at least during beta testing phase, to ensure
 		// there aren't instances where undefined values cause false negatives.
 		if (

package/src/gallery/style.scss

@@ -30,6 +30,7 @@
 		margin-top: auto;
 		margin-bottom: auto;
 		flex-direction: column;
+		max-width: 100%;
 
 		> div,
 		> a {
@@ -41,7 +42,9 @@
 		img {
 			display: block;
 			height: auto;
-			max-width: 100%;
+			// Ensure max-width is not overridden on the img when the parent gallery has
+			// wide or full alignment.
+			max-width: 100% !important;
 			width: auto;
 		}
 
@@ -63,6 +66,10 @@
 			img {
 				display: inline;
 			}
+
+			a {
+				color: inherit;
+			}
 		}
 
 		&.is-style-rounded {

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

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Gallery block inserts block 1`] = `
+"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
+<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"></figure>
+<!-- /wp:gallery -->"
+`;

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

@@ -0,0 +1,128 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	fireEvent,
+	waitFor,
+	within,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+const GALLERY_WITH_ONE_IMAGE = `<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":1} -->
+<figure class="wp-block-image"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></figure>
+<!-- /wp:image --></figure>
+<!-- /wp:gallery -->`;
+
+const addGalleryBlock = async () => {
+	const screen = await initializeEditor();
+	const { getByA11yLabel, getByTestId, getByText } = screen;
+
+	fireEvent.press( getByA11yLabel( 'Add block' ) );
+
+	const blockList = getByTestId( 'InserterUI-Blocks' );
+	// onScroll event used to force the FlatList to render all items
+	fireEvent.scroll( blockList, {
+		nativeEvent: {
+			contentOffset: { y: 0, x: 0 },
+			contentSize: { width: 100, height: 100 },
+			layoutMeasurement: { width: 100, height: 100 },
+		},
+	} );
+
+	fireEvent.press( await waitFor( () => getByText( 'Gallery' ) ) );
+
+	return screen;
+};
+
+describe( 'Gallery block', () => {
+	it( 'inserts block', async () => {
+		const { getByA11yLabel } = await addGalleryBlock();
+
+		const galleryBlock = await waitFor( () =>
+			getByA11yLabel( /Gallery Block\. Row 1/ )
+		);
+
+		expect( galleryBlock ).toHaveProperty( 'type', 'View' );
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'selects a gallery item', async () => {
+		const { getByA11yLabel } = await initializeEditor( {
+			initialHtml: GALLERY_WITH_ONE_IMAGE,
+		} );
+
+		const galleryBlock = await waitFor( () =>
+			getByA11yLabel( /Gallery Block\. Row 1/ )
+		);
+		fireEvent.press( galleryBlock );
+
+		const innerBlockListWrapper = await waitFor( () =>
+			within( galleryBlock ).getByTestId( 'block-list-wrapper' )
+		);
+		fireEvent( innerBlockListWrapper, 'layout', {
+			nativeEvent: {
+				layout: {
+					width: 100,
+				},
+			},
+		} );
+
+		const galleryItem = await waitFor( () =>
+			getByA11yLabel( /Image Block\. Row 1/ )
+		);
+		fireEvent.press( galleryItem );
+
+		expect( galleryItem ).toHaveProperty( 'type', 'View' );
+	} );
+
+	it( 'shows appender button when gallery has images', async () => {
+		const { getByA11yLabel, getByText } = await initializeEditor( {
+			initialHtml: GALLERY_WITH_ONE_IMAGE,
+		} );
+
+		const galleryBlock = await waitFor( () =>
+			getByA11yLabel( /Gallery Block\. Row 1/ )
+		);
+		fireEvent.press( galleryBlock );
+
+		const innerBlockListWrapper = await waitFor( () =>
+			within( galleryBlock ).getByTestId( 'block-list-wrapper' )
+		);
+		fireEvent( innerBlockListWrapper, 'layout', {
+			nativeEvent: {
+				layout: {
+					width: 100,
+				},
+			},
+		} );
+
+		const appenderButton = await waitFor( () =>
+			within( galleryBlock ).getByA11yLabel( /Gallery block\. Empty/ )
+		);
+		fireEvent.press( appenderButton );
+
+		expect( getByText( 'Choose from device' ) ).toBeDefined();
+		expect( getByText( 'Take a Photo' ) ).toBeDefined();
+		expect( getByText( 'WordPress Media Library' ) ).toBeDefined();
+	} );
+} );

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

@@ -291,7 +291,10 @@ const transforms = {
 									url,
 									alt,
 									caption,
-									imageSizeSlug,
+									sizeSlug: imageSizeSlug,
+									linkDestination,
+									href,
+									linkTarget,
 								},
 							} ) =>
 								createBlock( 'core/image', {
@@ -301,6 +304,9 @@ const transforms = {
 									caption,
 									sizeSlug: imageSizeSlug,
 									align,
+									linkDestination,
+									href,
+									linkTarget,
 								} )
 						);
 					}

package/src/gallery/utils.js

@@ -5,6 +5,8 @@ import {
 	LINK_DESTINATION_ATTACHMENT,
 	LINK_DESTINATION_MEDIA,
 	LINK_DESTINATION_NONE,
+	LINK_DESTINATION_MEDIA_WP_CORE,
+	LINK_DESTINATION_ATTACHMENT_WP_CORE,
 } from './constants';
 import {
 	LINK_DESTINATION_ATTACHMENT as IMAGE_LINK_DESTINATION_ATTACHMENT,
@@ -21,15 +23,17 @@ import {
  * @return {Object}            New attributes to assign to image block.
  */
 export function getHrefAndDestination( image, destination ) {
-	// Need to determine the URL that the selected destination maps to.
-	// Gutenberg and WordPress use different constants so the new link
-	// destination also needs to be tweaked.
+	// Gutenberg and WordPress use different constants so if image_default_link_type
+	// option is set we need to map from the WP Core values.
+
 	switch ( destination ) {
+		case LINK_DESTINATION_MEDIA_WP_CORE:
 		case LINK_DESTINATION_MEDIA:
 			return {
 				href: image?.source_url || image?.url, // eslint-disable-line camelcase
 				linkDestination: IMAGE_LINK_DESTINATION_MEDIA,
 			};
+		case LINK_DESTINATION_ATTACHMENT_WP_CORE:
 		case LINK_DESTINATION_ATTACHMENT:
 			return {
 				href: image?.link,

package/src/group/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/group",
 	"title": "Group",
@@ -22,7 +23,11 @@
 		"html": false,
 		"color": {
 			"gradients": true,
-			"link": true
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
 		},
 		"spacing": {
 			"padding": true,
@@ -36,7 +41,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;
 }