@wordpress/block-library 6.1.0 → 7.0.0

package/src/cover/edit.js

@@ -726,14 +726,18 @@ function CoverEdit( {
 				<span
 					aria-hidden="true"
 					className={ classnames(
+						'wp-block-cover__background',
 						dimRatioToClass( dimRatio ),
-						{ [ overlayColor.class ]: overlayColor.class },
-						'wp-block-cover__gradient-background',
-						gradientClass,
 						{
+							[ overlayColor.class ]: overlayColor.class,
 							'has-background-dim': dimRatio !== undefined,
+							// For backwards compatibility. Former versions of the Cover Block applied
+							// `.wp-block-cover__gradient-background` in the presence of
+							// media, a gradient and a dim.
+							'wp-block-cover__gradient-background':
+								url && gradientValue && dimRatio !== 0,
 							'has-background-gradient': gradientValue,
-							[ gradientClass ]: ! url && gradientClass,
+							[ gradientClass ]: gradientClass,
 						}
 					) }
 					style={ { backgroundImage: gradientValue, ...bgStyle } }

package/src/cover/save.js

@@ -88,19 +88,25 @@ export default function save( { attributes } ) {
 		getPositionClassName( contentPosition )
 	);
 
+	const gradientValue = gradient || customGradient;
+
 	return (
 		<div { ...useBlockProps.save( { className: classes, style } ) }>
 			<span
 				aria-hidden="true"
 				className={ classnames(
+					'wp-block-cover__background',
 					overlayColorClass,
 					dimRatioToClass( dimRatio ),
-					'wp-block-cover__gradient-background',
-					gradientClass,
 					{
 						'has-background-dim': dimRatio !== undefined,
-						'has-background-gradient': gradient || customGradient,
-						[ gradientClass ]: ! url && gradientClass,
+						// For backwards compatibility. Former versions of the Cover Block applied
+						// `.wp-block-cover__gradient-background` in the presence of
+						// media, a gradient and a dim.
+						'wp-block-cover__gradient-background':
+							url && gradientValue && dimRatio !== 0,
+						'has-background-gradient': gradientValue,
+						[ gradientClass ]: gradientClass,
 					}
 				) }
 				style={ bgStyle }

package/src/cover/style.scss

@@ -57,9 +57,11 @@
 		background-color: inherit;
 	}
 
-	// the first selector is required for old Cover markup
+	// The first selector is required for old Cover markup/
+	// Keep .wp-block-cover__gradient-background for v8 deprecation.
 	&.has-background-dim:not(.has-background-gradient)::before,
 	.has-background-dim:not(.has-background-gradient)::before,
+	.wp-block-cover__background,
 	.wp-block-cover__gradient-background {
 		position: absolute;
 		top: 0;
@@ -70,8 +72,24 @@
 		opacity: 0.5;
 	}
 
+	// The following styles are needed to support legacy blocks added prior to the update
+	// that moved opacity to a nested span.
+	// https://github.com/WordPress/gutenberg/pull/35065
+	// https://github.com/WordPress/gutenberg/pull/38362
+	@for $i from 1 through 10 {
+		&.has-background-dim.has-background-dim-#{ $i * 10 } {
+			&:not(.has-background-gradient)::before,
+			.wp-block-cover__background,
+			.wp-block-cover__gradient-background {
+				opacity: $i * 0.1;
+			}
+		}
+	}
+
 	@for $i from 0 through 10 {
-		.wp-block-cover__gradient-background.has-background-dim.has-background-dim-#{ $i * 10 } {
+		// Keep .wp-block-cover__gradient-background for v8 deprecation
+		.wp-block-cover__gradient-background.has-background-dim.has-background-dim-#{ $i * 10 },
+		.wp-block-cover__background.has-background-dim.has-background-dim-#{ $i * 10 } {
 			opacity: $i * 0.1;
 		}
 	}

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

