@wordpress/block-library 8.35.0 → 9.0.1

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

@@ -2,51 +2,69 @@
 
 exports[`Buttons block color customization sets a background color 1`] = `
 "<!-- wp:buttons -->
-<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"luminous-vivid-amber"} /--></div>
+<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"luminous-vivid-amber"} -->
+<div class="wp-block-button"><a class="wp-block-button__link has-luminous-vivid-amber-background-color has-background wp-element-button" href=""></a></div>
+<!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
 
 exports[`Buttons block color customization sets a custom gradient background color 1`] = `
 "<!-- wp:buttons -->
-<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"gradient":"linear-gradient(200deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)"}}} /--></div>
+<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"gradient":"linear-gradient(200deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)"}}} -->
+<div class="wp-block-button"><a class="wp-block-button__link has-background wp-element-button" href="" style="background:linear-gradient(200deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)"></a></div>
+<!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
 
 exports[`Buttons block color customization sets a gradient background color 1`] = `
 "<!-- wp:buttons -->
-<div class="wp-block-buttons"><!-- wp:button {"gradient":"light-green-cyan-to-vivid-green-cyan"} /--></div>
+<div class="wp-block-buttons"><!-- wp:button {"gradient":"light-green-cyan-to-vivid-green-cyan"} -->
+<div class="wp-block-button"><a class="wp-block-button__link has-light-green-cyan-to-vivid-green-cyan-gradient-background has-background wp-element-button" href=""></a></div>
+<!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
 
 exports[`Buttons block color customization sets a text color 1`] = `
 "<!-- wp:buttons -->
-<div class="wp-block-buttons"><!-- wp:button {"textColor":"pale-pink"} /--></div>
+<div class="wp-block-buttons"><!-- wp:button {"textColor":"pale-pink"} -->
+<div class="wp-block-button"><a class="wp-block-button__link has-pale-pink-color has-text-color wp-element-button" href=""></a></div>
+<!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
 
 exports[`Buttons block justify content sets Justify items center option 1`] = `
 "<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
-<div class="wp-block-buttons"><!-- wp:button /--></div>
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"></a></div>
+<!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
 
 exports[`Buttons block justify content sets Justify items left option 1`] = `
 "<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"left"}} -->
-<div class="wp-block-buttons"><!-- wp:button /--></div>
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"></a></div>
+<!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
 
 exports[`Buttons block justify content sets Justify items right option 1`] = `
 "<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"right"}} -->
-<div class="wp-block-buttons"><!-- wp:button /--></div>
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"></a></div>
+<!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
 
 exports[`Buttons block when a button is shown adds another button using the inline appender 1`] = `
 "<!-- wp:buttons -->
-<div class="wp-block-buttons"><!-- wp:button /-->
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href=""></a></div>
+<!-- /wp:button -->
 
-<!-- wp:button /--></div>
+<!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href=""></a></div>
+<!-- /wp:button --></div>
 <!-- /wp:buttons -->
 
 <!-- wp:paragraph -->
