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 ( + + ); +} + +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() {