@wordpress/block-library 7.14.1 → 7.15.0

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/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 -->"
+`;

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

@@ -0,0 +1,102 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	fireEvent,
+	getEditorHtml,
+	initializeEditor,
+	within,
+	getBlock,
+	waitFor,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+const NESTED_GROUP_BLOCK = `<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:image -->
+<figure class="wp-block-image"><img alt=""/></figure>
+<!-- /wp:image -->
+<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:spacer -->
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->`;
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+describe( 'Group block', () => {
+	it( 'inserts block and adds a Heading block as an inner block', async () => {
+		const screen = await initializeEditor();
+		const { getByTestId, getByText } = screen;
+
+		// Add block
+		await addBlock( screen, 'Group' );
+
+		// Get block
+		const groupBlock = await getBlock( screen, 'Group' );
+		fireEvent.press( groupBlock );
+
+		// Append a block in the Group block
+		const appenderButton =
+			within( groupBlock ).getByTestId( 'appender-button' );
+		fireEvent.press( appenderButton );
+
+		// Look for a block in the inserter
+		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 },
+			},
+		} );
+
+		// Add a block
+		fireEvent.press( await waitFor( () => getByText( 'Heading' ) ) );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'ungroups inner blocks', async () => {
+		const screen = await initializeEditor( {
+			initialHtml: NESTED_GROUP_BLOCK,
+		} );
+		const { getByA11yLabel } = screen;
+
+		// Get block
+		let groupBlock = await getBlock( screen, 'Group' );
+		fireEvent.press( groupBlock );
+
+		// Get Ungroup button
+		let ungroupButton = getByA11yLabel( /Ungroup/ );
+		fireEvent.press( ungroupButton );
+
+		// Press Group block again
+		groupBlock = await getBlock( screen, 'Group', { rowIndex: 2 } );
+		fireEvent.press( groupBlock );
+
+		// Ungroup last block
+		ungroupButton = getByA11yLabel( /Ungroup/ );
+		fireEvent.press( ungroupButton );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+} );

package/src/list-item/edit.js

@@ -65,6 +65,7 @@ export default function ListItemEdit( {
 	const blockProps = useBlockProps( { ref: useCopy( clientId ) } );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: [ 'core/list' ],
+		renderAppender: false,
 	} );
 	const useEnterRef = useEnter( { content, clientId } );
 	const useSpaceRef = useSpace( clientId );

package/src/missing/edit.js

@@ -4,8 +4,8 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { RawHTML } from '@wordpress/element';
 import { Button } from '@wordpress/components';
-import { getBlockType, createBlock } from '@wordpress/blocks';
-import { withDispatch } from '@wordpress/data';
+import { createBlock } from '@wordpress/blocks';
+import { withDispatch, useSelect } from '@wordpress/data';
 import {
 	Warning,
 	useBlockProps,
@@ -13,10 +13,21 @@ import {
 } from '@wordpress/block-editor';
 import { safeHTML } from '@wordpress/dom';
 
-function MissingBlockWarning( { attributes, convertToHTML } ) {
+function MissingBlockWarning( { attributes, convertToHTML, clientId } ) {
 	const { originalName, originalUndelimitedContent } = attributes;
 	const hasContent = !! originalUndelimitedContent;
-	const hasHTMLBlock = getBlockType( 'core/html' );
+	const hasHTMLBlock = useSelect(
+		( select ) => {
+			const { canInsertBlockType, getBlockRootClientId } =
+				select( blockEditorStore );
+
+			return canInsertBlockType(
+				'core/html',
+				getBlockRootClientId( clientId )
+			);
+		},
+		[ clientId ]
+	);
 
 	const actions = [];
 	let messageHTML;

package/src/more/edit.js

@@ -54,7 +54,7 @@ export default function MoreEdit( {
 			</InspectorControls>
 			<div { ...useBlockProps() }>
 				<input
-					aria-label={ __( 'Read more link text' ) }
+					aria-label={ __( '“Read more” link text' ) }
 					type="text"
 					value={ customText }
 					placeholder={ DEFAULT_TEXT }