@wordpress/block-editor 12.6.0 → 12.7.0

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,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 && (

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});
 		}
 	}
-
 }
 
 /**

package/src/components/block-variation-picker/index.native.js

@@ -12,12 +12,9 @@ import {
 /**
  * WordPress dependencies
  */
-import { withSelect, useDispatch } from '@wordpress/data';
-import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose';
-import {
-	createBlocksFromInnerBlocksTemplate,
-	store as blocksStore,
-} from '@wordpress/blocks';
+import { useDispatch } from '@wordpress/data';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { createBlocksFromInnerBlocksTemplate } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 import {
 	PanelBody,
@@ -26,7 +23,6 @@ import {
 	InserterButton,
 } from '@wordpress/components';
 import { Icon, close } from '@wordpress/icons';
-import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -45,28 +41,25 @@ function BlockVariationPicker( { isVisible, onClose, clientId, variations } ) {
 		styles.cancelButtonDark
 	);
 
-	const leftButton = useMemo(
-		() => (
-			<TouchableWithoutFeedback onPress={ onClose } hitSlop={ hitSlop }>
-				<View>
-					{ isIOS ? (
-						<Text
-							style={ cancelButtonStyle }
-							maxFontSizeMultiplier={ 2 }
-						>
-							{ __( 'Cancel' ) }
-						</Text>
-					) : (
-						<Icon
-							icon={ close }
-							size={ 24 }
-							style={ styles.closeIcon }
-						/>
-					) }
-				</View>
-			</TouchableWithoutFeedback>
-		),
-		[ onClose, cancelButtonStyle ]
+	const leftButton = (
+		<TouchableWithoutFeedback onPress={ onClose } hitSlop={ hitSlop }>
+			<View>
+				{ isIOS ? (
+					<Text
+						style={ cancelButtonStyle }
+						maxFontSizeMultiplier={ 2 }
+					>
+						{ __( 'Cancel' ) }
+					</Text>
+				) : (
+					<Icon
+						icon={ close }
+						size={ 24 }
+						style={ styles.closeIcon }
+					/>
+				) }
+			</View>
+		</TouchableWithoutFeedback>
 	);
 
 	const onVariationSelect = ( variation ) => {
@@ -77,51 +70,38 @@ function BlockVariationPicker( { isVisible, onClose, clientId, variations } ) {
 		onClose();
 	};
 
-	return useMemo(
-		() => (
-			<BottomSheet
-				isVisible={ isVisible }
-				onClose={ onClose }
-				title={ __( 'Select a layout' ) }
-				contentStyle={ styles.contentStyle }
-				leftButton={ leftButton }
-				testID="block-variation-modal"
+	return (
+		<BottomSheet
+			isVisible={ isVisible }
+			onClose={ onClose }
+			title={ __( 'Select a layout' ) }
+			contentStyle={ styles.contentStyle }
+			leftButton={ leftButton }
+			testID="block-variation-modal"
+		>
+			<ScrollView
+				horizontal
+				showsHorizontalScrollIndicator={ false }
+				contentContainerStyle={ styles.contentContainerStyle }
+				style={ styles.containerStyle }
 			>
-				<ScrollView
-					horizontal
-					showsHorizontalScrollIndicator={ false }
-					contentContainerStyle={ styles.contentContainerStyle }
-					style={ styles.containerStyle }
-				>
-					{ variations.map( ( v ) => {
-						return (
-							<InserterButton
-								item={ v }
-								key={ v.name }
-								onSelect={ () => onVariationSelect( v ) }
-							/>
-						);
-					} ) }
-				</ScrollView>
-				<PanelBody>
-					<FooterMessageControl
-						label={ __(
-							'Note: Column layout may vary between themes and screen sizes'
-						) }
+				{ variations.map( ( v ) => (
+					<InserterButton
+						item={ v }
+						key={ v.name }
+						onSelect={ () => onVariationSelect( v ) }
 					/>
-				</PanelBody>
-			</BottomSheet>
-		),
-		[ variations, isVisible, onClose ]
+				) ) }
+			</ScrollView>
+			<PanelBody>
+				<FooterMessageControl
+					label={ __(
+						'Note: Column layout may vary between themes and screen sizes'
+					) }
+				/>
+			</PanelBody>
+		</BottomSheet>
 	);
 }
 
-export default compose(
-	withSelect( ( select, {} ) => {
-		const { getBlockVariations } = select( blocksStore );
-
-		return {
-			date: getBlockVariations( 'core/columns', 'block' ),
-		};
-	} )
-)( BlockVariationPicker );
+export default BlockVariationPicker;

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -172,7 +172,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                   <button
                     aria-expanded="false"
                     aria-haspopup="true"
-                    aria-label="Custom color picker. The currently selected color is called "red" and has a value of "#-f-0-0"."
+                    aria-label="Custom color picker. The currently selected color is called "red" and has a value of "#f00"."
                     class="components-color-palette__custom-color-button"
                     style="background: rgb(255, 0, 0);"
                   />

package/src/components/editor-styles/index.js

@@ -43,13 +43,13 @@ function useDarkThemeBodyClassName( styles ) {
 				body.appendChild( tempCanvas );
 
 				backgroundColor = defaultView
-					.getComputedStyle( tempCanvas, null )
+					?.getComputedStyle( tempCanvas, null )
 					.getPropertyValue( 'background-color' );
 
 				body.removeChild( tempCanvas );
 			} else {
 				backgroundColor = defaultView
-					.getComputedStyle( canvas, null )
+					?.getComputedStyle( canvas, null )
 					.getPropertyValue( 'background-color' );
 			}
 			const colordBackgroundColor = colord( backgroundColor );