@wordpress/edit-widgets 5.24.1 → 5.25.1-next.79a6196f.0

package/src/components/header/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { BlockToolbar } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -16,11 +16,8 @@ import { store as preferencesStore } from '@wordpress/preferences';
 import DocumentTools from './document-tools';
 import SaveButton from '../save-button';
 import MoreMenu from '../more-menu';
-import { unlock } from '../../lock-unlock';
 
-const { BlockContextualToolbar } = unlock( blockEditorPrivateApis );
-
-function Header( { setListViewToggleElement } ) {
+function Header() {
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const blockToolbarRef = useRef();
 	const { hasFixedToolbar } = useSelect(
@@ -50,13 +47,11 @@ function Header( { setListViewToggleElement } ) {
 							{ __( 'Widgets' ) }
 						</VisuallyHidden>
 					) }
-					<DocumentTools
-						setListViewToggleElement={ setListViewToggleElement }
-					/>
+					<DocumentTools />
 					{ hasFixedToolbar && isLargeViewport && (
 						<>
 							<div className="selected-block-tools-wrapper">
-								<BlockContextualToolbar isFixed />
+								<BlockToolbar hideDragHandle />
 							</div>
 							<Popover.Slot
 								ref={ blockToolbarRef }

package/src/components/header/style.scss

@@ -12,10 +12,31 @@
 
 	.selected-block-tools-wrapper {
 		overflow-x: hidden;
-	}
 
-	.block-editor-block-contextual-toolbar.is-fixed {
-		border: none;
+		.block-editor-block-contextual-toolbar {
+			border-bottom: 0;
+		}
+
+		// Modified group borders
+		.components-toolbar-group,
+		.components-toolbar {
+			border-right: none;
+
+			&::after {
+				content: "";
+				width: $border-width;
+				margin-top: $grid-unit + $grid-unit-05;
+				margin-bottom: $grid-unit + $grid-unit-05;
+				background-color: $gray-300;
+				margin-left: $grid-unit;
+			}
+
+			& .components-toolbar-group.components-toolbar-group {
+				&::after {
+					display: none;
+				}
+			}
+		}
 	}
 }
 
@@ -24,7 +45,6 @@
 	align-items: center;
 	justify-content: center;
 	flex-shrink: 2;
-	overflow-x: hidden;
 	padding-left: $grid-unit-20;
 }
 
@@ -46,7 +66,7 @@
 }
 
 .edit-widgets-header-toolbar {
-	border: none;
+	gap: $grid-unit-10;
 
 	// The Toolbar component adds different styles to buttons, so we reset them
 	// here to the original button styles

package/src/components/header/undo-redo/redo.js

@@ -2,13 +2,14 @@
  * WordPress dependencies
  */
 import { __, isRTL } from '@wordpress/i18n';
-import { ToolbarButton } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons';
 import { displayShortcut, isAppleOS } from '@wordpress/keycodes';
 import { store as coreStore } from '@wordpress/core-data';
+import { forwardRef } from '@wordpress/element';
 
-export default function RedoButton() {
+function RedoButton( props, ref ) {
 	const shortcut = isAppleOS()
 		? displayShortcut.primaryShift( 'z' )
 		: displayShortcut.primary( 'y' );
@@ -19,7 +20,9 @@ export default function RedoButton() {
 	);
 	const { redo } = useDispatch( coreStore );
 	return (
-		<ToolbarButton
+		<Button
+			{ ...props }
+			ref={ ref }
 			icon={ ! isRTL() ? redoIcon : undoIcon }
 			label={ __( 'Redo' ) }
 			shortcut={ shortcut }
@@ -31,3 +34,5 @@ export default function RedoButton() {
 		/>
 	);
 }
+
+export default forwardRef( RedoButton );

package/src/components/header/undo-redo/undo.js

@@ -2,20 +2,23 @@
  * WordPress dependencies
  */
 import { __, isRTL } from '@wordpress/i18n';
-import { ToolbarButton } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { undo as undoIcon, redo as redoIcon } from '@wordpress/icons';
 import { displayShortcut } from '@wordpress/keycodes';
 import { store as coreStore } from '@wordpress/core-data';
+import { forwardRef } from '@wordpress/element';
 
-export default function UndoButton() {
+function UndoButton( props, ref ) {
 	const hasUndo = useSelect(
 		( select ) => select( coreStore ).hasUndo(),
 		[]
 	);
 	const { undo } = useDispatch( coreStore );
 	return (
-		<ToolbarButton
+		<Button
+			{ ...props }
+			ref={ ref }
 			icon={ ! isRTL() ? undoIcon : redoIcon }
 			label={ __( 'Undo' ) }
 			shortcut={ displayShortcut.primary( 'z' ) }
@@ -27,3 +30,5 @@ export default function UndoButton() {
 		/>
 	);
 }
+
+export default forwardRef( UndoButton );

package/src/components/layout/interface.js

@@ -3,7 +3,7 @@
  */
 import { useViewportMatch } from '@wordpress/compose';
 import { BlockBreadcrumb } from '@wordpress/block-editor';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	InterfaceSkeleton,
@@ -68,9 +68,6 @@ function Interface( { blockEditorSettings } ) {
 		[]
 	);
 
-	const [ listViewToggleElement, setListViewToggleElement ] =
-		useState( null );
-
 	// Inserter and Sidebars are mutually exclusive
 	useEffect( () => {
 		if ( hasSidebarEnabled && ! isHugeViewport ) {
@@ -97,16 +94,8 @@ function Interface( { blockEditorSettings } ) {
 				...interfaceLabels,
 				secondarySidebar: secondarySidebarLabel,
 			} }
-			header={
-				<Header setListViewToggleElement={ setListViewToggleElement } />
-			}
-			secondarySidebar={
-				hasSecondarySidebar && (
-					<SecondarySidebar
-						listViewToggleElement={ listViewToggleElement }
-					/>
-				)
-			}
+			header={ <Header /> }
+			secondarySidebar={ hasSecondarySidebar && <SecondarySidebar /> }
 			sidebar={
 				hasSidebarEnabled && (
 					<ComplementaryArea.Slot scope="core/edit-widgets" />

package/src/components/secondary-sidebar/index.js

@@ -13,7 +13,7 @@ import { store as editWidgetsStore } from '../../store';
 import InserterSidebar from './inserter-sidebar';
 import ListViewSidebar from './list-view-sidebar';
 
-export default function SecondarySidebar( { listViewToggleElement } ) {
+export default function SecondarySidebar() {
 	const { isInserterOpen, isListViewOpen } = useSelect( ( select ) => {
 		const { isInserterOpened, isListViewOpened } =
 			select( editWidgetsStore );
@@ -27,9 +27,7 @@ export default function SecondarySidebar( { listViewToggleElement } ) {
 		return <InserterSidebar />;
 	}
 	if ( isListViewOpen ) {
-		return (
-			<ListViewSidebar listViewToggleElement={ listViewToggleElement } />
-		);
+		return <ListViewSidebar />;
 	}
 	return null;
 }

package/src/components/secondary-sidebar/list-view-sidebar.js

@@ -4,7 +4,7 @@
 import { __experimentalListView as ListView } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
 import { useFocusOnMount, useMergeRefs } from '@wordpress/compose';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useCallback, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
@@ -14,9 +14,11 @@ import { ESCAPE } from '@wordpress/keycodes';
  * Internal dependencies
  */
 import { store as editWidgetsStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
-export default function ListViewSidebar( { listViewToggleElement } ) {
+export default function ListViewSidebar() {
 	const { setIsListViewOpened } = useDispatch( editWidgetsStore );
+	const { getListViewToggleRef } = unlock( useSelect( editWidgetsStore ) );
 
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the dropZoneElement updates.
@@ -27,8 +29,8 @@ export default function ListViewSidebar( { listViewToggleElement } ) {
 	// When closing the list view, focus should return to the toggle button.
 	const closeListView = useCallback( () => {
 		setIsListViewOpened( false );
-		listViewToggleElement?.focus();
-	}, [ listViewToggleElement, setIsListViewOpened ] );
+		getListViewToggleRef().current?.focus();
+	}, [ getListViewToggleRef, setIsListViewOpened ] );
 
 	const closeOnEscape = useCallback(
 		( event ) => {

package/src/components/widget-areas-block-editor-content/index.js

@@ -3,11 +3,13 @@
  */
 import {
 	BlockList,
+	BlockToolbar,
 	BlockTools,
 	BlockSelectionClearer,
 	WritingFlow,
 	__unstableEditorStyles as EditorStyles,
 } from '@wordpress/block-editor';
+import { useViewportMatch } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -29,6 +31,7 @@ export default function WidgetAreasBlockEditorContent( {
 			),
 		[]
 	);
+	const isLargeViewport = useViewportMatch( 'medium' );
 
 	const styles = useMemo( () => {
 		return hasThemeStyles ? blockEditorSettings.styles : [];
@@ -37,6 +40,7 @@ export default function WidgetAreasBlockEditorContent( {
 	return (
 		<div className="edit-widgets-block-editor">
 			<Notices />
+			{ ! isLargeViewport && <BlockToolbar hideDragHandle /> }
 			<BlockTools>
 				<KeyboardShortcuts />
 				<EditorStyles

package/src/components/widget-areas-block-editor-provider/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { SlotFillProvider } from '@wordpress/components';
+import { useViewportMatch } from '@wordpress/compose';
 import { uploadMedia } from '@wordpress/media-utils';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
@@ -32,6 +33,7 @@ export default function WidgetAreasBlockEditorProvider( {
 	...props
 } ) {
 	const mediaPermissions = useResourcePermissions( 'media' );
+	const isLargeViewport = useViewportMatch( 'medium' );
 	const {
 		reusableBlocks,
 		isFixedToolbarActive,
@@ -78,7 +80,7 @@ export default function WidgetAreasBlockEditorProvider( {
 		return {
 			...blockEditorSettings,
 			__experimentalReusableBlocks: reusableBlocks,
-			hasFixedToolbar: isFixedToolbarActive,
+			hasFixedToolbar: isFixedToolbarActive || ! isLargeViewport,
 			keepCaretInsideBlock,
 			mediaUpload: mediaUploadBlockEditor,
 			templateLock: 'all',
@@ -89,6 +91,7 @@ export default function WidgetAreasBlockEditorProvider( {
 	}, [
 		blockEditorSettings,
 		isFixedToolbarActive,
+		isLargeViewport,
 		keepCaretInsideBlock,
 		mediaPermissions.canCreate,
 		reusableBlocks,

package/src/store/index.js

@@ -11,7 +11,9 @@ import reducer from './reducer';
 import * as resolvers from './resolvers';
 import * as selectors from './selectors';
 import * as actions from './actions';
+import * as privateSelectors from './private-selectors';
 import { STORE_NAME } from './constants';
+import { unlock } from '../lock-unlock';
 
 /**
  * Block editor data store configuration.
@@ -47,3 +49,5 @@ apiFetch.use( function ( options, next ) {
 
 	return next( options );
 } );
+
+unlock( store ).registerPrivateSelectors( privateSelectors );

package/src/store/private-selectors.js

@@ -0,0 +1,3 @@
+export function getListViewToggleRef( state ) {
+	return state.listViewToggleRef;
+}

package/src/store/reducer.js

@@ -68,6 +68,17 @@ export function listViewPanel( state = false, action ) {
 	return state;
 }
 
+/**
+ * This reducer does nothing aside initializing a ref to the list view toggle.
+ * We will have a unique ref per "editor" instance.
+ *
+ * @param {Object} state
+ * @return {Object} Reference to the list view toggle button.
+ */
+export function listViewToggleRef( state = { current: null } ) {
+	return state;
+}
+
 export default combineReducers( {
 	blockInserterPanel,
 	listViewPanel,