@@ -2,7 +2,7 @@
 
 exports[`color settings clears the selected overlay color and mantains the inner blocks 1`] = `
 "<!-- 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\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
+<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background 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 -->"
@@ -10,7 +10,7 @@ exports[`color settings clears the selected overlay color and mantains the inner
 
 exports[`color settings sets a color for the overlay background when the placeholder is visible 1`] = `
 "<!-- wp:cover {\\"overlayColor\\":\\"vivid-red\\"} -->
-<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"has-vivid-red-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…\\"} -->
+<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-vivid-red-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 -->"
@@ -18,7 +18,7 @@ exports[`color settings sets a color for the overlay background when the placeho
 
 exports[`color settings sets a gradient overlay background when a solid background was already selected 1`] = `
 "<!-- wp:cover {\\"gradient\\":\\"light-green-cyan-to-vivid-green-cyan\\"} -->
-<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"has-background-dim-100 wp-block-cover__gradient-background has-light-green-cyan-to-vivid-green-cyan-gradient-background has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
+<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background\\"></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 -->"
@@ -26,7 +26,7 @@ exports[`color settings sets a gradient overlay background when a solid backgrou
 
 exports[`color settings toggles between solid colors and gradients 1`] = `
 "<!-- wp:cover {\\"gradient\\":\\"light-green-cyan-to-vivid-green-cyan\\"} -->
-<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"has-background-dim-100 wp-block-cover__gradient-background has-light-green-cyan-to-vivid-green-cyan-gradient-background has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
+<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background\\"></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 -->"

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

@@ -295,7 +295,7 @@ describe( 'when an image is attached', () => {
 
 describe( 'color settings', () => {
 	it( 'sets a color for the overlay background when the placeholder is visible', async () => {
-		const { getByTestId, getByA11yLabel } = initializeEditor( {
+		const { getByTestId, getByA11yLabel } = await initializeEditor( {
 			initialHtml: COVER_BLOCK_PLACEHOLDER_HTML,
 		} );
 
@@ -350,7 +350,7 @@ describe( 'color settings', () => {
 	} );
 
 	it( 'sets a gradient overlay background when a solid background was already selected', async () => {
-		const { getByTestId, getByA11yLabel } = initializeEditor( {
+		const { getByTestId, getByA11yLabel } = await initializeEditor( {
 			initialHtml: COVER_BLOCK_SOLID_COLOR_HTML,
 		} );
 
@@ -407,7 +407,7 @@ describe( 'color settings', () => {
 	} );
 
 	it( 'toggles between solid colors and gradients', async () => {
-		const { getByTestId, getByA11yLabel } = initializeEditor( {
+		const { getByTestId, getByA11yLabel } = await initializeEditor( {
 			initialHtml: COVER_BLOCK_PLACEHOLDER_HTML,
 		} );
 
@@ -493,7 +493,11 @@ describe( 'color settings', () => {
 	} );
 
 	it( 'clears the selected overlay color and mantains the inner blocks', async () => {
-		const { getByTestId, getByA11yLabel, getByText } = initializeEditor( {
+		const {
+			getByTestId,
+			getByA11yLabel,
+			getByText,
+		} = await initializeEditor( {
 			initialHtml: COVER_BLOCK_SOLID_COLOR_HTML,
 		} );
 

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

@@ -142,7 +142,7 @@ const mockEmbedResponses = ( mockedResponses ) => {
 };
 
 const insertEmbedBlock = async ( blockTitle = 'Embed' ) => {
-	const editor = initializeEditor( {
+	const editor = await initializeEditor( {
 		initialHtml: '',
 	} );
 	const { getByA11yLabel, getByText } = editor;
@@ -162,7 +162,7 @@ const insertEmbedBlock = async ( blockTitle = 'Embed' ) => {
 };
 
 const initializeWithEmbedBlock = async ( initialHtml, selectBlock = true ) => {
-	const editor = initializeEditor( { initialHtml } );
+	const editor = await initializeEditor( { initialHtml } );
 	const { getByA11yLabel } = editor;
 
 	const block = await waitFor( () =>
@@ -871,7 +871,7 @@ describe( 'Embed block', () => {
 				getByPlaceholderText,
 				getByTestId,
 				getByText,
-			} = initializeEditor( {
+			} = await initializeEditor( {
 				initialHtml: EMPTY_PARAGRAPH_HTML,
 			} );
 
@@ -914,7 +914,7 @@ describe( 'Embed block', () => {
 				getByPlaceholderText,
 				getByTestId,
 				getByText,
-			} = initializeEditor( {
+			} = await initializeEditor( {
 				initialHtml: EMPTY_PARAGRAPH_HTML,
 			} );
 
@@ -959,7 +959,7 @@ describe( 'Embed block', () => {
 				getByPlaceholderText,
 				getByA11yLabel,
 				getByText,
-			} = initializeEditor( { initialHtml: EMPTY_PARAGRAPH_HTML } );
+			} = await initializeEditor( { initialHtml: EMPTY_PARAGRAPH_HTML } );
 
 			const paragraphText = getByPlaceholderText( 'Start writing…' );
 			fireEvent( paragraphText, 'focus' );
@@ -1001,7 +1001,7 @@ describe( 'Embed block', () => {
 					getByPlaceholderText,
 					getByA11yLabel,
 					getByText,
-				} = initializeEditor( {
+				} = await initializeEditor( {
 					initialHtml: EMPTY_PARAGRAPH_HTML,
 				} );
 

package/src/gallery/constants.js

@@ -1,3 +1,5 @@
 export const LINK_DESTINATION_NONE = 'none';
 export const LINK_DESTINATION_MEDIA = 'media';
 export const LINK_DESTINATION_ATTACHMENT = 'attachment';
+export const LINK_DESTINATION_MEDIA_WP_CORE = 'file';
+export const LINK_DESTINATION_ATTACHMENT_WP_CORE = 'post';

package/src/gallery/edit.js

@@ -155,6 +155,14 @@ function GalleryEdit( props ) {
 				align: undefined,
 			} );
 		} );
+
+		// If new blocks added select the first of these so they scroll into view.
+		if ( newImages?.length ) {
+			multiSelect(
+				newImages[ 0 ].clientId,
+				newImages[ newImages?.length - 1 ].clientId
+			);
+		}
 	}, [ newImages ] );
 
 	const shortCodeImages = useShortCodeTransform( shortCodeTransforms );
@@ -296,14 +304,6 @@ function GalleryEdit( props ) {
 					newOrderMap[ b.attributes.id ]
 			)
 		);
-
-		// If new blocks added select the first of these so they scroll into view.
-		if ( newBlocks?.length && existingImageBlocks?.length ) {
-			multiSelect(
-				newBlocks[ 0 ].clientId,
-				newBlocks[ newBlocks.length - 1 ].clientId
-			);
-		}
 	}
 
 	function onUploadError( message ) {
@@ -429,11 +429,26 @@ function GalleryEdit( props ) {
 		( img ) => ! img.id && img.url?.indexOf( 'blob:' ) === 0
 	);
 
+	// MediaPlaceholder props are different between web and native hence, we provide a platform-specific set.
+	const mediaPlaceholderProps = Platform.select( {
+		web: {
+			addToGallery: false,
+			disableMediaButtons: imagesUploading,
+			value: {},
+		},
+		native: {
+			addToGallery: hasImageIds,
+			isAppender: hasImages,
+			disableMediaButtons:
+				( hasImages && ! isSelected ) || imagesUploading,
+			value: hasImageIds ? images : {},
+			autoOpenMediaUpload:
+				! hasImages && isSelected && wasBlockJustInserted,
+		},
+	} );
 	const mediaPlaceholder = (
 		<MediaPlaceholder
-			addToGallery={ false }
 			handleUpload={ false }
-			disableMediaButtons={ imagesUploading }
 			icon={ sharedIcon }
 			labels={ {
 				title: __( 'Gallery' ),
@@ -443,10 +458,9 @@ function GalleryEdit( props ) {
 			accept="image/*"
 			allowedTypes={ ALLOWED_MEDIA_TYPES }
 			multiple
-			value={ {} }
 			onError={ onUploadError }
 			notices={ noticeUI }
-			autoOpenMediaUpload={ isSelected && wasBlockJustInserted }
+			{ ...mediaPlaceholderProps }
 		/>
 	);
 
@@ -537,7 +551,11 @@ function GalleryEdit( props ) {
 			<Gallery
 				{ ...props }
 				images={ images }
-				mediaPlaceholder={ ! hasImages ? mediaPlaceholder : undefined }
+				mediaPlaceholder={
+					! hasImages || Platform.isNative
+						? mediaPlaceholder
+						: undefined
+				}
 				blockProps={ blockProps }
 				insertBlocksAfter={ insertBlocksAfter }
 			/>

package/src/gallery/shared.js

@@ -31,7 +31,7 @@ export const pickRelevantMediaFiles = ( image, sizeSlug = 'large' ) => {
 export function isGalleryV2Enabled() {
 	// Only run the Gallery version compat check if the plugin is running, otherwise
 	// assume we are in 5.9 core and enable by default.
-	if ( process.env.GUTENBERG_PHASE === 2 ) {
+	if ( process.env.IS_GUTENBERG_PLUGIN ) {
 		// We want to fail early here, at least during beta testing phase, to ensure
 		// there aren't instances where undefined values cause false negatives.
 		if (

package/src/gallery/style.scss

@@ -30,6 +30,7 @@
 		margin-top: auto;
 		margin-bottom: auto;
 		flex-direction: column;
+		max-width: 100%;
 
 		> div,
 		> a {
@@ -41,7 +42,9 @@
 		img {
 			display: block;
 			height: auto;
-			max-width: 100%;
+			// Ensure max-width is not overridden on the img when the parent gallery has
+			// wide or full alignment.
+			max-width: 100% !important;
 			width: auto;
 		}
 

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

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Gallery block inserts block 1`] = `
+"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
+<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"></figure>
+<!-- /wp:gallery -->"
+`;

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

