@wordpress/block-library 7.14.2 → 7.15.1-next.4d3b314fd5.0

package/src/comments-pagination-next/block.json

@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/comments-pagination-next",
-	"title": "Next Page",
+	"title": "Comments Next Page",
 	"category": "theme",
 	"parent": [ "core/comments-pagination" ],
 	"description": "Displays the next comment's page link.",

package/src/comments-pagination-numbers/block.json

@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/comments-pagination-numbers",
-	"title": "Page Numbers",
+	"title": "Comments Page Numbers",
 	"category": "theme",
 	"parent": [ "core/comments-pagination" ],
 	"description": "Displays a list of page numbers for comments pagination.",
@@ -11,6 +11,13 @@
 	"supports": {
 		"reusable": false,
 		"html": false,
+		"color": {
+			"gradients": true,
+			"text": false,
+			"__experimentalDefaultControls": {
+				"background": true
+			}
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/comments-pagination-previous/block.json

@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/comments-pagination-previous",
-	"title": "Previous Page",
+	"title": "Comments Previous Page",
 	"category": "theme",
 	"parent": [ "core/comments-pagination" ],
 	"description": "Displays the previous comment's page link.",

package/src/comments-title/edit.js

@@ -104,7 +104,7 @@ export default function Edit( {
 		</InspectorControls>
 	);
 
-	const postTitle = isSiteEditor ? __( '"Post Title"' ) : `"${ rawTitle }"`;
+	const postTitle = isSiteEditor ? __( '“Post Title”' ) : `"${ rawTitle }"`;
 
 	let placeholder;
 	if ( showCommentsCount && commentsCount !== undefined ) {

package/src/cover/edit/use-cover-is-dark.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import FastAverageColor from 'fast-average-color';
+import { FastAverageColor } from 'fast-average-color';
 import { colord } from 'colord';
 
 /**
@@ -41,12 +41,16 @@ export default function useCoverIsDark(
 		// If opacity is lower than 50 the dominant color is the image or video color,
 		// so use that color for the dark mode computation.
 		if ( url && dimRatio <= 50 && elementRef.current ) {
-			retrieveFastAverageColor().getColorAsync(
-				elementRef.current,
-				( color ) => {
-					setIsDark( color.isDark );
-				}
-			);
+			retrieveFastAverageColor()
+				.getColorAsync( elementRef.current, {
+					// Previously the default color was white, but that changed
+					// in v6.0.0 so it has to be manually set now.
+					defaultColor: [ 255, 255, 255, 255 ],
+					// Errors that come up don't reject the promise, so error
+					// logging has to be silenced with this option.
+					silent: process.env.NODE_ENV === 'production',
+				} )
+				.then( ( color ) => setIsDark( color.isDark ) );
 		}
 	}, [ url, url && dimRatio <= 50 && elementRef.current, setIsDark ] );
 	useEffect( () => {

package/src/cover/index.js

@@ -30,9 +30,16 @@ export const settings = {
 			{
 				name: 'core/paragraph',
 				attributes: {
-					customFontSize: 48,
 					content: __( '<strong>Snow Patrol</strong>' ),
 					align: 'center',
+					style: {
+						typography: {
+							fontSize: 48,
+						},
+						color: {
+							text: 'white',
+						},
+					},
 				},
 			},
 		],

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

@@ -31,3 +31,67 @@ exports[`color settings toggles between solid colors and gradients 1`] = `
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;
+
+exports[`minimum height settings changes the height value between units 1`] = `
+"<!-- wp:cover {\\"url\\":\\"https://cldup.com/cXyG__fTLN.jpg\\",\\"id\\":10710,\\"dimRatio\\":50,\\"overlayColor\\":\\"foreground\\",\\"minHeight\\":50,\\"minHeightUnit\\":\\"px\\",\\"isDark\\":false} -->
+<div class=\\"wp-block-cover is-light\\" style=\\"min-height:50px\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-foreground-background-color has-background-dim\\"></span><img class=\\"wp-block-cover__image-background wp-image-10710\\" alt=\\"\\" src=\\"https://cldup.com/cXyG__fTLN.jpg\\" data-object-fit=\\"cover\\"/><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\",\\"fontSize\\":\\"large\\"} -->
+<p class=\\"has-text-align-center has-large-font-size\\"></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->"
+`;
+
+exports[`minimum height settings changes the height value to 20(vw) 1`] = `
+"<!-- wp:cover {\\"url\\":\\"https://cldup.com/cXyG__fTLN.jpg\\",\\"id\\":10710,\\"dimRatio\\":50,\\"overlayColor\\":\\"foreground\\",\\"minHeight\\":20,\\"minHeightUnit\\":\\"vw\\",\\"isDark\\":false} -->
+<div class=\\"wp-block-cover is-light\\" style=\\"min-height:20vw\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-foreground-background-color has-background-dim\\"></span><img class=\\"wp-block-cover__image-background wp-image-10710\\" alt=\\"\\" src=\\"https://cldup.com/cXyG__fTLN.jpg\\" data-object-fit=\\"cover\\"/><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\",\\"fontSize\\":\\"large\\"} -->
+<p class=\\"has-text-align-center has-large-font-size\\"></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->"
+`;
+
+exports[`minimum height settings disables the decrease button when reaching the minimum value for Pixels (px) 1`] = `
+"<!-- wp:cover {\\"url\\":\\"https://cldup.com/cXyG__fTLN.jpg\\",\\"id\\":10710,\\"dimRatio\\":50,\\"overlayColor\\":\\"foreground\\",\\"minHeight\\":50,\\"minHeightUnit\\":\\"px\\",\\"isDark\\":false} -->
+<div class=\\"wp-block-cover is-light\\" style=\\"min-height:50px\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-foreground-background-color has-background-dim\\"></span><img class=\\"wp-block-cover__image-background wp-image-10710\\" alt=\\"\\" src=\\"https://cldup.com/cXyG__fTLN.jpg\\" data-object-fit=\\"cover\\"/><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\",\\"fontSize\\":\\"large\\"} -->
+<p class=\\"has-text-align-center has-large-font-size\\"></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->"
+`;
+
+exports[`minimum height settings disables the decrease button when reaching the minimum value for Relative to parent font size (em) 1`] = `
+"<!-- wp:cover {\\"url\\":\\"https://cldup.com/cXyG__fTLN.jpg\\",\\"id\\":10710,\\"dimRatio\\":50,\\"overlayColor\\":\\"foreground\\",\\"minHeight\\":1,\\"minHeightUnit\\":\\"em\\",\\"isDark\\":false} -->
+<div class=\\"wp-block-cover is-light\\" style=\\"min-height:1em\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-foreground-background-color has-background-dim\\"></span><img class=\\"wp-block-cover__image-background wp-image-10710\\" alt=\\"\\" src=\\"https://cldup.com/cXyG__fTLN.jpg\\" data-object-fit=\\"cover\\"/><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\",\\"fontSize\\":\\"large\\"} -->
+<p class=\\"has-text-align-center has-large-font-size\\"></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->"
+`;
+
+exports[`minimum height settings disables the decrease button when reaching the minimum value for Relative to root font size (rem) 1`] = `
+"<!-- wp:cover {\\"url\\":\\"https://cldup.com/cXyG__fTLN.jpg\\",\\"id\\":10710,\\"dimRatio\\":50,\\"overlayColor\\":\\"foreground\\",\\"minHeight\\":1,\\"minHeightUnit\\":\\"rem\\",\\"isDark\\":false} -->
+<div class=\\"wp-block-cover is-light\\" style=\\"min-height:1rem\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-foreground-background-color has-background-dim\\"></span><img class=\\"wp-block-cover__image-background wp-image-10710\\" alt=\\"\\" src=\\"https://cldup.com/cXyG__fTLN.jpg\\" data-object-fit=\\"cover\\"/><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\",\\"fontSize\\":\\"large\\"} -->
+<p class=\\"has-text-align-center has-large-font-size\\"></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->"
+`;
+
+exports[`minimum height settings disables the decrease button when reaching the minimum value for Viewport height (vh) 1`] = `
+"<!-- wp:cover {\\"url\\":\\"https://cldup.com/cXyG__fTLN.jpg\\",\\"id\\":10710,\\"dimRatio\\":50,\\"overlayColor\\":\\"foreground\\",\\"minHeight\\":1,\\"minHeightUnit\\":\\"vh\\",\\"isDark\\":false} -->
+<div class=\\"wp-block-cover is-light\\" style=\\"min-height:1vh\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-foreground-background-color has-background-dim\\"></span><img class=\\"wp-block-cover__image-background wp-image-10710\\" alt=\\"\\" src=\\"https://cldup.com/cXyG__fTLN.jpg\\" data-object-fit=\\"cover\\"/><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\",\\"fontSize\\":\\"large\\"} -->
+<p class=\\"has-text-align-center has-large-font-size\\"></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->"
+`;
+
+exports[`minimum height settings disables the decrease button when reaching the minimum value for Viewport width (vw) 1`] = `
+"<!-- wp:cover {\\"url\\":\\"https://cldup.com/cXyG__fTLN.jpg\\",\\"id\\":10710,\\"dimRatio\\":50,\\"overlayColor\\":\\"foreground\\",\\"minHeight\\":1,\\"minHeightUnit\\":\\"vw\\",\\"isDark\\":false} -->
+<div class=\\"wp-block-cover is-light\\" style=\\"min-height:1vw\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-foreground-background-color has-background-dim\\"></span><img class=\\"wp-block-cover__image-background wp-image-10710\\" alt=\\"\\" src=\\"https://cldup.com/cXyG__fTLN.jpg\\" data-object-fit=\\"cover\\"/><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\",\\"fontSize\\":\\"large\\"} -->
+<p class=\\"has-text-align-center has-large-font-size\\"></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->"
+`;
+
+exports[`when an image is attached updates background opacity 1`] = `
+"<!-- wp:cover {\\"url\\":\\"https://cldup.com/cXyG__fTLN.jpg\\",\\"id\\":10710,\\"dimRatio\\":15,\\"overlayColor\\":\\"foreground\\",\\"isDark\\":false} -->
+<div class=\\"wp-block-cover is-light\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-foreground-background-color has-background-dim-20 has-background-dim\\"></span><img class=\\"wp-block-cover__image-background wp-image-10710\\" alt=\\"\\" src=\\"https://cldup.com/cXyG__fTLN.jpg\\" data-object-fit=\\"cover\\"/><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\",\\"fontSize\\":\\"large\\"} -->
+<p class=\\"has-text-align-center has-large-font-size\\"></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->"
+`;

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

@@ -9,6 +9,8 @@ import {
 	fireEvent,
 	waitFor,
 	within,
+	getBlock,
+	openBlockSettings,
 } from 'test/helpers';
 
 /**
@@ -41,14 +43,24 @@ jest.mock( '@wordpress/compose', () => ( {
 	) ),
 } ) );
 
-const COVER_BLOCK_PLACEHOLDER_HTML = `<!-- wp:cover -->
-<div class="wp-block-cover"><span aria-hidden="true" class="has-background-dim-100 wp-block-cover__gradient-background has-background-dim"></span><div class="wp-block-cover__inner-container"></div></div>
+const COVER_BLOCK_PLACEHOLDER_HTML = `<!-- wp:cover {"isDark":false} -->
+<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"></div></div>
 <!-- /wp:cover -->`;
-const COVER_BLOCK_SOLID_COLOR_HTML = `<!-- wp:cover {"overlayColor":"cyan-bluish-gray"} -->
-<div class="wp-block-cover"><span aria-hidden="true" class="has-cyan-bluish-gray-background-color has-background-dim-100 wp-block-cover__gradient-background has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…"} -->
+const COVER_BLOCK_SOLID_COLOR_HTML = `<!-- wp:cover {"overlayColor":"cyan-bluish-gray","isDark":false} -->
+<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-cyan-bluish-gray-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…"} -->
 <p class="has-text-align-center"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->`;
+const COVER_BLOCK_IMAGE_HTML = `<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","isDark":false} -->
+<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size"></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->`;
+const COVER_BLOCK_CUSTOM_HEIGHT_HTML = `<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","minHeight":20,"minHeightUnit":"vw","isDark":false} -->
+<div class="wp-block-cover is-light" style="min-height:20vw"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size"></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->`;
 
 const COLOR_PINK = '#f78da7';
 const COLOR_RED = '#cf2e2e';
@@ -290,6 +302,34 @@ describe( 'when an image is attached', () => {
 			} )
 		);
 	} );
+
+	it( 'updates background opacity', async () => {
+		const screen = await initializeEditor( {
+			initialHtml: COVER_BLOCK_IMAGE_HTML,
+		} );
+		const { getByA11yLabel } = screen;
+
+		// Get block
+		const coverBlock = await getBlock( screen, 'Cover' );
+		fireEvent.press( coverBlock );
+
+		// Open block settings
+		await openBlockSettings( screen );
+
+		// Update Opacity attribute
+		const opacityControl = getByA11yLabel( /Opacity/ );
+		fireEvent.press( within( opacityControl ).getByText( '50' ) );
+		const heightTextInput =
+			within( opacityControl ).getByDisplayValue( '50' );
+		fireEvent.changeText( heightTextInput, '20' );
+
+		// The decreasing button should be disabled
+		fireEvent( opacityControl, 'accessibilityAction', {
+			nativeEvent: { actionName: 'decrement' },
+		} );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
 } );
 
 describe( 'color settings', () => {
@@ -533,3 +573,95 @@ describe( 'color settings', () => {
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 } );
+
+describe( 'minimum height settings', () => {
+	it( 'changes the height value to 20(vw)', async () => {
+		const screen = await initializeEditor( {
+			initialHtml: COVER_BLOCK_IMAGE_HTML,
+		} );
+		const { getByText, getByDisplayValue } = screen;
+
+		// Get block
+		const coverBlock = await getBlock( screen, 'Cover' );
+		fireEvent.press( coverBlock );
+
+		// Open block settings
+		await openBlockSettings( screen );
+
+		// Set vw unit
+		fireEvent.press( getByText( 'px' ) );
+		fireEvent.press( getByText( 'Viewport width (vw)' ) );
+
+		// Update height attribute
+		fireEvent.press( getByText( '300' ) );
+		const heightTextInput = getByDisplayValue( '300' );
+		fireEvent.changeText( heightTextInput, '20' );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'changes the height value between units', async () => {
+		const screen = await initializeEditor( {
+			initialHtml: COVER_BLOCK_CUSTOM_HEIGHT_HTML,
+		} );
+		const { getByText } = screen;
+
+		// Get block
+		const coverBlock = await getBlock( screen, 'Cover' );
+		fireEvent.press( coverBlock );
+
+		// Open block settings
+		await openBlockSettings( screen );
+
+		// Set the pixel unit
+		fireEvent.press( getByText( 'vw' ) );
+		fireEvent.press( getByText( 'Pixels (px)' ) );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	describe( 'disables the decrease button when reaching the minimum value', () => {
+		const testData = [
+			[ 'Pixels (px)', '50', '50' ],
+			[ 'Relative to parent font size (em)', '20', '1' ],
+			[ 'Relative to root font size (rem)', '20', '1' ],
+			[ 'Viewport width (vw)', '20', '1' ],
+			[ 'Viewport height (vh)', '20', '1' ],
+		];
+
+		test.each( testData )(
+			'for %s',
+			async ( unitName, value, minValue ) => {
+				const screen = await initializeEditor( {
+					initialHtml: COVER_BLOCK_CUSTOM_HEIGHT_HTML,
+				} );
+				const { getByA11yLabel, getByText } = screen;
+
+				// Get block
+				const coverBlock = await getBlock( screen, 'Cover' );
+				fireEvent.press( coverBlock );
+
+				// Open block settings
+				await openBlockSettings( screen );
+
+				// Set the unit name
+				fireEvent.press( getByText( 'vw' ) );
+				fireEvent.press( getByText( unitName ) );
+
+				// Update height attribute
+				const heightControl = getByA11yLabel( /Minimum height/ );
+				fireEvent.press( within( heightControl ).getByText( value ) );
+				const heightTextInput =
+					within( heightControl ).getByDisplayValue( value );
+				fireEvent.changeText( heightTextInput, minValue );
+
+				// The decreasing button should be disabled
+				fireEvent( heightControl, 'accessibilityAction', {
+					nativeEvent: { actionName: 'decrement' },
+				} );
+
+				expect( getEditorHtml() ).toMatchSnapshot();
+			}
+		);
+	} );
+} );

package/src/embed/block.json

@@ -8,18 +8,22 @@
 	"textdomain": "default",
 	"attributes": {
 		"url": {
-			"type": "string"
+			"type": "string",
+			"__experimentalRole": "content"
 		},
 		"caption": {
 			"type": "string",
 			"source": "html",
-			"selector": "figcaption"
+			"selector": "figcaption",
+			"__experimentalRole": "content"
 		},
 		"type": {
-			"type": "string"
+			"type": "string",
+			"__experimentalRole": "content"
 		},
 		"providerNameSlug": {
-			"type": "string"
+			"type": "string",
+			"__experimentalRole": "content"
 		},
 		"allowResponsive": {
 			"type": "boolean",
@@ -27,11 +31,13 @@
 		},
 		"responsive": {
 			"type": "boolean",
-			"default": false
+			"default": false,
+			"__experimentalRole": "content"
 		},
 		"previewable": {
 			"type": "boolean",
-			"default": true
+			"default": true,
+			"__experimentalRole": "content"
 		}
 	},
 	"supports": {

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

@@ -39,8 +39,7 @@ jest.mock( 'react-native-modal', () => {
 } );
 
 // Mock debounce to prevent potentially belated state updates.
-jest.mock( 'lodash', () => ( {
-	...jest.requireActual( 'lodash' ),
+jest.mock( '@wordpress/compose/src/utils/debounce', () => ( {
 	debounce: ( fn ) => {
 		fn.cancel = jest.fn();
 		return fn;

package/src/embed/variations.js

@@ -32,7 +32,7 @@ import {
 /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */
 
 /**
- * Template option choices for predefined columns layouts.
+ * The embed provider services.
  *
  * @type {WPBlockVariation[]}
  */

package/src/freeform/edit.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { debounce } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -11,6 +6,7 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
+import { debounce } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { ToolbarGroup } from '@wordpress/components';
 import { useEffect, useRef } from '@wordpress/element';
@@ -47,6 +43,10 @@ export default function ClassicEdit( {
 	onReplace,
 } ) {
 	const { getMultiSelectedBlockClientIds } = useSelect( blockEditorStore );
+	const canRemove = useSelect(
+		( select ) => select( blockEditorStore ).canRemoveBlock( clientId ),
+		[ clientId ]
+	);
 	const didMount = useRef( false );
 
 	useEffect( () => {
@@ -225,11 +225,13 @@ export default function ClassicEdit( {
 	/* eslint-disable jsx-a11y/no-static-element-interactions */
 	return (
 		<>
-			<BlockControls>
-				<ToolbarGroup>
-					<ConvertToBlocksButton clientId={ clientId } />
-				</ToolbarGroup>
-			</BlockControls>
+			{ canRemove && (
+				<BlockControls>
+					<ToolbarGroup>
+						<ConvertToBlocksButton clientId={ clientId } />
+					</ToolbarGroup>
+				</BlockControls>
+			) }
 			<div { ...useBlockProps() }>
 				<div
 					key="toolbar"

package/src/gallery/deprecated.js

@@ -659,8 +659,8 @@ const v3 = {
 					attribute: 'data-link',
 				},
 				caption: {
-					type: 'array',
-					source: 'children',
+					type: 'string',
+					source: 'html',
 					selector: 'figcaption',
 				},
 			},
@@ -779,8 +779,8 @@ const v2 = {
 					attribute: 'data-link',
 				},
 				caption: {
-					type: 'array',
-					source: 'children',
+					type: 'string',
+					source: 'html',
 					selector: 'figcaption',
 				},
 			},

package/src/gallery/gallery.js

@@ -12,7 +12,6 @@ import {
 	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { VisuallyHidden } from '@wordpress/components';
-import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { View } from '@wordpress/primitives';
@@ -38,26 +37,6 @@ export const Gallery = ( props ) => {
 		__experimentalLayout: { type: 'default', alignments: [] },
 	} );
 
-	const [ captionFocused, setCaptionFocused ] = useState( false );
-
-	function onFocusCaption() {
-		if ( ! captionFocused ) {
-			setCaptionFocused( true );
-		}
-	}
-
-	function removeCaptionFocus() {
-		if ( captionFocused ) {
-			setCaptionFocused( false );
-		}
-	}
-
-	useEffect( () => {
-		if ( ! isSelected ) {
-			setCaptionFocused( false );
-		}
-	}, [ isSelected ] );
-
 	return (
 		<figure
 			{ ...innerBlocksProps }
@@ -74,17 +53,12 @@ export const Gallery = ( props ) => {
 		>
 			{ children }
 			{ isSelected && ! children && (
-				<View
-					className="blocks-gallery-media-placeholder-wrapper"
-					onClick={ removeCaptionFocus }
-				>
+				<View className="blocks-gallery-media-placeholder-wrapper">
 					{ mediaPlaceholder }
 				</View>
 			) }
 			<RichTextVisibilityHelper
 				isHidden={ ! isSelected && RichText.isEmpty( caption ) }
-				captionFocused={ captionFocused }
-				onFocusCaption={ onFocusCaption }
 				tagName="figcaption"
 				className={ classnames(
 					'blocks-gallery-caption',
@@ -105,8 +79,6 @@ export const Gallery = ( props ) => {
 
 function RichTextVisibilityHelper( {
 	isHidden,
-	captionFocused,
-	onFocusCaption,
 	className,
 	value,
 	placeholder,
@@ -125,8 +97,6 @@ function RichTextVisibilityHelper( {
 			placeholder={ placeholder }
 			className={ className }
 			tagName={ tagName }
-			isSelected={ captionFocused }
-			onClick={ onFocusCaption }
 			{ ...richTextProps }
 		/>
 	);

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

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+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>
+<!-- /wp:heading --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Group block ungroups inner blocks 1`] = `
+"<!-- wp:image -->
+<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
+<!-- /wp:image -->
+
+<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->"
+`;