@wordpress/block-editor 12.6.0 → 12.8.0

package/src/components/block-controls/use-has-block-controls.js

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalUseSlotFills as useSlotFills } from '@wordpress/components';
+import warning from '@wordpress/warning';
+
+/**
+ * Internal dependencies
+ */
+import groups from './groups';
+
+export function useHasAnyBlockControls() {
+	let hasAnyBlockControls = false;
+	for ( const group in groups ) {
+		// It is safe to violate the rules of hooks here as the `groups` object
+		// is static and will not change length between renders. Do not return
+		// early as that will cause the hook to be called a different number of
+		// times between renders.
+		// eslint-disable-next-line react-hooks/rules-of-hooks
+		if ( useHasBlockControls( group ) ) {
+			hasAnyBlockControls = true;
+		}
+	}
+	return hasAnyBlockControls;
+}
+
+export function useHasBlockControls( group = 'default' ) {
+	const Slot = groups[ group ]?.Slot;
+	const fills = useSlotFills( Slot?.__unstableName );
+	if ( ! Slot ) {
+		warning( `Unknown BlockControls group "${ group }" provided.` );
+		return null;
+	}
+	return !! fills?.length;
+}

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

@@ -8,7 +8,6 @@ import { useContext, useEffect } from '@wordpress/element';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
 import { BlockListBlockContext } from '../block-list/block-list-block-context';
 
 /**
@@ -49,14 +48,11 @@ export function useBlockEditingMode( mode ) {
 	const { clientId = '' } = useContext( BlockListBlockContext ) ?? {};
 	const blockEditingMode = useSelect(
 		( select ) =>
-			unlock( select( blockEditorStore ) ).getBlockEditingMode(
-				clientId
-			),
+			select( blockEditorStore ).getBlockEditingMode( clientId ),
 		[ clientId ]
 	);
-	const { setBlockEditingMode, unsetBlockEditingMode } = unlock(
-		useDispatch( blockEditorStore )
-	);
+	const { setBlockEditingMode, unsetBlockEditingMode } =
+		useDispatch( blockEditorStore );
 	useEffect( () => {
 		if ( mode ) {
 			setBlockEditingMode( clientId, mode );
@@ -66,6 +62,6 @@ export function useBlockEditingMode( mode ) {
 				unsetBlockEditingMode( clientId );
 			}
 		};
-	}, [ clientId, mode ] );
+	}, [ clientId, mode, setBlockEditingMode, unsetBlockEditingMode ] );
 	return blockEditingMode;
 }

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

@@ -30,7 +30,6 @@ import PositionControls from '../inspector-controls-tabs/position-controls-panel
 import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';
 import BlockInfo from '../block-info-slot-fill';
 import BlockQuickNavigation from '../block-quick-navigation';
-import { unlock } from '../../lock-unlock';
 
 function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
 	const contentClientIds = useSelect(
@@ -39,7 +38,7 @@ function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
 				getClientIdsOfDescendants,
 				getBlockName,
 				getBlockEditingMode,
-			} = unlock( select( blockEditorStore ) );
+			} = select( blockEditorStore );
 			return getClientIdsOfDescendants( [ topLevelLockedBlock ] ).filter(
 				( clientId ) =>
 					getBlockName( clientId ) !== 'core/list-item' &&

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

@@ -13,7 +13,7 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
  */
 import styles from './block.scss';
 