@@ -0,0 +1,128 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	fireEvent,
+	waitFor,
+	within,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+const GALLERY_WITH_ONE_IMAGE = `<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":1} -->
+<figure class="wp-block-image"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></figure>
+<!-- /wp:image --></figure>
+<!-- /wp:gallery -->`;
+
+const addGalleryBlock = async () => {
+	const screen = await initializeEditor();
+	const { getByA11yLabel, getByTestId, getByText } = screen;
+
+	fireEvent.press( getByA11yLabel( 'Add block' ) );
+
+	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 },
+		},
+	} );
+
+	fireEvent.press( await waitFor( () => getByText( 'Gallery' ) ) );
+
+	return screen;
+};
+
+describe( 'Gallery block', () => {
+	it( 'inserts block', async () => {
+		const { getByA11yLabel } = await addGalleryBlock();
+
+		const galleryBlock = await waitFor( () =>
+			getByA11yLabel( /Gallery Block\. Row 1/ )
+		);
+
+		expect( galleryBlock ).toHaveProperty( 'type', 'View' );
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'selects a gallery item', async () => {
+		const { getByA11yLabel } = await initializeEditor( {
+			initialHtml: GALLERY_WITH_ONE_IMAGE,
+		} );
+
+		const galleryBlock = await waitFor( () =>
+			getByA11yLabel( /Gallery Block\. Row 1/ )
+		);
+		fireEvent.press( galleryBlock );
+
+		const innerBlockListWrapper = await waitFor( () =>
+			within( galleryBlock ).getByTestId( 'block-list-wrapper' )
+		);
+		fireEvent( innerBlockListWrapper, 'layout', {
+			nativeEvent: {
+				layout: {
+					width: 100,
+				},
+			},
+		} );
+
+		const galleryItem = await waitFor( () =>
+			getByA11yLabel( /Image Block\. Row 1/ )
+		);
+		fireEvent.press( galleryItem );
+
+		expect( galleryItem ).toHaveProperty( 'type', 'View' );
+	} );
+
+	it( 'shows appender button when gallery has images', async () => {
+		const { getByA11yLabel, getByText } = await initializeEditor( {
+			initialHtml: GALLERY_WITH_ONE_IMAGE,
+		} );
+
+		const galleryBlock = await waitFor( () =>
+			getByA11yLabel( /Gallery Block\. Row 1/ )
+		);
+		fireEvent.press( galleryBlock );
+
+		const innerBlockListWrapper = await waitFor( () =>
+			within( galleryBlock ).getByTestId( 'block-list-wrapper' )
+		);
+		fireEvent( innerBlockListWrapper, 'layout', {
+			nativeEvent: {
+				layout: {
+					width: 100,
+				},
+			},
+		} );
+
+		const appenderButton = await waitFor( () =>
+			within( galleryBlock ).getByA11yLabel( /Gallery block\. Empty/ )
+		);
+		fireEvent.press( appenderButton );
+
+		expect( getByText( 'Choose from device' ) ).toBeDefined();
+		expect( getByText( 'Take a Photo' ) ).toBeDefined();
+		expect( getByText( 'WordPress Media Library' ) ).toBeDefined();
+	} );
+} );

package/src/gallery/transforms.js

@@ -291,7 +291,10 @@ const transforms = {
 									url,
 									alt,
 									caption,
-									imageSizeSlug,
+									sizeSlug: imageSizeSlug,
+									linkDestination,
+									href,
+									linkTarget,
 								},
 							} ) =>
 								createBlock( 'core/image', {
@@ -301,6 +304,9 @@ const transforms = {
 									caption,
 									sizeSlug: imageSizeSlug,
 									align,
+									linkDestination,
+									href,
+									linkTarget,
 								} )
 						);
 					}

