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

package/build-style/style-rtl.css

@@ -569,6 +569,10 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   color: #757575;
 }
 
+.interface-preferences-modal__section:has(.interface-preferences-modal__section-content:empty) {
+  display: none;
+}
+
 .interface-preferences-modal__option + .interface-preferences-modal__option {
   margin-top: 16px;
 }
@@ -674,7 +678,6 @@ body.is-dragging-components-draggable .wp-block[data-type="core/widget-area"] .c
   align-items: center;
   justify-content: center;
   flex-shrink: 2;
-  overflow-x: hidden;
   padding-right: 16px;
 }
 
@@ -697,7 +700,7 @@ body.is-dragging-components-draggable .wp-block[data-type="core/widget-area"] .c
 }
 
 .edit-widgets-header-toolbar {
-  border: none;
+  gap: 8px;
 }
 .edit-widgets-header-toolbar > .components-button.has-icon.has-icon.has-icon,
 .edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon.has-icon {

package/build-style/style.css

@@ -569,6 +569,10 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   color: #757575;
 }
 
+.interface-preferences-modal__section:has(.interface-preferences-modal__section-content:empty) {
+  display: none;
+}
+
 .interface-preferences-modal__option + .interface-preferences-modal__option {
   margin-top: 16px;
 }
@@ -674,7 +678,6 @@ body.is-dragging-components-draggable .wp-block[data-type="core/widget-area"] .c
   align-items: center;
   justify-content: center;
   flex-shrink: 2;
-  overflow-x: hidden;
   padding-left: 16px;
 }
 
@@ -697,7 +700,7 @@ body.is-dragging-components-draggable .wp-block[data-type="core/widget-area"] .c
 }
 
 .edit-widgets-header-toolbar {
-  border: none;
+  gap: 8px;
 }
 .edit-widgets-header-toolbar > .components-button.has-icon.has-icon.has-icon,
 .edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon.has-icon {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-widgets",
-	"version": "5.25.0",
+	"version": "5.25.1-next.79a6196f.0",
 	"description": "Widgets Page module for WordPress..",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,33 +27,34 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/api-fetch": "^6.45.0",
-		"@wordpress/block-editor": "^12.16.0",
-		"@wordpress/block-library": "^8.25.0",
-		"@wordpress/blocks": "^12.25.0",
-		"@wordpress/components": "^25.14.0",
-		"@wordpress/compose": "^6.25.0",
-		"@wordpress/core-data": "^6.25.0",
-		"@wordpress/data": "^9.18.0",
-		"@wordpress/deprecated": "^3.48.0",
-		"@wordpress/dom": "^3.48.0",
-		"@wordpress/element": "^5.25.0",
-		"@wordpress/hooks": "^3.48.0",
-		"@wordpress/i18n": "^4.48.0",
-		"@wordpress/icons": "^9.39.0",
-		"@wordpress/interface": "^5.25.0",
-		"@wordpress/keyboard-shortcuts": "^4.25.0",
-		"@wordpress/keycodes": "^3.48.0",
-		"@wordpress/media-utils": "^4.39.0",
-		"@wordpress/notices": "^4.16.0",
-		"@wordpress/patterns": "^1.9.0",
-		"@wordpress/plugins": "^6.16.0",
-		"@wordpress/preferences": "^3.25.0",
-		"@wordpress/private-apis": "^0.30.0",
-		"@wordpress/reusable-blocks": "^4.25.0",
-		"@wordpress/url": "^3.49.0",
-		"@wordpress/widgets": "^3.25.0",
-		"classnames": "^2.3.1"
+		"@wordpress/api-fetch": "^6.45.1-next.79a6196f.0",
+		"@wordpress/block-editor": "^12.16.1-next.79a6196f.0",
+		"@wordpress/block-library": "^8.25.1-next.79a6196f.0",
+		"@wordpress/blocks": "^12.25.1-next.79a6196f.0",
+		"@wordpress/components": "^25.15.1-next.79a6196f.0",
+		"@wordpress/compose": "^6.25.1-next.79a6196f.0",
+		"@wordpress/core-data": "^6.25.1-next.79a6196f.0",
+		"@wordpress/data": "^9.18.1-next.79a6196f.0",
+		"@wordpress/deprecated": "^3.48.1-next.79a6196f.0",
+		"@wordpress/dom": "^3.48.1-next.79a6196f.0",
+		"@wordpress/element": "^5.25.1-next.79a6196f.0",
+		"@wordpress/hooks": "^3.48.1-next.79a6196f.0",
+		"@wordpress/i18n": "^4.48.1-next.79a6196f.0",
+		"@wordpress/icons": "^9.39.1-next.79a6196f.0",
+		"@wordpress/interface": "^5.25.1-next.79a6196f.0",
+		"@wordpress/keyboard-shortcuts": "^4.25.1-next.79a6196f.0",
+		"@wordpress/keycodes": "^3.48.1-next.79a6196f.0",
+		"@wordpress/media-utils": "^4.39.1-next.79a6196f.0",
+		"@wordpress/notices": "^4.16.1-next.79a6196f.0",
+		"@wordpress/patterns": "^1.9.1-next.79a6196f.0",
+		"@wordpress/plugins": "^6.16.1-next.79a6196f.0",
+		"@wordpress/preferences": "^3.25.1-next.79a6196f.0",
+		"@wordpress/private-apis": "^0.30.1-next.79a6196f.0",
+		"@wordpress/reusable-blocks": "^4.25.1-next.79a6196f.0",
+		"@wordpress/url": "^3.49.1-next.79a6196f.0",
+		"@wordpress/widgets": "^3.25.1-next.79a6196f.0",
+		"classnames": "^2.3.1",
+		"rememo": "^4.0.2"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -62,5 +63,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "fcf61b4beff747222c2c81d09d757ca1a0abd925"
+	"gitHead": "1e74b942ac0119a22ceaaf5c9594263f3ec516ab"
 }

