Skip to content

Commit

Permalink
Editor: Remove MoreDropdownMenuComponent (#59096)
Browse files Browse the repository at this point in the history 
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
  • Loading branch information
@youknowriad @ntsekouras
3 people authored Mar 5, 2024
1 parent 272f402 commit 619d0e4
Show file tree
Hide file tree
Showing 17 changed files with 83 additions and 187 deletions.
1 change: 1 addition & 0 deletions packages/base-styles/_z-index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,7 @@ $z-layers: (
".components-popover.block-editor-inserter__popover": 99999,
".components-popover.table-of-contents__popover": 99998,
".components-popover.interface-more-menu__content": 99998,
".components-popover.more-menu__content": 99998,
".components-popover.block-editor-rich-text__inline-format-toolbar": 99998,
".components-popover.block-editor-warning__dropdown": 99998,

Expand Down
18 changes: 14 additions & 4 deletions packages/customize-widgets/src/components/more-menu/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,9 @@ import {
} from '@wordpress/components';
import { useState } from '@wordpress/element';
import { __, _x } from '@wordpress/i18n';
import { external } from '@wordpress/icons';
import { external, moreVertical } from '@wordpress/icons';
import { displayShortcut } from '@wordpress/keycodes';
import { useShortcut } from '@wordpress/keyboard-shortcuts';
import { MoreMenuDropdown } from '@wordpress/interface';
import { PreferenceToggleMenuItem } from '@wordpress/preferences';

/**
Expand All @@ -35,7 +34,18 @@ export default function MoreMenu() {

return (
<>
<MoreMenuDropdown as={ ToolbarDropdownMenu }>
<ToolbarDropdownMenu
icon={ moreVertical }
label={ __( 'Options' ) }
popoverProps={ {
placement: 'bottom-end',
className: 'more-menu-dropdown__content',
} }
toggleProps={ {
tooltipPosition: 'bottom',
size: 'compact',
} }
>
{ () => (
<>
<MenuGroup label={ _x( 'View', 'noun' ) }>
Expand Down Expand Up @@ -106,7 +116,7 @@ export default function MoreMenu() {
</MenuGroup>
</>
) }
</MoreMenuDropdown>
</ToolbarDropdownMenu>
<KeyboardShortcutHelpModal
isModalActive={ isKeyboardShortcutsModalActive }
toggleModal={ toggleKeyboardShortcutsModal }
Expand Down
3 changes: 3 additions & 0 deletions packages/customize-widgets/src/components/more-menu/style.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.components-popover.more-menu-dropdown__content {
z-index: z-index(".components-popover.more-menu__content");
}
1 change: 1 addition & 0 deletions packages/customize-widgets/src/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
@import "./components/header/style.scss";
@import "./components/inserter/style.scss";
@import "./components/keyboard-shortcut-help-modal/style.scss";
@import "./components/more-menu/style.scss";
@import "./components/sidebar-block-editor/style.scss";
@import "./components/welcome-guide/style.scss";
@import "./controls/style.scss";
Expand Down
22 changes: 13 additions & 9 deletions packages/edit-post/src/components/header/more-menu/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,11 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { MenuGroup } from '@wordpress/components';
import {
ActionItem,
MoreMenuDropdown,
PinnedItems,
} from '@wordpress/interface';
import { MenuGroup, DropdownMenu } from '@wordpress/components';
import { ActionItem, PinnedItems } from '@wordpress/interface';
import { useViewportMatch } from '@wordpress/compose';
import { privateApis as editorPrivateApis } from '@wordpress/editor';
import { moreVertical } from '@wordpress/icons';

/**
* Internal dependencies
Expand All @@ -25,10 +22,17 @@ const MoreMenu = ( { showIconLabels } ) => {
const isLargeViewport = useViewportMatch( 'large' );

return (
<MoreMenuDropdown
<DropdownMenu
icon={ moreVertical }
label={ __( 'Options' ) }
popoverProps={ {
placement: 'bottom-end',
className: 'more-menu-dropdown__content',
} }
toggleProps={ {
showTooltip: ! showIconLabels,
...( showIconLabels && { variant: 'tertiary' } ),
tooltipPosition: 'bottom',
showTooltip: ! showIconLabels,
size: 'compact',
} }
>
Expand All @@ -54,7 +58,7 @@ const MoreMenu = ( { showIconLabels } ) => {
</MenuGroup>
</>
) }
</MoreMenuDropdown>
</DropdownMenu>
);
};

Expand Down
4 changes: 4 additions & 0 deletions packages/edit-post/src/components/header/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -322,3 +322,7 @@
z-index: 35;
}
}

.components-popover.more-menu-dropdown__content {
z-index: z-index(".components-popover.more-menu__content");
}
25 changes: 17 additions & 8 deletions packages/edit-site/src/components/header-edit-mode/more-menu/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,14 @@
import { __, _x } from '@wordpress/i18n';
import { useSelect, useDispatch } from '@wordpress/data';
import { displayShortcut } from '@wordpress/keycodes';
import { external } from '@wordpress/icons';
import { MenuGroup, MenuItem, VisuallyHidden } from '@wordpress/components';
import { external, moreVertical } from '@wordpress/icons';
import {
ActionItem,
MoreMenuDropdown,
store as interfaceStore,
} from '@wordpress/interface';
MenuGroup,
MenuItem,
VisuallyHidden,
DropdownMenu,
} from '@wordpress/components';
import { ActionItem, store as interfaceStore } from '@wordpress/interface';
import {
PreferenceToggleMenuItem,
store as preferencesStore,
Expand Down Expand Up @@ -55,10 +56,18 @@ export default function MoreMenu( { showIconLabels } ) {

return (
<>
<MoreMenuDropdown
<DropdownMenu
icon={ moreVertical }
label={ __( 'Options' ) }
popoverProps={ {
placement: 'bottom-end',
className: 'more-menu-dropdown__content',
} }
toggleProps={ {
showTooltip: ! showIconLabels,
...( showIconLabels && { variant: 'tertiary' } ),
tooltipPosition: 'bottom',
size: 'compact',
} }
>
{ ( { onClose } ) => (
Expand Down Expand Up @@ -162,7 +171,7 @@ export default function MoreMenu( { showIconLabels } ) {
</MenuGroup>
</>
) }
</MoreMenuDropdown>
</DropdownMenu>
<KeyboardShortcutHelpModal />
<EditSitePreferencesModal />
</>
Expand Down
4 changes: 4 additions & 0 deletions packages/edit-site/src/components/header-edit-mode/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -256,3 +256,7 @@ $header-toolbar-min-width: 335px;
.edit-site-header-edit-mode__block-tools-toggle {
margin-left: 2px; // Allow focus ring to be fully visible
}

.components-popover.more-menu-dropdown__content {
z-index: z-index(".components-popover.more-menu__content");
}
25 changes: 20 additions & 5 deletions packages/edit-widgets/src/components/more-menu/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
/**
* WordPress dependencies
*/
import { MenuGroup, MenuItem, VisuallyHidden } from '@wordpress/components';
import {
MenuGroup,
MenuItem,
VisuallyHidden,
DropdownMenu,
} from '@wordpress/components';
import { useState } from '@wordpress/element';
import { __, _x } from '@wordpress/i18n';
import { external } from '@wordpress/icons';
import { MoreMenuDropdown } from '@wordpress/interface';
import { external, moreVertical } from '@wordpress/icons';
import { PreferenceToggleMenuItem } from '@wordpress/preferences';
import { displayShortcut } from '@wordpress/keycodes';
import { useShortcut } from '@wordpress/keyboard-shortcuts';
Expand Down Expand Up @@ -34,7 +38,18 @@ export default function MoreMenu() {

return (
<>
<MoreMenuDropdown>
<DropdownMenu
icon={ moreVertical }
label={ __( 'Options' ) }
popoverProps={ {
placement: 'bottom-end',
className: 'more-menu-dropdown__content',
} }
toggleProps={ {
tooltipPosition: 'bottom',
size: 'compact',
} }
>
{ ( onClose ) => (
<>
{ isLargeViewport && (
Expand Down Expand Up @@ -134,7 +149,7 @@ export default function MoreMenu() {
</MenuGroup>
</>
) }
</MoreMenuDropdown>
</DropdownMenu>
<KeyboardShortcutHelpModal
isModalActive={ isKeyboardShortcutsModalActive }
toggleModal={ toggleKeyboardShortcutsModal }
Expand Down
3 changes: 3 additions & 0 deletions packages/edit-widgets/src/components/more-menu/style.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.components-popover.more-menu-dropdown__content {
z-index: z-index(".components-popover.more-menu__content");
}
1 change: 1 addition & 0 deletions packages/edit-widgets/src/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
@import "./components/sidebar/style.scss";
@import "./components/notices/style.scss";
@import "./components/layout/style.scss";
@import "./components/more-menu/style.scss";
@import "./components/welcome-guide/style.scss";
@import "./components/widget-areas-block-editor-content/style.scss";
@import "./components/secondary-sidebar/style.scss";
Expand Down
1 change: 0 additions & 1 deletion packages/interface/src/components/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,5 @@ export { default as ComplementaryAreaMoreMenuItem } from './complementary-area-m
export { default as FullscreenMode } from './fullscreen-mode';
export { default as InterfaceSkeleton } from './interface-skeleton';
export { default as PinnedItems } from './pinned-items';
export { default as MoreMenuDropdown } from './more-menu-dropdown';
export { default as ActionItem } from './action-item';
export { default as NavigableRegion } from './navigable-region';
74 changes: 0 additions & 74 deletions packages/interface/src/components/more-menu-dropdown/README.md
View file

This file was deleted.

47 changes: 0 additions & 47 deletions packages/interface/src/components/more-menu-dropdown/index.js
View file

This file was deleted.

34 changes: 0 additions & 34 deletions packages/interface/src/components/more-menu-dropdown/style.scss
View file

This file was deleted.

Loading

1 comment on commit 619d0e4

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 619d0e4.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/8160741837
📝 Reported issues:

Please sign in to comment.