@wordpress/block-editor 15.23.0 → 16.0.1-next.v.202607070741.0

package/src/components/block-inspector/index.js

@@ -394,13 +394,14 @@ const BlockInspectorSingleBlock = ( {
 	selectedBlockStyleState,
 	showStateOnCanvas,
 	isResponsiveEditing,
-	isBlockStyleStateSelected,
 } ) => {
 	const listViewRef = useRef( null );
 	const hasMultipleTabs = availableTabs?.length > 1;
 	const hasPseudoState = hasPseudoBlockStyleState( selectedBlockStyleState );
 	const isEditingStyleState =
-		isBlockStyleStateSelected || isResponsiveEditing;
+		( hasViewportBlockStyleState( selectedBlockStyleState ) &&
+			isResponsiveEditing ) ||
+		hasPseudoBlockStyleState( selectedBlockStyleState );
 	const hasParentChildBlockCards =
 		editedContentOnlySection &&
 		editedContentOnlySection !== renderedBlockClientId;

package/src/components/block-list/block-invalid-warning.js

@@ -20,7 +20,7 @@ const blockToBlocks = ( block ) =>
 	} );
 
 export default function BlockInvalidWarning( { clientId } ) {
-	const { block, canInsertHTMLBlock, canInsertClassicBlock } = useSelect(
+	const { block, canInsertHTMLBlock } = useSelect(
 		( select ) => {
 			const { canInsertBlockType, getBlock, getBlockRootClientId } =
 				select( blockEditorStore );
@@ -33,10 +33,6 @@ export default function BlockInvalidWarning( { clientId } ) {
 					'core/html',
 					rootClientId
 				),
-				canInsertClassicBlock: canInsertBlockType(
-					'core/freeform',
-					rootClientId
-				),
 			};
 		},
 		[ clientId ]
@@ -48,16 +44,13 @@ export default function BlockInvalidWarning( { clientId } ) {
 
 	const convert = useMemo(
 		() => ( {
-			toClassic() {
-				const classicBlock = createBlock( 'core/freeform', {
-					content: block.originalContent,
-				} );
-				return replaceBlock( block.clientId, classicBlock );
-			},
 			toHTML() {
-				const htmlBlock = createBlock( 'core/html', {
-					content: block.originalContent,
-				} );
+				const htmlBlock = createBlock(
+					'core/html',
+					{},
+					[],
+					[ block.originalContent ]
+				);
 				return replaceBlock( block.clientId, htmlBlock );
 			},
 			toBlocks() {
@@ -88,12 +81,8 @@ export default function BlockInvalidWarning( { clientId } ) {
 					title: __( 'Convert to HTML' ),
 					onClick: convert.toHTML,
 				},
-				canInsertClassicBlock && {
-					title: __( 'Convert to Classic Block' ),
-					onClick: convert.toClassic,
-				},
 			].filter( Boolean ),
-		[ canInsertHTMLBlock, canInsertClassicBlock, convert ]
+		[ canInsertHTMLBlock, convert ]
 	);
 
 	return (

package/src/components/block-patterns-list/stories/index.story.jsx

@@ -11,7 +11,7 @@ import { ExperimentalBlockEditorProvider } from '../../provider';
 import patterns from './fixtures';
 // Reason: Styles are contained in ExperimentalBlockEditorProvider iframe.
 // eslint-disable-next-line @wordpress/no-non-module-stylesheet-imports
-import blockLibraryStyles from '../../../../../block-library/build-style/style.css?raw';
+import blockLibraryStyles from '@wordpress/block-library/build-style/style.css?raw';
 
 const blockEditorSettings = {
 	styles: [ { css: blockLibraryStyles } ],

package/src/components/block-styles/use-styles-for-block.js

@@ -31,6 +31,7 @@ function useGenericPreviewBlock( block, type ) {
 			return getBlockFromExample( blockName, {
 				attributes: example.attributes,
 				innerBlocks: example.innerBlocks,
+				innerContent: example.innerContent,
 			} );
 		}
 

package/src/components/block-title/use-block-display-title.js

@@ -39,7 +39,7 @@ export default function useBlockDisplayTitle( {
 				return null;
 			}
 
-			const { getBlockName, getBlockAttributes } =
+			const { getBlockName, getBlockAttributes, getBlock } =
 				select( blockEditorStore );
 			const { getBlockType, getActiveBlockVariation } =
 				select( blocksStore );
@@ -57,7 +57,12 @@ export default function useBlockDisplayTitle( {
 				return label;
 			}
 
-			const match = getActiveBlockVariation( blockName, attributes );
+			const match = getActiveBlockVariation(
+				blockName,
+				attributes,
+				undefined,
+				getBlock?.( clientId )?.innerContent
+			);
 			// Label will fallback to the title if no label is defined for the current label context.
 			return match?.title || blockType.title;
 		},

package/src/components/block-toolbar/block-toolbar-icon.js

@@ -19,7 +19,6 @@ import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import { store as blockEditorStore } from '../../store';
 import { hasPatternOverridesDefaultBinding } from '../../utils/block-bindings';
 import { unlock } from '../../lock-unlock';
-import { isIsolatedEditorKey } from '../../store/private-keys';
 
 function getBlockIconVariant( { select, clientIds } ) {
 	const {
@@ -30,11 +29,9 @@ function getBlockIconVariant( { select, clientIds } ) {
 		getTemplateLock,
 		getBlockEditingMode,
 		canEditBlock,
-		isWithinEditedContentOnlySection,
-		getSettings,
+		isSectionBlock,
 	} = unlock( select( blockEditorStore ) );
 	const { getBlockStyles } = select( blocksStore );
-	const isIsolatedEditor = !! getSettings()?.[ isIsolatedEditorKey ];
 
 	const hasTemplateLock = clientIds.some(
 		( id ) => getTemplateLock( id ) === 'contentOnly'
@@ -48,8 +45,7 @@ function getBlockIconVariant( { select, clientIds } ) {
 	const hasPatternNameInSelection = clientIds.some(
 		( id ) =>
 			!! getBlockAttributes( id )?.metadata?.patternName &&
-			! isWithinEditedContentOnlySection( id ) &&
-			! isIsolatedEditor
+			isSectionBlock( id )
 	);
 	const hasPatternOverrides = clientIds.every( ( clientId ) =>
 		hasPatternOverridesDefaultBinding(
@@ -93,13 +89,8 @@ function getBlockIconVariant( { select, clientIds } ) {
 }
 
 function getBlockIcon( { select, clientIds } ) {
-	const {
-		getBlockName,
-		getBlockAttributes,
-		isWithinEditedContentOnlySection,
-		getSettings,
-	} = unlock( select( blockEditorStore ) );
-	const isIsolatedEditor = !! getSettings()?.[ isIsolatedEditorKey ];
+	const { getBlockName, getBlockAttributes, getBlock, isSectionBlock } =
+		unlock( select( blockEditorStore ) );
 
 	const _isSingleBlock = clientIds.length === 1;
 	const firstClientId = clientIds[ 0 ];
@@ -108,8 +99,7 @@ function getBlockIcon( { select, clientIds } ) {
 	if (
 		_isSingleBlock &&
 		blockAttributes?.metadata?.patternName &&
-		! isWithinEditedContentOnlySection( firstClientId ) &&
-		! isIsolatedEditor
+		isSectionBlock( firstClientId )
 	) {
 		return symbol;
 	}
@@ -118,7 +108,12 @@ function getBlockIcon( { select, clientIds } ) {
 	const blockType = getBlockType( blockName );
 	if ( _isSingleBlock ) {
 		const { getActiveBlockVariation } = select( blocksStore );
-		const match = getActiveBlockVariation( blockName, blockAttributes );
+		const match = getActiveBlockVariation(
+			blockName,
+			blockAttributes,
+			undefined,
+			getBlock?.( firstClientId )?.innerContent
+		);
 		return match?.icon || blockType?.icon;
 	}
 

package/src/components/block-toolbar/test/block-toolbar-icon.js

@@ -13,7 +13,6 @@ import { paragraph } from '@wordpress/icons';
  * Internal dependencies
  */
 import BlockToolbarIcon from '../block-toolbar-icon';
-import { isIsolatedEditorKey } from '../../../store/private-keys';
 
 jest.mock( '@wordpress/blocks', () => {
 	const actualImplementation = jest.requireActual( '@wordpress/blocks' );
@@ -68,15 +67,13 @@ describe( 'BlockToolbarIcon', () => {
 		},
 		blockName = 'core/group',
 		getActiveBlockVariation = () => null,
-		settings = {},
-		isWithinEditedSection = false,
+		isSectionBlock = true,
 	} = {} ) => {
 		useSelect.mockImplementation( ( mapSelect ) =>
 			mapSelect( () => ( {
 				get: () => false,
 				getBlockName: () => blockName,
 				getBlockAttributes: () => attributes,
-				getSettings: () => settings,
 				getBlockParentsByBlockName: () => [],
 				canRemoveBlocks: () => true,
 				getTemplateLock: () => undefined,
@@ -84,7 +81,7 @@ describe( 'BlockToolbarIcon', () => {
 				canEditBlock: () => true,
 				getBlockStyles: () => [ {} ],
 				getActiveBlockVariation,
-				isWithinEditedContentOnlySection: () => isWithinEditedSection,
+				isSectionBlock: () => isSectionBlock,
 			} ) )
 		);
 	};
@@ -210,7 +207,7 @@ describe( 'BlockToolbarIcon', () => {
 		} );
 
 		it( 'should show the block switcher when the section is being edited', () => {
-			setupToolbarSelectors( { isWithinEditedSection: true } );
+			setupToolbarSelectors( { isSectionBlock: false } );
 
 			render( <BlockToolbarIcon { ...defaultProps } /> );
 
@@ -227,9 +224,7 @@ describe( 'BlockToolbarIcon', () => {
 						patternName: 'theme/header-wrapper',
 					},
 				},
-				settings: {
-					[ isIsolatedEditorKey ]: true,
-				},
+				isSectionBlock: false,
 			} );
 
 			render( <BlockToolbarIcon { ...defaultProps } /> );
@@ -241,6 +236,34 @@ describe( 'BlockToolbarIcon', () => {
 				'core/group-icon'
 			);
 		} );
+
+		it( 'should show the block switcher when content-only editing is disabled', () => {
+			setupToolbarSelectors( {
+				isSectionBlock: false,
+			} );
+
+			render( <BlockToolbarIcon { ...defaultProps } /> );
+
+			expect(
+				screen.getByTestId( 'block-switcher' )
+			).toBeInTheDocument();
+			expect( screen.getByTestId( 'block-icon' ) ).toHaveTextContent(
+				'core/group-icon'
+			);
+		} );
+
+		it( 'should show the block icon for section blocks without pattern metadata', () => {
+			setupToolbarSelectors( {
+				attributes: {},
+				blockName: 'core/template-part',
+			} );
+
+			render( <BlockToolbarIcon { ...defaultProps } /> );
+
+			expect( screen.getByTestId( 'block-icon' ) ).toHaveTextContent(
+				'core/template-part-icon'
+			);
+		} );
 	} );
 
 	describe( 'label calculation', () => {

package/src/components/block-variation-transforms/index.js

@@ -119,7 +119,6 @@ function VariationsToggleGroupControl( {
 				value={ selectedValue }
 				hideLabelFromVision
 				onChange={ onSelectVariation }
-				__next40pxDefaultSize
 			>
 				{ variations.map( ( variation ) => (
 					<ToggleGroupControlOptionIcon

package/src/components/child-layout-control/index.js

@@ -178,7 +178,6 @@ function FlexControls( {
 			panelId={ panelId }
 		>
 			<ToggleGroupControl
-				size="__unstable-large"
 				label={ childLayoutOrientation( parentLayout ) }
 				value={ flexControlValue }
 				help={ helpText( flexControlValue, parentLayout ) }
@@ -225,7 +224,6 @@ function FlexControls( {
 			</ToggleGroupControl>
 			{ hasFlexSizeValue && (
 				<UnitControl
-					size="__unstable-large"
 					units={ units }
 					onChange={ ( value ) => {
 						onChange( {

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -18,29 +18,6 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
 }
 
 .emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: calc(4px * 1);
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-4>* {
-  min-height: 0;
-}
-
-.emotion-6 {
   font-size: 11px;
   font-weight: 499;
   line-height: 1.4;
@@ -50,82 +27,6 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   padding: 0;
 }
 
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: calc(4px * 3);
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-8>* {
-  min-height: 0;
-}
-
-.emotion-10 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: 0;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-10>* {
-  min-height: 0;
-}
-
-.emotion-12 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: calc(4px * 0.5);
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-12>* {
-  min-height: 0;
-}
-
-.emotion-14 {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 <div>
   <div
     class="components-base-control block-editor-color-gradient-control emotion-0 emotion-1"
@@ -137,16 +38,17 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
         class="block-editor-color-gradient-control__fieldset"
       >
         <div
-          class="components-flex components-h-stack components-v-stack emotion-4 emotion-5"
+          class="style-flex style-items-column components-flex components-h-stack components-v-stack"
           data-wp-c16t="true"
           data-wp-component="VStack"
+          style="--wp-components-flex-align: stretch; --wp-components-flex-direction: column; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 1); --wp-components-flex-justify: center;"
         >
           <legend>
             <div
               class="block-editor-color-gradient-control__color-indicator"
             >
               <span
-                class="components-base-control__label emotion-6 emotion-7"
+                class="components-base-control__label emotion-4 emotion-5"
               >
                 Test Color
               </span>
@@ -156,18 +58,20 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
             class="block-editor-color-gradient-control__panel"
           >
             <div
-              class="components-flex components-h-stack components-v-stack emotion-8 emotion-5"
+              class="style-flex style-items-column components-flex components-h-stack components-v-stack"
               data-wp-c16t="true"
               data-wp-component="VStack"
+              style="--wp-components-flex-align: stretch; --wp-components-flex-direction: column; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 3); --wp-components-flex-justify: center;"
             >
               <div
                 class="components-dropdown"
                 tabindex="-1"
               >
                 <div
-                  class="components-flex components-h-stack components-v-stack components-color-palette__custom-color-wrapper emotion-10 emotion-5"
+                  class="style-flex style-items-column components-flex components-h-stack components-v-stack components-color-palette__custom-color-wrapper"
                   data-wp-c16t="true"
                   data-wp-component="VStack"
+                  style="--wp-components-flex-align: stretch; --wp-components-flex-direction: column; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: 0; --wp-components-flex-justify: center;"
                 >
                   <button
                     aria-expanded="false"
@@ -178,19 +82,20 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                     type="button"
                   />
                   <div
-                    class="components-flex components-h-stack components-v-stack components-color-palette__custom-color-text-wrapper emotion-12 emotion-5"
+                    class="style-flex style-items-column components-flex components-h-stack components-v-stack components-color-palette__custom-color-text-wrapper"
                     data-wp-c16t="true"
                     data-wp-component="VStack"
+                    style="--wp-components-flex-align: stretch; --wp-components-flex-direction: column; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 0.5); --wp-components-flex-justify: center;"
                   >
                     <span
-                      class="components-truncate components-color-palette__custom-color-name emotion-14 emotion-5"
+                      class="style-truncate components-truncate components-color-palette__custom-color-name"
                       data-wp-c16t="true"
                       data-wp-component="Truncate"
                     >
                       red
                     </span>
                     <span
-                      class="components-truncate components-color-palette__custom-color-value components-color-palette__custom-color-value--is-hex emotion-14 emotion-5"
+                      class="style-truncate components-truncate components-color-palette__custom-color-value components-color-palette__custom-color-value--is-hex"
                       data-wp-c16t="true"
                       data-wp-component="Truncate"
                     >

package/src/components/colors-gradients/control.js

@@ -88,15 +88,15 @@ function ColorGradientControlInner( {
 		// The `ColorPalette` must stay at a stable position in the tree whether
 		// or not a notice is present. Wrapping it in a `VStack` only when a
 		// notice appears remounts it, which resets the custom color picker back
-		// to the swatch view mid-edit. Keep `ColorPalette` last and toggle only
-		// the notice ahead of it; the notice's own bottom margin provides the
-		// spacing the wrapper used to.
+		// to the swatch view mid-edit. Keep `ColorPalette` first and toggle only
+		// the trailing notice after it, so the palette holds a stable index and
+		// the notice sits at the bottom of the popover.
 		[ TAB_IDS.color ]: (
 			<>
+				{ colorPalette }
 				{ noticeProps && (
 					<Notice isDismissible={ false } { ...noticeProps } />
 				) }
-				{ colorPalette }
 			</>
 		),
 		[ TAB_IDS.gradient ]: (

package/src/components/colors-gradients/style.scss

@@ -68,9 +68,9 @@ $swatch-gap: 12px;
 	background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
 }
 
-// Space the in-popover contrast notice away from the color palette below it.
+// Space the in-popover contrast notice away from the color palette above it.
 .block-editor-panel-color-gradient-settings__contrast-notice {
-	margin-bottom: $grid-unit-20;
+	margin-top: $grid-unit-20;
 }
 
 /**

package/src/components/date-format-picker/index.js

@@ -123,7 +123,6 @@ function NonDefaultControls( { format, onChange } ) {
 	return (
 		<VStack>
 			<CustomSelectControl
-				__next40pxDefaultSize
 				label={ __( 'Choose a format' ) }
 				options={ [ ...suggestedOptions, customOption ] }
 				value={

package/src/components/dimensions-tool/aspect-ratio-tool.js

@@ -92,7 +92,6 @@ export default function AspectRatioTool( {
 				value={ displayValue }
 				options={ options ?? aspectRatioOptions }
 				onChange={ onChange }
-				size="__unstable-large"
 			/>
 		</ToolsPanelItem>
 	);

package/src/components/dimensions-tool/scale-tool.js

@@ -109,7 +109,6 @@ export default function ScaleTool( {
 				help={ scaleHelp[ displayValue ] }
 				value={ displayValue }
 				onChange={ onChange }
-				size="__unstable-large"
 			>
 				{ options.map( ( option ) => (
 					<ToggleGroupControlOption

package/src/components/dimensions-tool/width-height-tool.js

@@ -79,7 +79,6 @@ export default function WidthHeightTool( {
 					min={ 0 }
 					value={ width }
 					onChange={ onDimensionChange( 'width' ) }
-					size="__unstable-large"
 				/>
 			</ToolsPanelItem>
 			<ToolsPanelItem
@@ -98,7 +97,6 @@ export default function WidthHeightTool( {
 					min={ 0 }
 					value={ height }
 					onChange={ onDimensionChange( 'height' ) }
-					size="__unstable-large"
 				/>
 			</ToolsPanelItem>
 		</>

package/src/components/font-appearance-control/index.js

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { CustomSelectControl } from '@wordpress/components';
-import deprecated from '@wordpress/deprecated';
 import { useMemo } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 
@@ -40,8 +39,12 @@ const getFontAppearanceLabel = ( hasFontStyles, hasFontWeights ) => {
  */
 export default function FontAppearanceControl( props ) {
 	const {
-		/** Start opting into the larger default height that will become the default size in a future version. */
-		__next40pxDefaultSize = false,
+		/**
+		 * Start opting into the larger default height that will become the default size in a future version.
+		 *
+		 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+		 */
+		__next40pxDefaultSize: _next40pxDefaultSize,
 		onChange,
 		hasFontStyles = true,
 		hasFontWeights = true,
@@ -148,27 +151,11 @@ export default function FontAppearanceControl( props ) {
 		);
 	};
 
-	if (
-		! __next40pxDefaultSize &&
-		( otherProps.size === undefined || otherProps.size === 'default' )
-	) {
-		deprecated(
-			`36px default size for wp.blockEditor.__experimentalFontAppearanceControl`,
-			{
-				since: '6.8',
-				version: '7.1',
-				hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.',
-			}
-		);
-	}
-
 	return (
 		hasStylesOrWeights && (
 			<CustomSelectControl
 				{ ...otherProps }
 				className="components-font-appearance-control"
-				__next40pxDefaultSize={ __next40pxDefaultSize }
-				__shouldNotWarnDeprecated36pxSize
 				label={ label }
 				describedBy={ getDescribedBy() }
 				options={ selectOptions }

package/src/components/font-family/README.md

@@ -28,7 +28,6 @@ const MyFontFamilyControl = () => {
 			onChange={ ( newFontFamily ) => {
 				setFontFamily( newFontFamily );
 			} }
-			__next40pxDefaultSize
 		/>
 	);
 };
@@ -74,11 +73,3 @@ The current font family value.
 - Default: ''
 
 The rest of the props are passed down to the underlying `<SelectControl />` instance.
-
-#### `__next40pxDefaultSize`
-
-- Type: `boolean`
-- Required: No
-- Default: `false`
-
-Start opting into the larger default height that will become the default size in a future version.

package/src/components/font-family/index.js

@@ -7,7 +7,6 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { CustomSelectControl } from '@wordpress/components';
-import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -16,8 +15,12 @@ import { __ } from '@wordpress/i18n';
 import { useSettings } from '../use-settings';
 
 export default function FontFamilyControl( {
-	/** Start opting into the larger default height that will become the default size in a future version. */
-	__next40pxDefaultSize = false,
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+	 */
+	__next40pxDefaultSize: _next40pxDefaultSize,
 	value = '',
 	onChange,
 	fontFamilies,
@@ -45,26 +48,10 @@ export default function FontFamilyControl( {
 		} ) ),
 	];
 
-	if (
-		! __next40pxDefaultSize &&
-		( props.size === undefined || props.size === 'default' )
-	) {
-		deprecated(
-			`36px default size for wp.blockEditor.__experimentalFontFamilyControl`,
-			{
-				since: '6.8',
-				version: '7.1',
-				hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.',
-			}
-		);
-	}
-
 	const selectedValue =
 		options.find( ( option ) => option.key === value ) ?? '';
 	return (
 		<CustomSelectControl
-			__next40pxDefaultSize={ __next40pxDefaultSize }
-			__shouldNotWarnDeprecated36pxSize
 			label={ __( 'Font' ) }
 			value={ selectedValue }
 			onChange={ ( { selectedItem } ) => onChange( selectedItem.key ) }