@wordpress/edit-site 4.0.1 → 4.1.0-next.e230fbab09.0

package/src/store/selectors.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, map, keyBy } from 'lodash';
+import { map, keyBy } from 'lodash';
 import createSelector from 'rememo';
 
 /**
@@ -9,9 +9,11 @@ import createSelector from 'rememo';
  */
 import { store as coreDataStore } from '@wordpress/core-data';
 import { createRegistrySelector } from '@wordpress/data';
+import deprecated from '@wordpress/deprecated';
 import { uploadMedia } from '@wordpress/media-utils';
 import { isTemplatePart } from '@wordpress/blocks';
 import { Platform } from '@wordpress/element';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -31,16 +33,35 @@ import {
  * @typedef {'template'|'template_type'} TemplateType Template type.
  */
 
+/**
+ * Helper for getting a preference from the preferences store.
+ *
+ * This is only present so that `getSettings` doesn't need to be made a
+ * registry selector.
+ *
+ * It's unstable because the selector needs to be exported and so part of the
+ * public API to work.
+ */
+export const __unstableGetPreference = createRegistrySelector(
+	( select ) => ( state, name ) =>
+		select( preferencesStore ).get( 'core/edit-site', name )
+);
+
 /**
  * Returns whether the given feature is enabled or not.
  *
- * @param {Object} state   Global application state.
- * @param {string} feature Feature slug.
+ * @param {Object} state       Global application state.
+ * @param {string} featureName Feature slug.
  *
  * @return {boolean} Is active.
  */
-export function isFeatureActive( state, feature ) {
-	return get( state.preferences.features, [ feature ], false );
+export function isFeatureActive( state, featureName ) {
+	deprecated( `select( 'core/interface' ).isFeatureActive`, {
+		since: '6.0',
+		alternative: `select( 'core/preferences' ).get`,
+	} );
+
+	return !! __unstableGetPreference( state, featureName );
 }
 
 /**
@@ -94,10 +115,15 @@ export const getSettings = createSelector(
 		const settings = {
 			...state.settings,
 			outlineMode: true,
-			focusMode: isFeatureActive( state, 'focusMode' ),
-			hasFixedToolbar: isFeatureActive( state, 'fixedToolbar' ),
+			focusMode: !! __unstableGetPreference( state, 'focusMode' ),
+			hasFixedToolbar: !! __unstableGetPreference(
+				state,
+				'fixedToolbar'
+			),
 			__experimentalSetIsInserterOpened: setIsInserterOpen,
 			__experimentalReusableBlocks: getReusableBlocks( state ),
+			__experimentalPreferPatternsOnRoot:
+				'wp_template' === getEditedPostType( state ),
 		};
 
 		const canUserCreateMedia = getCanUserCreateMedia( state );
@@ -117,9 +143,10 @@ export const getSettings = createSelector(
 	( state ) => [
 		getCanUserCreateMedia( state ),
 		state.settings,
-		isFeatureActive( state, 'focusMode' ),
-		isFeatureActive( state, 'fixedToolbar' ),
+		__unstableGetPreference( state, 'focusMode' ),
+		__unstableGetPreference( state, 'fixedToolbar' ),
 		getReusableBlocks( state ),
+		getEditedPostType( state ),
 	]
 );
 
@@ -336,5 +363,5 @@ export const getCurrentTemplateTemplateParts = createRegistrySelector(
  * @return {string} Editing mode.
  */
 export function getEditorMode( state ) {
-	return state.preferences.editorMode || 'visual';
+	return __unstableGetPreference( state, 'editorMode' );
 }

package/src/store/test/actions.js

@@ -1,129 +1,240 @@
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { createRegistry } from '@wordpress/data';
+import { store as interfaceStore } from '@wordpress/interface';
+import { store as noticesStore } from '@wordpress/notices';
+import { store as preferencesStore } from '@wordpress/preferences';
+
 /**
  * Internal dependencies
  */
-import {
-	toggleFeature,
-	setTemplate,
-	addTemplate,
-	setTemplatePart,
-	setPage,
-	setHomeTemplateId,
-	setIsListViewOpened,
-} from '../actions';
+import { store as editSiteStore } from '..';
+
+jest.useRealTimers();
+
+const ENTITY_TYPES = {
+	wp_template: {
+		description: 'Templates to include in your theme.',
+		hierarchical: false,
+		name: 'Templates',
+		rest_base: 'templates',
+		rest_namespace: 'wp/v2',
+		slug: 'wp_template',
+		taxonomies: [],
+	},
+};
+
+function createRegistryWithStores() {
+	// create a registry
+	const registry = createRegistry();
+
+	// register stores
+	registry.register( blockEditorStore );
+	registry.register( coreStore );
+	registry.register( editSiteStore );
+	registry.register( interfaceStore );
+	registry.register( noticesStore );
+	registry.register( preferencesStore );
+
+	return registry;
+}
 
 describe( 'actions', () => {
 	describe( 'toggleFeature', () => {
-		it( 'should return TOGGLE_FEATURE action', () => {
-			const feature = 'name';
-			expect( toggleFeature( feature ) ).toEqual( {
-				type: 'TOGGLE_FEATURE',
-				feature,
-			} );
+		it( 'should toggle a feature flag', () => {
+			const registry = createRegistryWithStores();
+
+			// Should default to false.
+			expect(
+				registry.select( editSiteStore ).isFeatureActive( 'name' )
+			).toBe( false );
+
+			// Toggle on.
+			registry.dispatch( editSiteStore ).toggleFeature( 'name' );
+			expect(
+				registry.select( editSiteStore ).isFeatureActive( 'name' )
+			).toBe( true );
+
+			// Toggle off again.
+			registry.dispatch( editSiteStore ).toggleFeature( 'name' );
+			expect(
+				registry.select( editSiteStore ).isFeatureActive( 'name' )
+			).toBe( false );
+
+			// Expect a deprecation warning.
+			expect( console ).toHaveWarned();
 		} );
 	} );
 
 	describe( 'setTemplate', () => {
-		it( 'should return the SET_TEMPLATE action when slug is provided', () => {
-			const templateId = 1;
-			const templateSlug = 'archive';
-			const it = setTemplate( templateId, templateSlug );
-			expect( it.next().value ).toEqual( {
-				type: 'SET_TEMPLATE',
-				templateId,
-				page: { context: { templateSlug } },
-			} );
+		const ID = 1;
+		const SLUG = 'archive';
+
+		it( 'should set the template when slug is provided', async () => {
+			const registry = createRegistryWithStores();
+
+			await registry.dispatch( editSiteStore ).setTemplate( ID, SLUG );
+
+			const select = registry.select( editSiteStore );
+			expect( select.getEditedPostId() ).toBe( ID );
+			expect( select.getPage().context.templateSlug ).toBe( SLUG );
 		} );
-		it( 'should return the SET_TEMPLATE by getting the template slug', () => {
-			const templateId = 1;
-			const template = { slug: 'index' };
-			const it = setTemplate( templateId );
-			expect( it.next().value ).toEqual( {
-				type: '@@data/RESOLVE_SELECT',
-				storeKey: 'core',
-				selectorName: 'getEntityRecord',
-				args: [ 'postType', 'wp_template', templateId ],
-			} );
-			expect( it.next( template ).value ).toEqual( {
-				type: 'SET_TEMPLATE',
-				templateId,
-				page: { context: { templateSlug: template.slug } },
+
+		it( 'should set the template by fetching the template slug', async () => {
+			const registry = createRegistryWithStores();
+
+			apiFetch.setFetchHandler( async ( options ) => {
+				const { method = 'GET', path } = options;
+				if ( method === 'GET' ) {
+					if ( path.startsWith( '/wp/v2/types' ) ) {
+						return ENTITY_TYPES;
+					}
+
+					if ( path.startsWith( `/wp/v2/templates/${ ID }` ) ) {
+						return { id: ID, slug: SLUG };
+					}
+				}
+
+				throw {
+					code: 'unknown_path',
+					message: `Unknown path: ${ method } ${ path }`,
+				};
 			} );
+
+			await registry.dispatch( editSiteStore ).setTemplate( ID );
+
+			const select = registry.select( editSiteStore );
+			expect( select.getEditedPostId() ).toBe( ID );
+			expect( select.getPage().context.templateSlug ).toBe( SLUG );
 		} );
 	} );
 
 	describe( 'addTemplate', () => {
-		it( 'should yield the DISPATCH control to create the template and return the SET_TEMPLATE action', () => {
-			const template = { slug: 'index' };
-			const newTemplate = { id: 1, slug: 'index' };
-
-			const it = addTemplate( template );
-			expect( it.next().value ).toEqual( {
-				type: '@@data/DISPATCH',
-				storeKey: 'core',
-				actionName: 'saveEntityRecord',
-				args: [ 'postType', 'wp_template', template ],
-			} );
-			expect( it.next( newTemplate ) ).toEqual( {
-				value: {
-					type: 'SET_TEMPLATE',
-					templateId: newTemplate.id,
-					page: { context: { templateSlug: newTemplate.slug } },
-				},
-				done: true,
+		it( 'should issue a REST request to create the template and then set it', async () => {
+			const registry = createRegistryWithStores();
+
+			const ID = 1;
+			const SLUG = 'index';
+
+			apiFetch.setFetchHandler( async ( options ) => {
+				const { method = 'GET', path, data } = options;
+
+				if ( method === 'GET' && path.startsWith( '/wp/v2/types' ) ) {
+					return ENTITY_TYPES;
+				}
+
+				if (
+					method === 'POST' &&
+					path.startsWith( '/wp/v2/templates' )
+				) {
+					return { id: ID, slug: data.slug };
+				}
+
+				throw {
+					code: 'unknown_path',
+					message: `Unknown path: ${ method } ${ path }`,
+				};
 			} );
+
+			await registry
+				.dispatch( editSiteStore )
+				.addTemplate( { slug: SLUG } );
+
+			const select = registry.select( editSiteStore );
+			expect( select.getEditedPostId() ).toBe( ID );
+			expect( select.getPage().context.templateSlug ).toBe( SLUG );
 		} );
 	} );
 
 	describe( 'setTemplatePart', () => {
-		it( 'should return the SET_TEMPLATE_PART action', () => {
-			const templatePartId = 1;
-			expect( setTemplatePart( templatePartId ) ).toEqual( {
-				type: 'SET_TEMPLATE_PART',
-				templatePartId,
-			} );
+		it( 'should set template part', () => {
+			const registry = createRegistryWithStores();
+
+			const ID = 1;
+			registry.dispatch( editSiteStore ).setTemplatePart( ID );
+
+			const select = registry.select( editSiteStore );
+			expect( select.getEditedPostId() ).toBe( ID );
+			expect( select.getEditedPostType() ).toBe( 'wp_template_part' );
 		} );
 	} );
 
 	describe( 'setPage', () => {
-		it( 'should yield the FIND_TEMPLATE control and return the SET_PAGE action', () => {
-			const page = { path: '/' };
-
-			const it = setPage( page );
-			expect( it.next().value ).toEqual( {
-				type: '@@data/RESOLVE_SELECT',
-				storeKey: 'core',
-				selectorName: '__experimentalGetTemplateForLink',
-				args: [ page.path ],
-			} );
-			expect( it.next( { id: 'emptytheme//single' } ).value ).toEqual( {
-				type: 'SET_PAGE',
-				page,
-				templateId: 'emptytheme//single',
+		it( 'should find the template and then set the page', async () => {
+			const registry = createRegistryWithStores();
+
+			const ID = 'emptytheme//single';
+			const SLUG = 'single';
+
+			window.fetch = async ( path ) => {
+				if ( path === '/?_wp-find-template=true' ) {
+					return {
+						json: async () => ( { data: { id: ID, slug: SLUG } } ),
+					};
+				}
+
+				throw {
+					code: 'unknown_path',
+					message: `Unknown path: ${ path }`,
+				};
+			};
+
+			apiFetch.setFetchHandler( async ( options ) => {
+				const { method = 'GET', path } = options;
+
+				if ( method === 'GET' ) {
+					if ( path.startsWith( '/wp/v2/types' ) ) {
+						return ENTITY_TYPES;
+					}
+
+					if ( path.startsWith( `/wp/v2/templates/${ ID }` ) ) {
+						return { id: ID, slug: SLUG };
+					}
+				}
+
+				throw {
+					code: 'unknown_path',
+					message: `Unknown path: ${ method } ${ path }`,
+				};
 			} );
-			expect( it.next().done ).toBe( true );
+
+			await registry.dispatch( editSiteStore ).setPage( { path: '/' } );
+
+			const select = registry.select( editSiteStore );
+			expect( select.getEditedPostId() ).toBe( 'emptytheme//single' );
+			expect( select.getEditedPostType() ).toBe( 'wp_template' );
+			expect( select.getPage().path ).toBe( '/' );
 		} );
 	} );
 
 	describe( 'setHomeTemplateId', () => {
-		it( 'should return the SET_HOME_TEMPLATE action', () => {
-			const homeTemplateId = 90;
-			expect( setHomeTemplateId( homeTemplateId ) ).toEqual( {
-				type: 'SET_HOME_TEMPLATE',
-				homeTemplateId,
-			} );
+		it( 'should set the home template ID', () => {
+			const registry = createRegistryWithStores();
+
+			registry.dispatch( editSiteStore ).setHomeTemplateId( 90 );
+			expect( registry.select( editSiteStore ).getHomeTemplateId() ).toBe(
+				90
+			);
 		} );
 	} );
 
 	describe( 'setIsListViewOpened', () => {
-		it( 'should return the SET_IS_LIST_VIEW_OPENED action', () => {
-			expect( setIsListViewOpened( true ) ).toEqual( {
-				type: 'SET_IS_LIST_VIEW_OPENED',
-				isOpen: true,
-			} );
-			expect( setIsListViewOpened( false ) ).toEqual( {
-				type: 'SET_IS_LIST_VIEW_OPENED',
-				isOpen: false,
-			} );
+		it( 'should set the list view opened state', () => {
+			const registry = createRegistryWithStores();
+
+			registry.dispatch( editSiteStore ).setIsListViewOpened( true );
+			expect( registry.select( editSiteStore ).isListViewOpened() ).toBe(
+				true
+			);
+
+			registry.dispatch( editSiteStore ).setIsListViewOpened( false );
+			expect( registry.select( editSiteStore ).isListViewOpened() ).toBe(
+				false
+			);
 		} );
 	} );
 } );

package/src/store/test/reducer.js

@@ -7,7 +7,6 @@ import deepFreeze from 'deep-freeze';
  * Internal dependencies
  */
 import {
-	preferences,
 	settings,
 	homeTemplateId,
 	editedPost,
@@ -15,7 +14,6 @@ import {
 	blockInserterPanel,
 	listViewPanel,
 } from '../reducer';
-import { PREFERENCES_DEFAULTS } from '../defaults';
 
 import {
 	setNavigationPanelActiveMenu,
@@ -26,26 +24,6 @@ import {
 } from '../actions';
 
 describe( 'state', () => {
-	describe( 'preferences()', () => {
-		it( 'should apply all defaults', () => {
-			const state = preferences( undefined, {} );
-
-			expect( state ).toEqual( PREFERENCES_DEFAULTS );
-		} );
-
-		it( 'should toggle a feature flag', () => {
-			const state = preferences(
-				deepFreeze( { features: { chicken: true } } ),
-				{
-					type: 'TOGGLE_FEATURE',
-					feature: 'chicken',
-				}
-			);
-
-			expect( state.features ).toEqual( { chicken: false } );
-		} );
-	} );
-
 	describe( 'settings()', () => {
 		it( 'should apply default state', () => {
 			expect( settings( undefined, {} ) ).toEqual( {} );

package/src/store/test/selectors.js

@@ -7,7 +7,6 @@ import { store as coreDataStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import {
-	isFeatureActive,
 	getCanUserCreateMedia,
 	getSettings,
 	getHomeTemplateId,
@@ -19,62 +18,22 @@ import {
 	isNavigationOpened,
 	isInserterOpened,
 	isListViewOpened,
+	__unstableGetPreference,
 } from '../selectors';
 
 describe( 'selectors', () => {
 	const canUser = jest.fn( () => true );
 	const getEntityRecords = jest.fn( () => [] );
+	const get = jest.fn();
 	getCanUserCreateMedia.registry = {
 		select: jest.fn( () => ( { canUser } ) ),
 	};
 	getReusableBlocks.registry = {
 		select: jest.fn( () => ( { getEntityRecords } ) ),
 	};
-
-	describe( 'isFeatureActive', () => {
-		it( 'is tolerant to an undefined features preference', () => {
-			// See: https://github.com/WordPress/gutenberg/issues/14580
-			const state = {
-				preferences: {},
-			};
-
-			expect( isFeatureActive( state, 'chicken' ) ).toBe( false );
-		} );
-
-		it( 'should return true if feature is active', () => {
-			const state = {
-				preferences: {
-					features: {
-						chicken: true,
-					},
-				},
-			};
-
-			expect( isFeatureActive( state, 'chicken' ) ).toBe( true );
-		} );
-
-		it( 'should return false if feature is not active', () => {
-			const state = {
-				preferences: {
-					features: {
-						chicken: false,
-					},
-				},
-			};
-
-			expect( isFeatureActive( state, 'chicken' ) ).toBe( false );
-		} );
-
-		it( 'should return false if feature is not referred', () => {
-			const state = {
-				preferences: {
-					features: {},
-				},
-			};
-
-			expect( isFeatureActive( state, 'chicken' ) ).toBe( false );
-		} );
-	} );
+	__unstableGetPreference.registry = {
+		select: jest.fn( () => ( { get } ) ),
+	};
 
 	describe( 'getCanUserCreateMedia', () => {
 		it( "selects `canUser( 'create', 'media' )` from the core store", () => {
@@ -106,7 +65,15 @@ describe( 'selectors', () => {
 		it( "returns the settings when the user can't create media", () => {
 			canUser.mockReturnValueOnce( false );
 			canUser.mockReturnValueOnce( false );
-			const state = { settings: {}, preferences: {} };
+			get.mockImplementation( ( scope, name ) => {
+				if ( name === 'focusMode' ) return false;
+				if ( name === 'fixedToolbar' ) return false;
+			} );
+			const state = {
+				settings: {},
+				preferences: {},
+				editedPost: { type: 'wp_template' },
+			};
 			const setInserterOpened = () => {};
 			expect( getSettings( state, setInserterOpened ) ).toEqual( {
 				outlineMode: true,
@@ -114,18 +81,19 @@ describe( 'selectors', () => {
 				hasFixedToolbar: false,
 				__experimentalSetIsInserterOpened: setInserterOpened,
 				__experimentalReusableBlocks: [],
+				__experimentalPreferPatternsOnRoot: true,
 			} );
 		} );
 
 		it( 'returns the extended settings when the user can create media', () => {
+			get.mockImplementation( ( scope, name ) => {
+				if ( name === 'focusMode' ) return true;
+				if ( name === 'fixedToolbar' ) return true;
+			} );
+
 			const state = {
 				settings: { key: 'value' },
-				preferences: {
-					features: {
-						focusMode: true,
-						fixedToolbar: true,
-					},
-				},
+				editedPost: { type: 'wp_template_part' },
 			};
 			const setInserterOpened = () => {};
 
@@ -137,6 +105,7 @@ describe( 'selectors', () => {
 				__experimentalSetIsInserterOpened: setInserterOpened,
 				__experimentalReusableBlocks: [],
 				mediaUpload: expect.any( Function ),
+				__experimentalPreferPatternsOnRoot: false,
 			} );
 		} );
 	} );

package/src/style.scss

@@ -5,7 +5,6 @@
 @import "./components/global-styles/style.scss";
 @import "./components/header/style.scss";
 @import "./components/header/document-actions/style.scss";
-@import "./components/header/more-menu/style.scss";
 @import "./components/navigation-sidebar/navigation-toggle/style.scss";
 @import "./components/navigation-sidebar/navigation-panel/style.scss";
 @import "./components/list/style.scss";

package/build/components/header/feature-toggle/index.js

@@ -1,66 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = FeatureToggle;
-
-var _element = require("@wordpress/element");
-
-var _lodash = require("lodash");
-
-var _data = require("@wordpress/data");
-
-var _components = require("@wordpress/components");
-
-var _i18n = require("@wordpress/i18n");
-
-var _icons = require("@wordpress/icons");
-
-var _a11y = require("@wordpress/a11y");
-
-var _store = require("../../../store");
-
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-function FeatureToggle(_ref) {
-  let {
-    feature,
-    label,
-    info,
-    messageActivated,
-    messageDeactivated
-  } = _ref;
-
-  const speakMessage = () => {
-    if (isActive) {
-      (0, _a11y.speak)(messageDeactivated || (0, _i18n.__)('Feature deactivated'));
-    } else {
-      (0, _a11y.speak)(messageActivated || (0, _i18n.__)('Feature activated'));
-    }
-  };
-
-  const isActive = (0, _data.useSelect)(select => {
-    return select(_store.store).isFeatureActive(feature);
-  }, []);
-  const {
-    toggleFeature
-  } = (0, _data.useDispatch)(_store.store);
-  return (0, _element.createElement)(_components.MenuItem, {
-    icon: isActive && _icons.check,
-    isSelected: isActive,
-    onClick: (0, _lodash.flow)(toggleFeature.bind(null, feature), speakMessage),
-    role: "menuitemcheckbox",
-    info: info
-  }, label);
-}
-//# sourceMappingURL=index.js.map

package/build/components/header/feature-toggle/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/header/feature-toggle/index.js"],"names":["FeatureToggle","feature","label","info","messageActivated","messageDeactivated","speakMessage","isActive","select","editSiteStore","isFeatureActive","toggleFeature","check","bind"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAKA;;AAjBA;AACA;AACA;;AAGA;AACA;AACA;;AAOA;AACA;AACA;AAGe,SAASA,aAAT,OAMX;AAAA,MANmC;AACtCC,IAAAA,OADsC;AAEtCC,IAAAA,KAFsC;AAGtCC,IAAAA,IAHsC;AAItCC,IAAAA,gBAJsC;AAKtCC,IAAAA;AALsC,GAMnC;;AACH,QAAMC,YAAY,GAAG,MAAM;AAC1B,QAAKC,QAAL,EAAgB;AACf,uBAAOF,kBAAkB,IAAI,cAAI,qBAAJ,CAA7B;AACA,KAFD,MAEO;AACN,uBAAOD,gBAAgB,IAAI,cAAI,mBAAJ,CAA3B;AACA;AACD,GAND;;AAQA,QAAMG,QAAQ,GAAG,qBAAaC,MAAF,IAAc;AACzC,WAAOA,MAAM,CAAEC,YAAF,CAAN,CAAwBC,eAAxB,CAAyCT,OAAzC,CAAP;AACA,GAFgB,EAEd,EAFc,CAAjB;AAIA,QAAM;AAAEU,IAAAA;AAAF,MAAoB,uBAAaF,YAAb,CAA1B;AAEA,SACC,4BAAC,oBAAD;AACC,IAAA,IAAI,EAAGF,QAAQ,IAAIK,YADpB;AAEC,IAAA,UAAU,EAAGL,QAFd;AAGC,IAAA,OAAO,EAAG,kBACTI,aAAa,CAACE,IAAd,CAAoB,IAApB,EAA0BZ,OAA1B,CADS,EAETK,YAFS,CAHX;AAOC,IAAA,IAAI,EAAC,kBAPN;AAQC,IAAA,IAAI,EAAGH;AARR,KAUGD,KAVH,CADD;AAcA","sourcesContent":["/**\n * External dependencies\n */\nimport { flow } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { MenuItem } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { check } from '@wordpress/icons';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../../store';\n\nexport default function FeatureToggle( {\n\tfeature,\n\tlabel,\n\tinfo,\n\tmessageActivated,\n\tmessageDeactivated,\n} ) {\n\tconst speakMessage = () => {\n\t\tif ( isActive ) {\n\t\t\tspeak( messageDeactivated || __( 'Feature deactivated' ) );\n\t\t} else {\n\t\t\tspeak( messageActivated || __( 'Feature activated' ) );\n\t\t}\n\t};\n\n\tconst isActive = useSelect( ( select ) => {\n\t\treturn select( editSiteStore ).isFeatureActive( feature );\n\t}, [] );\n\n\tconst { toggleFeature } = useDispatch( editSiteStore );\n\n\treturn (\n\t\t<MenuItem\n\t\t\ticon={ isActive && check }\n\t\t\tisSelected={ isActive }\n\t\t\tonClick={ flow(\n\t\t\t\ttoggleFeature.bind( null, feature ),\n\t\t\t\tspeakMessage\n\t\t\t) }\n\t\t\trole=\"menuitemcheckbox\"\n\t\t\tinfo={ info }\n\t\t>\n\t\t\t{ label }\n\t\t</MenuItem>\n\t);\n}\n"]}