Reduced UI and theme styles

WordPress · May 28, 2020 · f71fd50 · f71fd50
1 parent 3d17319
commit f71fd50
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 26 deletions.
diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -20,7 +20,7 @@ import { plus } from '@wordpress/icons';
 
 function HeaderToolbar( { onToggleInserter, isInserterOpen } ) {
 	const {
-		isFocusMode,
+		hasReducedUI,
 		hasFixedToolbar,
 		isInserterEnabled,
 		isTextModeEnabled,
@@ -48,8 +48,8 @@ function HeaderToolbar( { onToggleInserter, isInserterOpen } ) {
 			previewDeviceType: select(
 				'core/edit-post'
 			).__experimentalGetPreviewDeviceType(),
-			isFocusMode: select( 'core/edit-post' ).isFeatureActive(
-				'focusMode'
+			hasReducedUI: select( 'core/edit-post' ).isFeatureActive(
+				'reducedUI'
 			),
 		};
 	}, [] );
@@ -58,6 +58,10 @@ function HeaderToolbar( { onToggleInserter, isInserterOpen } ) {
 	const displayBlockToolbar =
 		! isLargeViewport || previewDeviceType !== 'Desktop' || hasFixedToolbar;
 
+	if ( hasReducedUI && ! displayBlockToolbar ) {
+		return null;
+	}
+
 	const toolbarAriaLabel = displayBlockToolbar
 		? /* translators: accessibility text for the editor toolbar when Top Toolbar is on */
 		  __( 'Document and block tools' )
@@ -69,20 +73,20 @@ function HeaderToolbar( { onToggleInserter, isInserterOpen } ) {
 			className="edit-post-header-toolbar"
 			aria-label={ toolbarAriaLabel }
 		>
-			<Button
-				className="edit-post-header-toolbar__inserter-toggle"
-				isPrimary
-				isPressed={ isInserterOpen }
-				onClick={ onToggleInserter }
-				disabled={ ! isInserterEnabled }
-				icon={ plus }
-				label={ _x(
-					'Add block',
-					'Generic label for block inserter button'
-				) }
-			/>
-			{ ! isFocusMode && (
+			{ ! hasReducedUI && (
 				<>
+					<Button
+						className="edit-post-header-toolbar__inserter-toggle"
+						isPrimary
+						isPressed={ isInserterOpen }
+						onClick={ onToggleInserter }
+						disabled={ ! isInserterEnabled }
+						icon={ plus }
+						label={ _x(
+							'Add block',
+							'Generic label for block inserter button'
+						) }
+					/>
 					<ToolSelector />
 					<EditorHistoryUndo />
 					<EditorHistoryRedo />

diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
@@ -26,16 +26,16 @@ function Header( {
 		hasActiveMetaboxes,
 		isPublishSidebarOpened,
 		isSaving,
-		isFocusMode,
+		hasReducedUI,
 	} = useSelect(
 		( select ) => ( {
 			hasActiveMetaboxes: select( 'core/edit-post' ).hasMetaBoxes(),
 			isPublishSidebarOpened: select(
 				'core/edit-post'
 			).isPublishSidebarOpened(),
 			isSaving: select( 'core/edit-post' ).isSavingMetaBoxes(),
-			isFocusMode: select( 'core/edit-post' ).isFeatureActive(
-				'focusMode'
+			hasReducedUI: select( 'core/edit-post' ).isFeatureActive(
+				'reducedUI'
 			),
 		} ),
 		[]
@@ -53,7 +53,7 @@ function Header( {
 				/>
 			</div>
 			<div className="edit-post-header__settings">
-				{ ! isFocusMode && (
+				{ ! hasReducedUI && (
 					<>
 						{ ! isPublishSidebarOpened && (
 							// This button isn't completely hidden by the publish sidebar.

diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -72,7 +72,7 @@ function Layout() {
 		previousShortcut,
 		nextShortcut,
 		hasBlockSelected,
-		isFocusMode,
+		hasReducedUI,
 	} = useSelect( ( select ) => {
 		return {
 			hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive(
@@ -98,8 +98,8 @@ function Layout() {
 			nextShortcut: select(
 				'core/keyboard-shortcuts'
 			).getAllShortcutRawKeyCombinations( 'core/edit-post/next-region' ),
-			isFocusMode: select( 'core/edit-post' ).isFeatureActive(
-				'focusMode'
+			hasReducedUI: select( 'core/edit-post' ).isFeatureActive(
+				'reducedUI'
 			),
 		};
 	}, [] );
@@ -233,7 +233,7 @@ function Layout() {
 						</>
 					}
 					footer={
-						! isFocusMode &&
+						! hasReducedUI &&
 						! isMobileViewport &&
 						isRichEditingEnabled &&
 						mode === 'visual' && (

diff --git a/packages/edit-post/src/components/options-modal/index.js b/packages/edit-post/src/components/options-modal/index.js
@@ -26,6 +26,7 @@ import {
 	EnablePluginDocumentSettingPanelOption,
 	EnablePublishSidebarOption,
 	EnablePanelOption,
+	EnableFeature,
 } from './options';
 import MetaBoxesSection from './meta-boxes-section';
 
@@ -48,6 +49,20 @@ export function OptionsModal( { isModalActive, isViewable, closeModal } ) {
 					label={ __( 'Pre-publish checks' ) }
 				/>
 			</Section>
+			<Section title={ __( 'Writing Mode' ) }>
+				<EnableFeature
+					featureName="reducedUI"
+					label={ __( 'Reduced UI' ) }
+				/>
+				<EnableFeature
+					featureName="themeStyles"
+					label={ __( 'Theme Styles' ) }
+				/>
+				<EnableFeature
+					featureName="focusMode"
+					label={ __( 'Spotlight' ) }
+				/>
+			</Section>
 			<Section title={ __( 'Document panels' ) }>
 				<EnablePluginDocumentSettingPanelOption.Slot />
 				{ isViewable && (

diff --git a/packages/edit-post/src/components/options-modal/options/enable-feature.js b/packages/edit-post/src/components/options-modal/options/enable-feature.js
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { compose } from '@wordpress/compose';
+import { withSelect, withDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import BaseOption from './base';
+
+export default compose(
+	withSelect( ( select, { featureName } ) => {
+		const { isFeatureActive } = select( 'core/edit-post' );
+		return {
+			isChecked: isFeatureActive( featureName ),
+		};
+	} ),
+	withDispatch( ( dispatch, { featureName } ) => ( {
+		onChange: () =>
+			dispatch( 'core/edit-post' ).toggleFeature( featureName ),
+	} ) )
+)( BaseOption );
diff --git a/packages/edit-post/src/components/options-modal/options/index.js b/packages/edit-post/src/components/options-modal/options/index.js
@@ -2,3 +2,4 @@ export { default as EnableCustomFieldsOption } from './enable-custom-fields';
 export { default as EnablePanelOption } from './enable-panel';
 export { default as EnablePluginDocumentSettingPanelOption } from './enable-plugin-document-setting-panel';
 export { default as EnablePublishSidebarOption } from './enable-publish-sidebar';
+export { default as EnableFeature } from './enable-feature';
diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import memize from 'memize';
-import { size, map, without } from 'lodash';
+import { size, map, without, omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -42,14 +42,15 @@ class Editor extends Component {
 		settings,
 		hasFixedToolbar,
 		focusMode,
+		hesThemeStyles,
 		hiddenBlockTypes,
 		blockTypes,
 		preferredStyleVariations,
 		__experimentalLocalAutosaveInterval,
 		updatePreferredStyleVariations
 	) {
 		settings = {
-			...settings,
+			...( hesThemeStyles ? settings : omit( settings, [ 'styles' ] ) ),
 			__experimentalPreferredStyleVariations: {
 				value: preferredStyleVariations,
 				onChange: updatePreferredStyleVariations,
@@ -83,6 +84,7 @@ class Editor extends Component {
 			settings,
 			hasFixedToolbar,
 			focusMode,
+			hesThemeStyles,
 			post,
 			postId,
 			initialEdits,
@@ -103,6 +105,7 @@ class Editor extends Component {
 			settings,
 			hasFixedToolbar,
 			focusMode,
+			hesThemeStyles,
 			hiddenBlockTypes,
 			blockTypes,
 			preferredStyleVariations,
@@ -154,6 +157,7 @@ export default compose( [
 				isFeatureActive( 'fixedToolbar' ) ||
 				__experimentalGetPreviewDeviceType() !== 'Desktop',
 			focusMode: isFeatureActive( 'focusMode' ),
+			hesThemeStyles: isFeatureActive( 'themeStyles' ),
 			post: getEntityRecord( 'postType', postType, postId ),
 			preferredStyleVariations: getPreference(
 				'preferredStyleVariations'