diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 9a3f207b6be01f..6b6e7e1a5dbfed 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -102,6 +102,7 @@ $z-layers: ( ".components-popover.table-of-contents__popover": 99998, ".components-popover.block-editor-block-navigation__popover": 99998, ".components-popover.edit-post-more-menu__content": 99998, + ".components-popover.edit-site-more-menu__content": 99998, ".components-popover.block-editor-rich-text__inline-format-toolbar": 99998, ".components-autocomplete__results": 1000000, diff --git a/packages/edit-site/src/components/header/feature-toggle/index.js b/packages/edit-site/src/components/header/feature-toggle/index.js new file mode 100644 index 00000000000000..dec13c805690bf --- /dev/null +++ b/packages/edit-site/src/components/header/feature-toggle/index.js @@ -0,0 +1,52 @@ +/** + * External dependencies + */ +import { flow } from 'lodash'; + +/** + * WordPress dependencies + */ +import { useSelect, useDispatch } from '@wordpress/data'; +import { MenuItem, withSpokenMessages } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { check } from '@wordpress/icons'; + +function FeatureToggle( { + feature, + label, + info, + messageActivated, + messageDeactivated, + speak, +} ) { + const speakMessage = () => { + if ( isActive ) { + speak( messageDeactivated || __( 'Feature deactivated' ) ); + } else { + speak( messageActivated || __( 'Feature activated' ) ); + } + }; + + const isActive = useSelect( ( select ) => { + return select( 'core/edit-site' ).isFeatureActive( feature ); + }, [] ); + + const { toggleFeature } = useDispatch( 'core/edit-site' ); + + return ( + + { label } + + ); +} + +export default withSpokenMessages( FeatureToggle ); diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js index 78c7090d732015..71fb133b7c823c 100644 --- a/packages/edit-site/src/components/header/index.js +++ b/packages/edit-site/src/components/header/index.js @@ -8,6 +8,7 @@ import { BlockNavigationDropdown, ToolSelector } from '@wordpress/block-editor'; * Internal dependencies */ import { useEditorContext } from '../editor'; +import MoreMenu from './more-menu'; import TemplateSwitcher from '../template-switcher'; import SaveButton from '../save-button'; @@ -59,6 +60,7 @@ export default function Header() {
+
); diff --git a/packages/edit-site/src/components/header/more-menu/index.js b/packages/edit-site/src/components/header/more-menu/index.js new file mode 100644 index 00000000000000..c762ffa60d8946 --- /dev/null +++ b/packages/edit-site/src/components/header/more-menu/index.js @@ -0,0 +1,43 @@ +/** + * WordPress dependencies + */ +import { __, _x } from '@wordpress/i18n'; +import { DropdownMenu, MenuGroup } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import FeatureToggle from '../feature-toggle'; +import { moreVertical } from '@wordpress/icons'; + +const POPOVER_PROPS = { + className: 'edit-site-more-menu__content', + position: 'bottom left', +}; +const TOGGLE_PROPS = { + tooltipPosition: 'bottom', +}; + +const MoreMenu = () => ( + + { () => ( + + + + ) } + +); + +export default MoreMenu; diff --git a/packages/edit-site/src/components/header/more-menu/style.scss b/packages/edit-site/src/components/header/more-menu/style.scss new file mode 100644 index 00000000000000..6151efb026a189 --- /dev/null +++ b/packages/edit-site/src/components/header/more-menu/style.scss @@ -0,0 +1,29 @@ +.edit-site-more-menu { + margin-left: -4px; + + // the padding and margin of the more menu is intentionally non-standard + .components-button { + width: auto; + padding: 0 2px; + } + + @include break-small() { + margin-left: 4px; + + .components-button { + padding: 0 4px; + } + } +} + +.edit-site-more-menu__content .components-popover__content { + min-width: 260px; + + .components-dropdown-menu__menu { + padding: 0; + } +} + +.components-popover.edit-site-more-menu__content { + z-index: z-index(".components-popover.edit-site-more-menu__content"); +} diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 4bbd782ccf5975..89a9b929e9e351 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -1,5 +1,6 @@ @import "./components/block-editor/style.scss"; @import "./components/header/style.scss"; +@import "./components/header/more-menu/style.scss"; @import "./components/notices/style.scss"; @import "./components/sidebar/style.scss"; @import "./components/template-switcher/style.scss";