@wordpress/block-library 8.28.5 → 8.30.0

package/src/file/edit.native.js

@@ -282,7 +282,7 @@ export class FileEdit extends Component {
 						value={ textLinkHref }
 						onChange={ this.onChangeLinkDestinationOption }
 						options={ linkDestinationOptions }
-						hideCancelButton={ true }
+						hideCancelButton
 					/>
 					<ToggleControl
 						icon={ external }
@@ -469,7 +469,7 @@ export class FileEdit extends Component {
 										tagName="p"
 										underlineColorAndroid="transparent"
 										value={ fileName }
-										deleteEnter={ true }
+										deleteEnter
 										textAlign={ this.getTextAlignmentForAlignment(
 											align
 										) }
@@ -505,7 +505,7 @@ export class FileEdit extends Component {
 												textAlign="center"
 												minWidth={ minWidth }
 												maxWidth={ this.state.maxWidth }
-												deleteEnter={ true }
+												deleteEnter
 												style={ styles.buttonText }
 												value={ downloadButtonText }
 												placeholder={ placeholderText }
@@ -565,7 +565,7 @@ export class FileEdit extends Component {
 		return (
 			<MediaUpload
 				allowedTypes={ [ MEDIA_TYPE_ANY ] }
-				isReplacingMedia={ true }
+				isReplacingMedia
 				onSelect={ this.onSelectFile }
 				render={ ( { open, getMediaOptions } ) => {
 					return this.getFileComponent( open, getMediaOptions );

package/src/file/save.js

@@ -73,7 +73,7 @@ export default function save( { attributes } ) {
 							'wp-block-file__button',
 							__experimentalGetElementClassName( 'button' )
 						) }
-						download={ true }
+						download
 						aria-describedby={ describedById }
 					>
 						<RichText.Content value={ downloadButtonText } />

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

@@ -73,6 +73,7 @@ const MOBILE_CONTROL_PROPS_RANGE_CONTROL = Platform.isNative
 	? { type: 'stepper' }
 	: {};
 
+const DEFAULT_BLOCK = { name: 'core/image' };
 const EMPTY_ARRAY = [];
 
 function GalleryEdit( props ) {
@@ -102,7 +103,6 @@ function GalleryEdit( props ) {
 	const {
 		getBlock,
 		getSettings,
-		preferredStyle,
 		innerBlockImages,
 		blockWasJustInserted,
 		multiGallerySelection,
@@ -115,15 +115,11 @@ function GalleryEdit( props ) {
 				getBlock: _getBlock,
 				wasBlockJustInserted,
 			} = select( blockEditorStore );
-			const preferredStyleVariations =
-				_getSettings().__experimentalPreferredStyleVariations;
 			const multiSelectedClientIds = getMultiSelectedBlockClientIds();
 
 			return {
 				getBlock: _getBlock,
 				getSettings: _getSettings,
-				preferredStyle:
-					preferredStyleVariations?.value?.[ 'core/image' ],
 				innerBlockImages:
 					_getBlock( clientId )?.innerBlocks ?? EMPTY_ARRAY,
 				blockWasJustInserted: wasBlockJustInserted(
@@ -195,10 +191,6 @@ function GalleryEdit( props ) {
 		let newClassName;
 		if ( imageAttributes.className && imageAttributes.className !== '' ) {
 			newClassName = imageAttributes.className;
-		} else {
-			newClassName = preferredStyle
-				? `is-style-${ preferredStyle }`
-				: undefined;
 		}
 
 		let newLinkTarget;
@@ -505,6 +497,8 @@ function GalleryEdit( props ) {
 	};
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		defaultBlock: DEFAULT_BLOCK,
+		directInsert: true,
 		orientation: 'horizontal',
 		renderAppender: false,
 		...nativeInnerBlockProps,
@@ -552,7 +546,7 @@ function GalleryEdit( props ) {
 							value={ sizeSlug }
 							options={ imageSizeOptions }
 							onChange={ updateImagesSize }
-							hideCancelButton={ true }
+							hideCancelButton
 							size="__unstable-large"
 						/>
 					) }
@@ -562,7 +556,7 @@ function GalleryEdit( props ) {
 						value={ linkTo }
 						onChange={ setLinkTo }
 						options={ linkOptions }
-						hideCancelButton={ true }
+						hideCancelButton
 						size="__unstable-large"
 					/>
 					<ToggleControl
@@ -608,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/group/variations.js

@@ -42,10 +42,7 @@ const variations = [
 			blockAttributes.layout?.orientation === 'vertical',
 		icon: stack,
 	},
-];
-
-if ( window?.__experimentalEnableGroupGridVariation ) {
-	variations.push( {
+	{
 		name: 'group-grid',
 		title: __( 'Grid' ),
 		description: __( 'Arrange blocks in a grid.' ),
@@ -54,7 +51,7 @@ if ( window?.__experimentalEnableGroupGridVariation ) {
 		isActive: ( blockAttributes ) =>
 			blockAttributes.layout?.type === 'grid',
 		icon: grid,
-	} );
-}
+	},
+];
 
 export default variations;

package/src/image/edit.js

@@ -369,7 +369,7 @@ export function ImageEdit( {
 					[ borderProps.className ]:
 						!! borderProps.className && ! isSingleSelected,
 				} ) }
-				withIllustration={ true }
+				withIllustration
 				icon={ lockUrlControls ? pluginsIcon : icon }
 				label={ __( 'Image' ) }
 				instructions={

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

@@ -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.
@@ -647,7 +647,7 @@ export default function Image( {
 					{ isSingleSelected && (
 						<ToolsPanelItem
 							label={ __( 'Alternative text' ) }
-							isShownByDefault={ true }
+							isShownByDefault
 							hasValue={ () => !! alt }
 							onDeselect={ () =>
 								setAttributes( { alt: undefined } )

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

@@ -29,6 +29,9 @@ import OrderedListSettings from './ordered-list-settings';
 import { migrateToListV2 } from './utils';
 import TagName from './tag-name';
 
+const DEFAULT_BLOCK = {
+	name: 'core/list-item',
+};
 const TEMPLATE = [ [ 'core/list-item' ] ];
 const NATIVE_MARGIN_SPACING = 8;
 
@@ -125,6 +128,8 @@ export default function Edit( { attributes, setAttributes, clientId, style } ) {
 	} );
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		defaultBlock: DEFAULT_BLOCK,
+		directInsert: true,
 		template: TEMPLATE,
 		templateLock: false,
 		templateInsertUpdatesSelection: true,

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.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/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/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 && (
 						<>

package/src/navigation/edit/test/navigation-menu-selector.js

@@ -288,7 +288,7 @@ describe( 'NavigationMenuSelector', () => {
 				rerender(
 					<NavigationMenuSelector
 						onCreateNew={ handler }
-						createNavigationMenuIsSuccess={ true }
+						createNavigationMenuIsSuccess
 					/>
 				);
 
@@ -475,7 +475,7 @@ describe( 'NavigationMenuSelector', () => {
 				// // Simulate the menu being created and component being re-rendered.
 				rerender(
 					<NavigationMenuSelector
-						createNavigationMenuIsSuccess={ true } // classic menu import creates a Navigation menu.
+						createNavigationMenuIsSuccess // classic menu import creates a Navigation menu.
 					/>
 				);
 
@@ -616,7 +616,7 @@ describe( 'NavigationMenuSelector', () => {
 				// Simulate the menu being created and component being re-rendered.
 				rerender(
 					<NavigationMenuSelector
-						createNavigationMenuIsSuccess={ true } // classic menu import creates a Navigation menu.
+						createNavigationMenuIsSuccess // classic menu import creates a Navigation menu.
 					/>
 				);
 

package/src/navigation/index.php

@@ -544,7 +544,6 @@ class WP_Navigation_Block_Renderer {
 	 * Gets the nav element directives.
 	 *
 	 * @param bool  $is_interactive Whether the block is interactive.
-	 * @param array $attributes     The block attributes.
 	 * @return string the directives for the navigation element.
 	 */
 	private static function get_nav_element_directives( $is_interactive ) {
@@ -1458,13 +1457,18 @@ function block_core_navigation_set_ignored_hooked_blocks_metadata( $inner_blocks
 /**
  * Updates the post meta with the list of ignored hooked blocks when the navigation is created or updated via the REST API.
  *
- * @param WP_Post $post Post object.
+ * @param stdClass $post Post object.
  */
 function block_core_navigation_update_ignore_hooked_blocks_meta( $post ) {
 	// We run the Block Hooks mechanism to inject the `metadata.ignoredHookedBlocks` attribute into
 	// all anchor blocks. For the root level, we create a mock Navigation and extract them from there.
 	$blocks = parse_blocks( $post->post_content );
-	$markup = block_core_navigation_set_ignored_hooked_blocks_metadata( $blocks, $post );
+
+	// Block Hooks logic requires a `WP_Post` object (rather than the `stdClass` with the updates that
+	// we're getting from the `rest_pre_insert_wp_navigation` filter) as its second argument (to be
+	// used as context for hooked blocks insertion).
+	// We thus have to look it up from the DB,based on `$post->ID`.
+	$markup = block_core_navigation_set_ignored_hooked_blocks_metadata( $blocks, get_post( $post->ID ) );
 
 	$root_nav_block        = parse_blocks( $markup )[0];
 	$ignored_hooked_blocks = isset( $root_nav_block['attrs']['metadata']['ignoredHookedBlocks'] )
@@ -1480,14 +1484,8 @@ function block_core_navigation_update_ignore_hooked_blocks_meta( $post ) {
 		update_post_meta( $post->ID, '_wp_ignored_hooked_blocks', json_encode( $ignored_hooked_blocks ) );
 	}
 
-	$serialized_inner_blocks = block_core_navigation_remove_serialized_parent_block( $markup );
-
-	wp_update_post(
-		array(
-			'ID'           => $post->ID,
-			'post_content' => $serialized_inner_blocks,
-		)
-	);
+	$post->post_content = block_core_navigation_remove_serialized_parent_block( $markup );
+	return $post;
 }
 
 // Before adding our filter, we verify if it's already added in Core.
@@ -1497,8 +1495,15 @@ $rest_insert_wp_navigation_core_callback = 'block_core_navigation_' . 'update_ig
 
 // Injection of hooked blocks into the Navigation block relies on some functions present in WP >= 6.5
 // that are not present in Gutenberg's WP 6.5 compatibility layer.
-if ( function_exists( 'set_ignored_hooked_blocks_metadata' ) && ! has_filter( 'rest_insert_wp_navigation', $rest_insert_wp_navigation_core_callback ) ) {
-	add_action( 'rest_insert_wp_navigation', 'block_core_navigation_update_ignore_hooked_blocks_meta', 10, 3 );
+if ( function_exists( 'set_ignored_hooked_blocks_metadata' ) && ! has_filter( 'rest_pre_insert_wp_navigation', $rest_insert_wp_navigation_core_callback ) ) {
+	add_filter( 'rest_pre_insert_wp_navigation', 'block_core_navigation_update_ignore_hooked_blocks_meta', 10 );
+}
+
+// Previous versions of Gutenberg and WordPress 6.5 Betas were attaching the block_core_navigation_update_ignore_hooked_blocks_meta
+// function to the `rest_insert_wp_navigation` _action_ (rather than the `rest_pre_insert_wp_navigation` _filter_).
+// To avoid collisions, we need to remove the filter from that action if it's present.
+if ( has_filter( 'rest_insert_wp_navigation', $rest_insert_wp_navigation_core_callback ) ) {
+	remove_filter( 'rest_insert_wp_navigation', $rest_insert_wp_navigation_core_callback, 10 );
 }
 
 /**

package/src/navigation-link/link-ui.js

@@ -137,7 +137,7 @@ function LinkUIBlockInserter( { clientId, onBack, onSelectBlock } ) {
 				clientId={ clientId }
 				isAppender={ false }
 				prioritizePatterns={ false }
-				selectBlockOnInsert={ true }
+				selectBlockOnInsert
 				hasSearch={ false }
 				onSelect={ onSelectBlock }
 			/>
@@ -247,7 +247,7 @@ export function LinkUI( props ) {
 							hasTextControl
 							hasRichPreviews
 							value={ link }
-							showInitialSuggestions={ true }
+							showInitialSuggestions
 							withCreateSuggestion={ userCanCreate }
 							createSuggestion={ handleCreate }
 							createSuggestionButtonText={ ( searchTerm ) => {

package/src/paragraph/edit.native.js

@@ -65,7 +65,7 @@ function ParagraphBlock( {
 				identifier="content"
 				tagName="p"
 				value={ content }
-				deleteEnter={ true }
+				deleteEnter
 				style={ styles }
 				onChange={ ( nextContent ) => {
 					setAttributes( {