Site Editor: add Fullscreen mode

packages/edit-post/src/components/fullscreen-mode/index.js → packages/block-editor/src/components/fullscreen-mode/index.js

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { withSelect } from '@wordpress/data';
 
 export class FullscreenMode extends Component {
 	componentDidMount() {
@@ -45,6 +44,4 @@ export class FullscreenMode extends Component {
 	}
 }
 
-export default withSelect( ( select ) => ( {
-	isActive: select( 'core/edit-post' ).isFeatureActive( 'fullscreenMode' ),
-} ) )( FullscreenMode );
+export default FullscreenMode;

packages/block-editor/src/components/index.js

@@ -22,6 +22,7 @@ export { default as ButtonBlockerAppender } from './button-block-appender';
 export { default as ColorPalette } from './color-palette';
 export { default as ColorPaletteControl } from './color-palette/control';
 export { default as ContrastChecker } from './contrast-checker';
+export { default as __experimentalFullscreenMode } from './fullscreen-mode';
 export { default as __experimentalEditorSkeleton } from './editor-skeleton';
 export { default as __experimentalGradientPicker } from './gradient-picker';
 export { default as __experimentalGradientPickerControl } from './gradient-picker/control';

packages/block-editor/src/style.scss

@@ -26,6 +26,7 @@
 @import "./components/colors-gradients/style.scss";
 @import "./components/contrast-checker/style.scss";
 @import "./components/default-block-appender/style.scss";
+@import "./components/fullscreen-mode/style.scss";
 @import "./components/link-control/style.scss";
 @import "./components/image-size-control/style.scss";
 @import "./components/inner-blocks/style.scss";

packages/edit-post/src/components/layout/index.js

@@ -18,6 +18,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	BlockBreadcrumb,
 	__experimentalEditorSkeleton as EditorSkeleton,
+	__experimentalFullscreenMode as FullscreenMode,
 } from '@wordpress/block-editor';
 import {
 	Button,
@@ -38,7 +39,6 @@ import EditPostKeyboardShortcuts from '../keyboard-shortcuts';
 import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
 import ManageBlocksModal from '../manage-blocks-modal';
 import OptionsModal from '../options-modal';
-import FullscreenMode from '../fullscreen-mode';
 import BrowserURL from '../browser-url';
 import Header from '../header';
 import SettingsSidebar from '../sidebar/settings-sidebar';
@@ -57,6 +57,7 @@ function Layout() {
 	} = useDispatch( 'core/edit-post' );
 	const {
 		mode,
+		isFullscreenActive,
 		isRichEditingEnabled,
 		editorSidebarOpened,
 		pluginSidebarOpened,
@@ -81,6 +82,9 @@ function Layout() {
 			publishSidebarOpened: select(
 				'core/edit-post'
 			).isPublishSidebarOpened(),
+			isFullscreenActive: select( 'core/edit-post' ).isFeatureActive(
+				'fullscreenMode'
+			),
 			mode: select( 'core/edit-post' ).getEditorMode(),
 			isRichEditingEnabled: select( 'core/editor' ).getEditorSettings()
 				.richEditingEnabled,
@@ -110,7 +114,7 @@ function Layout() {
 
 	return (
 		<>
-			<FullscreenMode />
+			<FullscreenMode isActive={ isFullscreenActive } />
 			<BrowserURL />
 			<UnsavedChangesWarning />
 			<AutosaveMonitor />

packages/edit-post/src/style.scss

@@ -1,6 +1,5 @@
 $footer-height: $button-size-small;
 
-@import "./components/fullscreen-mode/style.scss";
 @import "./components/header/style.scss";
 @import "./components/header/fullscreen-mode-close/style.scss";
 @import "./components/header/header-toolbar/style.scss";

packages/edit-site/src/components/editor/index.js

@@ -15,7 +15,10 @@ import {
 	FocusReturnProvider,
 } from '@wordpress/components';
 import { EntityProvider } from '@wordpress/core-data';
-import { __experimentalEditorSkeleton as EditorSkeleton } from '@wordpress/block-editor';
+import {
+	__experimentalEditorSkeleton as EditorSkeleton,
+	__experimentalFullscreenMode as FullscreenMode,
+} from '@wordpress/block-editor';
 import { useViewportMatch } from '@wordpress/compose';
 
 /**
@@ -47,35 +50,47 @@ function Editor( { settings: _settings } ) {
 		settings,
 		setSettings,
 	] );
+
+	const { isFullscreenActive } = useSelect( ( select ) => {
+		return {
+			isFullscreenActive: select( 'core/edit-site' ).isFeatureActive(
+				'fullscreenMode'
+			),
+		};
+	}, [] );
+
 	return template ? (
-		<SlotFillProvider>
-			<DropZoneProvider>
-				<EntityProvider kind="root" type="site">
-					<EntityProvider
-						kind="postType"
-						type={ settings.templateType }
-						id={ settings.templateId }
-					>
-						<Context.Provider value={ context }>
-							<FocusReturnProvider>
-								<EditorSkeleton
-									sidebar={ ! isMobile && <Sidebar /> }
-									header={ <Header /> }
-									content={
-										<>
-											<Notices />
-											<Popover.Slot name="block-toolbar" />
-											<BlockEditor />
-										</>
-									}
-								/>
-								<Popover.Slot />
-							</FocusReturnProvider>
-						</Context.Provider>
+		<>
+			<FullscreenMode isActive={ isFullscreenActive } />
+			<SlotFillProvider>
+				<DropZoneProvider>
+					<EntityProvider kind="root" type="site">
+						<EntityProvider
+							kind="postType"
+							type={ settings.templateType }
+							id={ settings.templateId }
+						>
+							<Context.Provider value={ context }>
+								<FocusReturnProvider>
+									<EditorSkeleton
+										sidebar={ ! isMobile && <Sidebar /> }
+										header={ <Header /> }
+										content={
+											<>
+												<Notices />
+												<Popover.Slot name="block-toolbar" />
+												<BlockEditor />
+											</>
+										}
+									/>
+									<Popover.Slot />
+								</FocusReturnProvider>
+							</Context.Provider>
+						</EntityProvider>
 					</EntityProvider>
-				</EntityProvider>
-			</DropZoneProvider>
-		</SlotFillProvider>
+				</DropZoneProvider>
+			</SlotFillProvider>
+		</>
 	) : null;
 }
 export default Editor;

packages/edit-site/src/index.js

@@ -12,6 +12,7 @@ import { render } from '@wordpress/element';
  * Internal dependencies
  */
 import './hooks';
+import './store';
 import Editor from './components/editor';
 
 /**

packages/edit-site/src/store/actions.js

@@ -0,0 +1,13 @@
+/**
+ * Returns an action object used to toggle a feature flag.
+ *
+ * @param {string} feature Feature name.
+ *
+ * @return {Object} Action object.
+ */
+export function toggleFeature( feature ) {
+	return {
+		type: 'TOGGLE_FEATURE',
+		feature,
+	};
+}

packages/edit-site/src/store/constants.js

@@ -0,0 +1,6 @@
+/**
+ * The identifier for the data store.
+ *
+ * @type {string}
+ */
+export const STORE_KEY = 'core/edit-site';

packages/edit-site/src/store/controls.js

@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { createRegistryControl } from '@wordpress/data';
+
+const controls = {
+	SELECT: createRegistryControl(
+		( registry ) => ( { storeName, selectorName, args } ) => {
+			return registry.select( storeName )[ selectorName ]( ...args );
+		}
+	),
+};
+
+export default controls;

packages/edit-site/src/store/defaults.js

@@ -0,0 +1,5 @@
+export const PREFERENCES_DEFAULTS = {
+	features: {
+		fullscreenMode: false,
+	},
+};

packages/edit-site/src/store/index.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { registerStore } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import reducer from './reducer';
+import * as actions from './actions';
+import * as selectors from './selectors';
+import controls from './controls';
+import { STORE_KEY } from './constants';
+
+const store = registerStore( STORE_KEY, {
+	reducer,
+	actions,
+	selectors,
+	controls,
+	persist: [ 'preferences' ],
+} );
+
+export default store;

packages/edit-site/src/store/reducer.js

@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import { flow } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { combineReducers } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { PREFERENCES_DEFAULTS } from './defaults';
+
+/**
+ * Higher-order reducer creator which provides the given initial state for the
+ * original reducer.
+ *
+ * @param {*} initialState Initial state to provide to reducer.
+ *
+ * @return {Function} Higher-order reducer.
+ */
+const createWithInitialState = ( initialState ) => ( reducer ) => {
+	return ( state = initialState, action ) => reducer( state, action );
+};
+
+/**
+ * Reducer returning the user preferences.
+ *
+ * @param {Object}  state Current state.
+ *
+ * @return {Object} Updated state.
+ */
+export const preferences = flow( [
+	combineReducers,
+	createWithInitialState( PREFERENCES_DEFAULTS ),
+] )( {
+	features( state, action ) {
+		if ( action.type === 'TOGGLE_FEATURE' ) {
+			return {
+				...state,
+				[ action.feature ]: ! state[ action.feature ],
+			};
+		}
+
+		return state;
+	},
+} );
+
+export default combineReducers( {
+	preferences,
+} );

packages/edit-site/src/store/selectors.js

@@ -0,0 +1,16 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+
+/**
+ * Returns whether the given feature is enabled or not.
+ *
+ * @param {Object} state   Global application state.
+ * @param {string} feature Feature slug.
+ *
+ * @return {boolean} Is active.
+ */
+export function isFeatureActive( state, feature ) {
+	return get( state.preferences.features, [ feature ], false );
+}

packages/edit-site/src/store/test/actions.js

@@ -0,0 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import { toggleFeature } from '../actions';
+
+describe( 'actions', () => {
+	describe( 'toggleFeature', () => {
+		it( 'should return TOGGLE_FEATURE action', () => {
+			const feature = 'name';
+			expect( toggleFeature( feature ) ).toEqual( {
+				type: 'TOGGLE_FEATURE',
+				feature,
+			} );
+		} );
+	} );
+} );

packages/edit-site/src/store/test/reducer.js

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import deepFreeze from 'deep-freeze';
+
+/**
+ * Internal dependencies
+ */
+import { preferences } from '../reducer';
+import { PREFERENCES_DEFAULTS } from '../defaults';
+
+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 } );
+		} );
+	} );
+} );