@wordpress/block-editor 15.6.7 → 15.6.9

package/src/components/global-styles/typography-panel.js

@@ -8,7 +8,7 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useCallback, useMemo, useEffect } from '@wordpress/element';
+import { useCallback, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -27,6 +27,7 @@ import {
 	getMergedFontFamiliesAndFontFamilyFaces,
 	findNearestStyleAndWeight,
 } from './typography-utils';
+import { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights';
 
 const MIN_TEXT_COLUMNS = 1;
 const MAX_TEXT_COLUMNS = 6;
@@ -194,15 +195,57 @@ export default function TypographyPanel( {
 		const slug = fontFamilies?.find(
 			( { fontFamily: f } ) => f === newValue
 		)?.slug;
-		onChange(
-			setImmutably(
-				value,
-				[ 'typography', 'fontFamily' ],
-				slug
-					? `var:preset|font-family|${ slug }`
-					: newValue || undefined
-			)
+		let updatedValue = setImmutably(
+			value,
+			[ 'typography', 'fontFamily' ],
+			slug ? `var:preset|font-family|${ slug }` : newValue || undefined
+		);
+
+		// Check if current font style/weight are available in the new font family.
+		const newFontFamilyFaces =
+			fontFamilies?.find( ( { fontFamily: f } ) => f === newValue )
+				?.fontFace ?? [];
+		const { fontStyles, fontWeights } =
+			getFontStylesAndWeights( newFontFamilyFaces );
+		const hasFontStyle = fontStyles?.some(
+			( { value: fs } ) => fs === fontStyle
+		);
+		const hasFontWeight = fontWeights?.some(
+			( { value: fw } ) => fw?.toString() === fontWeight?.toString()
 		);
+
+		// Find the nearest available font style/weight if not available.
+		if ( ! hasFontStyle || ! hasFontWeight ) {
+			const { nearestFontStyle, nearestFontWeight } =
+				findNearestStyleAndWeight(
+					newFontFamilyFaces,
+					fontStyle,
+					fontWeight
+				);
+			if ( nearestFontStyle || nearestFontWeight ) {
+				// Update to the nearest available font style/weight in the new font family.
+				updatedValue = {
+					...updatedValue,
+					typography: {
+						...updatedValue?.typography,
+						fontStyle: nearestFontStyle || undefined,
+						fontWeight: nearestFontWeight || undefined,
+					},
+				};
+			} else if ( fontStyle || fontWeight ) {
+				// Reset if no available styles/weights found.
+				updatedValue = {
+					...updatedValue,
+					typography: {
+						...updatedValue?.typography,
+						fontStyle: undefined,
+						fontWeight: undefined,
+					},
+				};
+			}
+		}
+
+		onChange( updatedValue );
 	};
 	const hasFontFamily = () => !! value?.typography?.fontFamily;
 	const resetFontFamily = () => setFontFamily( undefined );
@@ -260,11 +303,6 @@ export default function TypographyPanel( {
 	const hasFontWeights = settings?.typography?.fontWeight;
 	const fontStyle = decodeValue( inheritedValue?.typography?.fontStyle );
 	const fontWeight = decodeValue( inheritedValue?.typography?.fontWeight );
-	const { nearestFontStyle, nearestFontWeight } = findNearestStyleAndWeight(
-		fontFamilyFaces,
-		fontStyle,
-		fontWeight
-	);
 	const setFontAppearance = useCallback(
 		( { fontStyle: newFontStyle, fontWeight: newFontWeight } ) => {
 			// Only update the font style and weight if they have changed.
@@ -287,24 +325,6 @@ export default function TypographyPanel( {
 		setFontAppearance( {} );
 	}, [ setFontAppearance ] );
 
-	// Check if previous font style and weight values are available in the new font family.
-	useEffect( () => {
-		if ( nearestFontStyle && nearestFontWeight ) {
-			setFontAppearance( {
-				fontStyle: nearestFontStyle,
-				fontWeight: nearestFontWeight,
-			} );
-		} else {
-			// Reset font appearance if there are no available styles or weights.
-			resetFontAppearance();
-		}
-	}, [
-		nearestFontStyle,
-		nearestFontWeight,
-		resetFontAppearance,
-		setFontAppearance,
-	] );
-
 	// Line Height
 	const hasLineHeightEnabled = useHasLineHeightControl( settings );
 	const lineHeight = decodeValue( inheritedValue?.typography?.lineHeight );

package/src/components/index.js

@@ -172,3 +172,7 @@ export { useBlockEditingMode } from './block-editing-mode';
 export { default as BlockEditorProvider } from './provider';
 export { useSettings, useSetting } from './use-settings';
 export { useBlockCommands } from './use-block-commands';
+
+// This component is no longer used in Gutenberg,
+// but kept for backwards compatibility.
+export { default as ToolSelector } from './tool-selector';

package/src/components/inner-blocks/test/index.js

@@ -27,6 +27,7 @@ describe( 'InnerBlocks', () => {
 
 	it( 'should return element as string, with inner blocks', () => {
 		registerBlockType( 'core/fruit', {
+			apiVersion: 3,
 			category: 'text',
 
 			title: 'fruit',
@@ -62,6 +63,7 @@ describe( 'InnerBlocks', () => {
 
 	it( 'should force serialize for invalid block with inner blocks', () => {
 		const blockType = {
+			apiVersion: 3,
 			attributes: {
 				throw: {
 					type: 'boolean',

package/src/components/list-view/block-select-button.js

@@ -65,7 +65,7 @@ function ListViewBlockSelectButton(
 				return {
 					canToggleBlockVisibility: hasBlockSupport(
 						getBlockName( clientId ),
-						'blockVisibility',
+						'visibility',
 						true
 					),
 					isBlockHidden: _isBlockHidden( clientId ),

package/src/components/list-view/block.js

@@ -375,10 +375,10 @@ function ListViewBlock( {
 			event.preventDefault();
 			const { blocksToUpdate } = getBlocksToUpdate();
 			const blocks = getBlocksByClientId( blocksToUpdate );
-			const canToggleBlockVisibility = blocks.every( ( blockToUpdate ) =>
-				hasBlockSupport( blockToUpdate.name, 'blockVisibility', true )
+			const canToggleVisibility = blocks.every( ( blockToUpdate ) =>
+				hasBlockSupport( blockToUpdate.name, 'visibility', true )
 			);
-			if ( ! canToggleBlockVisibility ) {
+			if ( ! canToggleVisibility ) {
 				return;
 			}
 			const hasHiddenBlock = blocks.some(

package/src/components/provider/test/use-block-sync.js

@@ -39,6 +39,7 @@ const TestWrapper = withRegistryProvider( ( props ) => {
 describe( 'useBlockSync hook', () => {
 	beforeAll( () => {
 		registerBlockType( 'test/test-block', {
+			apiVersion: 3,
 			title: 'Test block',
 			attributes: {
 				foo: { type: 'number' },

package/src/components/rich-text/index.js

@@ -137,7 +137,7 @@ export function RichTextWrapper(
 			return { isSelected: false };
 		}
 
-		const { getSelectionStart, getSelectionEnd, getBlockEditingMode } =
+		const { getSelectionStart, getSelectionEnd } =
 			select( blockEditorStore );
 		const selectionStart = getSelectionStart();
 		const selectionEnd = getSelectionEnd();
@@ -159,17 +159,15 @@ export function RichTextWrapper(
 			selectionStart: isSelected ? selectionStart.offset : undefined,
 			selectionEnd: isSelected ? selectionEnd.offset : undefined,
 			isSelected,
-			isContentOnly: getBlockEditingMode( clientId ) === 'contentOnly',
 		};
 	};
-	const { selectionStart, selectionEnd, isSelected, isContentOnly } =
-		useSelect( selector, [
-			clientId,
-			identifier,
-			instanceId,
-			originalIsSelected,
-			isBlockSelected,
-		] );
+	const { selectionStart, selectionEnd, isSelected } = useSelect( selector, [
+		clientId,
+		identifier,
+		instanceId,
+		originalIsSelected,
+		isBlockSelected,
+	] );
 
 	const { disableBoundBlock, bindingsPlaceholder, bindingsLabel } = useSelect(
 		( select ) => {
@@ -340,9 +338,8 @@ export function RichTextWrapper(
 	} = useFormatTypes( {
 		clientId,
 		identifier,
-		allowedFormats: adjustedAllowedFormats,
 		withoutInteractiveFormatting,
-		disableNoneEssentialFormatting: isContentOnly,
+		allowedFormats: adjustedAllowedFormats,
 	} );
 
 	function addEditorOnlyFormats( value ) {

package/src/components/rich-text/use-format-types.js

@@ -5,11 +5,6 @@ import { useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as richTextStore } from '@wordpress/rich-text';
 
-/**
- * Internal dependencies
- */
-import { essentialFormatKey } from '../../store/private-keys';
-
 function formatTypesSelector( select ) {
 	return select( richTextStore ).getFormatTypes();
 }
@@ -61,53 +56,35 @@ function getPrefixedSelectKeys( selected, prefix ) {
  * This hook provides RichText with the `formatTypes` and its derived props from
  * experimental format type settings.
  *
- * @param {Object}  options                                Options
- * @param {string}  options.clientId                       Block client ID.
- * @param {string}  options.identifier                     Block attribute.
- * @param {Array}   options.allowedFormats                 Allowed formats
- * @param {boolean} options.withoutInteractiveFormatting   Whether to clean the interactive formatting or not.
- * @param {boolean} options.disableNoneEssentialFormatting Whether to disable none-essential formatting or not.
+ * @param {Object}  $0                              Options
+ * @param {string}  $0.clientId                     Block client ID.
+ * @param {string}  $0.identifier                   Block attribute.
+ * @param {boolean} $0.withoutInteractiveFormatting Whether to clean the interactive formatting or not.
+ * @param {Array}   $0.allowedFormats               Allowed formats
  */
 export function useFormatTypes( {
 	clientId,
 	identifier,
-	allowedFormats,
 	withoutInteractiveFormatting,
-	disableNoneEssentialFormatting = false,
+	allowedFormats,
 } ) {
 	const allFormatTypes = useSelect( formatTypesSelector, [] );
 	const formatTypes = useMemo( () => {
-		return allFormatTypes.filter(
-			( {
-				name,
-				interactive,
-				tagName,
-				[ essentialFormatKey ]: isEssential,
-			} ) => {
-				if ( allowedFormats && ! allowedFormats.includes( name ) ) {
-					return false;
-				}
-
-				if ( disableNoneEssentialFormatting && ! isEssential ) {
-					return false;
-				}
-
-				if (
-					withoutInteractiveFormatting &&
-					( interactive || interactiveContentTags.has( tagName ) )
-				) {
-					return false;
-				}
+		return allFormatTypes.filter( ( { name, interactive, tagName } ) => {
+			if ( allowedFormats && ! allowedFormats.includes( name ) ) {
+				return false;
+			}
 
-				return true;
+			if (
+				withoutInteractiveFormatting &&
+				( interactive || interactiveContentTags.has( tagName ) )
+			) {
+				return false;
 			}
-		);
-	}, [
-		allFormatTypes,
-		allowedFormats,
-		disableNoneEssentialFormatting,
-		withoutInteractiveFormatting,
-	] );
+
+			return true;
+		} );
+	}, [ allFormatTypes, allowedFormats, withoutInteractiveFormatting ] );
 	const keyedSelected = useSelect(
 		( select ) =>
 			formatTypes.reduce( ( accumulator, type ) => {

package/src/components/tool-selector/index.js

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+import { forwardRef } from '@wordpress/element';
+
+function ToolSelector() {
+	deprecated( 'wp.blockEditor.ToolSelector', {
+		since: '6.9',
+		hint: 'The ToolSelector component no longer renders anything.',
+	} );
+
+	return null;
+}
+
+/**
+ * This component has been deprecated and no longer renders anything.
+ */
+export default forwardRef( ToolSelector );

package/src/components/use-block-commands/index.js

@@ -224,7 +224,7 @@ const getQuickActionsCommands = () =>
 		const canRemove = canRemoveBlocks( clientIds );
 
 		const canToggleBlockVisibility = blocks.every( ( { clientId } ) =>
-			hasBlockSupport( getBlockName( clientId ), 'blockVisibility', true )
+			hasBlockSupport( getBlockName( clientId ), 'visibility', true )
 		);
 
 		const commands = [];

package/src/components/use-block-drop-zone/index.js

@@ -415,11 +415,7 @@ export default function useBlockDropZone( {
 					// Filter out blocks that are hidden
 					.filter( ( block ) => {
 						return ! (
-							hasBlockSupport(
-								block.name,
-								'blockVisibility',
-								true
-							) &&
+							hasBlockSupport( block.name, 'visibility', true ) &&
 							block.attributes?.metadata?.blockVisibility ===
 								false
 						);

package/src/hooks/fit-text.js

@@ -58,18 +58,25 @@ function useFitText( { fitText, name, clientId } ) {
 	const hasFitTextSupport = hasBlockSupport( name, FIT_TEXT_SUPPORT_KEY );
 	const blockElement = useBlockElement( clientId );
 
-	// Monitor block attribute changes, and parent changes.
+	// Monitor block attribute changes, parent changes, and block mode.
 	// Any attribute or parent change may change the available space.
-	const { blockAttributes, parentId } = useSelect(
+	// Block mode is needed to disable fit text when in HTML editing mode.
+	const { blockAttributes, parentId, blockMode } = useSelect(
 		( select ) => {
 			if ( ! clientId || ! hasFitTextSupport || ! fitText ) {
 				return EMPTY_OBJECT;
 			}
+			const _blockMode =
+				select( blockEditorStore ).getBlockMode( clientId );
+			if ( _blockMode === 'html' ) {
+				return { blockMode: _blockMode };
+			}
 			return {
 				blockAttributes:
 					select( blockEditorStore ).getBlockAttributes( clientId ),
 				parentId:
 					select( blockEditorStore ).getBlockRootClientId( clientId ),
+				blockMode: _blockMode,
 			};
 		},
 		[ clientId, hasFitTextSupport, fitText ]
@@ -107,7 +114,8 @@ function useFitText( { fitText, name, clientId } ) {
 			! fitText ||
 			! blockElement ||
 			! clientId ||
-			! hasFitTextSupport
+			! hasFitTextSupport ||
+			blockMode === 'html'
 		) {
 			return;
 		}
@@ -178,11 +186,17 @@ function useFitText( { fitText, name, clientId } ) {
 		applyFitText,
 		blockElement,
 		hasFitTextSupport,
+		blockMode,
 	] );
 
 	// Trigger fit text recalculation when content changes
 	useEffect( () => {
-		if ( fitText && blockElement && hasFitTextSupport ) {
+		if (
+			fitText &&
+			blockElement &&
+			hasFitTextSupport &&
+			blockMode !== 'html'
+		) {
 			// Wait for next frame to ensure DOM has updated after content changes
 			const frameId = window.requestAnimationFrame( () => {
 				if ( blockElement ) {
@@ -198,6 +212,7 @@ function useFitText( { fitText, name, clientId } ) {
 		applyFitText,
 		blockElement,
 		hasFitTextSupport,
+		blockMode,
 	] );
 }
 

package/src/hooks/metadata.js

@@ -91,7 +91,7 @@ export function addTransforms( result, source, index, results ) {
 	if (
 		sourceMetadata.blockVisibility !== undefined &&
 		! result.attributes?.metadata?.blockVisibility &&
-		hasBlockSupport( result.name, 'blockVisibility', true )
+		hasBlockSupport( result.name, 'visibility', true )
 	) {
 		preservedMetadata.blockVisibility = sourceMetadata.blockVisibility;
 	}

package/src/hooks/test/align.js

@@ -17,6 +17,7 @@ const noop = () => {};
 
 describe( 'align', () => {
 	const blockSettings = {
+		apiVersion: 3,
 		save: noop,
 		category: 'text',
 		title: 'block title',

package/src/hooks/test/allowed-blocks.js

@@ -22,6 +22,7 @@ describe( 'allowedBlocks', () => {
 	describe( 'addTransforms()', () => {
 		it( 'should not preserve allowedBlocks in wrapping transforms', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 				supports: { allowedBlocks: true },
 			} );
@@ -53,6 +54,7 @@ describe( 'allowedBlocks', () => {
 
 		it( 'should not preserve allowedBlocks in one-to-many transforms', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 				supports: { allowedBlocks: true },
 			} );
@@ -83,6 +85,7 @@ describe( 'allowedBlocks', () => {
 
 		it( 'should not preserve allowedBlocks in many-to-one transforms', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 				supports: { allowedBlocks: true },
 			} );
@@ -114,6 +117,7 @@ describe( 'allowedBlocks', () => {
 
 		it( 'should not preserve allowedBlocks in many-to-many transforms with different counts', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 				supports: { allowedBlocks: true },
 			} );
@@ -155,6 +159,7 @@ describe( 'allowedBlocks', () => {
 
 		it( 'should preserve allowedBlocks in many-to-many transforms with same counts', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 				supports: { allowedBlocks: true },
 			} );
@@ -194,6 +199,7 @@ describe( 'allowedBlocks', () => {
 
 		it( "should filter allowedBlocks based on destination block's allowedBlocks", () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 				supports: { allowedBlocks: true },
 				allowedBlocks: [ 'core/paragraph' ],
@@ -227,6 +233,7 @@ describe( 'allowedBlocks', () => {
 
 		it( 'should not override existing allowedBlocks in target block', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 				supports: { allowedBlocks: true },
 			} );
@@ -253,6 +260,7 @@ describe( 'allowedBlocks', () => {
 
 		it( 'should not preserve allowedBlocks when target block does not support allowedBlocks', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 			} );
 

package/src/hooks/test/font-size.js

@@ -39,6 +39,7 @@ function addUseSettingFilter( callback ) {
 
 describe( 'useBlockProps', () => {
 	const blockSettings = {
+		apiVersion: 3,
 		save: () => noop,
 		category: 'text',
 		title: 'font size title',

package/src/hooks/test/metadata.js

@@ -174,6 +174,7 @@ describe( 'metadata', () => {
 
 		it( 'should preserve custom name metadata', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 			} );
 			const source = [
@@ -199,6 +200,7 @@ describe( 'metadata', () => {
 
 		it( 'should not preserve custom name metadata when target block does not support renaming', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 				supports: {
 					renaming: false,
@@ -226,6 +228,7 @@ describe( 'metadata', () => {
 
 		it( 'should preserve block visibility metadata', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 			} );
 
@@ -252,9 +255,10 @@ describe( 'metadata', () => {
 
 		it( 'should not preserve block visibility metadata when target block does not support it', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 				supports: {
-					blockVisibility: false,
+					visibility: false,
 				},
 			} );
 

package/src/hooks/test/text-align.js

@@ -16,6 +16,7 @@ const noop = () => {};
 
 describe( 'textAlign', () => {
 	const blockSettings = {
+		apiVersion: 3,
 		save: noop,
 		category: 'text',
 		title: 'block title',

package/src/private-apis.js

@@ -40,7 +40,6 @@ import {
 	globalStylesLinksDataKey,
 	sectionRootClientIdKey,
 	mediaEditKey,
-	essentialFormatKey,
 } from './store/private-keys';
 import { requiresWrapperOnCopy } from './components/writing-flow/utils';
 import { PrivateRichText } from './components/rich-text/';
@@ -107,7 +106,6 @@ lock( privateApis, {
 	CommentIconSlotFill,
 	CommentIconToolbarSlotFill,
 	mediaEditKey,
-	essentialFormatKey,
 	useBlockElement,
 	useBlockElementRef,
 } );

package/src/store/private-keys.js

@@ -4,4 +4,3 @@ export const selectBlockPatternsKey = Symbol( 'selectBlockPatternsKey' );
 export const reusableBlocksSelectKey = Symbol( 'reusableBlocksSelect' );
 export const sectionRootClientIdKey = Symbol( 'sectionRootClientIdKey' );
 export const mediaEditKey = Symbol( 'mediaEditKey' );
-export const essentialFormatKey = Symbol( 'essentialFormat' );

package/src/store/private-selectors.js

@@ -687,7 +687,7 @@ export function getInsertionPoint( state ) {
  */
 export const isBlockHidden = ( state, clientId ) => {
 	const blockName = getBlockName( state, clientId );
-	if ( ! hasBlockSupport( state, blockName, 'blockVisibility', true ) ) {
+	if ( ! hasBlockSupport( state, blockName, 'visibility', true ) ) {
 		return false;
 	}
 	const attributes = state.blocks.attributes.get( clientId );

package/src/store/test/actions.js

@@ -60,6 +60,7 @@ const {
 
 describe( 'actions', () => {
 	const defaultBlockSettings = {
+		apiVersion: 3,
 		attributes: {
 			content: {},
 		},
@@ -863,6 +864,7 @@ describe( 'actions', () => {
 
 		it( 'should merge the blocks if blocks of the same type', () => {
 			registerBlockType( 'core/test-block', {
+				apiVersion: 3,
 				attributes: {
 					content: {},
 				},
@@ -933,6 +935,7 @@ describe( 'actions', () => {
 
 		it( 'should not merge the blocks have different types without transformation', () => {
 			registerBlockType( 'core/test-block', {
+				apiVersion: 3,
 				attributes: {
 					content: {},
 				},
@@ -986,6 +989,7 @@ describe( 'actions', () => {
 
 		it( 'should transform and merge the blocks', () => {
 			registerBlockType( 'core/test-block', {
+				apiVersion: 3,
 				attributes: {
 					content: {
 						type: 'string',
@@ -1004,6 +1008,7 @@ describe( 'actions', () => {
 				title: 'test block',
 			} );
 			registerBlockType( 'core/test-block-2', {
+				apiVersion: 3,
 				attributes: {
 					content2: {
 						type: 'string',
@@ -1081,6 +1086,7 @@ describe( 'actions', () => {
 
 		it( 'should not merge the blocks if blockB editing mode is `disabled`', () => {
 			registerBlockType( 'core/test-block', {
+				apiVersion: 3,
 				attributes: {
 					content: {},
 				},
@@ -1140,6 +1146,7 @@ describe( 'actions', () => {
 
 		it( 'should not merge the blocks if blockA editing mode is `disabled`', () => {
 			registerBlockType( 'core/test-block', {
+				apiVersion: 3,
 				attributes: {
 					content: {},
 				},

package/src/store/test/reducer.js

@@ -199,6 +199,7 @@ describe( 'state', () => {
 	describe( 'blocks()', () => {
 		beforeAll( () => {
 			registerBlockType( 'core/test-block', {
+				apiVersion: 3,
 				save: noop,
 				edit: noop,
 				category: 'text',
@@ -213,12 +214,14 @@ describe( 'state', () => {
 		describe( 'replace inner blocks', () => {
 			beforeAll( () => {
 				registerBlockType( 'core/test-parent-block', {
+					apiVersion: 3,
 					save: noop,
 					edit: noop,
 					category: 'text',
 					title: 'test parent block',
 				} );
 				registerBlockType( 'core/test-child-block', {
+					apiVersion: 3,
 					save: noop,
 					edit: noop,
 					category: 'text',
@@ -2994,6 +2997,7 @@ describe( 'state', () => {
 						blockAttributes?.fruit === variationAttributes.fruit,
 				} ) );
 				registerBlockType( blockWithVariations, {
+					apiVersion: 3,
 					save: noop,
 					edit: noop,
 					title: 'Fruit with variations',