@wordpress/block-editor 15.7.0 → 15.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "15.7.0",
+	"version": "15.8.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,7 +27,6 @@
 	"module": "build-module/index.js",
 	"exports": {
 		".": {
-			"types": "./build-types/index.d.ts",
 			"import": "./build-module/index.js",
 			"require": "./build/index.js"
 		},
@@ -56,40 +55,41 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.34.0",
-		"@wordpress/api-fetch": "^7.34.0",
-		"@wordpress/base-styles": "^6.10.0",
-		"@wordpress/blob": "^4.34.0",
-		"@wordpress/block-serialization-default-parser": "^5.34.0",
-		"@wordpress/blocks": "^15.7.0",
-		"@wordpress/commands": "^1.34.0",
-		"@wordpress/components": "^30.7.0",
-		"@wordpress/compose": "^7.34.0",
-		"@wordpress/data": "^10.34.0",
-		"@wordpress/date": "^5.34.0",
-		"@wordpress/deprecated": "^4.34.0",
-		"@wordpress/dom": "^4.34.0",
-		"@wordpress/element": "^6.34.0",
-		"@wordpress/escape-html": "^3.34.0",
-		"@wordpress/global-styles-engine": "^1.1.0",
-		"@wordpress/hooks": "^4.34.0",
-		"@wordpress/html-entities": "^4.34.0",
-		"@wordpress/i18n": "^6.7.0",
-		"@wordpress/icons": "^11.1.0",
-		"@wordpress/is-shallow-equal": "^5.34.0",
-		"@wordpress/keyboard-shortcuts": "^5.34.0",
-		"@wordpress/keycodes": "^4.34.0",
-		"@wordpress/notices": "^5.34.0",
-		"@wordpress/preferences": "^4.34.0",
-		"@wordpress/priority-queue": "^3.34.0",
-		"@wordpress/private-apis": "^1.34.0",
-		"@wordpress/rich-text": "^7.34.0",
-		"@wordpress/style-engine": "^2.34.0",
-		"@wordpress/token-list": "^3.34.0",
-		"@wordpress/upload-media": "^0.19.0",
-		"@wordpress/url": "^4.34.0",
-		"@wordpress/warning": "^3.34.0",
-		"@wordpress/wordcount": "^4.34.0",
+		"@wordpress/a11y": "^4.35.0",
+		"@wordpress/api-fetch": "^7.35.0",
+		"@wordpress/base-styles": "^6.11.0",
+		"@wordpress/blob": "^4.35.0",
+		"@wordpress/block-serialization-default-parser": "^5.35.0",
+		"@wordpress/blocks": "^15.8.0",
+		"@wordpress/commands": "^1.35.0",
+		"@wordpress/components": "^30.8.0",
+		"@wordpress/compose": "^7.35.0",
+		"@wordpress/data": "^10.35.0",
+		"@wordpress/date": "^5.35.0",
+		"@wordpress/deprecated": "^4.35.0",
+		"@wordpress/dom": "^4.35.0",
+		"@wordpress/element": "^6.35.0",
+		"@wordpress/escape-html": "^3.35.0",
+		"@wordpress/global-styles-engine": "^1.2.0",
+		"@wordpress/hooks": "^4.35.0",
+		"@wordpress/html-entities": "^4.35.0",
+		"@wordpress/i18n": "^6.8.0",
+		"@wordpress/icons": "^11.2.0",
+		"@wordpress/interactivity": "^6.35.0",
+		"@wordpress/is-shallow-equal": "^5.35.0",
+		"@wordpress/keyboard-shortcuts": "^5.35.0",
+		"@wordpress/keycodes": "^4.35.0",
+		"@wordpress/notices": "^5.35.0",
+		"@wordpress/preferences": "^4.35.0",
+		"@wordpress/priority-queue": "^3.35.0",
+		"@wordpress/private-apis": "^1.35.0",
+		"@wordpress/rich-text": "^7.35.0",
+		"@wordpress/style-engine": "^2.35.0",
+		"@wordpress/token-list": "^3.35.0",
+		"@wordpress/upload-media": "^0.20.0",
+		"@wordpress/url": "^4.35.0",
+		"@wordpress/warning": "^3.35.0",
+		"@wordpress/wordcount": "^4.35.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -112,5 +112,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ceebff807958d2e8fc755b5a20473939c78b4d1d"
+	"gitHead": "77aa1f194edceafe8ac2a1b9438bf84b557e76e3"
 }

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

