@wordpress/block-editor 12.5.0 → 12.7.0

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

@@ -9,6 +9,7 @@ import {
 	within,
 	getEditorHtml,
 	typeInRichText,
+	openBlockActionsMenu,
 } from 'test/helpers';
 
 /**
@@ -36,15 +37,14 @@ describe( 'Block Actions Menu', () => {
             <p></p>
             <!-- /wp:paragraph -->`,
 		} );
-		const { getByLabelText, getByRole } = screen;
+		const { getByRole } = screen;
 
 		// Get block
 		const paragraphBlock = await getBlock( screen, 'Paragraph' );
 		fireEvent.press( paragraphBlock );
 
 		// Open block actions menu
-		const blockActionsButton = getByLabelText( /Open Block Actions Menu/ );
-		fireEvent.press( blockActionsButton );
+		await openBlockActionsMenu( screen );
 
 		// Get Picker title
 		const pickerHeader = getByRole( 'header' );
@@ -56,10 +56,8 @@ describe( 'Block Actions Menu', () => {
 
 	describe( 'moving blocks', () => {
 		it( 'moves blocks up and down', async () => {
-			const screen = await initializeEditor( {
-				screenWidth: 100, // To collapse the up/arrow buttons bellow blocks
-			} );
-			const { getByLabelText, getByTestId } = screen;
+			const screen = await initializeEditor();
+			const { getByLabelText } = screen;
 
 			// Add Paragraph block
 			await addBlock( screen, 'Paragraph' );
@@ -85,16 +83,8 @@ describe( 'Block Actions Menu', () => {
 			} );
 			fireEvent.press( spacerBlock );
 
-			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
-
-			// Get block actions modal
-			let blockActionsMenu = await getByTestId( 'block-actions-menu' );
-
 			// Tap on the Move Down button
-			fireEvent.press(
-				within( blockActionsMenu ).getByLabelText( 'Move block down' )
-			);
+			fireEvent.press( getByLabelText( /Move block down/ ) );
 
 			// Get Heading block
 			const headingBlock = await getBlock( screen, 'Heading', {
@@ -102,25 +92,15 @@ describe( 'Block Actions Menu', () => {
 			} );
 			fireEvent.press( headingBlock );
 
-			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
-
-			// Get block actions modal
-			blockActionsMenu = await getByTestId( 'block-actions-menu' );
-
 			// Tap on the Move Up button
-			fireEvent.press(
-				within( blockActionsMenu ).getByLabelText( 'Move block up' )
-			);
+			fireEvent.press( getByLabelText( /Move block up/ ) );
 
 			expect( getEditorHtml() ).toMatchSnapshot();
 		} );
 
 		it( 'disables the Move Up button for the first block', async () => {
-			const screen = await initializeEditor( {
-				screenWidth: 100, // To collapse the up/arrow buttons bellow blocks
-			} );
-			const { getByLabelText, getByTestId } = screen;
+			const screen = await initializeEditor();
+			const { getByLabelText } = screen;
 
 			// Add Paragraph block
 			await addBlock( screen, 'Paragraph' );
@@ -144,15 +124,8 @@ describe( 'Block Actions Menu', () => {
 			paragraphBlock = await getBlock( screen, 'Paragraph' );
 			fireEvent.press( paragraphBlock );
 
-			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
-
-			// Get block actions modal
-			const blockActionsMenu = await getByTestId( 'block-actions-menu' );
-
 			// Get the Move Up button
-			const upButton =
-				within( blockActionsMenu ).getByLabelText( 'Move block up' );
+			const upButton = getByLabelText( /Move block up/ );
 			const isUpButtonDisabled =
 				upButton.props.accessibilityState?.disabled;
 			expect( isUpButtonDisabled ).toBe( true );
@@ -167,7 +140,7 @@ describe( 'Block Actions Menu', () => {
 			const screen = await initializeEditor( {
 				screenWidth: 100,
 			} );
-			const { getByLabelText, getByTestId } = screen;
+			const { getByLabelText } = screen;
 
 			// Add Paragraph block
 			await addBlock( screen, 'Paragraph' );
@@ -193,15 +166,8 @@ describe( 'Block Actions Menu', () => {
 			} );
 			fireEvent.press( headingBlock );
 
-			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
-
-			// Get block actions modal
-			const blockActionsMenu = await getByTestId( 'block-actions-menu' );
-
 			// Get the Move Down button
-			const downButton =
-				within( blockActionsMenu ).getByLabelText( 'Move block down' );
+			const downButton = getByLabelText( /Move block down/ );
 			const isDownButtonDisabled =
 				downButton.props.accessibilityState?.disabled;
 			expect( isDownButtonDisabled ).toBe( true );
@@ -243,7 +209,7 @@ describe( 'Block Actions Menu', () => {
 			fireEvent.press( headingBlock );
 
 			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+			await openBlockActionsMenu( screen );
 
 			// Tap on the Copy button
 			fireEvent.press( getByLabelText( /Copy/ ) );
@@ -253,7 +219,7 @@ describe( 'Block Actions Menu', () => {
 			fireEvent.press( paragraphBlock );
 
 			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+			await openBlockActionsMenu( screen );
 
 			// Tap on the Paste block after button
 			fireEvent.press( getByLabelText( /Paste block after/ ) );
@@ -290,7 +256,7 @@ describe( 'Block Actions Menu', () => {
 			fireEvent.press( headingBlock );
 
 			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+			await openBlockActionsMenu( screen );
 
 			// Tap on the Copy button
 			fireEvent.press( getByLabelText( /Copy/ ) );
@@ -300,7 +266,7 @@ describe( 'Block Actions Menu', () => {
 			fireEvent.press( paragraphBlock );
 
 			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+			await openBlockActionsMenu( screen );
 
 			// Tap on the Past block after button
 			fireEvent.press( getByLabelText( /Paste block after/ ) );
@@ -335,7 +301,7 @@ describe( 'Block Actions Menu', () => {
 			fireEvent.press( paragraphBlock );
 
 			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+			await openBlockActionsMenu( screen );
 
 			// Tap on the Cut button
 			fireEvent.press( getByLabelText( /Cut block/ ) );
@@ -346,7 +312,7 @@ describe( 'Block Actions Menu', () => {
 			fireEvent.press( headingBlock );
 
 			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+			await openBlockActionsMenu( screen );
 
 			// Tap on the Cut button
 			fireEvent.press( getByLabelText( /Paste block after/ ) );
@@ -383,7 +349,7 @@ describe( 'Block Actions Menu', () => {
 			fireEvent.press( spacerBlock );
 
 			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+			await openBlockActionsMenu( screen );
 
 			// Tap on the Duplicate button
 			fireEvent.press( getByLabelText( /Duplicate block/ ) );
@@ -418,7 +384,7 @@ describe( 'Block Actions Menu', () => {
 			fireEvent.press( paragraphBlock );
 
 			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+			await openBlockActionsMenu( screen );
 
 			// Tap on the Transform block button
 			fireEvent.press( getByLabelText( /Transform block…/ ) );

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

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	fireEvent,
+	getBlock,
+	initializeEditor,
+	setupCoreBlocks,
+} from 'test/helpers';
+
+setupCoreBlocks();
+
+describe( 'Block Toolbar', () => {
+	it( "doesn't render the block settings button if there aren't any settings for the current selected block", async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Image' );
+
+		// Act
+		fireEvent(
+			screen.getByTestId( 'media-options-picker' ),
+			'backdropPress'
+		);
+
+		// Assert
+		expect( screen.queryByLabelText( 'Open Settings' ) ).toBeNull();
+	} );
+
+	it( 'renders the block settings button for the current selected block', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = await getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+
+		// Assert
+		expect( screen.queryByLabelText( 'Open Settings' ) ).toBeVisible();
+	} );
+} );

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

@@ -1,43 +1,57 @@
 /**
  * WordPress dependencies
  */
