@wordpress/edit-widgets 5.18.1-next.5a1d1283.0 → 5.19.1

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() {
+export default function SecondarySidebar( { listViewToggleElement } ) {
 	const { isInserterOpen, isListViewOpen } = useSelect( ( select ) => {
 		const { isInserterOpened, isListViewOpened } =
 			select( editWidgetsStore );
@@ -27,7 +27,9 @@ export default function SecondarySidebar() {
 		return <InserterSidebar />;
 	}
 	if ( isListViewOpen ) {
-		return <ListViewSidebar />;
+		return (
+			<ListViewSidebar listViewToggleElement={ listViewToggleElement } />
+		);
 	}
 	return null;
 }

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

@@ -3,13 +3,9 @@
  */
 import { __experimentalListView as ListView } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
-import {
-	useFocusOnMount,
-	useFocusReturn,
-	useMergeRefs,
-} from '@wordpress/compose';
+import { useFocusOnMount, useMergeRefs } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
-import { useState } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
 import { ESCAPE } from '@wordpress/keycodes';
@@ -19,7 +15,7 @@ import { ESCAPE } from '@wordpress/keycodes';
  */
 import { store as editWidgetsStore } from '../../store';
 
-export default function ListViewSidebar() {
+export default function ListViewSidebar( { listViewToggleElement } ) {
 	const { setIsListViewOpened } = useDispatch( editWidgetsStore );
 
 	// Use internal state instead of a ref to make sure that the component
@@ -27,15 +23,22 @@ export default function ListViewSidebar() {
 	const [ dropZoneElement, setDropZoneElement ] = useState( null );
 
 	const focusOnMountRef = useFocusOnMount( 'firstElement' );
-	const headerFocusReturnRef = useFocusReturn();
-	const contentFocusReturnRef = useFocusReturn();
 
-	function closeOnEscape( event ) {
-		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
-			event.preventDefault();
-			setIsListViewOpened( false );
-		}
-	}
+	// When closing the list view, focus should return to the toggle button.
+	const closeListView = useCallback( () => {
+		setIsListViewOpened( false );
+		listViewToggleElement?.focus();
+	}, [ listViewToggleElement, setIsListViewOpened ] );
+
+	const closeOnEscape = useCallback(
+		( event ) => {
+			if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
+				event.preventDefault();
+				closeListView();
+			}
+		},
+		[ closeListView ]
+	);
 
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
@@ -43,24 +46,17 @@ export default function ListViewSidebar() {
 			className="edit-widgets-editor__list-view-panel"
 			onKeyDown={ closeOnEscape }
 		>
-			<div
-				className="edit-widgets-editor__list-view-panel-header"
-				ref={ headerFocusReturnRef }
-			>
+			<div className="edit-widgets-editor__list-view-panel-header">
 				<strong>{ __( 'List View' ) }</strong>
 				<Button
 					icon={ closeSmall }
 					label={ __( 'Close' ) }
-					onClick={ () => setIsListViewOpened( false ) }
+					onClick={ closeListView }
 				/>
 			</div>
 			<div
 				className="edit-widgets-editor__list-view-panel-content"
-				ref={ useMergeRefs( [
-					contentFocusReturnRef,
-					focusOnMountRef,
-					setDropZoneElement,
-				] ) }
+				ref={ useMergeRefs( [ focusOnMountRef, setDropZoneElement ] ) }
 			>
 				<ListView dropZoneElement={ dropZoneElement } />
 			</div>

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

@@ -39,7 +39,10 @@ export default function WidgetAreasBlockEditorContent( {
 			<Notices />
 			<BlockTools>
 				<KeyboardShortcuts />
-				<EditorStyles styles={ styles } />
+				<EditorStyles
+					styles={ styles }
+					scope=".editor-styles-wrapper"
+				/>
 				<BlockSelectionClearer>
 					<WritingFlow>
 						<BlockList className="edit-widgets-main-block-list" />

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

@@ -11,8 +11,7 @@
 	flex-grow: 1;
 
 	> div:last-of-type,
-	.block-editor-writing-flow,
-	.block-editor-writing-flow > div {
+	.block-editor-writing-flow {
 		display: flex;
 		flex-direction: column;
 		flex-grow: 1;
@@ -35,3 +34,101 @@
 		}
 	}
 }
+
+// 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});
+		}
+	}
+}

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

@@ -15,7 +15,6 @@ import {
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { privateApis as editPatternsPrivateApis } from '@wordpress/patterns';
-import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
 import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
@@ -98,21 +97,19 @@ export default function WidgetAreasBlockEditorProvider( {
 	);
 
 	return (
-		<ShortcutProvider>
+		<SlotFillProvider>
 			<KeyboardShortcuts.Register />
-			<SlotFillProvider>
-				<ExperimentalBlockEditorProvider
-					value={ blocks }
-					onInput={ onInput }
-					onChange={ onChange }
-					settings={ settings }
-					useSubRegistry={ false }
-					{ ...props }
-				>
-					<CopyHandler>{ children }</CopyHandler>
-					<PatternsMenuItems rootClientId={ widgetAreaId } />
-				</ExperimentalBlockEditorProvider>
-			</SlotFillProvider>
-		</ShortcutProvider>
+			<ExperimentalBlockEditorProvider
+				value={ blocks }
+				onInput={ onInput }
+				onChange={ onChange }
+				settings={ settings }
+				useSubRegistry={ false }
+				{ ...props }
+			>
+				<CopyHandler>{ children }</CopyHandler>
+				<PatternsMenuItems rootClientId={ widgetAreaId } />
+			</ExperimentalBlockEditorProvider>
+		</SlotFillProvider>
 	);
 }