package/src/gallery/utils.js

@@ -5,6 +5,8 @@ import {
 	LINK_DESTINATION_ATTACHMENT,
 	LINK_DESTINATION_MEDIA,
 	LINK_DESTINATION_NONE,
+	LINK_DESTINATION_MEDIA_WP_CORE,
+	LINK_DESTINATION_ATTACHMENT_WP_CORE,
 } from './constants';
 import {
 	LINK_DESTINATION_ATTACHMENT as IMAGE_LINK_DESTINATION_ATTACHMENT,
@@ -21,15 +23,17 @@ import {
  * @return {Object}            New attributes to assign to image block.
  */
 export function getHrefAndDestination( image, destination ) {
-	// Need to determine the URL that the selected destination maps to.
-	// Gutenberg and WordPress use different constants so the new link
-	// destination also needs to be tweaked.
+	// Gutenberg and WordPress use different constants so if image_default_link_type
+	// option is set we need to map from the WP Core values.
+
 	switch ( destination ) {
+		case LINK_DESTINATION_MEDIA_WP_CORE:
 		case LINK_DESTINATION_MEDIA:
 			return {
 				href: image?.source_url || image?.url, // eslint-disable-line camelcase
 				linkDestination: IMAGE_LINK_DESTINATION_MEDIA,
 			};
+		case LINK_DESTINATION_ATTACHMENT_WP_CORE:
 		case LINK_DESTINATION_ATTACHMENT:
 			return {
 				href: image?.link,

package/src/group/block.json

@@ -23,7 +23,11 @@
 		"html": false,
 		"color": {
 			"gradients": true,
-			"link": true
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
 		},
 		"spacing": {
 			"padding": true,

package/src/group/variations.js

@@ -4,12 +4,22 @@
 import { __ } from '@wordpress/i18n';
 
 const variations = [
+	{
+		name: 'group',
+		title: __( 'Group' ),
+		description: __( 'Blocks shown in a column.' ),
+		attributes: { layout: { type: 'default' } },
+		scope: [ 'transform' ],
+		isActive: ( blockAttributes ) =>
+			! blockAttributes.layout ||
+			blockAttributes.layout?.type === 'default',
+	},
 	{
 		name: 'group-row',
 		title: __( 'Row' ),
 		description: __( 'Blocks shown in a row.' ),
 		attributes: { layout: { type: 'flex', allowOrientation: false } },
-		scope: [ 'inserter' ],
+		scope: [ 'inserter', 'transform' ],
 		isActive: ( blockAttributes ) =>
 			blockAttributes.layout?.type === 'flex',
 	},

package/src/heading/block.json

@@ -31,7 +31,11 @@
 		"anchor": true,
 		"className": false,
 		"color": {
-			"link": true
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
 		},
 		"spacing": {
 			"margin": true

package/src/heading/transforms.js

@@ -84,11 +84,8 @@ const transforms = {
 			isMultiBlock: true,
 			blocks: [ 'core/paragraph' ],
 			transform: ( attributes ) =>
-				attributes.map( ( { content, anchor } ) =>
-					createBlock( 'core/paragraph', {
-						content,
-						anchor,
-					} )
+				attributes.map( ( { content } ) =>
+					createBlock( 'core/paragraph', { content } )
 				),
 		},
 	],