package/src/blocks/widget-area/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"name": "core/widget-area",
 	"category": "widgets",
 	"attributes": {

package/src/components/header/document-tools/index.js

@@ -22,9 +22,9 @@ import useLastSelectedWidgetArea from '../../../hooks/use-last-selected-widget-a
 import { store as editWidgetsStore } from '../../../store';
 import { unlock } from '../../../lock-unlock';
 
-const { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );
+const { useCanBlockToolbarBeFocused } = unlock( blockEditorPrivateApis );
 
-function DocumentTools( { setListViewToggleElement } ) {
+function DocumentTools() {
 	const isMediumViewport = useViewportMatch( 'medium' );
 	const inserterButton = useRef();
 	const widgetAreaClientId = useLastSelectedWidgetArea();
@@ -35,14 +35,18 @@ function DocumentTools( { setListViewToggleElement } ) {
 			),
 		[ widgetAreaClientId ]
 	);
-	const { isInserterOpen, isListViewOpen } = useSelect( ( select ) => {
-		const { isInserterOpened, isListViewOpened } =
-			select( editWidgetsStore );
-		return {
-			isInserterOpen: isInserterOpened(),
-			isListViewOpen: isListViewOpened(),
-		};
-	}, [] );
+	const { isInserterOpen, isListViewOpen, listViewToggleRef } = useSelect(
+		( select ) => {
+			const { isInserterOpened, isListViewOpened, getListViewToggleRef } =
+				unlock( select( editWidgetsStore ) );
+			return {
+				isInserterOpen: isInserterOpened(),
+				isListViewOpen: isListViewOpened(),
+				listViewToggleRef: getListViewToggleRef(),
+			};
+		},
+		[]
+	);
 	const { setIsWidgetAreaOpen, setIsInserterOpened, setIsListViewOpened } =
 		useDispatch( editWidgetsStore );
 	const { selectBlock } = useDispatch( blockEditorStore );
@@ -71,23 +75,15 @@ function DocumentTools( { setListViewToggleElement } ) {
 		[ 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;
+	const blockToolbarCanBeFocused = useCanBlockToolbarBeFocused();
 
 	return (
 		<NavigableToolbar
 			className="edit-widgets-header-toolbar"
 			aria-label={ __( 'Document tools' ) }
 			shouldUseKeyboardFocusShortcut={ ! blockToolbarCanBeFocused }
+			variant="unstyled"
 		>
 			<ToolbarItem
 				ref={ inserterButton }
@@ -109,8 +105,8 @@ function DocumentTools( { setListViewToggleElement } ) {
 			/>
 			{ isMediumViewport && (
 				<>
-					<UndoButton />
-					<RedoButton />
+					<ToolbarItem as={ UndoButton } />
+					<ToolbarItem as={ RedoButton } />
 					<ToolbarItem
 						as={ Button }
 						className="edit-widgets-header-toolbar__list-view-toggle"
@@ -119,7 +115,7 @@ function DocumentTools( { setListViewToggleElement } ) {
 						/* translators: button label text should, if possible, be under 16 characters. */
 						label={ __( 'List View' ) }
 						onClick={ toggleListView }
-						ref={ setListViewToggleElement }
+						ref={ listViewToggleRef }
 					/>
 				</>
 			) }

package/src/components/header/index.js

@@ -17,7 +17,7 @@ import DocumentTools from './document-tools';
 import SaveButton from '../save-button';
 import MoreMenu from '../more-menu';
 
-function Header( { setListViewToggleElement } ) {
+function Header() {
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const blockToolbarRef = useRef();
 	const { hasFixedToolbar } = useSelect(
@@ -47,9 +47,7 @@ function Header( { setListViewToggleElement } ) {
 							{ __( 'Widgets' ) }
 						</VisuallyHidden>
 					) }
-					<DocumentTools
-						setListViewToggleElement={ setListViewToggleElement }
-					/>
+					<DocumentTools />
 					{ hasFixedToolbar && isLargeViewport && (
 						<>
 							<div className="selected-block-tools-wrapper">

package/src/components/header/style.scss

@@ -45,7 +45,6 @@
 	align-items: center;
 	justify-content: center;
 	flex-shrink: 2;
-	overflow-x: hidden;
 	padding-left: $grid-unit-20;
 }
 
@@ -67,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/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,