+
{ isLargeViewport && (
{ __( 'Widgets' ) }
@@ -63,7 +77,7 @@ function Header() {
diff --git a/packages/edit-widgets/src/components/header/style.scss b/packages/edit-widgets/src/components/header/style.scss
index 2dd4b88eebddf..ff307b498a88b 100644
--- a/packages/edit-widgets/src/components/header/style.scss
+++ b/packages/edit-widgets/src/components/header/style.scss
@@ -40,80 +40,73 @@
}
}
-.edit-widgets-header__navigable-toolbar-wrapper {
+.edit-widgets-header__toolbar {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 2;
overflow-x: hidden;
- padding-left: $grid-unit-20;
+ // Leave enough room for the focus ring to show.
+ padding: 2px 0;
+
+ @include break-small () {
+ padding-left: $grid-unit-20;
+ }
}
.edit-widgets-header__title {
font-size: 20px;
padding: 0;
- margin: 0 20px 0 0;
+ margin: 0;
}
.edit-widgets-header__actions {
display: flex;
align-items: center;
- padding-right: $grid-unit-20;
- gap: $grid-unit-05;
+ padding-right: $grid-unit-05;
- @include break-small() {
- gap: $grid-unit-10;
+ @include break-small () {
+ padding-right: $grid-unit-20 - ($grid-unit-15 * 0.5);
}
+
+ gap: $grid-unit-10;
}
-.edit-widgets-header-toolbar {
- border: none;
+/**
+ * Show icon labels.
+ */
- // The Toolbar component adds different styles to buttons, so we reset them
- // here to the original button styles
- // Specificity bump needed to offset https://github.com/WordPress/gutenberg/blob/8ea29cb04412c80c9adf7c1db0e816d6a0ac1232/packages/components/src/toolbar/style.scss#L76
- > .components-button.has-icon.has-icon.has-icon,
- > .components-dropdown > .components-button.has-icon.has-icon {
- height: $button-size;
- min-width: $button-size;
- padding: 6px;
+.show-icon-labels.interface-pinned-items,
+.show-icon-labels.edit-widgets-header {
+ .components-button.has-icon {
+ width: auto;
- &.is-pressed {
- background: $gray-900;
+ // Hide the button icons when labels are set to display...
+ svg {
+ display: none;
}
-
- &:focus:not(:disabled) {
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 $border-width $white;
- outline: 1px solid transparent;
+ // ... and display labels.
+ &::after {
+ content: attr(aria-label);
}
-
- &::before {
- display: none;
+ &[aria-disabled="true"] {
+ background-color: transparent;
}
}
-}
-
-.edit-widgets-header-toolbar__inserter-toggle.edit-widgets-header-toolbar__inserter-toggle {
- padding-left: $grid-unit;
- padding-right: $grid-unit;
-
- @include break-small {
- padding-left: $grid-unit-15;
- padding-right: $grid-unit-15;
- }
-
- &::after {
- content: none;
+ .is-tertiary {
+ &:active {
+ box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color);
+ background-color: transparent;
+ }
}
- svg {
- transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
- @include reduce-motion("transition");
- }
+ .interface-pinned-items .components-button {
+ padding-left: $grid-unit;
+ padding-right: $grid-unit;
- &.is-pressed {
- svg {
- transform: rotate(45deg);
+ @include break-small {
+ padding-left: $grid-unit-15;
+ padding-right: $grid-unit-15;
}
}
}
diff --git a/packages/edit-widgets/src/components/header/undo-redo/redo.js b/packages/edit-widgets/src/components/header/undo-redo/redo.js
deleted file mode 100644
index c4f4e6df37b91..0000000000000
--- a/packages/edit-widgets/src/components/header/undo-redo/redo.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, isRTL } from '@wordpress/i18n';
-import { ToolbarButton } 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';
-
-export default function RedoButton() {
- const shortcut = isAppleOS()
- ? displayShortcut.primaryShift( 'z' )
- : displayShortcut.primary( 'y' );
-
- const hasRedo = useSelect(
- ( select ) => select( coreStore ).hasRedo(),
- []
- );
- const { redo } = useDispatch( coreStore );
- return (
-
- );
-}
diff --git a/packages/edit-widgets/src/components/header/undo-redo/undo.js b/packages/edit-widgets/src/components/header/undo-redo/undo.js
deleted file mode 100644
index 827ed1a415d74..0000000000000
--- a/packages/edit-widgets/src/components/header/undo-redo/undo.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, isRTL } from '@wordpress/i18n';
-import { ToolbarButton } 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';
-
-export default function UndoButton() {
- const hasUndo = useSelect(
- ( select ) => select( coreStore ).hasUndo(),
- []
- );
- const { undo } = useDispatch( coreStore );
- return (
-
- );
-}
diff --git a/packages/edit-widgets/src/components/layout/interface.js b/packages/edit-widgets/src/components/layout/interface.js
index 987e3868de133..9f022d94f8aa8 100644
--- a/packages/edit-widgets/src/components/layout/interface.js
+++ b/packages/edit-widgets/src/components/layout/interface.js
@@ -2,7 +2,10 @@
* WordPress dependencies
*/
import { useViewportMatch } from '@wordpress/compose';
-import { BlockBreadcrumb } from '@wordpress/block-editor';
+import {
+ BlockBreadcrumb,
+ store as blockEditorStore,
+} from '@wordpress/block-editor';
import { useEffect } from '@wordpress/element';
import { useDispatch, useSelect } from '@wordpress/data';
import {
@@ -13,6 +16,7 @@ import {
import { __ } from '@wordpress/i18n';
import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import { store as preferencesStore } from '@wordpress/preferences';
+import { store as editorStore } from '@wordpress/editor';
/**
* Internal dependencies
@@ -21,6 +25,7 @@ import Header from '../header';
import WidgetAreasBlockEditorContent from '../widget-areas-block-editor-content';
import { store as editWidgetsStore } from '../../store';
import SecondarySidebar from '../secondary-sidebar';
+import useLastSelectedWidgetArea from '../../hooks/use-last-selected-widget-area';
const interfaceLabels = {
/* translators: accessibility text for the widgets screen top bar landmark region. */
@@ -36,8 +41,12 @@ const interfaceLabels = {
function Interface( { blockEditorSettings } ) {
const isMobileViewport = useViewportMatch( 'medium', '<' );
const isHugeViewport = useViewportMatch( 'huge', '>=' );
- const { setIsInserterOpened, setIsListViewOpened, closeGeneralSidebar } =
+ const widgetAreaClientId = useLastSelectedWidgetArea();
+ const { setIsInserterOpened, setIsListViewOpened } =
+ useDispatch( editorStore );
+ const { setIsWidgetAreaOpen, closeGeneralSidebar } =
useDispatch( editWidgetsStore );
+ const { selectBlock } = useDispatch( blockEditorStore );
const {
hasBlockBreadCrumbsEnabled,
hasSidebarEnabled,
@@ -50,8 +59,8 @@ function Interface( { blockEditorSettings } ) {
hasSidebarEnabled: !! select(
interfaceStore
).getActiveComplementaryArea( editWidgetsStore.name ),
- isInserterOpened: !! select( editWidgetsStore ).isInserterOpened(),
- isListViewOpened: !! select( editWidgetsStore ).isListViewOpened(),
+ isInserterOpened: !! select( editorStore ).isInserterOpened(),
+ isListViewOpened: !! select( editorStore ).isListViewOpened(),
hasBlockBreadCrumbsEnabled: !! select( preferencesStore ).get(
'core/edit-widgets',
'showBlockBreadcrumbs'
@@ -68,6 +77,14 @@ function Interface( { blockEditorSettings } ) {
[]
);
+ const isLastSelectedWidgetAreaOpen = useSelect(
+ ( select ) =>
+ select( editWidgetsStore ).getIsWidgetAreaOpen(
+ widgetAreaClientId
+ ),
+ [ widgetAreaClientId ]
+ );
+
// Inserter and Sidebars are mutually exclusive
useEffect( () => {
if ( hasSidebarEnabled && ! isHugeViewport ) {
@@ -82,6 +99,21 @@ function Interface( { blockEditorSettings } ) {
}
}, [ isInserterOpened, isListViewOpened, isHugeViewport ] );
+ useEffect( () => {
+ if ( isInserterOpened && ! 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 );
+ }
+ }, [
+ widgetAreaClientId,
+ isInserterOpened,
+ isLastSelectedWidgetAreaOpen,
+ selectBlock,
+ setIsWidgetAreaOpen,
+ ] );
+
const secondarySidebarLabel = isListViewOpened
? __( 'List View' )
: __( 'Block Library' );
diff --git a/packages/edit-widgets/src/components/more-menu/index.js b/packages/edit-widgets/src/components/more-menu/index.js
index bb3e01bd19e26..a954cbb9aed9e 100644
--- a/packages/edit-widgets/src/components/more-menu/index.js
+++ b/packages/edit-widgets/src/components/more-menu/index.js
@@ -17,7 +17,7 @@ import { useViewportMatch } from '@wordpress/compose';
import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
import ToolsMoreMenuGroup from './tools-more-menu-group';
-export default function MoreMenu() {
+export default function MoreMenu( { showIconLabels } ) {
const [
isKeyboardShortcutsModalActive,
setIsKeyboardShortcutsModalVisible,
@@ -34,7 +34,12 @@ export default function MoreMenu() {
return (
<>
-
+
{ ( onClose ) => (
<>
{ isLargeViewport && (
diff --git a/packages/edit-widgets/src/components/secondary-sidebar/index.js b/packages/edit-widgets/src/components/secondary-sidebar/index.js
index 49e240bd147cb..e1dcb7677d7ae 100644
--- a/packages/edit-widgets/src/components/secondary-sidebar/index.js
+++ b/packages/edit-widgets/src/components/secondary-sidebar/index.js
@@ -2,10 +2,7 @@
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
-/**
- * Internal dependencies
- */
-import { store as editWidgetsStore } from '../../store';
+import { store as editorStore } from '@wordpress/editor';
/**
* Internal dependencies
@@ -15,8 +12,7 @@ import ListViewSidebar from './list-view-sidebar';
export default function SecondarySidebar() {
const { isInserterOpen, isListViewOpen } = useSelect( ( select ) => {
- const { isInserterOpened, isListViewOpened } =
- select( editWidgetsStore );
+ const { isInserterOpened, isListViewOpened } = select( editorStore );
return {
isInserterOpen: isInserterOpened(),
isListViewOpen: isListViewOpened(),
diff --git a/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
index b01481748ee88..2b4b16cc4d093 100644
--- a/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
+++ b/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
@@ -11,18 +11,18 @@ import {
import { useCallback, useEffect, useRef } from '@wordpress/element';
import { useDispatch } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
+import { store as editorStore } from '@wordpress/editor';
/**
* Internal dependencies
*/
import useWidgetLibraryInsertionPoint from '../../hooks/use-widget-library-insertion-point';
-import { store as editWidgetsStore } from '../../store';
export default function InserterSidebar() {
const isMobileViewport = useViewportMatch( 'medium', '<' );
const { rootClientId, insertionIndex } = useWidgetLibraryInsertionPoint();
- const { setIsInserterOpened } = useDispatch( editWidgetsStore );
+ const { setIsInserterOpened } = useDispatch( editorStore );
const closeInserter = useCallback( () => {
return setIsInserterOpened( false );
diff --git a/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js
index 6aa2123a6774a..252020c2db3a6 100644
--- a/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js
+++ b/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js
@@ -9,16 +9,16 @@ import { useCallback, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { closeSmall } from '@wordpress/icons';
import { ESCAPE } from '@wordpress/keycodes';
+import { store as editorStore } from '@wordpress/editor';
/**
* Internal dependencies
*/
-import { store as editWidgetsStore } from '../../store';
import { unlock } from '../../lock-unlock';
export default function ListViewSidebar() {
- const { setIsListViewOpened } = useDispatch( editWidgetsStore );
- const { getListViewToggleRef } = unlock( useSelect( editWidgetsStore ) );
+ const { setIsListViewOpened } = useDispatch( editorStore );
+ const { getListViewToggleRef } = unlock( useSelect( editorStore ) );
// Use internal state instead of a ref to make sure that the component
// re-renders when the dropZoneElement updates.
diff --git a/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js b/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js
index 4abc420434cc4..4e19e09593e91 100644
--- a/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js
+++ b/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js
@@ -14,6 +14,7 @@ import { useMemo } from '@wordpress/element';
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
import { privateApis as editPatternsPrivateApis } from '@wordpress/patterns';
import { store as preferencesStore } from '@wordpress/preferences';
+import { store as editorStore } from '@wordpress/editor';
/**
* Internal dependencies
@@ -64,7 +65,7 @@ export default function WidgetAreasBlockEditorProvider( {
pageForPosts: siteSettings?.page_for_posts,
};
}, [] );
- const { setIsInserterOpened } = useDispatch( editWidgetsStore );
+ const { setIsInserterOpened } = useDispatch( editorStore );
const settings = useMemo( () => {
let mediaUploadBlockEditor;
diff --git a/packages/edit-widgets/src/store/actions.js b/packages/edit-widgets/src/store/actions.js
index 8124ace66bdb3..6fb9e5ac88807 100644
--- a/packages/edit-widgets/src/store/actions.js
+++ b/packages/edit-widgets/src/store/actions.js
@@ -2,11 +2,13 @@
* WordPress dependencies
*/
import { __, sprintf } from '@wordpress/i18n';
+import deprecated from '@wordpress/deprecated';
import { store as noticesStore } from '@wordpress/notices';
import { store as interfaceStore } from '@wordpress/interface';
import { getWidgetIdFromBlock } from '@wordpress/widgets';
import { store as coreStore } from '@wordpress/core-data';
import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as editorStore } from '@wordpress/editor';
/**
* Internal dependencies
@@ -342,34 +344,36 @@ export function setIsWidgetAreaOpen( clientId, isOpen ) {
/**
* Returns an action object used to open/close the inserter.
*
- * @param {boolean|Object} value Whether the inserter should be
- * opened (true) or closed (false).
- * To specify an insertion point,
- * use an object.
- * @param {string} value.rootClientId The root client ID to insert at.
- * @param {number} value.insertionIndex The index to insert at.
+ * @deprecated
*
- * @return {Object} Action object.
+ * @param {boolean|Object} value Whether the inserter should be opened (true) or closed (false).
*/
-export function setIsInserterOpened( value ) {
- return {
- type: 'SET_IS_INSERTER_OPENED',
- value,
+export const setIsInserterOpened =
+ ( value ) =>
+ ( { registry } ) => {
+ deprecated( "dispatch( 'core/edit-widgets' ).setIsInserterOpened", {
+ since: '6.5',
+ alternative: "dispatch( 'core/editor').setIsInserterOpened",
+ } );
+ registry.dispatch( editorStore ).setIsInserterOpened( value );
};
-}
/**
* Returns an action object used to open/close the list view.
*
+ * @deprecated
+ *
* @param {boolean} isOpen A boolean representing whether the list view should be opened or closed.
- * @return {Object} Action object.
*/
-export function setIsListViewOpened( isOpen ) {
- return {
- type: 'SET_IS_LIST_VIEW_OPENED',
- isOpen,
+export const setIsListViewOpened =
+ ( isOpen ) =>
+ ( { registry } ) => {
+ deprecated( "dispatch( 'core/edit-widgets' ).setIsListViewOpened", {
+ since: '6.5',
+ alternative: "dispatch( 'core/editor').setIsListViewOpened",
+ } );
+ registry.dispatch( editorStore ).setIsListViewOpened( isOpen );
};
-}
/**
* Returns an action object signalling that the user closed the sidebar.
diff --git a/test/e2e/specs/widgets/editing-widgets.spec.js b/test/e2e/specs/widgets/editing-widgets.spec.js
index 28e9aac437572..1f256ca8eec58 100644
--- a/test/e2e/specs/widgets/editing-widgets.spec.js
+++ b/test/e2e/specs/widgets/editing-widgets.spec.js
@@ -609,7 +609,7 @@ test.describe( 'Widgets screen', () => {
test( 'can toggle sidebar list view', async ( { page } ) => {
const toggleListViewButton = page
.getByRole( 'toolbar', { name: 'Document tools' } )
- .getByRole( 'button', { name: 'List View' } );
+ .getByRole( 'button', { name: 'Document Overview' } );
await toggleListViewButton.click();
const listView = page.getByRole( 'treegrid', {