diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss
index 88d319a63a316..53b204a42cf8b 100644
--- a/packages/edit-post/src/components/header/header-toolbar/style.scss
+++ b/packages/edit-post/src/components/header/header-toolbar/style.scss
@@ -113,3 +113,12 @@
height: 32px;
padding: 0;
}
+// Always display block toolbar under main toolbar when text labels are visible
+.show-icon-labels .edit-post-header-toolbar__block-toolbar {
+ @include break-wide {
+ position: absolute;
+ top: $header-height + $border-width;
+ left: 0;
+ right: 0;
+ }
+}
diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
index 6603eddf5ff7d..6c54ae5b9489f 100644
--- a/packages/edit-post/src/components/header/index.js
+++ b/packages/edit-post/src/components/header/index.js
@@ -7,6 +7,9 @@ import {
PinnedItems,
__experimentalMainDashboardButton as MainDashboardButton,
} from '@wordpress/interface';
+import { Button, Dropdown } from '@wordpress/components';
+import { useViewportMatch } from '@wordpress/compose';
+import { chevronDown } from '@wordpress/icons';
/**
* Internal dependencies
@@ -18,21 +21,38 @@ import PostPublishButtonOrToggle from './post-publish-button-or-toggle';
import { default as DevicePreview } from '../device-preview';
function Header( { setEntitiesSavedStatesCallback } ) {
- const { hasActiveMetaboxes, isPublishSidebarOpened, isSaving } = useSelect(
+ const {
+ hasActiveMetaboxes,
+ isPublishSidebarOpened,
+ isSaving,
+ showIconLabels,
+ } = useSelect(
( select ) => ( {
hasActiveMetaboxes: select( 'core/edit-post' ).hasMetaBoxes(),
isPublishSidebarOpened: select(
'core/edit-post'
).isPublishSidebarOpened(),
isSaving: select( 'core/edit-post' ).isSavingMetaBoxes(),
+ showIconLabels: select( 'core/edit-post' ).isFeatureActive(
+ 'showIconLabels'
+ ),
} ),
[]
);
+ const isLargeViewport = useViewportMatch( 'large' );
+
+ const overflowItems = (
+ <>
+
+
+ >
+ );
+
return (
-
+
@@ -61,8 +81,23 @@ function Header( { setEntitiesSavedStatesCallback } ) {
setEntitiesSavedStatesCallback
}
/>
-
-
+ { ( isLargeViewport || ! showIconLabels ) && overflowItems }
+ { showIconLabels && ! isLargeViewport && (
+
(
+
+ ) }
+ renderContent={ () => overflowItems }
+ />
+ ) }
);
diff --git a/packages/edit-post/src/components/header/more-menu/index.js b/packages/edit-post/src/components/header/more-menu/index.js
index dd362272a3d66..9378273f36d4f 100644
--- a/packages/edit-post/src/components/header/more-menu/index.js
+++ b/packages/edit-post/src/components/header/more-menu/index.js
@@ -22,13 +22,13 @@ const TOGGLE_PROPS = {
tooltipPosition: 'bottom',
};
-const MoreMenu = () => (
+const MoreMenu = ( { showTooltip } ) => (
{ ( { onClose } ) => (
<>
diff --git a/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap
index 9296591a63859..5d2ead153a20a 100644
--- a/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap
+++ b/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap
@@ -14,7 +14,7 @@ exports[`MoreMenu should match snapshot 1`] = `
/>
}
- label="More tools & options"
+ label="Options"
popoverProps={
Object {
"className": "edit-post-more-menu__content",
@@ -23,6 +23,7 @@ exports[`MoreMenu should match snapshot 1`] = `
}
toggleProps={
Object {
+ "showTooltip": undefined,
"tooltipPosition": "bottom",
}
}
@@ -55,7 +56,7 @@ exports[`MoreMenu should match snapshot 1`] = `
/>
}
- label="More tools & options"
+ label="Options"
onClick={[Function]}
onKeyDown={[Function]}
showTooltip={true}
@@ -63,12 +64,12 @@ exports[`MoreMenu should match snapshot 1`] = `
>