-const TEXT_BLOCKS_WITH_OUTLINE = [ 'core/missing' ];
+const BLOCKS_WITH_OUTLINE = [ 'core/social-link', 'core/missing' ];
 
 function BlockOutline( {
 	blockCategory,
@@ -22,7 +22,7 @@ function BlockOutline( {
 	isSelected,
 	name,
 } ) {
-	const textBlockWithOutline = TEXT_BLOCKS_WITH_OUTLINE.includes( name );
+	const textBlockWithOutline = BLOCKS_WITH_OUTLINE.includes( name );
 	const hasBlockTextCategory =
 		blockCategory === 'text' && ! textBlockWithOutline;
 	const hasBlockMediaCategory =

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

@@ -37,7 +37,6 @@ import BlockHtml from './block-html';
 import { useBlockProps } from './use-block-props';
 import { store as blockEditorStore } from '../../store';
 import { useLayout } from './layout';
-import { unlock } from '../../lock-unlock';
 import { BlockListBlockContext } from './block-list-block-context';
 
 /**
@@ -102,7 +101,7 @@ function BlockListBlock( {
 				getSettings,
 				__unstableGetTemporarilyEditingAsBlocks,
 				getBlockEditingMode,
-			} = unlock( select( blockEditorStore ) );
+			} = select( blockEditorStore );
 			return {
 				themeSupportsLayout: getSettings().supportsLayout,
 				isTemporarilyEditingAsBlocks:
@@ -505,9 +504,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/index.native.js

@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import { View, Platform, TouchableWithoutFeedback } from 'react-native';
+import { View, Platform, Pressable } from 'react-native';
 
 /**
  * WordPress dependencies
  */
-import { useRef, useState } from '@wordpress/element';
+import { useRef, useState, useCallback } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
 import {
@@ -372,20 +372,20 @@ function Footer( {
 	renderFooterAppender,
 	withFooter,
 } ) {
+	const onAddParagraphBlock = useCallback( () => {
+		const paragraphBlock = createBlock( 'core/paragraph' );
+		addBlockToEndOfPost( paragraphBlock );
+	}, [ addBlockToEndOfPost ] );
+
 	if ( ! isReadOnly && withFooter ) {
 		return (
-			<>
-				<TouchableWithoutFeedback
-					accessibilityLabel={ __( 'Add paragraph block' ) }
-					testID={ __( 'Add paragraph block' ) }
-					onPress={ () => {
-						const paragraphBlock = createBlock( 'core/paragraph' );
-						addBlockToEndOfPost( paragraphBlock );
-					} }
-				>
-					<View style={ styles.blockListFooter } />
-				</TouchableWithoutFeedback>
-			</>
+			<Pressable
+				accessibilityLabel={ __( 'Add paragraph block' ) }
+				testID={ __( 'Add paragraph block' ) }
+				onPress={ onAddParagraphBlock }
+			>
+				<View style={ styles.blockListFooter } />
+			</Pressable>
 		);
 	} else if ( renderFooterAppender ) {
 		return <View>{ renderFooterAppender() }</View>;

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

@@ -11,6 +11,13 @@ import {
 
 setupCoreBlocks();
 
+beforeEach( () => {
+	// Intentionally suppress the expected console errors and warnings to reduce
+	// noise in the test output.
+	jest.spyOn( console, 'error' ).mockImplementation( () => {} );
+	jest.spyOn( console, 'warn' ).mockImplementation( () => {} );
+} );
+
 describe( 'Block invalid warning', () => {
 	it( 'shows invalid placeholder', async () => {
 		// Arrange
@@ -19,6 +26,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 +43,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-list/use-in-between-inserter.js

@@ -11,7 +11,6 @@ import { isRTL } from '@wordpress/i18n';
  */
 import { store as blockEditorStore } from '../../store';
 import { InsertionPointOpenRef } from '../block-tools/insertion-point';
-import { unlock } from '../../lock-unlock';
 
 export function useInBetweenInserter() {
 	const openRef = useContext( InsertionPointOpenRef );
@@ -29,7 +28,7 @@ export function useInBetweenInserter() {
 		getTemplateLock,
 		__unstableIsWithinBlockOverlay,
 		getBlockEditingMode,
-	} = unlock( useSelect( blockEditorStore ) );
+	} = useSelect( blockEditorStore );
 	const { showInsertionPoint, hideInsertionPoint } =
 		useDispatch( blockEditorStore );
 

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

@@ -15,7 +15,6 @@ import { getDefaultBlockName } from '@wordpress/blocks';
 import DefaultBlockAppender from '../default-block-appender';
 import ButtonBlockAppender from '../button-block-appender';
 import { store as blockEditorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
 
 function DefaultAppender( { rootClientId } ) {
 	const canInsertDefaultBlock = useSelect( ( select ) =>
@@ -48,7 +47,7 @@ function useAppender( rootClientId, CustomAppender ) {
 				getSelectedBlockClientId,
 				__unstableGetEditorMode,
 				getBlockEditingMode,
-			} = unlock( select( blockEditorStore ) );
+			} = select( blockEditorStore );
 
 			if ( CustomAppender === false ) {
 				return false;

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,9 +12,8 @@ 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';
 
 /**
  * Block parent selector component, displaying the hierarchy of the
@@ -23,52 +22,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,
+		} = 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 +67,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/index.js

@@ -106,7 +106,6 @@ export default memo( BlockPreview );
  * @param {Object}    options.props  Optional. Props to pass to the element. Must contain
  *                                   the ref if one is defined.
  * @param {Object}    options.layout Layout settings to be used in the preview.
- *
  */
 export function useBlockPreview( { blocks, props = {}, layout } ) {
 	const originalSettings = useSelect(

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)