+import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useRef, useEffect } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
 const { clearTimeout, setTimeout } = window;
-const noop = () => {};
 const DEBOUNCE_TIMEOUT = 200;
 
 /**
- * Hook that creates a showMover state, as well as debounced show/hide callbacks.
+ * Hook that creates debounced callbacks when the node is hovered or focused.
  *
- * @param {Object}   props                       Component props.
- * @param {Object}   props.ref                   Element reference.
- * @param {boolean}  props.isFocused             Whether the component has current focus.
- * @param {number}   [props.debounceTimeout=250] Debounce timeout in milliseconds.
- * @param {Function} [props.onChange=noop]       Callback function.
+ * @param {Object}  props                       Component props.
+ * @param {Object}  props.ref                   Element reference.
+ * @param {boolean} props.isFocused             Whether the component has current focus.
+ * @param {number}  props.highlightParent       Whether to highlight the parent block. It defaults in highlighting the selected block.
+ * @param {number}  [props.debounceTimeout=250] Debounce timeout in milliseconds.
  */
-export function useDebouncedShowMovers( {
+function useDebouncedShowGestures( {
 	ref,
 	isFocused,
+	highlightParent,
 	debounceTimeout = DEBOUNCE_TIMEOUT,
-	onChange = noop,
 } ) {
-	const [ showMovers, setShowMovers ] = useState( false );
+	const { getSelectedBlockClientId, getBlockRootClientId } =
+		useSelect( blockEditorStore );
+	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 	const timeoutRef = useRef();
-
+	const isDistractionFree = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings().isDistractionFree,
+		[]
+	);
 	const handleOnChange = ( nextIsFocused ) => {
-		if ( ref?.current ) {
-			setShowMovers( nextIsFocused );
+		if ( nextIsFocused && isDistractionFree ) {
+			return;
 		}
-
-		onChange( nextIsFocused );
+		const selectedBlockClientId = getSelectedBlockClientId();
+		const clientId = highlightParent
+			? getBlockRootClientId( selectedBlockClientId )
+			: selectedBlockClientId;
+		toggleBlockHighlight( clientId, nextIsFocused );
 	};
 
 	const getIsHovered = () => {
 		return ref?.current && ref.current.matches( ':hover' );
 	};
 
-	const shouldHideMovers = () => {
+	const shouldHideGestures = () => {
 		const isHovered = getIsHovered();
 		return ! isFocused && ! isHovered;
 	};
@@ -50,19 +64,16 @@ export function useDebouncedShowMovers( {
 		}
 	};
 
-	const debouncedShowMovers = ( event ) => {
+	const debouncedShowGestures = ( event ) => {
 		if ( event ) {
 			event.stopPropagation();
 		}
 
 		clearTimeoutRef();
-
-		if ( ! showMovers ) {
-			handleOnChange( true );
-		}
+		handleOnChange( true );
 	};
 
-	const debouncedHideMovers = ( event ) => {
+	const debouncedHideGestures = ( event ) => {
 		if ( event ) {
 			event.stopPropagation();
 		}
@@ -70,7 +81,7 @@ export function useDebouncedShowMovers( {
 		clearTimeoutRef();
 
 		timeoutRef.current = setTimeout( () => {
-			if ( shouldHideMovers() ) {
+			if ( shouldHideGestures() ) {
 				handleOnChange( false );
 			}
 		}, debounceTimeout );
@@ -90,29 +101,33 @@ export function useDebouncedShowMovers( {
 	);
 
 	return {
-		showMovers,
-		debouncedShowMovers,
-		debouncedHideMovers,
+		debouncedShowGestures,
+		debouncedHideGestures,
 	};
 }
 
 /**
- * Hook that provides a showMovers state and gesture events for DOM elements
- * that interact with the showMovers state.
+ * Hook that provides gesture events for DOM elements
+ * that interact with the isFocused state.
  *
- * @param {Object}   props                       Component props.
- * @param {Object}   props.ref                   Element reference.
- * @param {number}   [props.debounceTimeout=250] Debounce timeout in milliseconds.
- * @param {Function} [props.onChange=noop]       Callback function.
+ * @param {Object} props                         Component props.
+ * @param {Object} props.ref                     Element reference.
+ * @param {number} [props.highlightParent=false] Whether to highlight the parent block. It defaults to highlighting the selected block.
+ * @param {number} [props.debounceTimeout=250]   Debounce timeout in milliseconds.
  */
-export function useShowMoversGestures( {
+export function useShowHoveredOrFocusedGestures( {
 	ref,
+	highlightParent = false,
 	debounceTimeout = DEBOUNCE_TIMEOUT,
-	onChange = noop,
 } ) {
 	const [ isFocused, setIsFocused ] = useState( false );
-	const { showMovers, debouncedShowMovers, debouncedHideMovers } =
-		useDebouncedShowMovers( { ref, debounceTimeout, isFocused, onChange } );
+	const { debouncedShowGestures, debouncedHideGestures } =
+		useDebouncedShowGestures( {
+			ref,
+			debounceTimeout,
+			isFocused,
+			highlightParent,
+		} );
 
 	const registerRef = useRef( false );
 
@@ -129,14 +144,14 @@ export function useShowMoversGestures( {
 		const handleOnFocus = () => {
 			if ( isFocusedWithin() ) {
 				setIsFocused( true );
-				debouncedShowMovers();
+				debouncedShowGestures();
 			}
 		};
 
 		const handleOnBlur = () => {
 			if ( ! isFocusedWithin() ) {
 				setIsFocused( false );
-				debouncedHideMovers();
+				debouncedHideGestures();
 			}
 		};
 
@@ -160,15 +175,12 @@ export function useShowMoversGestures( {
 		ref,
 		registerRef,
 		setIsFocused,
-		debouncedShowMovers,
-		debouncedHideMovers,
+		debouncedShowGestures,
+		debouncedHideGestures,
 	] );
 
 	return {
-		showMovers,
-		gestures: {
-			onMouseMove: debouncedShowMovers,
-			onMouseLeave: debouncedHideMovers,
-		},
+		onMouseMove: debouncedShowGestures,
+		onMouseLeave: debouncedHideGestures,
 	};
 }

package/src/components/block-tools/block-contextual-toolbar.js

@@ -32,48 +32,56 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 	const toolbarButtonRef = useRef();
 
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const { blockType, hasParents, showParentSelector, selectedBlockClientId } =
-		useSelect( ( select ) => {
-			const {
-				getBlockName,
-				getBlockParents,
-				getSelectedBlockClientIds,
-				getBlockEditingMode,
-			} = unlock( select( blockEditorStore ) );
-			const { getBlockType } = select( blocksStore );
-			const selectedBlockClientIds = getSelectedBlockClientIds();
-			const _selectedBlockClientId = selectedBlockClientIds[ 0 ];
-			const parents = getBlockParents( _selectedBlockClientId );
-			const firstParentClientId = parents[ parents.length - 1 ];
-			const parentBlockName = getBlockName( firstParentClientId );
-			const parentBlockType = getBlockType( parentBlockName );
+	const {
+		blockType,
+		hasParents,
+		showParentSelector,
+		selectedBlockClientId,
+		isContentOnly,
+	} = useSelect( ( select ) => {
+		const {
+			getBlockName,
+			getBlockParents,
+			getSelectedBlockClientIds,
+			getBlockEditingMode,
+		} = unlock( select( blockEditorStore ) );
+		const { getBlockType } = select( blocksStore );
+		const selectedBlockClientIds = getSelectedBlockClientIds();
+		const _selectedBlockClientId = selectedBlockClientIds[ 0 ];
+		const parents = getBlockParents( _selectedBlockClientId );
+		const firstParentClientId = parents[ parents.length - 1 ];
+		const parentBlockName = getBlockName( firstParentClientId );
+		const parentBlockType = getBlockType( parentBlockName );
 
-			return {
-				selectedBlockClientId: _selectedBlockClientId,
-				blockType:
-					_selectedBlockClientId &&
-					getBlockType( getBlockName( _selectedBlockClientId ) ),
-				hasParents: parents.length,
-				showParentSelector:
-					parentBlockType &&
-					getBlockEditingMode( firstParentClientId ) === 'default' &&
-					hasBlockSupport(
-						parentBlockType,
-						'__experimentalParentSelector',
-						true
-					) &&
-					selectedBlockClientIds.length <= 1 &&
-					getBlockEditingMode( _selectedBlockClientId ) === 'default',
-			};
-		}, [] );
+		return {
+			selectedBlockClientId: _selectedBlockClientId,
+			blockType:
+				_selectedBlockClientId &&
+				getBlockType( getBlockName( _selectedBlockClientId ) ),
+			hasParents: parents.length,
+			isContentOnly:
+				getBlockEditingMode( _selectedBlockClientId ) === 'contentOnly',
+			showParentSelector:
+				parentBlockType &&
+				getBlockEditingMode( firstParentClientId ) === 'default' &&
+				hasBlockSupport(
+					parentBlockType,
+					'__experimentalParentSelector',
+					true
+				) &&
+				selectedBlockClientIds.length <= 1 &&
+				getBlockEditingMode( _selectedBlockClientId ) === 'default',
+		};
+	}, [] );
 
 	useEffect( () => {
 		setIsCollapsed( false );
 	}, [ selectedBlockClientId ] );
 
 	if (
-		blockType &&
-		! hasBlockSupport( blockType, '__experimentalToolbar', true )
+		isContentOnly ||
+		( blockType &&
+			! hasBlockSupport( blockType, '__experimentalToolbar', true ) )
 	) {
 		return null;
 	}

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

@@ -125,9 +125,18 @@
 		display: none;
 	}
 
+	// Add a scrim to the right of the collapsed button.
+	&.is-collapsed::after {
+		content: "";
+		position: absolute;
+		left: 100%;
+		width: $grid-unit-60;
+		height: 100%;
+		background: linear-gradient(to right, $white, transparent);
+	}
+
 	// on desktop and tablet viewports the toolbar is fixed
 	// on top of interface header
-
 	@include break-medium() {
 		&.is-fixed {
 
@@ -157,7 +166,7 @@
 				}
 			}
 
-			& > .block-editor-block-toolbar.is-showing-movers {
+			& > .block-editor-block-toolbar {
 				flex-grow: initial;
 				width: initial;
 
@@ -308,7 +317,7 @@
 		}
 	}
 
-	// on tablet vewports the toolbar is fixed
+	// on tablet viewports the toolbar is fixed
 	// on top of interface header and covers the whole header
 	// except for the inserter on the left
 	@include break-medium() {
@@ -322,12 +331,15 @@
 	// for the block inserter the publish button
 	@include break-large() {
 		&.is-fixed {
+			width: auto;
+		}
+		.is-fullscreen-mode &.is-fixed {
+			// in full screen mode we need to account for
 			// the combined with of the tools at the right of the header and the margin left
 			// of the toolbar which includes four buttons
-			width: calc(100% - 240px - #{4 * $grid-unit-80});
+			width: calc(100% - 280px - #{4 * $grid-unit-80});
 		}
 	}
-
 }
 
 /**