@wordpress/block-editor 12.5.0 → 12.7.0

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

@@ -43,7 +43,19 @@ exports[`Block Mover Picker moving blocks moves blocks up and down 1`] = `
 `;
 
 exports[`Block Mover Picker should render without crashing and match snapshot 1`] = `
-[
+<View
+  style={
+    [
+      {
+        "height": 44,
+      },
+      {
+        "borderLeftWidth": 0.5,
+      },
+      undefined,
+    ]
+  }
+>
   <View>
     <View
       accessibilityHint="Double tap to move the block to the left"
@@ -51,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}
@@ -99,7 +123,6 @@ exports[`Block Mover Picker should render without crashing and match snapshot 1`
           }
         >
           <Svg
-            colorScheme="light"
             height={24}
             style={{}}
             viewBox="0 0 24 24"
@@ -111,7 +134,7 @@ exports[`Block Mover Picker should render without crashing and match snapshot 1`
         </View>
       </View>
     </View>
-  </View>,
+  </View>
   <View>
     <View
       accessibilityHint="Double tap to move the block to the right"
@@ -119,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}
@@ -167,7 +202,6 @@ exports[`Block Mover Picker should render without crashing and match snapshot 1`
           }
         >
           <Svg
-            colorScheme="light"
             height={24}
             style={{}}
             viewBox="0 0 24 24"
@@ -179,6 +213,6 @@ exports[`Block Mover Picker should render without crashing and match snapshot 1`
         </View>
       </View>
     </View>
-  </View>,
-]
+  </View>
+</View>
 `;

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-removal-warning-modal/index.js

