@wordpress/block-editor 12.6.0 → 12.7.0

package/build-style/style-rtl.css

@@ -332,6 +332,14 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-block-contextual-toolbar:has(.block-editor-block-toolbar:empty) {
   display: none;
 }
+.block-editor-block-contextual-toolbar.is-collapsed::after {
+  content: "";
+  position: absolute;
+  right: 100%;
+  width: 48px;
+  height: 100%;
+  background: linear-gradient(to left, #fff, transparent);
+}
 @media (min-width: 782px) {
   .block-editor-block-contextual-toolbar.is-fixed {
     margin-right: 180px;
@@ -351,11 +359,11 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
     width: initial;
   }
-  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar.is-showing-movers {
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar {
     flex-grow: initial;
     width: initial;
   }
-  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar.is-showing-movers::before {
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar::before {
     content: "";
     width: 1px;
     height: 24px;
@@ -473,7 +481,10 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 @media (min-width: 960px) {
   .block-editor-block-contextual-toolbar.is-fixed {
-    width: calc(100% - 240px - 256px);
+    width: auto;
+  }
+  .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
+    width: calc(100% - 280px - 256px);
   }
 }
 
@@ -1011,6 +1022,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   overflow: hidden;
 }
 .block-editor-block-preview__container .block-editor-block-preview__content {
+  width: 100%;
   top: 0;
   right: 0;
   transform-origin: top right;
@@ -1972,7 +1984,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   flex-direction: row-reverse;
   justify-content: flex-start;
   gap: 8px;
-  padding: 8px;
+  padding: 8px 16px 16px;
   order: 20;
 }
 
@@ -2077,9 +2089,9 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title {
   display: block;
-  margin-bottom: 0.2em;
   font-weight: 500;
   position: relative;
+  line-height: 24px;
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title mark {
   font-weight: 600;
@@ -2141,6 +2153,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   display: flex;
   flex-direction: row;
   width: 100%;
+  align-items: center;
 }
 
 .block-editor-link-control__search-item-bottom {

package/build-style/style.css

@@ -332,6 +332,14 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-block-contextual-toolbar:has(.block-editor-block-toolbar:empty) {
   display: none;
 }
+.block-editor-block-contextual-toolbar.is-collapsed::after {
+  content: "";
+  position: absolute;
+  left: 100%;
+  width: 48px;
+  height: 100%;
+  background: linear-gradient(to right, #fff, transparent);
+}
 @media (min-width: 782px) {
   .block-editor-block-contextual-toolbar.is-fixed {
     margin-left: 180px;
@@ -351,11 +359,11 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
     width: initial;
   }
-  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar.is-showing-movers {
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar {
     flex-grow: initial;
     width: initial;
   }
-  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar.is-showing-movers::before {
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar::before {
     content: "";
     width: 1px;
     height: 24px;
@@ -473,7 +481,10 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 @media (min-width: 960px) {
   .block-editor-block-contextual-toolbar.is-fixed {
-    width: calc(100% - 240px - 256px);
+    width: auto;
+  }
+  .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
+    width: calc(100% - 280px - 256px);
   }
 }
 
@@ -1011,6 +1022,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   overflow: hidden;
 }
 .block-editor-block-preview__container .block-editor-block-preview__content {
+  width: 100%;
   top: 0;
   left: 0;
   transform-origin: top left;
@@ -1973,7 +1985,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   flex-direction: row-reverse;
   justify-content: flex-start;
   gap: 8px;
-  padding: 8px;
+  padding: 8px 16px 16px;
   order: 20;
 }
 
@@ -2078,9 +2090,9 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title {
   display: block;
-  margin-bottom: 0.2em;
   font-weight: 500;
   position: relative;
+  line-height: 24px;
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title mark {
   font-weight: 600;
@@ -2142,6 +2154,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   display: flex;
   flex-direction: row;
   width: 100%;
+  align-items: center;
 }
 
 .block-editor-link-control__search-item-bottom {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.6.0",
+	"version": "12.7.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,35 +35,35 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.38.0",
-		"@wordpress/api-fetch": "^6.35.0",
-		"@wordpress/blob": "^3.38.0",
-		"@wordpress/blocks": "^12.15.0",
-		"@wordpress/components": "^25.4.0",
-		"@wordpress/compose": "^6.15.0",
-		"@wordpress/data": "^9.8.0",
-		"@wordpress/date": "^4.38.0",
-		"@wordpress/deprecated": "^3.38.0",
-		"@wordpress/dom": "^3.38.0",
-		"@wordpress/element": "^5.15.0",
-		"@wordpress/escape-html": "^2.38.0",
-		"@wordpress/hooks": "^3.38.0",
-		"@wordpress/html-entities": "^3.38.0",
-		"@wordpress/i18n": "^4.38.0",
-		"@wordpress/icons": "^9.29.0",
-		"@wordpress/is-shallow-equal": "^4.38.0",
-		"@wordpress/keyboard-shortcuts": "^4.15.0",
-		"@wordpress/keycodes": "^3.38.0",
-		"@wordpress/notices": "^4.6.0",
-		"@wordpress/preferences": "^3.15.0",
-		"@wordpress/private-apis": "^0.20.0",
-		"@wordpress/rich-text": "^6.15.0",
-		"@wordpress/shortcode": "^3.38.0",
-		"@wordpress/style-engine": "^1.21.0",
-		"@wordpress/token-list": "^2.38.0",
-		"@wordpress/url": "^3.39.0",
-		"@wordpress/warning": "^2.38.0",
-		"@wordpress/wordcount": "^3.38.0",
+		"@wordpress/a11y": "^3.39.0",
+		"@wordpress/api-fetch": "^6.36.0",
+		"@wordpress/blob": "^3.39.0",
+		"@wordpress/blocks": "^12.16.0",
+		"@wordpress/components": "^25.5.0",
+		"@wordpress/compose": "^6.16.0",
+		"@wordpress/data": "^9.9.0",
+		"@wordpress/date": "^4.39.0",
+		"@wordpress/deprecated": "^3.39.0",
+		"@wordpress/dom": "^3.39.0",
+		"@wordpress/element": "^5.16.0",
+		"@wordpress/escape-html": "^2.39.0",
+		"@wordpress/hooks": "^3.39.0",
+		"@wordpress/html-entities": "^3.39.0",
+		"@wordpress/i18n": "^4.39.0",
+		"@wordpress/icons": "^9.30.0",
+		"@wordpress/is-shallow-equal": "^4.39.0",
+		"@wordpress/keyboard-shortcuts": "^4.16.0",
+		"@wordpress/keycodes": "^3.39.0",
+		"@wordpress/notices": "^4.7.0",
+		"@wordpress/preferences": "^3.16.0",
+		"@wordpress/private-apis": "^0.21.0",
+		"@wordpress/rich-text": "^6.16.0",
+		"@wordpress/shortcode": "^3.39.0",
+		"@wordpress/style-engine": "^1.22.0",
+		"@wordpress/token-list": "^2.39.0",
+		"@wordpress/url": "^3.40.0",
+		"@wordpress/warning": "^2.39.0",
+		"@wordpress/wordcount": "^3.39.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "6f14d11ed4cb59df110a28ebaa23ecba95eb673a"
+	"gitHead": "b898cf1dc8e70841d1647ea0994ac6278acc18a7"
 }

package/src/autocompleters/block.js

@@ -5,6 +5,7 @@ import { useSelect } from '@wordpress/data';
 import {
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
+	parse,
 } from '@wordpress/blocks';
 import { useMemo } from '@wordpress/element';
 
@@ -116,14 +117,28 @@ function createBlockCompleter() {
 			return ! ( /\S/.test( before ) || /\S/.test( after ) );
 		},
 		getOptionCompletion( inserterItem ) {
-			const { name, initialAttributes, innerBlocks } = inserterItem;
+			const {
+				name,
+				initialAttributes,
+				innerBlocks,
+				syncStatus,
+				content,
+			} = inserterItem;
+
 			return {
 				action: 'replace',
-				value: createBlock(
-					name,
-					initialAttributes,
-					createBlocksFromInnerBlocksTemplate( innerBlocks )
-				),
+				value:
+					syncStatus === 'unsynced'
+						? parse( content, {
+								__unstableSkipMigrationLogs: true,
+						  } )
+						: createBlock(
+								name,
+								initialAttributes,
+								createBlocksFromInnerBlocksTemplate(
+									innerBlocks
+								)
+						  ),
 			};
 		},
 	};

package/src/components/block-draggable/test/index.native.js

@@ -16,7 +16,6 @@ import TextInputState from 'react-native/Libraries/Components/TextInput/TextInpu
  */
 import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
 import { registerCoreBlocks } from '@wordpress/block-library';
-import '@wordpress/jest-console';
 
 /**
  * Internal dependencies
@@ -383,7 +382,7 @@ describe( 'BlockDraggable', () => {
 			// activate the gesture. Since this not available in tests, the library
 			// displays a warning message.
 			expect( console ).toHaveWarnedWith(
-				'[react-native-gesture-handler] You have to use react-native-reanimated in order to control the state of the gesture.'
+				'[Reanimated] You can not use setGestureState in non-worklet function.'
 			);
 			expect( getEditorHtml() ).toMatchSnapshot(
 				'Paragraph block moved from first to second position'
@@ -411,7 +410,7 @@ describe( 'BlockDraggable', () => {
 			// activate the gesture. Since this not available in tests, the library
 			// displays a warning message.
 			expect( console ).toHaveWarnedWith(
-				'[react-native-gesture-handler] You have to use react-native-reanimated in order to control the state of the gesture.'
+				'[Reanimated] You can not use setGestureState in non-worklet function.'
 			);
 			expect( getEditorHtml() ).toMatchSnapshot(
 				'Spacer block moved from third to first position'

package/src/components/block-editing-mode/index.js

@@ -66,6 +66,6 @@ export function useBlockEditingMode( mode ) {
 				unsetBlockEditingMode( clientId );
 			}
 		};
-	}, [ clientId, mode ] );
+	}, [ clientId, mode, setBlockEditingMode, unsetBlockEditingMode ] );
 	return blockEditingMode;
 }

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

@@ -505,9 +505,14 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 			) {
 				__unstableMarkLastChangeAsPersistent();
 			}
+			//Unsynced patterns are nested in an array so we need to flatten them.
+			const replacementBlocks =
+				blocks?.length === 1 && Array.isArray( blocks[ 0 ] )
+					? blocks[ 0 ]
+					: blocks;
 			replaceBlocks(
 				[ ownProps.clientId ],
-				blocks,
+				replacementBlocks,
 				indexToSelect,
 				initialPosition
 			);

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

@@ -33,7 +33,6 @@ import { useInBetweenInserter } from './use-in-between-inserter';
 import { store as blockEditorStore } from '../../store';
 import { usePreParsePatterns } from '../../utils/pre-parse-patterns';
 import { LayoutProvider, defaultLayout } from './layout';
-import BlockToolsBackCompat from '../block-tools/back-compat';
 import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useInnerBlocksProps } from '../inner-blocks';
 import {
@@ -127,11 +126,9 @@ function Root( { className, ...settings } ) {
 export default function BlockList( settings ) {
 	usePreParsePatterns();
 	return (
-		<BlockToolsBackCompat>
-			<BlockEditContextProvider value={ DEFAULT_BLOCK_EDIT_CONTEXT }>
-				<Root { ...settings } />
-			</BlockEditContextProvider>
-		</BlockToolsBackCompat>
+		<BlockEditContextProvider value={ DEFAULT_BLOCK_EDIT_CONTEXT }>
+			<Root { ...settings } />
+		</BlockEditContextProvider>
 	);
 }
 

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

@@ -19,6 +19,10 @@ describe( 'Block invalid warning', () => {
             <div styless="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
             <!-- /wp:spacer -->`,
 		} );
+		expect( console ).toHaveErrored();
+		expect( console ).toHaveWarnedWith(
+			'Encountered unexpected attribute `styless`.'
+		);
 
 		// Assert
 		const warningElement = screen.getByText( /Problem displaying block./ );
@@ -32,7 +36,10 @@ describe( 'Block invalid warning', () => {
             <div styless="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
             <!-- /wp:spacer -->`,
 		} );
-
+		expect( console ).toHaveErrored();
+		expect( console ).toHaveWarnedWith(
+			'Encountered unexpected attribute `styless`.'
+		);
 		// Act
 		fireEvent.press( screen.getByText( /Problem displaying block./ ) );
 		const spacerBlock = getBlock( screen, 'Spacer' );

package/src/components/block-mover/test/__snapshots__/index.native.js.snap

@@ -63,7 +63,19 @@ exports[`Block Mover Picker should render without crashing and match snapshot 1`
       accessibilityRole="button"
       accessibilityState={
         {
+          "busy": undefined,
+          "checked": undefined,
           "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
         }
       }
       accessible={true}
@@ -130,7 +142,19 @@ exports[`Block Mover Picker should render without crashing and match snapshot 1`
       accessibilityRole="button"
       accessibilityState={
         {
+          "busy": undefined,
+          "checked": undefined,
           "disabled": true,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
         }
       }
       accessible={true}

package/src/components/block-parent-selector/index.js

@@ -12,7 +12,7 @@ import { useRef } from '@wordpress/element';
  */
 import useBlockDisplayInformation from '../use-block-display-information';
 import BlockIcon from '../block-icon';
-import { useShowMoversGestures } from '../block-toolbar/utils';
+import { useShowHoveredOrFocusedGestures } from '../block-toolbar/utils';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
@@ -23,52 +23,40 @@ import { unlock } from '../../lock-unlock';
  * @return {WPComponent} Parent block selector.
  */
 export default function BlockParentSelector() {
-	const { selectBlock, toggleBlockHighlight } =
-		useDispatch( blockEditorStore );
-	const { firstParentClientId, isVisible, isDistractionFree } = useSelect(
-		( select ) => {
-			const {
-				getBlockName,
-				getBlockParents,
-				getSelectedBlockClientId,
-				getSettings,
-				getBlockEditingMode,
-			} = unlock( select( blockEditorStore ) );
-			const { hasBlockSupport } = select( blocksStore );
-			const selectedBlockClientId = getSelectedBlockClientId();
-			const parents = getBlockParents( selectedBlockClientId );
-			const _firstParentClientId = parents[ parents.length - 1 ];
-			const parentBlockName = getBlockName( _firstParentClientId );
-			const _parentBlockType = getBlockType( parentBlockName );
-			const settings = getSettings();
-			return {
-				firstParentClientId: _firstParentClientId,
-				isVisible:
-					_firstParentClientId &&
-					getBlockEditingMode( _firstParentClientId ) === 'default' &&
-					hasBlockSupport(
-						_parentBlockType,
-						'__experimentalParentSelector',
-						true
-					),
-				isDistractionFree: settings.isDistractionFree,
-			};
-		},
-		[]
-	);
+	const { selectBlock } = useDispatch( blockEditorStore );
+	const { firstParentClientId, isVisible } = useSelect( ( select ) => {
+		const {
+			getBlockName,
+			getBlockParents,
+			getSelectedBlockClientId,
+			getBlockEditingMode,
+		} = unlock( select( blockEditorStore ) );
+		const { hasBlockSupport } = select( blocksStore );
+		const selectedBlockClientId = getSelectedBlockClientId();
+		const parents = getBlockParents( selectedBlockClientId );
+		const _firstParentClientId = parents[ parents.length - 1 ];
+		const parentBlockName = getBlockName( _firstParentClientId );
+		const _parentBlockType = getBlockType( parentBlockName );
+		return {
+			firstParentClientId: _firstParentClientId,
+			isVisible:
+				_firstParentClientId &&
+				getBlockEditingMode( _firstParentClientId ) === 'default' &&
+				hasBlockSupport(
+					_parentBlockType,
+					'__experimentalParentSelector',
+					true
+				),
+		};
+	}, [] );
 	const blockInformation = useBlockDisplayInformation( firstParentClientId );
 
 	// Allows highlighting the parent block outline when focusing or hovering
 	// the parent block selector within the child.
 	const nodeRef = useRef();
-	const { gestures: showMoversGestures } = useShowMoversGestures( {
+	const showHoveredOrFocusedGestures = useShowHoveredOrFocusedGestures( {
 		ref: nodeRef,
-		onChange( isFocused ) {
-			if ( isFocused && isDistractionFree ) {
-				return;
-			}
-			toggleBlockHighlight( firstParentClientId, isFocused );
-		},
+		highlightParent: true,
 	} );
 
 	if ( ! isVisible ) {
@@ -80,7 +68,7 @@ export default function BlockParentSelector() {
 			className="block-editor-block-parent-selector"
 			key={ firstParentClientId }
 			ref={ nodeRef }
-			{ ...showMoversGestures }
+			{ ...showHoveredOrFocusedGestures }
 		>
 			<ToolbarButton
 				className="block-editor-block-parent-selector__button"

package/src/components/block-preview/auto.js

@@ -58,12 +58,19 @@ function ScaledBlockPreview( {
 	MemoizedBlockList = MemoizedBlockList || pure( BlockList );
 
 	const scale = containerWidth / viewportWidth;
+	const aspectRatio = contentHeight
+		? containerWidth / ( contentHeight * scale )
+		: 0;
 	return (
 		<Disabled
 			className="block-editor-block-preview__content"
 			style={ {
 				transform: `scale(${ scale })`,
-				height: contentHeight * scale,
+				// Using width + aspect-ratio instead of height here triggers browsers' native
+				// handling of scrollbar's visibility. It prevents the flickering issue seen
+				// in https://github.com/WordPress/gutenberg/issues/52027.
+				// See https://github.com/WordPress/gutenberg/pull/52921 for more info.
+				aspectRatio,
 				maxHeight:
 					contentHeight > MAX_HEIGHT ? MAX_HEIGHT * scale : undefined,
 				minHeight,

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

@@ -11,8 +11,9 @@
 	overflow: hidden;
 
 	.block-editor-block-preview__content {
-		// This element receives inline styles for width, height, and transform-scale.
+		// This element receives inline styles for transform-scale and aspect-ratio.
 		// Those inline styles are calculated to fit a perfect thumbnail.
+		width: 100%;
 
 		// Vertical alignment. It works with the transform: translate(-50%, -50%)`,
 		top: 0;

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -31,7 +31,7 @@ import BlockHTMLConvertButton from './block-html-convert-button';
 import __unstableBlockSettingsMenuFirstItem from './block-settings-menu-first-item';
 import BlockSettingsMenuControls from '../block-settings-menu-controls';
 import { store as blockEditorStore } from '../../store';
-import { useShowMoversGestures } from '../block-toolbar/utils';
+import { useShowHoveredOrFocusedGestures } from '../block-toolbar/utils';
 
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
@@ -60,7 +60,6 @@ export function BlockSettingsDropdown( {
 	const firstBlockClientId = blockClientIds[ 0 ];
 	const {
 		firstParentClientId,
-		isDistractionFree,
 		onlyBlock,
 		parentBlockType,
 		previousBlockClientId,
@@ -73,7 +72,6 @@ export function BlockSettingsDropdown( {
 				getBlockRootClientId,
 				getPreviousBlockClientId,
 				getSelectedBlockClientIds,
-				getSettings,
 				getBlockAttributes,
 			} = select( blockEditorStore );
 
@@ -86,7 +84,6 @@ export function BlockSettingsDropdown( {
 
 			return {
 				firstParentClientId: _firstParentClientId,
-				isDistractionFree: getSettings().isDistractionFree,
 				onlyBlock: 1 === getBlockCount( _firstParentClientId ),
 				parentBlockType:
 					_firstParentClientId &&
@@ -122,8 +119,7 @@ export function BlockSettingsDropdown( {
 	}, [] );
 	const isMatch = __unstableUseShortcutEventMatch();
 
-	const { selectBlock, toggleBlockHighlight } =
-		useDispatch( blockEditorStore );
+	const { selectBlock } = useDispatch( blockEditorStore );
 	const hasSelectedBlocks = selectedBlockClientIds.length > 0;
 
 	const updateSelectionAfterDuplicate = useCallback(
@@ -168,14 +164,9 @@ export function BlockSettingsDropdown( {
 	// Allows highlighting the parent block outline when focusing or hovering
 	// the parent block selector within the child.
 	const selectParentButtonRef = useRef();
-	const { gestures: showParentOutlineGestures } = useShowMoversGestures( {
+	const showParentOutlineGestures = useShowHoveredOrFocusedGestures( {
 		ref: selectParentButtonRef,
-		onChange( isFocused ) {
-			if ( isFocused && isDistractionFree ) {
-				return;
-			}
-			toggleBlockHighlight( firstParentClientId, isFocused );
-		},
+		highlightParent: true,
 	} );
 
 	// This can occur when the selected block (the parent)