@wordpress/block-editor 12.13.0 → 12.14.0

package/src/components/block-tools/empty-block-inserter.js

@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import BlockPopover from '../block-popover';
+import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
+import Inserter from '../inserter';
+import useSelectedBlockToolProps from './use-selected-block-tool-props';
+
+export default function EmptyBlockInserter( {
+	clientId,
+	__unstableContentRef,
+} ) {
+	const {
+		capturingClientId,
+		isInsertionPointVisible,
+		lastClientId,
+		rootClientId,
+	} = useSelectedBlockToolProps( clientId );
+
+	const popoverProps = useBlockToolbarPopoverProps( {
+		contentElement: __unstableContentRef?.current,
+		clientId,
+	} );
+
+	return (
+		<BlockPopover
+			clientId={ capturingClientId || clientId }
+			__unstableCoverTarget
+			bottomClientId={ lastClientId }
+			className={ classnames(
+				'block-editor-block-list__block-side-inserter-popover',
+				{
+					'is-insertion-point-visible': isInsertionPointVisible,
+				}
+			) }
+			__unstableContentRef={ __unstableContentRef }
+			resize={ false }
+			shift={ false }
+			{ ...popoverProps }
+		>
+			<div className="block-editor-block-list__empty-block-inserter">
+				<Inserter
+					position="bottom right"
+					rootClientId={ rootClientId }
+					clientId={ clientId }
+					__experimentalIsQuick
+				/>
+			</div>
+		</BlockPopover>
+	);
+}

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

@@ -6,28 +6,48 @@ import { useViewportMatch } from '@wordpress/compose';
 import { Popover } from '@wordpress/components';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
 import { useRef } from '@wordpress/element';
+import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
+import EmptyBlockInserter from './empty-block-inserter';
 import {
 	InsertionPointOpenRef,
 	default as InsertionPoint,
 } from './insertion-point';
-import SelectedBlockPopover from './selected-block-popover';
+import SelectedBlockTools from './selected-block-tools';
 import { store as blockEditorStore } from '../../store';
 import BlockContextualToolbar from './block-contextual-toolbar';
 import usePopoverScroll from '../block-popover/use-popover-scroll';
 import ZoomOutModeInserters from './zoom-out-mode-inserters';
 
 function selector( select ) {
-	const { __unstableGetEditorMode, getSettings, isTyping } =
-		select( blockEditorStore );
+	const {
+		getSelectedBlockClientId,
+		getFirstMultiSelectedBlockClientId,
+		getBlock,
+		getSettings,
+		__unstableGetEditorMode,
+		isTyping,
+	} = select( blockEditorStore );
+
+	const clientId =
+		getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
+
+	const { name = '', attributes = {} } = getBlock( clientId ) || {};
 
 	return {
-		isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
+		clientId,
 		hasFixedToolbar: getSettings().hasFixedToolbar,
+		hasSelectedBlock: clientId && name,
 		isTyping: isTyping(),
+		isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
+		showEmptyBlockSideInserter:
+			clientId &&
+			! isTyping() &&
+			__unstableGetEditorMode() === 'edit' &&
+			isUnmodifiedDefaultBlock( { name, attributes } ),
 	};
 }
 