@@ -50,9 +50,6 @@ export function BlockRemovalWarningModal( { rules } ) {
 		<Modal
 			title={ __( 'Are you sure?' ) }
 			onRequestClose={ clearBlockRemovalPrompt }
-			style={ {
-				maxWidth: '40rem',
-			} }
 		>
 			{ blockNamesForPrompt.length === 1 ? (
 				<p>{ rules[ blockNamesForPrompt[ 0 ] ] }</p>

package/src/components/block-settings/button.native.js

@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { createSlotFill, ToolbarButton } from '@wordpress/components';
+import {
+	createSlotFill,
+	ToolbarButton,
+	ToolbarGroup,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { withDispatch } from '@wordpress/data';
 import { cog } from '@wordpress/icons';
@@ -9,11 +13,13 @@ import { cog } from '@wordpress/icons';
 const { Fill, Slot } = createSlotFill( 'SettingsToolbarButton' );
 
 const SettingsButton = ( { openGeneralSidebar } ) => (
-	<ToolbarButton
-		title={ __( 'Open Settings' ) }
-		icon={ cog }
-		onClick={ openGeneralSidebar }
-	/>
+	<ToolbarGroup>
+		<ToolbarButton
+			title={ __( 'Open Settings' ) }
+			icon={ cog }
+			onClick={ openGeneralSidebar }
+		/>
+	</ToolbarGroup>
 );
 
 const SettingsButtonFill = ( props ) => (

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)

package/src/components/{block-mobile-toolbar/block-actions-menu.native.js → block-toolbar/block-toolbar-menu.native.js}

@@ -9,6 +9,7 @@ import { Platform, findNodeHandle } from 'react-native';
 import {
 	getClipboard,
 	setClipboard,
+	ToolbarGroup,
 	ToolbarButton,
 	Picker,
 } from '@wordpress/components';
@@ -99,9 +100,11 @@ const BlockActionsMenu = ( {
 	} = getMoversSetup( isStackedHorizontally, moversOptions );
 
 	// Check if selected block is Groupable and/or Ungroupable.
-	const convertToGroupButtonProps = useConvertToGroupButtonProps( [
-		selectedBlockClientId,
-	] );
+	const convertToGroupButtonProps = useConvertToGroupButtonProps(
+		// `selectedBlockClientId` can be undefined in some cases where this
+		// component gets re-rendered right after the block is removed.
+		selectedBlockClientId ? [ selectedBlockClientId ] : []
+	);
 	const { isGroupable, isUngroupable } = convertToGroupButtonProps;
 	const showConvertToGroupButton =
 		( isGroupable || isUngroupable ) && canRemove;
@@ -254,11 +257,13 @@ const BlockActionsMenu = ( {
 	// End early if there are no options to show.
 	if ( ! options.length ) {
 		return (
-			<ToolbarButton
-				title={ __( 'Open Block Actions Menu' ) }
-				icon={ moreHorizontalMobile }
-				disabled={ true }
-			/>
+			<ToolbarGroup>
+				<ToolbarButton
+					title={ __( 'Open Block Actions Menu' ) }
+					icon={ moreHorizontalMobile }
+					disabled={ true }
+				/>
+			</ToolbarGroup>
 		);
 	}
 
@@ -294,7 +299,7 @@ const BlockActionsMenu = ( {
 		anchorNodeRef ? findNodeHandle( anchorNodeRef ) : undefined;
 
 	return (
-		<>
+		<ToolbarGroup>
 			<ToolbarButton
 				title={ __( 'Open Block Actions Menu' ) }
 				onClick={ onPickerPresent }
@@ -324,7 +329,7 @@ const BlockActionsMenu = ( {
 				selectedBlock={ getBlocksByClientId( selectedBlockClientId ) }
 				selectedBlockClientId={ selectedBlockClientId }
 			/>
-		</>
+		</ToolbarGroup>
 	);
 };
 

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

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { useRef } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
 import {
@@ -29,77 +29,52 @@ import BlockSettingsMenu from '../block-settings-menu';
 import { BlockLockToolbar } from '../block-lock';
 import { BlockGroupToolbar } from '../convert-to-group-buttons';
 import BlockEditVisuallyButton from '../block-edit-visually-button';
-import { useShowMoversGestures } from './utils';
+import { useShowHoveredOrFocusedGestures } from './utils';
 import { store as blockEditorStore } from '../../store';
 import __unstableBlockNameContext from './block-name-context';
 import { unlock } from '../../lock-unlock';
 
 const BlockToolbar = ( { hideDragHandle } ) => {
-	const {
-		blockClientIds,
-		blockClientId,
-		blockType,
-		hasFixedToolbar,
-		isDistractionFree,
-		isValid,
-		isVisual,
-		blockEditingMode,
-	} = useSelect( ( select ) => {
-		const {
-			getBlockName,
-			getBlockMode,
-			getSelectedBlockClientIds,
-			isBlockValid,
-			getBlockRootClientId,
-			getSettings,
-			getBlockEditingMode,
-		} = unlock( select( blockEditorStore ) );
-		const selectedBlockClientIds = getSelectedBlockClientIds();
-		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
-		const blockRootClientId = getBlockRootClientId( selectedBlockClientId );
-		const settings = getSettings();
-
-		return {
-			blockClientIds: selectedBlockClientIds,
-			blockClientId: selectedBlockClientId,
-			blockType:
-				selectedBlockClientId &&
-				getBlockType( getBlockName( selectedBlockClientId ) ),
-			hasFixedToolbar: settings.hasFixedToolbar,
-			isDistractionFree: settings.isDistractionFree,
-			rootClientId: blockRootClientId,
-			isValid: selectedBlockClientIds.every( ( id ) =>
-				isBlockValid( id )
-			),
-			isVisual: selectedBlockClientIds.every(
-				( id ) => getBlockMode( id ) === 'visual'
-			),
-			blockEditingMode: getBlockEditingMode( selectedBlockClientId ),
-		};
-	}, [] );
+	const { blockClientIds, blockType, isValid, isVisual, blockEditingMode } =
+		useSelect( ( select ) => {
+			const {
+				getBlockName,
+				getBlockMode,
+				getSelectedBlockClientIds,
+				isBlockValid,
+				getBlockRootClientId,
+				getBlockEditingMode,
+			} = unlock( select( blockEditorStore ) );
+			const selectedBlockClientIds = getSelectedBlockClientIds();
+			const selectedBlockClientId = selectedBlockClientIds[ 0 ];
+			const blockRootClientId = getBlockRootClientId(
+				selectedBlockClientId
+			);
+			return {
+				blockClientIds: selectedBlockClientIds,
+				blockType:
+					selectedBlockClientId &&
+					getBlockType( getBlockName( selectedBlockClientId ) ),
+				rootClientId: blockRootClientId,
+				isValid: selectedBlockClientIds.every( ( id ) =>
+					isBlockValid( id )
+				),
+				isVisual: selectedBlockClientIds.every(
+					( id ) => getBlockMode( id ) === 'visual'
+				),
+				blockEditingMode: getBlockEditingMode( selectedBlockClientId ),
+			};
+		}, [] );
 
 	const toolbarWrapperRef = useRef( null );
 
 	// Handles highlighting the current block outline on hover or focus of the
 	// block type toolbar area.
-	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 	const nodeRef = useRef();
-	const { showMovers, gestures: showMoversGestures } = useShowMoversGestures(
-		{
-			ref: nodeRef,
-			onChange( isFocused ) {
-				if ( isFocused && isDistractionFree ) {
-					return;
-				}
-				toggleBlockHighlight( blockClientId, isFocused );
-			},
-		}
-	);
+	const showHoveredOrFocusedGestures = useShowHoveredOrFocusedGestures( {
+		ref: nodeRef,
+	} );
 
-	// Account for the cases where the block toolbar is rendered within the
-	// header area and not contextually to the block.
-	const displayHeaderToolbar =
-		useViewportMatch( 'medium', '<' ) || hasFixedToolbar;
 	const isLargeViewport = ! useViewportMatch( 'medium', '<' );
 
 	if ( blockType ) {
@@ -108,8 +83,6 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 		}
 	}
 
-	const shouldShowMovers = displayHeaderToolbar || showMovers;
-
 	if ( blockClientIds.length === 0 ) {
 		return null;
 	}
@@ -120,7 +93,6 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 		isReusableBlock( blockType ) || isTemplatePart( blockType );
 
 	const classes = classnames( 'block-editor-block-toolbar', {
-		'is-showing-movers': shouldShowMovers,
 		'is-synced': isSynced,
 	} );
 
@@ -131,7 +103,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 				blockEditingMode === 'default' && <BlockParentSelector /> }
 			{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
 				blockEditingMode === 'default' && (
-					<div ref={ nodeRef } { ...showMoversGestures }>
+					<div ref={ nodeRef } { ...showHoveredOrFocusedGestures }>
 						<ToolbarGroup className="block-editor-block-toolbar__block-controls">
 							<BlockSwitcher clientIds={ blockClientIds } />
 							{ ! isMultiToolbar && (

package/src/components/block-toolbar/index.native.js

@@ -1,23 +1,60 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
+import BlockActionsMenu from './block-toolbar-menu';
 import BlockControls from '../block-controls';
+import BlockMover from '../block-mover';
 import UngroupButton from '../ungroup-button';
+import { BlockSettingsButton } from '../block-settings';
 import { store as blockEditorStore } from '../../store';
 
-export default function BlockToolbar() {
-	const { isSelected, isValidAndVisual } = useSelect( ( select ) => {
-		const { getBlockMode, getSelectedBlockClientIds, isBlockValid } =
-			select( blockEditorStore );
+const REMOVE_EMPY_PARENT_BLOCKS = [
+	'core/buttons',
+	'core/columns',
+	'core/social-links',
+];
+
+export default function BlockToolbar( { anchorNodeRef } ) {
+	const {
+		rootClientId,
+		blockClientId,
+		isSelected,
+		isValidAndVisual,
+		isStackedHorizontally,
+		parentBlockName,
+		parentNumberOfInnerBlocks,
+	} = useSelect( ( select ) => {
+		const {
+			getBlockListSettings,
+			getBlockMode,
+			getBlockName,
+			getBlockCount,
+			getBlockRootClientId,
+			getSelectedBlockClientIds,
+			isBlockValid,
+		} = select( blockEditorStore );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
+		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
+		const blockRootClientId = getBlockRootClientId( selectedBlockClientId );
+		const blockListSettings = getBlockListSettings( blockRootClientId );
+		const orientation = blockListSettings?.orientation;
+		const isBlockStackedHorizontally = orientation === 'horizontal';
+		const parentName = getBlockName( blockRootClientId );
+		const numberOfInnerBlocks = getBlockCount( blockRootClientId );
 
 		return {
+			rootClientId: blockRootClientId,
+			blockClientId: selectedBlockClientId,
 			isSelected: selectedBlockClientIds.length > 0,
+			isStackedHorizontally: isBlockStackedHorizontally,
+			parentBlockName: parentName,
+			parentNumberOfInnerBlocks: numberOfInnerBlocks,
 			isValidAndVisual:
 				selectedBlockClientIds.length === 1
 					? isBlockValid( selectedBlockClientIds[ 0 ] ) &&
@@ -26,6 +63,28 @@ export default function BlockToolbar() {
 		};
 	}, [] );
 
+	const { removeBlock } = useDispatch( blockEditorStore );
+	const onRemove = useCallback( () => {
+		// Temp: remove parent block for specific cases where they don't
+		// have inner blocks, ideally we should match the behavior as in
+		// the Web editor and show a placeholder instead of removing the parent.
+		if (
+			REMOVE_EMPY_PARENT_BLOCKS.includes( parentBlockName ) &&
+			parentNumberOfInnerBlocks === 1
+		) {
+			removeBlock( rootClientId );
+			return;
+		}
+
+		removeBlock( blockClientId );
+	}, [
+		blockClientId,
+		parentBlockName,
+		parentNumberOfInnerBlocks,
+		removeBlock,
+		rootClientId,
+	] );
+
 	if ( ! isSelected ) {
 		return null;
 	}
@@ -34,11 +93,32 @@ export default function BlockToolbar() {
 		<>
 			{ isValidAndVisual && (
 				<>
-					<UngroupButton />
+					<BlockSettingsButton.Slot>
+						{ /* Render only one settings icon even if we have more than one fill - need for hooks with controls. */ }
+						{ ( fills = [ null ] ) => {
+							if ( ! fills?.length > 0 ) {
+								return null;
+							}
+							return fills[ 0 ];
+						} }
+					</BlockSettingsButton.Slot>
 					<BlockControls.Slot group="block" />
 					<BlockControls.Slot />
 					<BlockControls.Slot group="inline" />
 					<BlockControls.Slot group="other" />
+					<UngroupButton />
+
+					<BlockMover
+						clientIds={ [ blockClientId ] }
+						isStackedHorizontally={ isStackedHorizontally }
+					/>
+
+					<BlockActionsMenu
+						clientId={ blockClientId }
+						isStackedHorizontally={ isStackedHorizontally }
+						onDelete={ onRemove }
+						anchorNodeRef={ anchorNodeRef }
+					/>
 				</>
 			) }
 		</>