prep build 08/01

Author: bph

.github/workflows/enforce-pr-labels.yml

@@ -12,7 +12,7 @@ jobs:
               with:
                   mode: exactly
                   count: 1
-                  labels: '[Type] Accessibility (a11y), [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket'
+                  labels: '[Type] Accessibility (a11y), [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core'
                   add_comment: true
                   message: "## ⚠️ Type of PR label error\n To merge this PR, it requires {{ errorString }} {{ count }} label indicating the type of PR. Other labels are optional and not being checked here. \n- **Type-related labels to choose from**: {{ provided }}.\n- **Labels found**: {{ applied }}.\n\nYou can learn more about the Type labels in Gutenberg [here](https://github.com/WordPress/gutenberg/labels?q=type)"
                   exit_type: failure

packages/block-editor/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"

packages/block-editor/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)

packages/block-editor/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,76 +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 { getSelectedBlockClientId } = useSelect( blockEditorStore );
-	const {
-		blockClientIds,
-		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,
-			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( getSelectedBlockClientId(), 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 ) {
@@ -107,8 +83,6 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 		}
 	}
 
-	const shouldShowMovers = displayHeaderToolbar || showMovers;
-
 	if ( blockClientIds.length === 0 ) {
 		return null;
 	}
@@ -119,7 +93,6 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 		isReusableBlock( blockType ) || isTemplatePart( blockType );
 
 	const classes = classnames( 'block-editor-block-toolbar', {
-		'is-showing-movers': shouldShowMovers,
 		'is-synced': isSynced,
 	} );
 
@@ -130,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 && (