@@ -46,10 +66,14 @@ export default function BlockTools( {
 	...props
 } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const { hasFixedToolbar, isZoomOutMode, isTyping } = useSelect(
-		selector,
-		[]
-	);
+	const {
+		clientId,
+		hasFixedToolbar,
+		hasSelectedBlock,
+		isTyping,
+		isZoomOutMode,
+		showEmptyBlockSideInserter,
+	} = useSelect( selector, [] );
 	const isMatch = useShortcutEventMatch();
 	const { getSelectedBlockClientIds, getBlockRootClientId } =
 		useSelect( blockEditorStore );
@@ -106,6 +130,15 @@ export default function BlockTools( {
 				insertBeforeBlock( clientIds[ 0 ] );
 			}
 		} else if ( isMatch( 'core/block-editor/unselect', event ) ) {
+			if ( event.target.closest( '[role=toolbar]' ) ) {
+				// This shouldn't be necessary, but we have a combination of a few things all combining to create a situation where:
+				// - Because the block toolbar uses createPortal to populate the block toolbar fills, we can't rely on the React event bubbling to hit the onKeyDown listener for the block toolbar
+				// - Since we can't use the React tree, we use the DOM tree which _should_ handle the event bubbling correctly from a `createPortal` element.
+				// - This bubbles via the React tree, which hits this `unselect` escape keypress before the block toolbar DOM event listener has access to it.
+				// An alternative would be to remove the addEventListener on the navigableToolbar and use this event to handle it directly right here. That feels hacky too though.
+				return;
+			}
+
 			const clientIds = getSelectedBlockClientIds();
 			if ( clientIds.length ) {
 				event.preventDefault();
@@ -129,6 +162,12 @@ export default function BlockTools( {
 	const blockToolbarRef = usePopoverScroll( __unstableContentRef );
 	const blockToolbarAfterRef = usePopoverScroll( __unstableContentRef );
 
+	// Conditions for fixed toolbar
+	// 1. Not zoom out mode
+	// 2. It's a large viewport. If it's a smaller viewport, let the floating toolbar handle it as it already has styles attached to make it render that way.
+	// 3. Fixed toolbar is enabled
+	const isTopToolbar = ! isZoomOutMode && hasFixedToolbar && isLargeViewport;
+
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div { ...props } onKeyDown={ onKeyDown }>
@@ -138,17 +177,34 @@ export default function BlockTools( {
 						__unstableContentRef={ __unstableContentRef }
 					/>
 				) }
-				{ ! isZoomOutMode &&
-					( hasFixedToolbar || ! isLargeViewport ) && (
-						<BlockContextualToolbar isFixed />
-					) }
+				{ /* If there is no slot available, such as in the standalone block editor, render within the editor */ }
+
+				{ ! isLargeViewport && ( // Small viewports always get a fixed toolbar
+					<BlockContextualToolbar isFixed />
+				) }
+
+				{ showEmptyBlockSideInserter && (
+					<EmptyBlockInserter
+						__unstableContentRef={ __unstableContentRef }
+						clientId={ clientId }
+					/>
+				) }
 				{ /* Even if the toolbar is fixed, the block popover is still
 					needed for navigation and zoom-out mode. */ }
-				<SelectedBlockPopover
-					__unstableContentRef={ __unstableContentRef }
-				/>
+				{ ! showEmptyBlockSideInserter && hasSelectedBlock && (
+					<SelectedBlockTools
+						__unstableContentRef={ __unstableContentRef }
+						clientId={ clientId }
+					/>
+				) }
+
 				{ /* Used for the inline rich text toolbar. */ }
-				<Popover.Slot name="block-toolbar" ref={ blockToolbarRef } />
+				{ ! isTopToolbar && (
+					<Popover.Slot
+						name="block-toolbar"
+						ref={ blockToolbarRef }
+					/>
+				) }
 				{ children }
 				{ /* Used for inline rich text popovers. */ }
 				<Popover.Slot

package/src/components/block-tools/selected-block-tools.js

@@ -0,0 +1,127 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useRef, useEffect } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useShortcut } from '@wordpress/keyboard-shortcuts';
+
+/**
+ * Internal dependencies
+ */
+import BlockSelectionButton from './block-selection-button';
+import BlockContextualToolbar from './block-contextual-toolbar';
+import { store as blockEditorStore } from '../../store';
+import BlockPopover from '../block-popover';
+import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
+import useSelectedBlockToolProps from './use-selected-block-tool-props';
+import { useShouldContextualToolbarShow } from '../../utils/use-should-contextual-toolbar-show';
+
+export default function SelectedBlockTools( {
+	clientId,
+	showEmptyBlockSideInserter,
+	__unstableContentRef,
+} ) {
+	const {
+		capturingClientId,
+		isInsertionPointVisible,
+		lastClientId,
+		rootClientId,
+	} = useSelectedBlockToolProps( clientId );
+
+	const { shouldShowBreadcrumb } = useSelect( ( select ) => {
+		const { hasMultiSelection, __unstableGetEditorMode } =
+			select( blockEditorStore );
+
+		const editorMode = __unstableGetEditorMode();
+
+		return {
+			shouldShowBreadcrumb:
+				! hasMultiSelection() &&
+				( editorMode === 'navigation' || editorMode === 'zoom-out' ),
+		};
+	}, [] );
+
+	const isToolbarForced = useRef( false );
+	const { shouldShowContextualToolbar, canFocusHiddenToolbar } =
+		useShouldContextualToolbarShow();
+
+	const { stopTyping } = useDispatch( blockEditorStore );
+
+	useShortcut(
+		'core/block-editor/focus-toolbar',
+		() => {
+			isToolbarForced.current = true;
+			stopTyping( true );
+		},
+		{
+			isDisabled: ! canFocusHiddenToolbar,
+		}
+	);
+
+	useEffect( () => {
+		isToolbarForced.current = false;
+	} );
+
+	// Stores the active toolbar item index so the block toolbar can return focus
+	// to it when re-mounting.
+	const initialToolbarItemIndexRef = useRef();
+
+	useEffect( () => {
+		// Resets the index whenever the active block changes so this is not
+		// persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
+		initialToolbarItemIndexRef.current = undefined;
+	}, [ clientId ] );
+
+	const popoverProps = useBlockToolbarPopoverProps( {
+		contentElement: __unstableContentRef?.current,
+		clientId,
+	} );
+
+	if ( showEmptyBlockSideInserter ) {
+		return null;
+	}
+
+	if ( shouldShowBreadcrumb || shouldShowContextualToolbar ) {
+		return (
+			<BlockPopover
+				clientId={ capturingClientId || clientId }
+				bottomClientId={ lastClientId }
+				className={ classnames(
+					'block-editor-block-list__block-popover',
+					{
+						'is-insertion-point-visible': isInsertionPointVisible,
+					}
+				) }
+				resize={ false }
+				{ ...popoverProps }
+			>
+				{ shouldShowContextualToolbar && (
+					<BlockContextualToolbar
+						// If the toolbar is being shown because of being forced
+						// it should focus the toolbar right after the mount.
+						focusOnMount={ isToolbarForced.current }
+						__experimentalInitialIndex={
+							initialToolbarItemIndexRef.current
+						}
+						__experimentalOnIndexChange={ ( index ) => {
+							initialToolbarItemIndexRef.current = index;
+						} }
+					/>
+				) }
+				{ shouldShowBreadcrumb && (
+					<BlockSelectionButton
+						clientId={ clientId }
+						rootClientId={ rootClientId }
+					/>
+				) }
+			</BlockPopover>
+		);
+	}
+
+	return null;
+}

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

@@ -118,16 +118,6 @@
 		}
 	}
 
-	// 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);
-	}
-
 	@include break-medium() {
 		&.is-fixed {
 			& > .block-editor-block-toolbar {

package/src/components/block-tools/use-selected-block-tool-props.js

@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+/**
+ * Returns props for the selected block tools and empty block inserter.
+ *
+ * @param {string} clientId Selected block client ID.
+ */
+export default function useSelectedBlockToolProps( clientId ) {
+	const selectedBlockProps = useSelect(
+		( select ) => {
+			const {
+				getBlockRootClientId,
+				getBlockParents,
+				__experimentalGetBlockListSettingsForBlocks,
+				isBlockInsertionPointVisible,
+				getBlockInsertionPoint,
+				getBlockOrder,
+				hasMultiSelection,
+				getLastMultiSelectedBlockClientId,
+			} = select( blockEditorStore );
+
+			const blockParentsClientIds = getBlockParents( clientId );
+
+			// Get Block List Settings for all ancestors of the current Block clientId.
+			const parentBlockListSettings =
+				__experimentalGetBlockListSettingsForBlocks(
+					blockParentsClientIds
+				);
+
+			// Get the clientId of the topmost parent with the capture toolbars setting.
+			const capturingClientId = blockParentsClientIds.find(
+				( parentClientId ) =>
+					parentBlockListSettings[ parentClientId ]
+						?.__experimentalCaptureToolbars
+			);
+
+			let isInsertionPointVisible = false;
+			if ( isBlockInsertionPointVisible() ) {
+				const insertionPoint = getBlockInsertionPoint();
+				const order = getBlockOrder( insertionPoint.rootClientId );
+				isInsertionPointVisible =
+					order[ insertionPoint.index ] === clientId;
+			}
+
+			return {
+				capturingClientId,
+				isInsertionPointVisible,
+				lastClientId: hasMultiSelection()
+					? getLastMultiSelectedBlockClientId()
+					: null,
+				rootClientId: getBlockRootClientId( clientId ),
+			};
+		},
+		[ clientId ]
+	);
+
+	return selectedBlockProps;
+}

package/src/components/editable-text/index.js

@@ -9,14 +9,7 @@ import { forwardRef } from '@wordpress/element';
 import RichText from '../rich-text';
 
 const EditableText = forwardRef( ( props, ref ) => {
-	return (
-		<RichText
-			ref={ ref }
-			{ ...props }
-			__unstableDisableFormats
-			preserveWhiteSpace
-		/>
-	);
+	return <RichText ref={ ref } { ...props } __unstableDisableFormats />;
 } );
 
 EditableText.Content = ( { value = '', tagName: Tag = 'div', ...props } ) => {

package/src/components/iframe/index.js

@@ -73,12 +73,13 @@ function bubbleEvent( event, Constructor, frame ) {
  * @param {Document} iframeDocument Document to attach listeners to.
  */
 function useBubbleEvents( iframeDocument ) {
-	return useRefEffect( ( body ) => {
+	return useRefEffect( () => {
 		const { defaultView } = iframeDocument;
 		if ( ! defaultView ) {
 			return;
 		}
 		const { frameElement } = defaultView;
+		const html = iframeDocument.documentElement;
 		const eventTypes = [ 'dragover', 'mousemove' ];
 		const handlers = {};
 		for ( const name of eventTypes ) {
@@ -88,12 +89,12 @@ function useBubbleEvents( iframeDocument ) {
 				const Constructor = window[ constructorName ];
 				bubbleEvent( event, Constructor, frameElement );
 			};
-			body.addEventListener( name, handlers[ name ] );
+			html.addEventListener( name, handlers[ name ] );
 		}
 
 		return () => {
 			for ( const name of eventTypes ) {
-				body.removeEventListener( name, handlers[ name ] );
+				html.removeEventListener( name, handlers[ name ] );
 			}
 		};
 	} );

package/src/components/inserter/block-patterns-explorer/{explorer.js → index.js}

@@ -8,9 +8,9 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import PatternExplorerSidebar from './sidebar';
-import PatternList from './patterns-list';
-import { usePatternsCategories } from '../block-patterns-tab';
+import PatternExplorerSidebar from './pattern-explorer-sidebar';
+import PatternList from './pattern-list';
+import { usePatternCategories } from '../block-patterns-tab/use-pattern-categories';
 
 function PatternsExplorer( { initialCategory, rootClientId } ) {
 	const [ searchValue, setSearchValue ] = useState( '' );
@@ -20,7 +20,7 @@ function PatternsExplorer( { initialCategory, rootClientId } ) {
 		initialCategory?.name
 	);
 
-	const patternCategories = usePatternsCategories(
+	const patternCategories = usePatternCategories(
 		rootClientId,
 		patternSourceFilter
 	);

package/src/components/inserter/block-patterns-explorer/{patterns-list.js → pattern-list.js}

@@ -17,7 +17,10 @@ import InserterListbox from '../../inserter-listbox';
 import { searchItems } from '../search-items';
 import BlockPatternsPaging from '../../block-patterns-paging';
 import usePatternsPaging from '../hooks/use-patterns-paging';
-import { allPatternsCategory, myPatternsCategory } from '../block-patterns-tab';
+import {
+	allPatternsCategory,
+	myPatternsCategory,
+} from '../block-patterns-tab/utils';
 
 function PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) {
 	if ( ! filterValue ) {

package/src/components/inserter/block-patterns-tab/index.js

@@ -0,0 +1,118 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { __, isRTL } from '@wordpress/i18n';
+import { useViewportMatch } from '@wordpress/compose';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+	__experimentalHStack as HStack,
+	FlexBlock,
+	Button,
+} from '@wordpress/components';
+import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import PatternsExplorerModal from '../block-patterns-explorer';
+import MobileTabNavigation from '../mobile-tab-navigation';
+import { PatternCategoryPreviews } from './pattern-category-previews';
+import { usePatternCategories } from './use-pattern-categories';
+
+function BlockPatternsTab( {
+	onSelectCategory,
+	selectedCategory,
+	onInsert,
+	rootClientId,
+} ) {
+	const [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );
+
+	const categories = usePatternCategories( rootClientId );
+
+	const initialCategory = selectedCategory || categories[ 0 ];
+	const isMobile = useViewportMatch( 'medium', '<' );
+	return (
+		<>
+			{ ! isMobile && (
+				<div className="block-editor-inserter__block-patterns-tabs-container">
+					<nav
+						aria-label={ __( 'Block pattern categories' ) }
+						className="block-editor-inserter__block-patterns-tabs"
+					>
+						<ItemGroup role="list">
+							{ categories.map( ( category ) => (
+								<Item
+									role="listitem"
+									key={ category.name }
+									onClick={ () =>
+										onSelectCategory( category )
+									}
+									className={
+										category === selectedCategory
+											? 'block-editor-inserter__patterns-category block-editor-inserter__patterns-selected-category'
+											: 'block-editor-inserter__patterns-category'
+									}
+									aria-label={ category.label }
+									aria-current={
+										category === selectedCategory
+											? 'true'
+											: undefined
+									}
+								>
+									<HStack>
+										<FlexBlock>
+											{ category.label }
+										</FlexBlock>
+										<Icon
+											icon={
+												isRTL()
+													? chevronLeft
+													: chevronRight
+											}
+										/>
+									</HStack>
+								</Item>
+							) ) }
+							<div role="listitem">
+								<Button
+									className="block-editor-inserter__patterns-explore-button"
+									onClick={ () =>
+										setShowPatternsExplorer( true )
+									}
+									variant="secondary"
+								>
+									{ __( 'Explore all patterns' ) }
+								</Button>
+							</div>
+						</ItemGroup>
+					</nav>
+				</div>
+			) }
+			{ isMobile && (
+				<MobileTabNavigation categories={ categories }>
+					{ ( category ) => (
+						<PatternCategoryPreviews
+							key={ category.name }
+							onInsert={ onInsert }
+							rootClientId={ rootClientId }
+							category={ category }
+							showTitlesAsTooltip={ false }
+						/>
+					) }
+				</MobileTabNavigation>
+			) }
+			{ showPatternsExplorer && (
+				<PatternsExplorerModal
+					initialCategory={ initialCategory }
+					patternCategories={ categories }
+					onModalClose={ () => setShowPatternsExplorer( false ) }
+					rootClientId={ rootClientId }
+				/>
+			) }
+		</>
+	);
+}
+
+export default BlockPatternsTab;

package/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js

@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef, useEffect } from '@wordpress/element';
+
+import { focus } from '@wordpress/dom';
+
+/**
+ * Internal dependencies
+ */
+
+import { PatternCategoryPreviews } from './pattern-category-previews';
+
+export function PatternCategoryPreviewPanel( {
+	rootClientId,
+	onInsert,
+	onHover,
+	category,
+	showTitlesAsTooltip,
+	patternFilter,
+} ) {
+	const container = useRef();
+
+	useEffect( () => {
+		const timeout = setTimeout( () => {
+			const [ firstTabbable ] = focus.tabbable.find( container.current );
+			firstTabbable?.focus();
+		} );
+		return () => clearTimeout( timeout );
+	}, [ category ] );
+
+	return (
+		<div
+			ref={ container }
+			className="block-editor-inserter__patterns-category-dialog"
+		>
+			<PatternCategoryPreviews
+				key={ category.name }
+				rootClientId={ rootClientId }
+				onInsert={ onInsert }
+				onHover={ onHover }
+				category={ category }
+				showTitlesAsTooltip={ showTitlesAsTooltip }
+				patternFilter={ patternFilter }
+			/>
+		</div>
+	);
+}