@@ -56,7 +74,9 @@ exports[`Buttons block when a button is shown adds another button using the inli
 
 exports[`Buttons block when a button is shown adds another button using the inserter 1`] = `
 "<!-- wp:buttons -->
-<div class="wp-block-buttons"><!-- wp:button /-->
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href=""></a></div>
+<!-- /wp:button -->
 
 <!-- wp:button -->
 <div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Hello!</a></div>

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

@@ -21,7 +21,9 @@ import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
 import { registerCoreBlocks } from '@wordpress/block-library';
 
 const BUTTONS_HTML = `<!-- wp:buttons -->
-<div class="wp-block-buttons"><!-- wp:button /--></div>
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"></a></div>
+<!-- /wp:button --></div>
 <!-- /wp:buttons -->`;
 
 beforeAll( () => {
@@ -248,10 +250,9 @@ describe( 'Buttons block', () => {
 			'Justify items right',
 		].forEach( ( justificationOption ) =>
 			it( `sets ${ justificationOption } option`, async () => {
-				const initialHtml = `<!-- wp:buttons -->
-				<div class="wp-block-buttons"><!-- wp:button /--></div>
-				<!-- /wp:buttons -->`;
-				const screen = await initializeEditor( { initialHtml } );
+				const screen = await initializeEditor( {
+					initialHtml: BUTTONS_HTML,
+				} );
 
 				const [ block ] = await screen.findAllByLabelText(
 					/Buttons Block\. Row 1/

package/src/columns/edit.native.js

@@ -13,7 +13,6 @@ import {
 	FooterMessageControl,
 	UnitControl,
 	getValueAndUnit,
-	GlobalStylesContext,
 	alignmentHelpers,
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
@@ -25,12 +24,12 @@ import {
 	BlockVariationPicker,
 	useSettings,
 	store as blockEditorStore,
+	useGlobalStyles,
 } from '@wordpress/block-editor';
 import { withDispatch, useSelect } from '@wordpress/data';
 import {
 	useEffect,
 	useState,
-	useContext,
 	useMemo,
 	useCallback,
 	memo,
@@ -90,7 +89,7 @@ function ColumnsEditContainer( {
 	const [ resizeListener, sizes ] = useResizeObserver();
 	const [ columnsInRow, setColumnsInRow ] = useState( MIN_COLUMNS_NUM );
 	const screenWidth = Math.floor( Dimensions.get( 'window' ).width );
-	const globalStyles = useContext( GlobalStylesContext );
+	const globalStyles = useGlobalStyles();
 
 	const { verticalAlignment, align } = attributes;
 	const { width } = sizes || {};

package/src/comments/index.php

@@ -18,7 +18,7 @@
  *
  * @since 6.1.0
  *
- * @global WP_Post  $post     Global post object.
+ * @global WP_Post $post Global post object.
  *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.

package/src/cover/block.json

@@ -85,6 +85,7 @@
 		"anchor": true,
 		"align": true,
 		"html": false,
+		"shadow": true,
 		"spacing": {
 			"padding": true,
 			"margin": [ "top", "bottom" ],

package/src/cover/controls.native.js

@@ -213,7 +213,7 @@ function Controls( {
 										videoRef?.current.seek( 0 );
 									} }
 									ref={ videoRef }
-									resizeMode={ 'cover' }
+									resizeMode="cover"
 									source={ { uri: url } }
 									style={ videoPreviewStyles }
 								/>
@@ -281,7 +281,7 @@ function Controls( {
 						value={ dimRatio }
 						onChange={ onOpacityChange }
 						style={ styles.rangeCellContainer }
-						separatorType={ 'topFullWidth' }
+						separatorType="topFullWidth"
 					/>
 				</PanelBody>
 			) : null }

package/src/cover/edit/inspector-controls.js

@@ -79,7 +79,7 @@ function CoverHeightInput( {
 			min={ min }
 			onChange={ handleOnChange }
 			onUnitChange={ onUnitChange }
-			__unstableInputWidth={ '80px' }
+			__unstableInputWidth="80px"
 			units={ units }
 			value={ computedValue }
 		/>
@@ -211,7 +211,14 @@ export default function CoverInspectorControls( {
 								}
 								help={
 									<>
-										<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
+										<ExternalLink
+											href={
+												// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+												__(
+													'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+												)
+											}
+										>
 											{ __(
 												'Describe the purpose of the image.'
 											) }

package/src/cover/edit.native.js

@@ -33,7 +33,6 @@ import {
 	ColorPicker,
 	BottomSheetConsumer,
 	useConvertUnitToMobile,
-	useMobileGlobalStylesColors,
 } from '@wordpress/components';
 import {
 	BlockControls,
@@ -47,6 +46,8 @@ import {
 	getColorObjectByAttributeValues,
 	getGradientValueBySlug,
 	store as blockEditorStore,
+	useGlobalStyles,
+	useMobileGlobalStylesColors,
 } from '@wordpress/block-editor';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { useDispatch, withSelect, withDispatch } from '@wordpress/data';
@@ -156,9 +157,11 @@ const Cover = ( {
 		mediaUploadSync();
 	}, [] );
 
+	const globalStyles = useGlobalStyles();
 	const convertedMinHeight = useConvertUnitToMobile(
 		minHeight || COVER_DEFAULT_HEIGHT,
-		minHeightUnit
+		minHeightUnit,
+		globalStyles
 	);
 
 	const isImage = backgroundType === MEDIA_TYPE_IMAGE;
@@ -218,6 +221,21 @@ const Cover = ( {
 		} );
 	};
 
+	const onUpdateMediaProgress = useCallback(
+		( payload ) => {
+			const { mediaUrl, state } = payload;
+
+			setIsUploadInProgress( true );
+
+			if ( isUploadInProgress && isImage && mediaUrl && ! state ) {
+				setAttributes( {
+					url: mediaUrl,
+				} );
+			}
+		},
+		[ isImage, isUploadInProgress, setAttributes ]
+	);
+
 	const onMediaPressed = () => {
 		if ( isUploadInProgress ) {
 			requestImageUploadCancelDialog( id );
@@ -447,9 +465,7 @@ const Cover = ( {
 					toolbarControls( openMediaOptionsRef.current ) }
 				<MediaUploadProgress
 					mediaId={ id }
-					onUpdateMediaProgress={ () => {
-						setIsUploadInProgress( true );
-					} }
+					onUpdateMediaProgress={ onUpdateMediaProgress }
 					onFinishMediaUploadWithSuccess={ ( {
 						mediaServerId,
 						mediaUrl,
@@ -496,7 +512,7 @@ const Cover = ( {
 						muted
 						disableFocus
 						repeat
-						resizeMode={ 'cover' }
+						resizeMode="cover"
 						source={ { uri: url } }
 						onLoad={ onVideoLoad }
 						onLoadStart={ onVideoLoadStart }

package/src/cover/editor.scss

@@ -123,10 +123,3 @@
 .color-block-support-panel__inner-wrapper > :not(.block-editor-tools-panel-color-gradient-settings__item) {
 	margin-top: $grid-unit-30;
 }
-
-
-// The frontend style.scss includes a min-height as an IE11 fix.
-// This fix causes extra spacing for the focus style in the editor, so we omit it here.
-.wp-block-cover::after {
-	min-height: auto;
-}

package/src/cover/overlay-color-settings.native.js

@@ -12,9 +12,9 @@ import {
 	getGradientValueBySlug,
 	getGradientSlugByValue,
 	__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
+	useMobileGlobalStylesColors,
 } from '@wordpress/block-editor';
 import { useMemo } from '@wordpress/element';
-import { useMobileGlobalStylesColors } from '@wordpress/components';
 
 function OverlayColorSettings( {
 	overlayColor,

package/src/cover/style.scss

@@ -1,11 +1,7 @@
-// Lowest specificity styles are used to ensure that the default styles for the cover block can be overridden by global styles.
-:where(.wp-block-cover-image, .wp-block-cover) {
-	min-height: 430px;
-	padding: 1em;
-}
-
 .wp-block-cover-image,
 .wp-block-cover {
+	min-height: 430px;
+	padding: 1em;
 	position: relative;
 	background-position: center center;
 	display: flex;
@@ -91,20 +87,6 @@
 		width: 100%;
 	}
 
-	// Using flexbox without an assigned height property breaks vertical center alignment in IE11.
-	// Appending an empty ::after element tricks IE11 into giving the cover image an implicit height, which sidesteps this issue.
-	&::after {
-		display: block;
-		content: "";
-		font-size: 0;
-		min-height: inherit;
-
-		// IE doesn't support flex so omit that.
-		@supports (position: sticky) {
-			content: none;
-		}
-	}
-
 	// Aligned cover blocks should not use our global alignment rules
 	&.aligncenter,
 	&.alignleft,
@@ -120,18 +102,6 @@
 		/*rtl:raw: direction: rtl; */
 	}
 
-	p,
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
-		&:where(:not(.has-text-color)) {
-			color: inherit;
-		}
-	}
-
 	// Position: Top
 	&.is-position-top-left {
 		align-items: flex-start;
@@ -314,3 +284,15 @@ section.wp-block-cover-image > h2,
 :where(.wp-block-cover-image.is-light:not(.has-text-color)) {
 	color: $black;
 }
+
+:root {
+	:where(.wp-block-cover p:not(.has-text-color)),
+	:where(.wp-block-cover h1:not(.has-text-color)),
+	:where(.wp-block-cover h2:not(.has-text-color)),
+	:where(.wp-block-cover h3:not(.has-text-color)),
+	:where(.wp-block-cover h4:not(.has-text-color)),
+	:where(.wp-block-cover h5:not(.has-text-color)),
+	:where(.wp-block-cover h6:not(.has-text-color)) {
+		color: inherit;
+	}
+}

package/src/editor.scss

@@ -1,7 +1,6 @@
 @import "./archives/editor.scss";
 @import "./audio/editor.scss";
 @import "./avatar/editor.scss";
-@import "./block/editor.scss";
 @import "./button/editor.scss";
 @import "./buttons/editor.scss";
 @import "./categories/editor.scss";

package/src/embed/embed-no-preview.native.js

@@ -124,7 +124,7 @@ const EmbedNoPreview = ( {
 	const embedNoProviderPreview = (
 		<>
 			<TouchableWithoutFeedback
-				accessibilityRole={ 'button' }
+				accessibilityRole="button"
 				accessibilityHint={ previewButtonA11yHint }
 				disabled={ ! isSelected }
 				onPress={ onPressContainer }
@@ -145,7 +145,7 @@ const EmbedNoPreview = ( {
 					<TouchableOpacity
 						accessibilityHint={ __( 'Tap here to show help' ) }
 						accessibilityLabel={ __( 'Help button' ) }
-						accessibilityRole={ 'button' }
+						accessibilityRole="button"
 						disabled={ ! isSelected }
 						onPress={ onPressHelp }
 						style={ helpIconStyle }

package/src/embed/embed-placeholder.native.js

@@ -125,7 +125,7 @@ const EmbedPlaceholder = ( {
 						</Text>
 						<TouchableOpacity
 							activeOpacity={ 0.5 }
-							accessibilityRole={ 'button' }
+							accessibilityRole="button"
 							accessibilityHint={ __(
 								'Double tap to view embed options.'
 							) }
@@ -155,7 +155,7 @@ const EmbedPlaceholder = ( {
 						</View>
 						<TouchableOpacity
 							activeOpacity={ 0.5 }
-							accessibilityRole={ 'button' }
+							accessibilityRole="button"
 							accessibilityHint={ __(
 								'Double tap to add a link.'
 							) }

package/src/embed/theme.scss

@@ -2,6 +2,6 @@
 	@include caption-style-theme();
 }
 
-:where(.wp-block-embed) {
+.wp-block-embed {
 	margin: 0 0 1em 0;
 }

package/src/embed/util.js

@@ -23,6 +23,7 @@ import { ASPECT_RATIOS, WP_EMBED_TYPE } from './constants';
 import { unlock } from '../lock-unlock';
 
 const { name: DEFAULT_EMBED_BLOCK } = metadata;
+const { kebabCase } = unlock( componentsPrivateApis );
 
 /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */
 
@@ -288,7 +289,6 @@ export const getAttributesFromPreview = memoize(
 		// If we got a provider name from the API, use it for the slug, otherwise we use the title,
 		// because not all embed code gives us a provider name.
 		const { html, provider_name: providerName } = preview;
-		const { kebabCase } = unlock( componentsPrivateApis );
 		const providerNameSlug = kebabCase(
 			( providerName || title ).toLowerCase()
 		);

package/src/embed/variations.js

@@ -259,14 +259,6 @@ const variations = [
 		patterns: [ /^https?:\/\/(www\.)?scribd\.com\/.+/i ],
 		attributes: { providerNameSlug: 'scribd', responsive: true },
 	},
-	{
-		name: 'slideshare',
-		title: 'Slideshare',
-		icon: embedContentIcon,
-		description: __( 'Embed Slideshare content.' ),
-		patterns: [ /^https?:\/\/(.+?\.)?slideshare\.net\/.+/i ],
-		attributes: { providerNameSlug: 'slideshare', responsive: true },
-	},
 	{
 		name: 'smugmug',
 		title: 'SmugMug',

package/src/file/edit.js

@@ -258,7 +258,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 						) }
 					</ResizableBox>
 				) }
-				<div className={ 'wp-block-file__content-wrapper' }>
+				<div className="wp-block-file__content-wrapper">
 					<RichText
 						identifier="fileName"
 						tagName="a"
@@ -273,11 +273,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 						href={ textLinkHref }
 					/>
 					{ showDownloadButton && (
-						<div
-							className={
-								'wp-block-file__button-richtext-wrapper'
-							}
-						>
+						<div className="wp-block-file__button-richtext-wrapper">
 							{ /* Using RichText here instead of PlainText so that it can be styled like a button. */ }
 							<RichText
 								identifier="downloadButtonText"

package/src/form/save.js

@@ -3,7 +3,7 @@
  */
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
-const Save = ( { attributes } ) => {
+export default function save( { attributes } ) {
 	const blockProps = useBlockProps.save();
 	const { submissionMethod } = attributes;
 
@@ -16,5 +16,4 @@ const Save = ( { attributes } ) => {
 			<InnerBlocks.Content />
 		</form>
 	);
-};
-export default Save;
+}

package/src/form-submit-button/save.js

@@ -3,12 +3,11 @@
  */
 import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 
-const Save = () => {
+export default function save() {
 	const blockProps = useBlockProps.save();
 	return (
 		<div className="wp-block-form-submit-wrapper" { ...blockProps }>
 			<InnerBlocks.Content />
 		</div>
 	);
-};
-export default Save;
+}

package/src/freeform/edit.js

@@ -83,12 +83,15 @@ function ClassicEdit( {
 		}
 
 		const editor = window.tinymce.get( `editor-${ clientId }` );
-		const currentContent = editor?.getContent();
+		if ( ! editor ) {
+			return;
+		}
 
+		const currentContent = editor.getContent();
 		if ( currentContent !== content ) {
 			editor.setContent( content || '' );
 		}
-	}, [ content ] );
+	}, [ clientId, content ] );
 
 	useEffect( () => {
 		const { baseURL, suffix } = window.wpEditorL10n.tinymce;
@@ -227,6 +230,7 @@ function ClassicEdit( {
 				onReadyStateChange
 			);
 			wp.oldEditor.remove( `editor-${ clientId }` );
+			didMount.current = false;
 		};
 	}, [] );
 

package/src/gallery/edit.js

@@ -580,11 +580,11 @@ function GalleryEdit( props ) {
 						/>
 					) }
 					{ Platform.isWeb && ! imageSizeOptions && hasImageIds && (
-						<BaseControl className={ 'gallery-image-sizes' }>
+						<BaseControl className="gallery-image-sizes">
 							<BaseControl.VisualLabel>
 								{ __( 'Resolution' ) }
 							</BaseControl.VisualLabel>
-							<View className={ 'gallery-image-sizes__loading' }>
+							<View className="gallery-image-sizes__loading">
 								<Spinner />
 								{ __( 'Loading options…' ) }
 							</View>

package/src/gallery/editor.scss

@@ -1,4 +1,7 @@
-:where(figure.wp-block-gallery) {
+// Adding `figure` to the selector increases the specificity above the global
+// styles specificity, which is levelled at 0-1-0. We should figure out why
+// `figure` is needed.
+:root :where(figure.wp-block-gallery) {
 	// Override the default list style type _only in the editor_
 	// to avoid :not() selector specificity issues.
 	// See https://github.com/WordPress/gutenberg/pull/10358

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

@@ -35,7 +35,7 @@ export function Button( props ) {
 			style={ buttonStyle }
 			activeOpacity={ 0.7 }
 			accessibilityLabel={ accessibilityLabel }
-			accessibilityRole={ 'button' }
+			accessibilityRole="button"
 			onPress={ onClick }
 			disabled={ isDisabled }
 		>

package/src/gallery/v1/gallery-image.js

@@ -222,6 +222,8 @@ class GalleryImage extends Component {
 						onClick={ isFirstItem ? undefined : onMoveBackward }
 						label={ __( 'Move image backward' ) }
 						aria-disabled={ isFirstItem }
+						// Disable reason: Truly disable when image is not selected.
+						// eslint-disable-next-line no-restricted-syntax
 						disabled={ ! isSelected }
 					/>
 					<Button
@@ -229,6 +231,8 @@ class GalleryImage extends Component {
 						onClick={ isLastItem ? undefined : onMoveForward }
 						label={ __( 'Move image forward' ) }
 						aria-disabled={ isLastItem }
+						// Disable reason: Truly disable when image is not selected.
+						// eslint-disable-next-line no-restricted-syntax
 						disabled={ ! isSelected }
 					/>
 				</ButtonGroup>
@@ -237,12 +241,16 @@ class GalleryImage extends Component {
 						icon={ edit }
 						onClick={ this.onEdit }
 						label={ __( 'Replace image' ) }
+						// Disable reason: Truly disable when image is not selected.
+						// eslint-disable-next-line no-restricted-syntax
 						disabled={ ! isSelected }
 					/>
 					<Button
 						icon={ closeSmall }
 						onClick={ onRemove }
 						label={ __( 'Remove image' ) }
+						// Disable reason: Truly disable when image is not selected.
+						// eslint-disable-next-line no-restricted-syntax
 						disabled={ ! isSelected }
 					/>
 				</ButtonGroup>

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

@@ -310,7 +310,7 @@ class GalleryImage extends Component {
 				onPress={ this.onMediaPressed }
 				accessible={ ! isSelected } // We need only child views to be accessible after the selection.
 				accessibilityLabel={ this.accessibilityLabelImageContainer() } // if we don't set this explicitly it reads system provided accessibilityLabels of all child components and those include pretty technical words which don't make sense
-				accessibilityRole={ 'imagebutton' } // this makes VoiceOver to read a description of image provided by system on iOS and lets user know this is a button which conveys the message of tappablity
+				accessibilityRole="imagebutton" // this makes VoiceOver to read a description of image provided by system on iOS and lets user know this is a button which conveys the message of tappablity
 			>
 				<View style={ containerStyle }>
 					<MediaUploadProgress

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

@@ -12,6 +12,12 @@ exports[`Heading block inserts block 1`] = `
 <!-- /wp:heading -->"
 `;
 
+exports[`Heading block should keep the heading when there is an empty paragraph block before and backspace is pressed at the start 1`] = `
+"<!-- wp:heading -->
+<h2 class="wp-block-heading">A quick brown fox jumps over the lazy dog.</h2>
+<!-- /wp:heading -->"
+`;
+
 exports[`Heading block should merge with an empty Paragraph block and keep being the Heading block 1`] = `
 "<!-- wp:heading -->
 <h2 class="wp-block-heading">A quick brown fox jumps over the lazy dog.</h2>
@@ -29,3 +35,9 @@ exports[`Heading block should set a text color 1`] = `
 <h2 class="wp-block-heading has-pale-pink-color has-text-color">A quick brown fox jumps over the lazy dog.</h2>
 <!-- /wp:heading -->"
 `;
+
+exports[`Heading block should transform to a paragraph block when pressing backspace at the beginning of the first heading block 1`] = `
+"<!-- wp:paragraph -->
+<p>A quick brown fox jumps over the lazy dog.</p>
+<!-- /wp:paragraph -->"
+`;