@@ -8,6 +8,7 @@ import clsx from 'clsx';
  */
 import {
 	Button,
+	Icon,
 	__experimentalText as Text,
 	__experimentalVStack as VStack,
 	privateApis as componentsPrivateApis,
@@ -15,7 +16,12 @@ import {
 import { useDispatch, useSelect } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import { __, isRTL } from '@wordpress/i18n';
-import { chevronLeft, chevronRight } from '@wordpress/icons';
+import {
+	chevronLeft,
+	chevronRight,
+	arrowRight,
+	arrowLeft,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -26,6 +32,22 @@ import BlockIcon from '../block-icon';
 
 const { Badge } = unlock( componentsPrivateApis );
 
+function OptionalParentSelectButton( { children, onClick } ) {
+	if ( ! onClick ) {
+		return children;
+	}
+
+	return (
+		<Button
+			__next40pxDefaultSize
+			className="block-editor-block-card__parent-select-button"
+			onClick={ onClick }
+		>
+			{ children }
+		</Button>
+	);
+}
+
 /**
  * A card component that displays block information including title, icon, and description.
  * Can be used to show block metadata and navigation controls for parent blocks.
@@ -54,6 +76,9 @@ const { Badge } = unlock( componentsPrivateApis );
  * @param {string}        [props.className]             Additional classes to apply to the card.
  * @param {string}        [props.name]                  Custom block name to display before the title.
  * @param {string}        [props.allowParentNavigation] Show a back arrow to the parent block in some situations.
+ * @param {string}        [props.parentClientId]        The parent clientId, if this card is for a parent block.
+ * @param {string}        [props.isChild]               Whether the block card is for a child block, in which case, indent the block using an arrow.
+ * @param {string}        [props.clientId]              Whether the block card is for a child block, in which case, indent the block using an arrow.
  * @param {Element}       [props.children]              Children.
  * @return {Element}                        Block card component.
  */
@@ -65,7 +90,10 @@ function BlockCard( {
 	className,
 	name,
 	allowParentNavigation,
+	parentClientId,
+	isChild,
 	children,
+	clientId,
 } ) {
 	if ( blockType ) {
 		deprecated( '`blockType` property in `BlockCard component`', {
@@ -77,56 +105,85 @@ function BlockCard( {
 
 	const parentNavBlockClientId = useSelect(
 		( select ) => {
-			if ( ! allowParentNavigation ) {
+			if ( parentClientId || isChild || ! allowParentNavigation ) {
 				return;
 			}
-			const { getSelectedBlockClientId, getBlockParentsByBlockName } =
-				select( blockEditorStore );
-
-			const _selectedBlockClientId = getSelectedBlockClientId();
+			const { getBlockParentsByBlockName } = select( blockEditorStore );
 
 			return getBlockParentsByBlockName(
-				_selectedBlockClientId,
+				clientId,
 				'core/navigation',
 				true
 			)[ 0 ];
 		},
-		[ allowParentNavigation ]
+		[ clientId, allowParentNavigation, isChild, parentClientId ]
 	);
 
 	const { selectBlock } = useDispatch( blockEditorStore );
 
+	const TitleElement = parentClientId ? 'div' : 'h2';
+
 	return (
-		<div className={ clsx( 'block-editor-block-card', className ) }>
-			{ allowParentNavigation &&
-				parentNavBlockClientId && ( // This is only used by the Navigation block for now. It's not ideal having Navigation block specific code here.
-					<Button
-						onClick={ () => selectBlock( parentNavBlockClientId ) }
-						label={ __( 'Go to parent Navigation block' ) }
-						style={
-							// TODO: This style override is also used in ToolsPanelHeader.
-							// It should be supported out-of-the-box by Button.
-							{ minWidth: 24, padding: 0 }
-						}
-						icon={ isRTL() ? chevronRight : chevronLeft }
-						size="small"
-					/>
-				) }
-			<BlockIcon icon={ icon } showColors />
-			<VStack spacing={ 1 }>
-				<h2 className="block-editor-block-card__title">
-					<span className="block-editor-block-card__name">
-						{ !! name?.length ? name : title }
-					</span>
-					{ !! name?.length && <Badge>{ title }</Badge> }
-				</h2>
-				{ description && (
-					<Text className="block-editor-block-card__description">
-						{ description }
-					</Text>
-				) }
-				{ children }
-			</VStack>
+		<div
+			className={ clsx(
+				'block-editor-block-card',
+				{
+					'is-parent': parentClientId,
+					'is-child': isChild,
+				},
+				className
+			) }
+		>
+			{ parentNavBlockClientId && ( // This is only used by the Navigation block for now. It's not ideal having Navigation block specific code here.
+				<Button
+					onClick={ () => selectBlock( parentNavBlockClientId ) }
+					label={
+						parentNavBlockClientId
+							? __( 'Go to parent Navigation block' )
+							: // TODO - improve copy, not sure that we should use the term 'section'
+							  __( 'Go to parent section' )
+					}
+					style={
+						// TODO: This style override is also used in ToolsPanelHeader.
+						// It should be supported out-of-the-box by Button.
+						{ minWidth: 24, padding: 0 }
+					}
+					icon={ isRTL() ? chevronRight : chevronLeft }
+					size="small"
+				/>
+			) }
+			{ isChild && (
+				<span className="block-editor-block-card__child-indicator-icon">
+					<Icon icon={ isRTL() ? arrowLeft : arrowRight } />
+				</span>
+			) }
+			<OptionalParentSelectButton
+				onClick={
+					parentClientId
+						? () => {
+								selectBlock( parentClientId );
+						  }
+						: undefined
+				}
+			>
+				<BlockIcon icon={ icon } showColors />
+				<VStack spacing={ 1 }>
+					<TitleElement className="block-editor-block-card__title">
+						<span className="block-editor-block-card__name">
+							{ !! name?.length ? name : title }
+						</span>
+						{ ! parentClientId && ! isChild && !! name?.length && (
+							<Badge>{ title }</Badge>
+						) }
+					</TitleElement>
+					{ ! parentClientId && ! isChild && description && (
+						<Text className="block-editor-block-card__description">
+							{ description }
+						</Text>
+					) }
+					{ children }
+				</VStack>
+			</OptionalParentSelectButton>
 		</div>
 	);
 }

package/src/components/block-card/style.scss

@@ -6,6 +6,21 @@
 	color: $gray-900;
 	display: flex;
 	padding: $grid-unit-20;
+
+	&.is-parent {
+		padding-bottom: $grid-unit-05;
+	}
+
+	&.is-child {
+		padding-top: $grid-unit-05;
+	}
+}
+
+.block-editor-block-card__parent-select-button {
+	padding: 0;
+	align-items: start;
+	text-align: start;
+	height: auto !important;
 }
 
 .block-editor-block-card__title {
@@ -26,7 +41,8 @@
 	padding: 3px 0; // This makes the title as high as the icon.
 }
 
-.block-editor-block-card .block-editor-block-icon {
+.block-editor-block-card .block-editor-block-icon,
+.block-editor-block-card__child-indicator-icon {
 	flex: 0 0 $button-size-small;
 	margin-left: 0;
 	margin-right: $grid-unit-15;

package/src/components/block-inspector/edit-contents.js

@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, __experimentalVStack as VStack } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+export default function EditContents( { clientId } ) {
+	const { editContentOnlySection, stopEditingContentOnlySection } = unlock(
+		useDispatch( blockEditorStore )
+	);
+	const { isWithinSection, isWithinEditedSection, editedContentOnlySection } =
+		useSelect(
+			( select ) => {
+				const {
+					isSectionBlock,
+					getParentSectionBlock,
+					getEditedContentOnlySection,
+					isWithinEditedContentOnlySection,
+				} = unlock( select( blockEditorStore ) );
+
+				return {
+					isWithinSection:
+						isSectionBlock( clientId ) ||
+						!! getParentSectionBlock( clientId ),
+					isWithinEditedSection:
+						isWithinEditedContentOnlySection( clientId ),
+					editedContentOnlySection: getEditedContentOnlySection(),
+				};
+			},
+			[ clientId ]
+		);
+
+	if ( ! isWithinSection && ! isWithinEditedSection ) {
+		return null;
+	}
+
+	return (
+		<VStack className="block-editor-block-inspector-edit-contents" expanded>
+			<Button
+				className="block-editor-block-inspector-edit-contents__button"
+				__next40pxDefaultSize
+				variant="secondary"
+				onClick={ () => {
+					if ( ! editedContentOnlySection ) {
+						editContentOnlySection( clientId );
+					} else {
+						stopEditingContentOnlySection();
+					}
+				} }
+			>
+				{ editedContentOnlySection
+					? __( 'Lock design' )
+					: __( 'Unlock design' ) }
+			</Button>
+		</VStack>
+	);
+}

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

@@ -13,7 +13,7 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import EditContentsButton from './edit-contents-button';
+import EditContents from './edit-contents';
 import SkipToSelectedBlock from '../skip-to-selected-block';
 import BlockCard from '../block-card';
 import MultiSelectionInspector from '../multi-selection-inspector';
@@ -93,6 +93,7 @@ function BlockInspector() {
 		isSectionBlock,
 		isSectionBlockInSelection,
 		hasBlockStyles,
+		editedContentOnlySection,
 	} = useSelect( ( select ) => {
 		const {
 			getSelectedBlockClientId,
@@ -101,12 +102,18 @@ function BlockInspector() {
 			getBlockName,
 			getParentSectionBlock,
 			isSectionBlock: _isSectionBlock,
+			getEditedContentOnlySection,
+			isWithinEditedContentOnlySection,
 		} = unlock( select( blockEditorStore ) );
 		const { getBlockStyles } = select( blocksStore );
 		const _selectedBlockClientId = getSelectedBlockClientId();
-		const renderedBlockClientId =
-			getParentSectionBlock( _selectedBlockClientId ) ||
-			_selectedBlockClientId;
+		const isWithinEditedSection = isWithinEditedContentOnlySection(
+			_selectedBlockClientId
+		);
+		const renderedBlockClientId = isWithinEditedSection
+			? _selectedBlockClientId
+			: getParentSectionBlock( _selectedBlockClientId ) ||
+			  _selectedBlockClientId;
 		const _selectedBlockName =
 			renderedBlockClientId && getBlockName( renderedBlockClientId );
 		const _blockType =
@@ -115,7 +122,6 @@ function BlockInspector() {
 		const _isSectionBlockInSelection = selectedBlockClientIds.some(
 			( id ) => _isSectionBlock( id )
 		);
-
 		const blockStyles =
 			_selectedBlockName && getBlockStyles( _selectedBlockName );
 		const _hasBlockStyles = blockStyles && blockStyles.length > 0;
@@ -128,6 +134,7 @@ function BlockInspector() {
 			isSectionBlockInSelection: _isSectionBlockInSelection,
 			isSectionBlock: _isSectionBlock( renderedBlockClientId ),
 			hasBlockStyles: _hasBlockStyles,
+			editedContentOnlySection: getEditedContentOnlySection(),
 		};
 	}, [] );
 
@@ -263,6 +270,7 @@ function BlockInspector() {
 				availableTabs={ availableTabs }
 				contentClientIds={ contentClientIds }
 				hasBlockStyles={ hasBlockStyles }
+				editedContentOnlySection={ editedContentOnlySection }
 			/>
 		</BlockInspectorSingleBlockWrapper>
 	);
@@ -311,25 +319,39 @@ const BlockInspectorSingleBlock = ( {
 	availableTabs,
 	contentClientIds,
 	hasBlockStyles,
+	editedContentOnlySection,
 } ) => {
 	const hasMultipleTabs = availableTabs?.length > 1;
-
+	const hasParentChildBlockCards =
+		window?.__experimentalContentOnlyPatternInsertion &&
+		editedContentOnlySection &&
+		editedContentOnlySection !== clientId;
+	const parentBlockInformation = useBlockDisplayInformation(
+		editedContentOnlySection
+	);
 	const blockInformation = useBlockDisplayInformation( clientId );
 	const isBlockSynced = blockInformation.isSynced;
-
 	const shouldShowTabs = ! isBlockSynced && hasMultipleTabs;
 
 	return (
 		<div className="block-editor-block-inspector">
+			{ hasParentChildBlockCards && (
+				<BlockCard
+					{ ...parentBlockInformation }
+					className={ parentBlockInformation.isSynced && 'is-synced' }
+					parentClientId={ editedContentOnlySection }
+				/>
+			) }
 			<BlockCard
 				{ ...blockInformation }
-				className={ isBlockSynced && 'is-synced' }
 				allowParentNavigation
-			>
-				{ window?.__experimentalContentOnlyPatternInsertion && (
-					<EditContentsButton clientId={ clientId } />
-				) }
-			</BlockCard>
+				className={ isBlockSynced && 'is-synced' }
+				isChild={ hasParentChildBlockCards }
+				clientId={ clientId }
+			/>
+			{ window?.__experimentalContentOnlyPatternInsertion && (
+				<EditContents clientId={ clientId } />
+			) }
 			<BlockVariationTransforms blockClientId={ clientId } />
 			{ shouldShowTabs && (
 				<InspectorControlsTabs

package/src/components/block-inspector/style.scss

@@ -55,7 +55,10 @@
 	border-top: $border-width solid $gray-300;
 }
 
-.block-editor-block-inspector-edit-contents-button {
-	margin-top: $grid-unit-10;
-	justify-content: center;
+.block-editor-block-inspector-edit-contents {
+	margin: 0 $grid-unit-20 $grid-unit-20 $grid-unit-20;
+
+	.block-editor-block-inspector-edit-contents__button {
+		justify-content: center;
+	}
 }

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

@@ -569,7 +569,7 @@ function BlockListBlockProvider( props ) {
 				canMoveBlock,
 
 				getSettings,
-				getTemporarilyEditingAsBlocks,
+				getEditedContentOnlySection,
 				getBlockEditingMode,
 				getBlockName,
 				isFirstMultiSelectedBlock,
@@ -677,8 +677,8 @@ function BlockListBlockProvider( props ) {
 				canRemove,
 				canMove,
 				isSelected: _isSelected,
-				isTemporarilyEditingAsBlocks:
-					getTemporarilyEditingAsBlocks() === clientId,
+				isEditingContentOnlySection:
+					getEditedContentOnlySection() === clientId,
 				blockEditingMode,
 				mayDisplayControls:
 					_isSelected ||
@@ -739,7 +739,7 @@ function BlockListBlockProvider( props ) {
 		isValid,
 		isSelected = false,
 		themeSupportsLayout,
-		isTemporarilyEditingAsBlocks,
+		isEditingContentOnlySection,
 		blockEditingMode,
 		mayDisplayControls,
 		mayDisplayParentControls,
@@ -804,7 +804,7 @@ function BlockListBlockProvider( props ) {
 		isSectionBlock,
 		isEditingDisabled,
 		hasEditableOutline,
-		isTemporarilyEditingAsBlocks,
+		isEditingContentOnlySection,
 		defaultClassName,
 		mayDisplayControls,
 		mayDisplayParentControls,

package/src/components/block-list/content.scss

@@ -316,8 +316,9 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 	}
 }
 
-.is-focus-mode .block-editor-block-list__block.is-content-locked.has-child-selected,
-.is-focus-mode .block-editor-block-list__block.is-content-locked-temporarily-editing-as-blocks.has-child-selected {
+// When editing a content only section in focus mode, the entire section stays at full opacity,
+// the following overrides focus modes usual rule of only the selected block being at full opacity.
+.is-focus-mode .block-editor-block-list__block.is-editing-content-only-section.has-child-selected {
 	&,
 	& .block-editor-block-list__block {
 		opacity: 1;

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

@@ -15,9 +15,9 @@ import {
 import { useMergeRefs, useDebounce } from '@wordpress/compose';
 import {
 	createContext,
+	useEffect,
 	useMemo,
 	useCallback,
-	useEffect,
 } from '@wordpress/element';
 import { getDefaultBlockName } from '@wordpress/blocks';
 
@@ -48,21 +48,23 @@ const delayedBlockVisibilityDebounceOptions = {
 };
 
 function Root( { className, ...settings } ) {
-	const { isOutlineMode, isFocusMode, temporarilyEditingAsBlocks } =
-		useSelect( ( select ) => {
+	const { isOutlineMode, isFocusMode, editedContentOnlySection } = useSelect(
+		( select ) => {
 			const {
 				getSettings,
-				getTemporarilyEditingAsBlocks,
 				isTyping,
 				hasBlockSpotlight,
+				getEditedContentOnlySection,
 			} = unlock( select( blockEditorStore ) );
 			const { outlineMode, focusMode } = getSettings();
 			return {
 				isOutlineMode: outlineMode && ! isTyping(),
 				isFocusMode: focusMode || hasBlockSpotlight(),
-				temporarilyEditingAsBlocks: getTemporarilyEditingAsBlocks(),
+				editedContentOnlySection: getEditedContentOnlySection(),
 			};
-		}, [] );
+		},
+		[]
+	);
 	const registry = useRegistry();
 	const { setBlockVisibility } = useDispatch( blockEditorStore );
 
@@ -116,33 +118,41 @@ function Root( { className, ...settings } ) {
 	return (
 		<IntersectionObserver.Provider value={ intersectionObserver }>
 			<div { ...innerBlocksProps } />
-			{ !! temporarilyEditingAsBlocks && (
-				<StopEditingAsBlocksOnOutsideSelect
-					clientId={ temporarilyEditingAsBlocks }
+			{ !! editedContentOnlySection && (
+				<StopEditingContentOnlySectionOnOutsideSelect
+					clientId={ editedContentOnlySection }
 				/>
 			) }
 		</IntersectionObserver.Provider>
 	);
 }
 
-function StopEditingAsBlocksOnOutsideSelect( { clientId } ) {
-	const { stopEditingAsBlocks } = unlock( useDispatch( blockEditorStore ) );
+function StopEditingContentOnlySectionOnOutsideSelect( { clientId } ) {
+	const { stopEditingContentOnlySection } = unlock(
+		useDispatch( blockEditorStore )
+	);
 	const isBlockOrDescendantSelected = useSelect(
 		( select ) => {
-			const { isBlockSelected, hasSelectedInnerBlock } =
-				select( blockEditorStore );
+			const {
+				isBlockSelected,
+				hasSelectedInnerBlock,
+				getBlockSelectionStart,
+			} = select( blockEditorStore );
 			return (
+				! getBlockSelectionStart() ||
 				isBlockSelected( clientId ) ||
 				hasSelectedInnerBlock( clientId, true )
 			);
 		},
 		[ clientId ]
 	);
+
 	useEffect( () => {
 		if ( ! isBlockOrDescendantSelected ) {
-			stopEditingAsBlocks( clientId );
+			stopEditingContentOnlySection();
 		}
-	}, [ isBlockOrDescendantSelected, clientId, stopEditingAsBlocks ] );
+	}, [ isBlockOrDescendantSelected, stopEditingContentOnlySection ] );
+
 	return null;
 }
 

package/src/components/block-list/use-block-props/index.js

@@ -97,7 +97,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		hasChildSelected,
 		isEditingDisabled,
 		hasEditableOutline,
-		isTemporarilyEditingAsBlocks,
+		isEditingContentOnlySection,
 		defaultClassName,
 		isSectionBlock,
 		canMove,
@@ -182,8 +182,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				'is-editing-disabled': isEditingDisabled,
 				'has-editable-outline': hasEditableOutline,
 				'has-negative-margin': hasNegativeMargin,
-				'is-content-locked-temporarily-editing-as-blocks':
-					isTemporarilyEditingAsBlocks,
+				'is-editing-content-only-section': isEditingContentOnlySection,
 				'is-block-hidden': isBlockHidden,
 			},
 			className,