@wordpress/block-library 8.29.0 → 8.30.0

package/src/form-input/edit.js

@@ -35,7 +35,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 		<>
 			{ 'hidden' !== type && (
 				<InspectorControls>
-					<PanelBody title={ __( 'Input settings' ) }>
+					<PanelBody title={ __( 'Settings' ) }>
 						{ 'checkbox' !== type && (
 							<CheckboxControl
 								label={ __( 'Inline label' ) }

package/src/gallery/edit.js

@@ -546,7 +546,7 @@ function GalleryEdit( props ) {
 							value={ sizeSlug }
 							options={ imageSizeOptions }
 							onChange={ updateImagesSize }
-							hideCancelButton={ true }
+							hideCancelButton
 							size="__unstable-large"
 						/>
 					) }
@@ -556,7 +556,7 @@ function GalleryEdit( props ) {
 						value={ linkTo }
 						onChange={ setLinkTo }
 						options={ linkOptions }
-						hideCancelButton={ true }
+						hideCancelButton
 						size="__unstable-large"
 					/>
 					<ToggleControl
@@ -602,7 +602,7 @@ function GalleryEdit( props ) {
 								handleUpload={ false }
 								onSelect={ updateImages }
 								name={ __( 'Add' ) }
-								multiple={ true }
+								multiple
 								mediaIds={ images
 									.filter( ( image ) => image.id )
 									.map( ( image ) => image.id ) }

package/src/gallery/gallery.native.js

@@ -100,7 +100,7 @@ export const Gallery = ( props ) => {
 			<BlockCaption
 				clientId={ clientId }
 				isSelected={ isCaptionSelected }
-				accessible={ true }
+				accessible
 				accessibilityLabelCreator={ ( caption ) =>
 					RichText.isEmpty( caption )
 						? /* translators: accessibility text. Empty gallery caption. */

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

@@ -92,7 +92,7 @@ describe( 'Gallery block', () => {
 		expect( getBlock( screen, 'Gallery' ) ).toBeVisible();
 		expect( getEditorHtml() ).toMatchSnapshot();
 
-		getBlockSpy.mockReset();
+		getBlockSpy.mockRestore();
 	} );
 
 	it( 'selects a gallery item', async () => {

package/src/gallery/v1/edit.js

@@ -411,7 +411,7 @@ function GalleryEdit( props ) {
 						value={ linkTo }
 						onChange={ setLinkTo }
 						options={ linkOptions }
-						hideCancelButton={ true }
+						hideCancelButton
 					/>
 					{ shouldShowSizeOptions && (
 						<SelectControl
@@ -420,7 +420,7 @@ function GalleryEdit( props ) {
 							value={ sizeSlug }
 							options={ imageSizeOptions }
 							onChange={ updateImagesSize }
-							hideCancelButton={ true }
+							hideCancelButton
 						/>
 					) }
 				</PanelBody>

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

@@ -140,7 +140,7 @@ export const Gallery = ( props ) => {
 			<BlockCaption
 				clientId={ clientId }
 				isSelected={ isCaptionSelected }
-				accessible={ true }
+				accessible
 				accessibilityLabelCreator={ ( caption ) =>
 					RichText.isEmpty( caption )
 						? /* translators: accessibility text. Empty gallery caption. */

package/src/group/editor.scss

@@ -65,7 +65,6 @@
 		margin: 0;
 	}
 	.components-placeholder__instructions {
-		text-align: center;
 		margin-bottom: 18px;
 	}
 	.wp-block-group-placeholder__variations svg {
@@ -92,6 +91,7 @@
 	.components-placeholder {
 		min-height: auto;
 		padding: $grid-unit-30;
+		align-items: center;
 	}
 	.is-small,
 	.is-medium {

package/src/heading/transforms.js

@@ -7,6 +7,7 @@ import { createBlock, getBlockAttributes } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { getLevelFromHeadingNodeName } from './shared';
+import { getTransformedMetadata } from '../utils/get-transformed-metadata';
 
 const transforms = {
 	from: [
@@ -15,12 +16,20 @@ const transforms = {
 			isMultiBlock: true,
 			blocks: [ 'core/paragraph' ],
 			transform: ( attributes ) =>
-				attributes.map( ( { content, anchor, align: textAlign } ) =>
-					createBlock( 'core/heading', {
-						content,
-						anchor,
-						textAlign,
-					} )
+				attributes.map(
+					( { content, anchor, align: textAlign, metadata } ) =>
+						createBlock( 'core/heading', {
+							content,
+							anchor,
+							textAlign,
+							metadata: getTransformedMetadata(
+								metadata,
+								'core/heading',
+								( { content: contentBinding } ) => ( {
+									content: contentBinding,
+								} )
+							),
+						} )
 				),
 		},
 		{
@@ -82,8 +91,18 @@ const transforms = {
 			isMultiBlock: true,
 			blocks: [ 'core/paragraph' ],
 			transform: ( attributes ) =>
-				attributes.map( ( { content, textAlign: align } ) =>
-					createBlock( 'core/paragraph', { content, align } )
+				attributes.map( ( { content, textAlign: align, metadata } ) =>
+					createBlock( 'core/paragraph', {
+						content,
+						align,
+						metadata: getTransformedMetadata(
+							metadata,
+							'core/paragraph',
+							( { content: contentBinding } ) => ( {
+								content: contentBinding,
+							} )
+						),
+					} )
 				),
 		},
 	],

package/src/image/edit.js

@@ -7,6 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
+import { store as blocksStore } from '@wordpress/blocks';
 import { Placeholder } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
@@ -19,7 +20,7 @@ import {
 	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { useEffect, useRef, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { image as icon, plugins as pluginsIcon } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 
@@ -335,14 +336,14 @@ export function ImageEdit( {
 	} );
 
 	// Much of this description is duplicated from MediaPlaceholder.
-	const { lockUrlControls = false } = useSelect(
+	const { lockUrlControls = false, lockUrlControlsMessage } = useSelect(
 		( select ) => {
 			if ( ! isSingleSelected ) {
 				return {};
 			}
 
 			const blockBindingsSource = unlock(
-				select( blockEditorStore )
+				select( blocksStore )
 			).getBlockBindingsSource( metadata?.bindings?.url?.source );
 
 			return {
@@ -350,6 +351,13 @@ export function ImageEdit( {
 					!! metadata?.bindings?.url &&
 					( ! blockBindingsSource ||
 						blockBindingsSource?.lockAttributesEditing ),
+				lockUrlControlsMessage: blockBindingsSource?.label
+					? sprintf(
+							/* translators: %s: Label of the bindings source. */
+							__( 'Connected to %s' ),
+							blockBindingsSource.label
+					  )
+					: __( 'Connected to dynamic data' ),
 			};
 		},
 		[ isSingleSelected ]
@@ -361,7 +369,7 @@ export function ImageEdit( {
 					[ borderProps.className ]:
 						!! borderProps.className && ! isSingleSelected,
 				} ) }
-				withIllustration={ true }
+				withIllustration
 				icon={ lockUrlControls ? pluginsIcon : icon }
 				label={ __( 'Image' ) }
 				instructions={
@@ -386,7 +394,7 @@ export function ImageEdit( {
 					<span
 						className={ 'block-bindings-media-placeholder-message' }
 					>
-						{ __( 'Connected to a custom field' ) }
+						{ lockUrlControlsMessage }
 					</span>
 				) : (
 					content

package/src/image/edit.native.js

@@ -889,7 +889,7 @@ export class ImageEdit extends Component {
 		return (
 			<MediaUpload
 				allowedTypes={ [ MEDIA_TYPE_IMAGE ] }
-				isReplacingMedia={ true }
+				isReplacingMedia
 				onSelect={ this.onSelectMediaUploadOption }
 				onSelectURL={ this.onSelectURL }
 				render={ ( { open, getMediaOptions } ) => {

package/src/image/editor.scss

@@ -1,6 +1,12 @@
 // Provide special styling for the placeholder.
 // @todo: this particular minimal style of placeholder could be componentized further.
 .wp-block-image.wp-block-image {
+
+	&:not(.is-selected) .components-placeholder__fieldset {
+		// Show only is selected.
+		display: none;
+	}
+
 	// Show Placeholder style on-select.
 	&.is-selected .components-placeholder {
 		// Block UI appearance.

package/src/image/image.js

@@ -33,7 +33,7 @@ import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
 import { __, _x, sprintf, isRTL } from '@wordpress/i18n';
 import { DOWN } from '@wordpress/keycodes';
 import { getFilename } from '@wordpress/url';
-import { switchToBlockType } from '@wordpress/blocks';
+import { switchToBlockType, store as blocksStore } from '@wordpress/blocks';
 import { crop, overlayText, upload } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
@@ -78,7 +78,7 @@ const ImageWrapper = ( { href, children } ) => {
 		<a
 			href={ href }
 			onClick={ ( event ) => event.preventDefault() }
-			aria-disabled={ true }
+			aria-disabled
 			style={ {
 				// When the Image block is linked,
 				// it's wrapped with a disabled <a /> tag.
@@ -410,15 +410,19 @@ export default function Image( {
 		lockUrlControls = false,
 		lockHrefControls = false,
 		lockAltControls = false,
+		lockAltControlsMessage,
 		lockTitleControls = false,
+		lockTitleControlsMessage,
+		lockCaption = false,
 	} = useSelect(
 		( select ) => {
 			if ( ! isSingleSelected ) {
 				return {};
 			}
-
-			const { getBlockBindingsSource, getBlockParentsByBlockName } =
-				unlock( select( blockEditorStore ) );
+			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
+			const { getBlockParentsByBlockName } = unlock(
+				select( blockEditorStore )
+			);
 			const {
 				url: urlBinding,
 				alt: altBinding,
@@ -444,14 +448,32 @@ export default function Image( {
 					// Disable editing the link of the URL if the image is inside a pattern instance.
 					// This is a temporary solution until we support overriding the link on the frontend.
 					hasParentPattern,
+				lockCaption:
+					// Disable editing the caption if the image is inside a pattern instance.
+					// This is a temporary solution until we support overriding the caption on the frontend.
+					hasParentPattern,
 				lockAltControls:
 					!! altBinding &&
 					( ! altBindingSource ||
 						altBindingSource?.lockAttributesEditing ),
+				lockAltControlsMessage: altBindingSource?.label
+					? sprintf(
+							/* translators: %s: Label of the bindings source. */
+							__( 'Connected to %s' ),
+							altBindingSource.label
+					  )
+					: __( 'Connected to dynamic data' ),
 				lockTitleControls:
 					!! titleBinding &&
 					( ! titleBindingSource ||
 						titleBindingSource?.lockAttributesEditing ),
+				lockTitleControlsMessage: titleBindingSource?.label
+					? sprintf(
+							/* translators: %s: Label of the bindings source. */
+							__( 'Connected to %s' ),
+							titleBindingSource.label
+					  )
+					: __( 'Connected to dynamic data' ),
 			};
 		},
 		[ clientId, isSingleSelected, metadata?.bindings ]
@@ -551,11 +573,7 @@ export default function Image( {
 								disabled={ lockAltControls }
 								help={
 									lockAltControls ? (
-										<>
-											{ __(
-												'Connected to a custom field'
-											) }
-										</>
+										<>{ lockAltControlsMessage }</>
 									) : (
 										<>
 											<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
@@ -601,11 +619,7 @@ export default function Image( {
 								disabled={ lockTitleControls }
 								help={
 									lockTitleControls ? (
-										<>
-											{ __(
-												'Connected to a custom field'
-											) }
-										</>
+										<>{ lockTitleControlsMessage }</>
 									) : (
 										<>
 											{ __(
@@ -633,7 +647,7 @@ export default function Image( {
 					{ isSingleSelected && (
 						<ToolsPanelItem
 							label={ __( 'Alternative text' ) }
-							isShownByDefault={ true }
+							isShownByDefault
 							hasValue={ () => !! alt }
 							onDeselect={ () =>
 								setAttributes( { alt: undefined } )
@@ -646,11 +660,7 @@ export default function Image( {
 								readOnly={ lockAltControls }
 								help={
 									lockAltControls ? (
-										<>
-											{ __(
-												'Connected to a custom field'
-											) }
-										</>
+										<>{ lockAltControlsMessage }</>
 									) : (
 										<>
 											<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
@@ -688,7 +698,7 @@ export default function Image( {
 					readOnly={ lockTitleControls }
 					help={
 						lockTitleControls ? (
-							<>{ __( 'Connected to a custom field' ) }</>
+							<>{ lockTitleControlsMessage }</>
 						) : (
 							<>
 								{ __(
@@ -907,6 +917,7 @@ export default function Image( {
 				which causes duplicated image upload. */ }
 			{ ! temporaryURL && controls }
 			{ img }
+
 			<Caption
 				attributes={ attributes }
 				setAttributes={ setAttributes }
@@ -914,6 +925,7 @@ export default function Image( {
 				insertBlocksAfter={ insertBlocksAfter }
 				label={ __( 'Image caption text' ) }
 				showToolbarButton={ isSingleSelected && hasNonContentControls }
+				disableEditing={ lockCaption }
 			/>
 		</>
 	);

package/src/latest-posts/edit.native.js

@@ -201,7 +201,7 @@ class LatestPostsEdit extends Component {
 								value={ featuredImageAlign }
 								onChange={ this.onSetFeaturedImageAlign }
 								controls={ [ 'left', 'center', 'right' ] }
-								isBottomSheetControl={ true }
+								isBottomSheetControl
 							/>
 							<ToggleControl
 								label={ __( 'Add link to featured image' ) }

package/src/list/ordered-list-settings.js

@@ -12,7 +12,7 @@ import {
 
 const OrderedListSettings = ( { setAttributes, reversed, start, type } ) => (
 	<InspectorControls>
-		<PanelBody title={ __( 'Ordered list settings' ) }>
+		<PanelBody title={ __( 'Settings' ) }>
 			<TextControl
 				__nextHasNoMarginBottom
 				label={ __( 'Start value' ) }

package/src/list-item/edit.js

@@ -29,7 +29,6 @@ import {
 	useOutdentListItem,
 	useSplit,
 	useMerge,
-	useCopy,
 } from './hooks';
 import { convertToListItems } from './utils';
 
@@ -79,7 +78,7 @@ export default function ListItemEdit( {
 	mergeBlocks,
 } ) {
 	const { placeholder, content } = attributes;
-	const blockProps = useBlockProps( { ref: useCopy( clientId ) } );
+	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		renderAppender: false,
 		__unstableDisableDropZone: true,

package/src/list-item/edit.native.js

@@ -181,7 +181,7 @@ export default function ListItemEdit( {
 						onReplace={ onReplaceList }
 						onEnter={ onEnter }
 						style={ styleWithPlaceholderOpacity }
-						deleteEnter={ true }
+						deleteEnter
 						containerWidth={ contentWidth }
 					/>
 				</View>

package/src/list-item/hooks/index.js

@@ -4,4 +4,3 @@ export { default as useEnter } from './use-enter';
 export { default as useSpace } from './use-space';
 export { default as useSplit } from './use-split';
 export { default as useMerge } from './use-merge';
-export { default as useCopy } from './use-copy';

package/src/list-item/hooks/use-indent-list-item.js

@@ -61,5 +61,7 @@ export default function useIndentListItem( clientId ) {
 				clonedBlocks[ clonedBlocks.length - 1 ].clientId
 			);
 		}
+
+		return true;
 	}, [ clientId ] );
 }

package/src/list-item/hooks/use-outdent-list-item.js

@@ -93,5 +93,7 @@ export default function useOutdentListItem() {
 				removeBlock( parentListId, shouldSelectParent );
 			}
 		} );
+
+		return true;
 	}, [] );
 }

package/src/list-item/hooks/use-space.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useRefEffect } from '@wordpress/compose';
-import { SPACE } from '@wordpress/keycodes';
+import { SPACE, TAB } from '@wordpress/keycodes';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 
@@ -10,11 +10,13 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import useIndentListItem from './use-indent-list-item';
+import useOutdentListItem from './use-outdent-list-item';
 
 export default function useSpace( clientId ) {
 	const { getSelectionStart, getSelectionEnd, getBlockIndex } =
 		useSelect( blockEditorStore );
 	const indentListItem = useIndentListItem( clientId );
+	const outdentListItem = useOutdentListItem();
 
 	return useRefEffect(
 		( element ) => {
@@ -23,9 +25,8 @@ export default function useSpace( clientId ) {
 
 				if (
 					event.defaultPrevented ||
-					keyCode !== SPACE ||
+					( keyCode !== SPACE && keyCode !== TAB ) ||
 					// Only override when no modifiers are pressed.
-					shiftKey ||
 					altKey ||
 					metaKey ||
 					ctrlKey
@@ -33,18 +34,24 @@ export default function useSpace( clientId ) {
 					return;
 				}
 
-				if ( getBlockIndex( clientId ) === 0 ) {
-					return;
-				}
-
 				const selectionStart = getSelectionStart();
 				const selectionEnd = getSelectionEnd();
 				if (
 					selectionStart.offset === 0 &&
 					selectionEnd.offset === 0
 				) {
-					event.preventDefault();
-					indentListItem();
+					if ( shiftKey ) {
+						// Note that backspace behaviour in defined in onMerge.
+						if ( keyCode === TAB ) {
+							if ( outdentListItem() ) {
+								event.preventDefault();
+							}
+						}
+					} else if ( getBlockIndex( clientId ) !== 0 ) {
+						if ( indentListItem() ) {
+							event.preventDefault();
+						}
+					}
 				}
 			}
 

package/src/list-item/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { listItem as icon } from '@wordpress/icons';
+import { privateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -11,6 +12,7 @@ import metadata from './block.json';
 import edit from './edit';
 import save from './save';
 import transforms from './transforms';
+import { unlock } from '../lock-unlock';
 
 const { name } = metadata;
 
@@ -27,6 +29,7 @@ export const settings = {
 		};
 	},
 	transforms,
+	[ unlock( privateApis ).requiresWrapperOnCopy ]: true,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/media-text/media-container.native.js

@@ -265,7 +265,7 @@ class MediaContainer extends Component {
 										isSelected={ isSelected }
 										style={ styles.video }
 										source={ { uri: mediaUrl } }
-										paused={ true }
+										paused
 									/>
 								</View>
 							) }
@@ -329,7 +329,7 @@ class MediaContainer extends Component {
 		if ( mediaUrl ) {
 			return (
 				<MediaUpload
-					isReplacingMedia={ true }
+					isReplacingMedia
 					onSelect={ this.onSelectMediaUploadOption }
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
 					value={ mediaId }
@@ -341,7 +341,9 @@ class MediaContainer extends Component {
 								{ getMediaOptions() }
 
 								<MediaUploadProgress
-									enablePausedUploads
+									enablePausedUploads={
+										mediaType === MEDIA_TYPE_IMAGE
+									}
 									coverUrl={ coverUrl }
 									mediaId={ mediaId }
 									onUpdateMediaProgress={

package/src/media-text/test/edit.native.js

@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	fireEvent,
+	initializeEditor,
+	screen,
+	setupCoreBlocks,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	requestMediaPicker,
+	sendMediaUpload,
+	subscribeMediaUpload,
+} from '@wordpress/react-native-bridge';
+import { MEDIA_UPLOAD_STATE_PAUSED } from '@wordpress/block-editor';
+
+let uploadCallBack;
+subscribeMediaUpload.mockImplementation( ( callback ) => {
+	uploadCallBack = callback;
+} );
+sendMediaUpload.mockImplementation( ( payload ) => {
+	uploadCallBack( payload );
+} );
+
+setupCoreBlocks( [ 'core/media-text' ] );
+
+describe( 'Media & Text block edit', () => {
+	it( 'should display an error message for failed video uploads', async () => {
+		requestMediaPicker.mockImplementation(
+			( source, filter, multiple, callback ) => {
+				callback( {
+					id: 1,
+					url: 'file://video.mp4',
+					type: 'video',
+				} );
+			}
+		);
+		await initializeEditor();
+		await addBlock( screen, 'Media & Text' );
+		fireEvent.press( screen.getByText( 'Add image or video' ) );
+		fireEvent.press( screen.getByText( 'Choose from device' ) );
+
+		sendMediaUpload( {
+			mediaId: 1,
+			state: MEDIA_UPLOAD_STATE_PAUSED,
+			progress: 0,
+		} );
+
+		expect(
+			screen.getByText( 'Failed to insert media.\nTap for more info.' )
+		).toBeVisible();
+	} );
+} );

package/src/missing/test/edit-integration.native.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import {
+	act,
 	fireEvent,
 	getBlock,
 	initializeEditor,
@@ -117,7 +118,7 @@ describe( 'Unsupported block', () => {
 				screen.getByTestId( 'bottom-sheet' ),
 				MODAL_DISMISS_EVENT
 			);
-			jest.runOnlyPendingTimers();
+			act( () => jest.runOnlyPendingTimers() );
 		} );
 		expect( requestUnsupportedBlockFallback ).toHaveBeenCalled();
 	} );

package/src/navigation/edit/index.js

@@ -672,7 +672,7 @@ function Navigation( {
 						panelId={ clientId }
 						{ ...colorGradientSettings }
 						gradients={ [] }
-						disableCustomGradients={ true }
+						disableCustomGradients
 					/>
 					{ enableContrastChecking && (
 						<>