@wordpress/edit-widgets 5.22.0 → 5.23.0

package/src/components/header/index.js

@@ -1,101 +1,48 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { __, _x } from '@wordpress/i18n';
-import { Button, ToolbarItem, VisuallyHidden } from '@wordpress/components';
-import {
-	NavigableToolbar,
-	store as blockEditorStore,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Popover, VisuallyHidden } from '@wordpress/components';
 import { PinnedItems } from '@wordpress/interface';
-import { listView, plus } from '@wordpress/icons';
-import { useCallback, useRef } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
+import DocumentTools from './document-tools';
 import SaveButton from '../save-button';
-import UndoButton from './undo-redo/undo';
-import RedoButton from './undo-redo/redo';
 import MoreMenu from '../more-menu';
-import useLastSelectedWidgetArea from '../../hooks/use-last-selected-widget-area';
-import { store as editWidgetsStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
-const { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );
+const { BlockContextualToolbar } = unlock( blockEditorPrivateApis );
 
 function Header( { setListViewToggleElement } ) {
-	const isMediumViewport = useViewportMatch( 'medium' );
-	const inserterButton = useRef();
-	const widgetAreaClientId = useLastSelectedWidgetArea();
-	const isLastSelectedWidgetAreaOpen = useSelect(
-		( select ) =>
-			select( editWidgetsStore ).getIsWidgetAreaOpen(
-				widgetAreaClientId
+	const isLargeViewport = useViewportMatch( 'medium' );
+	const blockToolbarRef = useRef();
+	const { hasFixedToolbar } = useSelect(
+		( select ) => ( {
+			hasFixedToolbar: !! select( preferencesStore ).get(
+				'core/edit-widgets',
+				'fixedToolbar'
 			),
-		[ widgetAreaClientId ]
+		} ),
+		[]
 	);
-	const { isInserterOpen, isListViewOpen } = useSelect( ( select ) => {
-		const { isInserterOpened, isListViewOpened } =
-			select( editWidgetsStore );
-		return {
-			isInserterOpen: isInserterOpened(),
-			isListViewOpen: isListViewOpened(),
-		};
-	}, [] );
-	const { setIsWidgetAreaOpen, setIsInserterOpened, setIsListViewOpened } =
-		useDispatch( editWidgetsStore );
-	const { selectBlock } = useDispatch( blockEditorStore );
-	const handleClick = () => {
-		if ( isInserterOpen ) {
-			// Focusing the inserter button closes the inserter popover.
-			setIsInserterOpened( false );
-		} else {
-			if ( ! isLastSelectedWidgetAreaOpen ) {
-				// Select the last selected block if hasn't already.
-				selectBlock( widgetAreaClientId );
-				// Open the last selected widget area when opening the inserter.
-				setIsWidgetAreaOpen( widgetAreaClientId, true );
-			}
-			// The DOM updates resulting from selectBlock() and setIsInserterOpened() calls are applied the
-			// same tick and pretty much in a random order. The inserter is closed if any other part of the
-			// app receives focus. If selectBlock() happens to take effect after setIsInserterOpened() then
-			// the inserter is visible for a brief moment and then gets auto-closed due to focus moving to
-			// the selected block.
-			window.requestAnimationFrame( () => setIsInserterOpened( true ) );
-		}
-	};
-
-	const toggleListView = useCallback(
-		() => setIsListViewOpened( ! isListViewOpen ),
-		[ setIsListViewOpened, isListViewOpen ]
-	);
-
-	const {
-		shouldShowContextualToolbar,
-		canFocusHiddenToolbar,
-		fixedToolbarCanBeFocused,
-	} = useShouldContextualToolbarShow();
-	// If there's a block toolbar to be focused, disable the focus shortcut for the document toolbar.
-	// There's a fixed block toolbar when the fixed toolbar option is enabled or when the browser width is less than the large viewport.
-	const blockToolbarCanBeFocused =
-		shouldShowContextualToolbar ||
-		canFocusHiddenToolbar ||
-		fixedToolbarCanBeFocused;
 
 	return (
 		<>
 			<div className="edit-widgets-header">
 				<div className="edit-widgets-header__navigable-toolbar-wrapper">
-					{ isMediumViewport && (
+					{ isLargeViewport && (
 						<h1 className="edit-widgets-header__title">
 							{ __( 'Widgets' ) }
 						</h1>
 					) }
-					{ ! isMediumViewport && (
+					{ ! isLargeViewport && (
 						<VisuallyHidden
 							as="h1"
 							className="edit-widgets-header__title"
@@ -103,48 +50,20 @@ function Header( { setListViewToggleElement } ) {
 							{ __( 'Widgets' ) }
 						</VisuallyHidden>
 					) }
-					<NavigableToolbar
-						className="edit-widgets-header-toolbar"
-						aria-label={ __( 'Document tools' ) }
-						shouldUseKeyboardFocusShortcut={
-							! blockToolbarCanBeFocused
-						}
-					>
-						<ToolbarItem
-							ref={ inserterButton }
-							as={ Button }
-							className="edit-widgets-header-toolbar__inserter-toggle"
-							variant="primary"
-							isPressed={ isInserterOpen }
-							onMouseDown={ ( event ) => {
-								event.preventDefault();
-							} }
-							onClick={ handleClick }
-							icon={ plus }
-							/* translators: button label text should, if possible, be under 16
-					characters. */
-							label={ _x(
-								'Toggle block inserter',
-								'Generic label for block inserter button'
-							) }
-						/>
-						{ isMediumViewport && (
-							<>
-								<UndoButton />
-								<RedoButton />
-								<ToolbarItem
-									as={ Button }
-									className="edit-widgets-header-toolbar__list-view-toggle"
-									icon={ listView }
-									isPressed={ isListViewOpen }
-									/* translators: button label text should, if possible, be under 16 characters. */
-									label={ __( 'List View' ) }
-									onClick={ toggleListView }
-									ref={ setListViewToggleElement }
-								/>
-							</>
-						) }
-					</NavigableToolbar>
+					<DocumentTools
+						setListViewToggleElement={ setListViewToggleElement }
+					/>
+					{ hasFixedToolbar && isLargeViewport && (
+						<>
+							<div className="selected-block-tools-wrapper">
+								<BlockContextualToolbar isFixed />
+							</div>
+							<Popover.Slot
+								ref={ blockToolbarRef }
+								name="block-toolbar"
+							/>
+						</>
+					) }
 				</div>
 				<div className="edit-widgets-header__actions">
 					<SaveButton />

package/src/components/header/style.scss

@@ -9,12 +9,22 @@
 	@include break-small {
 		overflow: visible;
 	}
+
+	.selected-block-tools-wrapper {
+		overflow-x: hidden;
+	}
+
+	.block-editor-block-contextual-toolbar.is-fixed {
+		border: none;
+	}
 }
 
 .edit-widgets-header__navigable-toolbar-wrapper {
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	flex-shrink: 2;
+	overflow-x: hidden;
 	padding-left: $grid-unit-20;
 }
 

package/src/components/layout/style.scss

@@ -22,15 +22,3 @@
 		height: 100%;
 	}
 }
-
-.blocks-widgets-container {
-	// making the header be lower than the content
-	// so the fixed toolbar can be positioned on top of it
-	// but only on desktop
-	@include break-medium() {
-		.interface-interface-skeleton__header:not(:focus-within) {
-			z-index: 19;
-		}
-	}
-
-}

package/src/components/widget-areas-block-editor-content/style.scss

@@ -34,101 +34,3 @@
 		}
 	}
 }
-
-// Fixed contextual toolbar
-@include editor-left(".edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed");
-
-
-.edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-	position: sticky;
-	top: 0;
-	z-index: z-index(".block-editor-block-popover");
-	display: block;
-	width: 100%;
-
-	// on desktop and tablet viewports the toolbar is fixed
-	// on top of interface header
-	$toolbar-margin: $grid-unit-80 * 3 - 2 * $grid-unit + $grid-unit-05;
-
-	@include break-medium() {
-		// leave room for block inserter, undo and redo, list view
-		margin-left: $toolbar-margin;
-		// position on top of interface header
-		position: fixed;
-		top: $admin-bar-height;
-		// Don't fill up when empty
-		min-height: initial;
-		// remove the border
-		border-bottom: none;
-		// has to be flex for collapse button to fit
-		display: flex;
-
-		// Mimic the height of the parent, vertically align center, and provide a max-height.
-		height: $header-height;
-		align-items: center;
-
-
-		// on tablet viewports the toolbar is fixed
-		// on top of interface header and covers the whole header
-		// except for the inserter on the left
-		width: calc(100% - #{$toolbar-margin});
-
-		&.is-collapsed {
-			width: initial;
-		}
-
-		&:empty {
-			width: initial;
-		}
-
-		.is-fullscreen-mode & {
-			// leave room for block inserter, undo and redo, list view
-			// and some margin left
-			margin-left: $grid-unit-80 * 4 - 2 * $grid-unit;
-
-			top: 0;
-
-			&.is-collapsed {
-				width: initial;
-			}
-
-			&:empty {
-				width: initial;
-			}
-		}
-
-		.show-icon-labels & {
-			margin-left: $grid-unit-80 + 2 * $grid-unit; // inserter and margin
-			width: calc(100% + 40px - #{$toolbar-margin}); //there are no undo, redo and list view buttons
-
-			.is-fullscreen-mode & {
-				margin-left: $grid-unit * 18; // site hub, inserter and margin
-			}
-		}
-
-		.blocks-widgets-container & {
-			margin-left: $grid-unit-80 * 2.4;
-
-			&.is-collapsed {
-				margin-left: $grid-unit-80 * 4.2;
-			}
-		}
-	}
-
-	// on desktop viewports the toolbar is fixed
-	// on top of interface header and leaves room
-	// for the block inserter the publish button
-	@include break-large() {
-		width: auto;
-		.show-icon-labels & {
-			width: auto; //there are no undo, redo and list view buttons
-		}
-
-		.is-fullscreen-mode & {
-			// 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% - 280px - #{4 * $grid-unit-80});
-		}
-	}
-}