From f3d3daf386325d9d49348e3b5623a1668c39b898 Mon Sep 17 00:00:00 2001 From: Anton Timmermans Date: Wed, 20 Dec 2017 13:15:04 +0100 Subject: [PATCH 01/26] Add an API to add a plugin sidebar --- editor/api/index.js | 4 + editor/api/sidebar.js | 107 ++++++++++++++++++ .../edit-post/header/ellipsis-menu/index.js | 3 + editor/edit-post/header/plugins/index.js | 89 +++++++++++++++ editor/edit-post/sidebar/index.js | 65 ++++++++++- editor/index.js | 1 + 6 files changed, 265 insertions(+), 4 deletions(-) create mode 100644 editor/api/index.js create mode 100644 editor/api/sidebar.js create mode 100644 editor/edit-post/header/plugins/index.js diff --git a/editor/api/index.js b/editor/api/index.js new file mode 100644 index 00000000000000..1252f8010ec3f4 --- /dev/null +++ b/editor/api/index.js @@ -0,0 +1,4 @@ +export { + registerSidebar, + activateSidebar, +} from './sidebar'; diff --git a/editor/api/sidebar.js b/editor/api/sidebar.js new file mode 100644 index 00000000000000..0e2b1333ef7cac --- /dev/null +++ b/editor/api/sidebar.js @@ -0,0 +1,107 @@ +/* eslint no-console: [ 'error', { allow: [ 'error' ] } ] */ + +/* External dependencies */ +import { isFunction } from 'lodash'; + +/* Internal dependencies */ +import store from '../store'; +import { setActivePanel } from '../store/actions'; +import { applyFilters } from '@wordpress/hooks'; + +const sidebars = {}; + +/** + * Registers a sidebar with the editor. + * + * A button will be shown in the settings menu to open the sidebar. The sidebar + * can be manually opened by calling the `activateSidebar` function. + * + * @param {string} name The name of the sidebar. Should be in + * `[plugin]/[sidebar]` format. + * @param {Object} settings The settings for this sidebar. + * @param {string} settings.title The name to show in the settings menu. + * @param {Function} settings.render The function that renders the sidebar. + * + * @returns {Object} The final sidebar settings object. + */ +export function registerSidebar( name, settings ) { + settings = { + name, + ...settings, + }; + + if ( typeof name !== 'string' ) { + console.error( + 'Sidebar names must be strings.' + ); + return; + } + if ( ! /^[a-z][a-z0-9-]*\/[a-z][a-z0-9-]*$/.test( name ) ) { + console.error( + 'Sidebar names must contain a namespace prefix, include only lowercase alphanumeric characters or dashes, and start with a letter. Example: my-plugin/my-custom-sidebar' + ); + return; + } + if ( ! settings || ! isFunction( settings.render ) ) { + console.error( + 'The "render" property must be specified and must be a valid function.' + ); + return; + } + if ( sidebars[ name ] ) { + console.error( + 'Sidebar "' + name + '" is already registered.' + ); + } + + if ( ! ( 'title' in settings ) || settings.title === '' ) { + console.error( + 'The sidebar "' + name + '" must have a title.' + ); + return; + } + if ( typeof settings.title !== 'string' ) { + console.error( + 'Sidebar titles must be strings.' + ); + return; + } + + settings = applyFilters( 'editor.registerSidebar', settings, name ); + + return sidebars[ name ] = settings; +} + +/** + * Retrieves the sidebar settings object. + * + * @param {string} name The name of the sidebar to retrieve. + * + * @returns {false|Object} The settings object of the sidebar. Or false if the + * sidebar doesn't exist. + */ +export function getSidebar( name ) { + if ( ! sidebars.hasOwnProperty( name ) ) { + return false; + } + + return sidebars[ name ]; +} + +/** + * Retrieves all sidebars that are registered. + * + * @returns {Object[]} Registered sidebars. + */ +export function getSidebars() { + return sidebars; +} + +/** + * Activates the gives sidebar. + * + * @param {string} name The name of the sidebar to activate. + */ +export function activateSidebar( name ) { + store.dispatch( setActivePanel( name ) ); +} diff --git a/editor/edit-post/header/ellipsis-menu/index.js b/editor/edit-post/header/ellipsis-menu/index.js index d78f028d0feb61..4f7bcae00fc9df 100644 --- a/editor/edit-post/header/ellipsis-menu/index.js +++ b/editor/edit-post/header/ellipsis-menu/index.js @@ -10,6 +10,7 @@ import { IconButton, Dropdown } from '@wordpress/components'; import './style.scss'; import ModeSwitcher from '../mode-switcher'; import FixedToolbarToggle from '../fixed-toolbar-toggle'; +import Plugins from '../plugins'; const element = (
+
+
) } /> diff --git a/editor/edit-post/header/plugins/index.js b/editor/edit-post/header/plugins/index.js new file mode 100644 index 00000000000000..a487ad6744ed1e --- /dev/null +++ b/editor/edit-post/header/plugins/index.js @@ -0,0 +1,89 @@ +/** + * External dependencies + */ +import { map } from 'lodash'; + +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { getSidebars, activateSidebar } from '../../../api/sidebar'; +import { MenuItemsGroup } from '../../../../components'; +import { getActivePanel, isEditorSidebarOpened } from '../../../store/selectors'; +import { connect } from 'react-redux'; +import { toggleSidebar } from '../../../store/actions'; + +/** + * Renders a list of plugins that will activate different UI elements. + * + * @param {Object} props Props. + * @param {Function} props.onSwitch Function to call when a plugin is + * switched to. + * @param {string} props.activePanel The currently active panel. + * @param {boolean} props.isSidebarOpened Whether the sidebar is currently open. + * @param {Function} props.onToggleSidebar Function to call when the sidebar + * should be toggled. + * + * @returns {Object} The rendered list of menu items. + */ +function Plugins( { activePanel, onSwitch, isSidebarOpened, onToggleSidebar } ) { + const sidebars = getSidebars(); + + // This makes sure no check mark is before a plugin if the sidebar is closed. + if ( ! isSidebarOpened ) { + activePanel = ''; + } + + /** + * Handles the user clicking on one of the plugins in the menu + * + * @param {string} panelToActivate The sidebar panel to activate. + */ + function onSelect( panelToActivate ) { + onSwitch( panelToActivate ); + + if ( ! isSidebarOpened ) { + onToggleSidebar(); + } + } + + const plugins = map( sidebars, ( sidebar ) => { + return { + value: sidebar.name, + label: sidebar.title, + }; + } ); + + return ( + + ); +} + +export default connect( + ( state ) => { + return { + activePanel: getActivePanel( state ), + isSidebarOpened: isEditorSidebarOpened( state ), + }; + }, + ( dispatch, ownProps ) => { + return { + onSwitch: ( value ) => { + activateSidebar( value ); + ownProps.onToggle( value ); + }, + onToggleSidebar: () => { + dispatch( toggleSidebar() ); + }, + }; + } +)( Plugins ); diff --git a/editor/edit-post/sidebar/index.js b/editor/edit-post/sidebar/index.js index 980ed185eeec1f..c951f6af282388 100644 --- a/editor/edit-post/sidebar/index.js +++ b/editor/edit-post/sidebar/index.js @@ -6,8 +6,8 @@ import { connect } from 'react-redux'; /** * WordPress Dependencies */ -import { __ } from '@wordpress/i18n'; -import { withFocusReturn } from '@wordpress/components'; +import { __, sprintf } from '@wordpress/i18n'; +import { withFocusReturn, Panel, PanelBody } from '@wordpress/components'; /** * Internal Dependencies @@ -16,10 +16,68 @@ import './style.scss'; import PostSettings from './post-settings'; import BlockInspectorPanel from './block-inspector-panel'; import Header from './header'; +import { getSidebar } from '../../api/sidebar'; import { getActivePanel } from '../../store/selectors'; +/** + * Returns the sidebar that should be rendered in the sidebar registered by + * plugins. + * + * @param {string} panel The currently active panel. + * + * @returns {Object} The React element to render as a panel. + */ +function getPluginSidebar( panel ) { + const pluginSidebar = getSidebar( panel ); + + if ( ! pluginSidebar ) { + return () => { + return + + { sprintf( __( 'No matching plugin sidebar found for panel "%s"' ), panel ) } + + ; + }; + } + + return pluginSidebar.render; +} + +/** + * Returns the panel that should be rendered in the sidebar. + * + * @param {string} panel The currently active panel. + * + * @returns {Object} The React element to render as a panel. + */ +function getPanel( panel ) { + switch ( panel ) { + case 'document': + return PostSettings; + + case 'block': + return BlockInspectorPanel; + + default: + return getPluginSidebar( panel ); + } +} + +/** + * Renders a sidebar with the relevant panel. + * + * @param {string} panel The currently active panel. + * + * @returns {Object} The rendered sidebar. + */ const Sidebar = ( { panel } ) => { + const ActivePanel = getPanel( panel ); + + const props = { + panel, + }; + return (
{ tabIndex="-1" >
- { panel === 'document' && } - { panel === 'block' && } +
); }; diff --git a/editor/index.js b/editor/index.js index 2cd98d2b73bfb6..072cc9dc7d86dc 100644 --- a/editor/index.js +++ b/editor/index.js @@ -19,6 +19,7 @@ import { EditorProvider, ErrorBoundary } from './components'; import { initializeMetaBoxState } from './store/actions'; export * from './components'; +export * from './api'; import store from './store'; // Registers the state tree // Configure moment globally From b4fa154ec1aba94b8178d6add7f4a081c3cbc0f9 Mon Sep 17 00:00:00 2001 From: Alexander Botteram Date: Wed, 3 Jan 2018 11:23:13 +0100 Subject: [PATCH 02/26] Applied minor codestyle changes to sidebar.js --- editor/api/sidebar.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/editor/api/sidebar.js b/editor/api/sidebar.js index 0e2b1333ef7cac..112599d7930db7 100644 --- a/editor/api/sidebar.js +++ b/editor/api/sidebar.js @@ -34,19 +34,19 @@ export function registerSidebar( name, settings ) { console.error( 'Sidebar names must be strings.' ); - return; + return null; } if ( ! /^[a-z][a-z0-9-]*\/[a-z][a-z0-9-]*$/.test( name ) ) { console.error( 'Sidebar names must contain a namespace prefix, include only lowercase alphanumeric characters or dashes, and start with a letter. Example: my-plugin/my-custom-sidebar' ); - return; + return null; } if ( ! settings || ! isFunction( settings.render ) ) { console.error( 'The "render" property must be specified and must be a valid function.' ); - return; + return null; } if ( sidebars[ name ] ) { console.error( @@ -54,17 +54,17 @@ export function registerSidebar( name, settings ) { ); } - if ( ! ( 'title' in settings ) || settings.title === '' ) { + if ( ! settings.title ) { console.error( 'The sidebar "' + name + '" must have a title.' ); - return; + return null; } if ( typeof settings.title !== 'string' ) { console.error( 'Sidebar titles must be strings.' ); - return; + return null; } settings = applyFilters( 'editor.registerSidebar', settings, name ); @@ -77,12 +77,12 @@ export function registerSidebar( name, settings ) { * * @param {string} name The name of the sidebar to retrieve. * - * @returns {false|Object} The settings object of the sidebar. Or false if the + * @returns {Object} The settings object of the sidebar. Or false if the * sidebar doesn't exist. */ export function getSidebar( name ) { if ( ! sidebars.hasOwnProperty( name ) ) { - return false; + return null; } return sidebars[ name ]; @@ -91,7 +91,7 @@ export function getSidebar( name ) { /** * Retrieves all sidebars that are registered. * - * @returns {Object[]} Registered sidebars. + * @returns {Object} Registered sidebars. */ export function getSidebars() { return sidebars; From ba05cd8586e267c3b6debc4521fbcf9cbbe0fc3d Mon Sep 17 00:00:00 2001 From: Alexander Botteram Date: Wed, 3 Jan 2018 12:00:37 +0100 Subject: [PATCH 03/26] Applied minor codestyle changes to plugins header --- editor/edit-post/header/plugins/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/editor/edit-post/header/plugins/index.js b/editor/edit-post/header/plugins/index.js index a487ad6744ed1e..839cf461cf85aa 100644 --- a/editor/edit-post/header/plugins/index.js +++ b/editor/edit-post/header/plugins/index.js @@ -2,19 +2,19 @@ * External dependencies */ import { map } from 'lodash'; +import { connect } from 'react-redux'; /** * WordPress dependencies */ import { __ } from '@wordpress/i18n'; +import { MenuItemsGroup } from '@wordpress/components'; /** * Internal dependencies */ import { getSidebars, activateSidebar } from '../../../api/sidebar'; -import { MenuItemsGroup } from '../../../../components'; import { getActivePanel, isEditorSidebarOpened } from '../../../store/selectors'; -import { connect } from 'react-redux'; import { toggleSidebar } from '../../../store/actions'; /** From 9caaf8e7126b08b38cec654305ade1216a8e5610 Mon Sep 17 00:00:00 2001 From: Alexander Botteram Date: Wed, 3 Jan 2018 14:34:24 +0100 Subject: [PATCH 04/26] Fixed broken dependency after merging wordpress/gutenberg --- editor/edit-post/header/plugins/index.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/editor/edit-post/header/plugins/index.js b/editor/edit-post/header/plugins/index.js index 839cf461cf85aa..557066c7485554 100644 --- a/editor/edit-post/header/plugins/index.js +++ b/editor/edit-post/header/plugins/index.js @@ -14,7 +14,7 @@ import { MenuItemsGroup } from '@wordpress/components'; * Internal dependencies */ import { getSidebars, activateSidebar } from '../../../api/sidebar'; -import { getActivePanel, isEditorSidebarOpened } from '../../../store/selectors'; +import { getActivePanel, hasOpenSidebar } from '../../../store/selectors'; import { toggleSidebar } from '../../../store/actions'; /** @@ -24,17 +24,17 @@ import { toggleSidebar } from '../../../store/actions'; * @param {Function} props.onSwitch Function to call when a plugin is * switched to. * @param {string} props.activePanel The currently active panel. - * @param {boolean} props.isSidebarOpened Whether the sidebar is currently open. + * @param {boolean} props.isSidebarOpen Whether a sidebar is currently open. * @param {Function} props.onToggleSidebar Function to call when the sidebar * should be toggled. * * @returns {Object} The rendered list of menu items. */ -function Plugins( { activePanel, onSwitch, isSidebarOpened, onToggleSidebar } ) { +function Plugins( { activePanel, onSwitch, isSidebarOpen, onToggleSidebar } ) { const sidebars = getSidebars(); // This makes sure no check mark is before a plugin if the sidebar is closed. - if ( ! isSidebarOpened ) { + if ( ! isSidebarOpen ) { activePanel = ''; } @@ -46,7 +46,7 @@ function Plugins( { activePanel, onSwitch, isSidebarOpened, onToggleSidebar } ) function onSelect( panelToActivate ) { onSwitch( panelToActivate ); - if ( ! isSidebarOpened ) { + if ( ! isSidebarOpen ) { onToggleSidebar(); } } @@ -72,7 +72,7 @@ export default connect( ( state ) => { return { activePanel: getActivePanel( state ), - isSidebarOpened: isEditorSidebarOpened( state ), + isSidebarOpen: hasOpenSidebar( state ), }; }, ( dispatch, ownProps ) => { From 53579b3e19f669a9844acd7a1407fbc538cc1e89 Mon Sep 17 00:00:00 2001 From: Alexander Botteram Date: Fri, 5 Jan 2018 12:14:09 +0100 Subject: [PATCH 05/26] Initial attempt at rendering plugins in a separate sidebar --- .idea/watcherTasks.xml | 4 ++ editor/api/sidebar.js | 4 +- editor/components/index.js | 1 + editor/components/plugins-panel/index.js | 71 ++++++++++++++++++++++ editor/components/plugins-panel/style.scss | 49 +++++++++++++++ editor/edit-post/header/plugins/index.js | 10 +-- editor/edit-post/layout/index.js | 5 ++ editor/edit-post/layout/style.scss | 19 ++++++ editor/edit-post/sidebar/index.js | 26 +------- editor/store/actions.js | 15 ++++- editor/store/defaults.js | 1 + editor/store/reducer.js | 10 +++ editor/store/selectors.js | 14 ++++- 13 files changed, 194 insertions(+), 35 deletions(-) create mode 100644 .idea/watcherTasks.xml create mode 100644 editor/components/plugins-panel/index.js create mode 100644 editor/components/plugins-panel/style.scss diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml new file mode 100644 index 00000000000000..fb0d65a4bb2218 --- /dev/null +++ b/.idea/watcherTasks.xml @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/editor/api/sidebar.js b/editor/api/sidebar.js index 112599d7930db7..aee08ecfa2672b 100644 --- a/editor/api/sidebar.js +++ b/editor/api/sidebar.js @@ -5,7 +5,7 @@ import { isFunction } from 'lodash'; /* Internal dependencies */ import store from '../store'; -import { setActivePanel } from '../store/actions'; +import { setActivePlugin } from '../store/actions'; import { applyFilters } from '@wordpress/hooks'; const sidebars = {}; @@ -103,5 +103,5 @@ export function getSidebars() { * @param {string} name The name of the sidebar to activate. */ export function activateSidebar( name ) { - store.dispatch( setActivePanel( name ) ); + store.dispatch( setActivePlugin( name ) ); } diff --git a/editor/components/index.js b/editor/components/index.js index 99574db870c5ee..f66f1755e3eb26 100644 --- a/editor/components/index.js +++ b/editor/components/index.js @@ -10,6 +10,7 @@ export { default as MetaBoxes } from './meta-boxes'; export { default as PageAttributesCheck } from './page-attributes/check'; export { default as PageAttributesOrder } from './page-attributes/order'; export { default as PageAttributesParent } from './page-attributes/parent'; +export { default as PluginsPanel } from './plugins-panel'; export { default as PostAuthor } from './post-author'; export { default as PostAuthorCheck } from './post-author/check'; export { default as PostComments } from './post-comments'; diff --git a/editor/components/plugins-panel/index.js b/editor/components/plugins-panel/index.js new file mode 100644 index 00000000000000..75eb568a89c41a --- /dev/null +++ b/editor/components/plugins-panel/index.js @@ -0,0 +1,71 @@ +/** + * External dependencies + */ +import { connect } from 'react-redux'; + +/** + * WordPress dependencies + */ +import { __, sprintf } from '@wordpress/i18n'; +import { compose } from '@wordpress/element'; +import { Panel, PanelBody, IconButton, withFocusReturn } from '@wordpress/components'; +import { getActivePlugin } from '../../store/selectors'; + +/** + * Internal Dependencies + */ +import './style.scss'; +import { getSidebar } from '../../api/sidebar'; + +/** + * Returns the sidebar that should be rendered in the sidebar registered by + * plugins. + * + * @param {string} plugin The currently active plugin. + * + * @returns {Object} The React element to render as a panel. + */ +function getPluginSidebar( plugin ) { + const pluginSidebar = getSidebar( plugin ); + + if ( ! pluginSidebar ) { + return () => { + return + + { sprintf( __( 'No matching plugin sidebar found for plugin "%s"' ), plugin ) } + + ; + }; + } + + return pluginSidebar.render; +} + +function PluginsPanel( { onClose, plugin } ) { + return ( +
+
+ +
+
+ { getPluginSidebar( plugin )() } +
+
+ ); +} + +export default connect( + ( state ) => { + return { + plugin: getActivePlugin( state ), + }; + } +)( withFocusReturn( PluginsPanel ) ); diff --git a/editor/components/plugins-panel/style.scss b/editor/components/plugins-panel/style.scss new file mode 100644 index 00000000000000..cfc6b2566880fc --- /dev/null +++ b/editor/components/plugins-panel/style.scss @@ -0,0 +1,49 @@ +.editor-plugins-panel { + position: fixed; + top: 0; + right: 0; + bottom: 0; + width: $sidebar-width; + border-left: 1px solid $light-gray-500; + background: $light-gray-300; + color: $dark-gray-500; + height: 100vh; + overflow: hidden; + + @include break-small() { + top: $admin-bar-height-big + $header-height; + z-index: auto; + height: auto; + overflow: auto; + -webkit-overflow-scrolling: touch; + } + + @include break-medium() { + top: $admin-bar-height + $header-height; + } + + > .components-panel .components-panel__header { + position: fixed; + z-index: z-index( '.components-panel__header' ); + top: 0; + left: 0; + right: 0; + height: $panel-header-height; + + @include break-small() { + position: inherit; + top: auto; + left: auto; + right: auto; + } + } +} + +.editor-plugins-panel__header { + padding-left: 16px; + height: $header-height; + border-bottom: 1px solid $light-gray-500; + display: flex; + align-items: center; + align-content: space-between; +} \ No newline at end of file diff --git a/editor/edit-post/header/plugins/index.js b/editor/edit-post/header/plugins/index.js index 557066c7485554..2c90cb0d6bd245 100644 --- a/editor/edit-post/header/plugins/index.js +++ b/editor/edit-post/header/plugins/index.js @@ -14,7 +14,7 @@ import { MenuItemsGroup } from '@wordpress/components'; * Internal dependencies */ import { getSidebars, activateSidebar } from '../../../api/sidebar'; -import { getActivePanel, hasOpenSidebar } from '../../../store/selectors'; +import { getActivePanel, hasOpenSidebar } from '../../../store/selectors'; import { toggleSidebar } from '../../../store/actions'; /** @@ -30,7 +30,7 @@ import { toggleSidebar } from '../../../store/actions'; * * @returns {Object} The rendered list of menu items. */ -function Plugins( { activePanel, onSwitch, isSidebarOpen, onToggleSidebar } ) { +function Plugins( { activePanel, onSwitch, isSidebarOpen, onTogglePluginsSidebar } ) { const sidebars = getSidebars(); // This makes sure no check mark is before a plugin if the sidebar is closed. @@ -47,7 +47,7 @@ function Plugins( { activePanel, onSwitch, isSidebarOpen, onToggleSidebar } ) { onSwitch( panelToActivate ); if ( ! isSidebarOpen ) { - onToggleSidebar(); + onTogglePluginsSidebar(); } } @@ -81,8 +81,8 @@ export default connect( activateSidebar( value ); ownProps.onToggle( value ); }, - onToggleSidebar: () => { - dispatch( toggleSidebar() ); + onTogglePluginsSidebar: () => { + dispatch( toggleSidebar( 'plugins' ) ); }, }; } diff --git a/editor/edit-post/layout/index.js b/editor/edit-post/layout/index.js index 9c03d1be94dfdf..cc9bb5f2e73a82 100644 --- a/editor/edit-post/layout/index.js +++ b/editor/edit-post/layout/index.js @@ -26,6 +26,7 @@ import { UnsavedChangesWarning, EditorNotices, PostPublishPanel, + PluginsPanel } from '../../components'; import { getEditorMode, @@ -40,6 +41,7 @@ function Layout( { layoutHasOpenSidebar, isDefaultSidebarOpened, isPublishSidebarOpened, + isPluginsSidebarOpened, hasFixedToolbar, onToggleSidebar, } ) { @@ -48,6 +50,7 @@ function Layout( { 'has-fixed-toolbar': hasFixedToolbar, } ); const closePublishPanel = () => onToggleSidebar( 'publish', false ); + const closePluginsPanel = () => onToggleSidebar( 'plugins', false ); return (
@@ -71,6 +74,7 @@ function Layout( {
{ isDefaultSidebarOpened && } { isPublishSidebarOpened && } + { isPluginsSidebarOpened && }
); @@ -82,6 +86,7 @@ export default connect( layoutHasOpenSidebar: hasOpenSidebar( state ), isDefaultSidebarOpened: isSidebarOpened( state ), isPublishSidebarOpened: isSidebarOpened( state, 'publish' ), + isPluginsSidebarOpened: isSidebarOpened( state, 'plugins' ), hasFixedToolbar: isFeatureActive( state, 'fixedToolbar' ), } ), { onToggleSidebar: toggleSidebar } diff --git a/editor/edit-post/layout/style.scss b/editor/edit-post/layout/style.scss index fa79d38cef1968..3cc4c69b3233d4 100644 --- a/editor/edit-post/layout/style.scss +++ b/editor/edit-post/layout/style.scss @@ -101,3 +101,22 @@ .editor-layout .editor-post-publish-panel__header-publish-button { margin-right: 52px; // This number is approximative to keep the publish button at the same position when opening the panel } + +.editor-layout .editor-plugins-panel { + position: fixed; + z-index: z-index( '.editor-layout .editor-post-publish-panel' ); + top: $admin-bar-height-big; + bottom: 0; + right: 0; + left: 0; + overflow: auto; + position: fixed; + + @include break-medium() { + top: $admin-bar-height; + left: auto; + width: $sidebar-width; + border-left: 1px solid $light-gray-500; + @include slide_in_right; + } +} diff --git a/editor/edit-post/sidebar/index.js b/editor/edit-post/sidebar/index.js index c951f6af282388..1ef23a22973613 100644 --- a/editor/edit-post/sidebar/index.js +++ b/editor/edit-post/sidebar/index.js @@ -20,30 +20,6 @@ import { getSidebar } from '../../api/sidebar'; import { getActivePanel } from '../../store/selectors'; -/** - * Returns the sidebar that should be rendered in the sidebar registered by - * plugins. - * - * @param {string} panel The currently active panel. - * - * @returns {Object} The React element to render as a panel. - */ -function getPluginSidebar( panel ) { - const pluginSidebar = getSidebar( panel ); - - if ( ! pluginSidebar ) { - return () => { - return - - { sprintf( __( 'No matching plugin sidebar found for panel "%s"' ), panel ) } - - ; - }; - } - - return pluginSidebar.render; -} - /** * Returns the panel that should be rendered in the sidebar. * @@ -60,7 +36,7 @@ function getPanel( panel ) { return BlockInspectorPanel; default: - return getPluginSidebar( panel ); + return PostSettings; } } diff --git a/editor/store/actions.js b/editor/store/actions.js index 9bb1b1da03c67d..91c254c94a03aa 100644 --- a/editor/store/actions.js +++ b/editor/store/actions.js @@ -334,7 +334,7 @@ export function stopTyping() { /** * Returns an action object used in signalling that the user toggled the sidebar * - * @param {String} sidebar Name of the sidebar to toggle (desktop, mobile or publish) + * @param {String} sidebar Name of the sidebar to toggle (desktop, mobile, plugins or publish) * @param {Boolean?} force Force a sidebar state * @return {Object} Action object */ @@ -359,6 +359,19 @@ export function setActivePanel( panel ) { }; } +/** + * Returns an action object usid in signalling that the user switched the active plugin. + * + * @param {String} plugin The plugin name + * @return {Object} Action object + */ +export function setActivePlugin( plugin ) { + return { + type: 'SET_ACTIVE_PLUGIN', + plugin, + }; +} + /** * Returns an action object used in signalling that the user toggled a sidebar panel * diff --git a/editor/store/defaults.js b/editor/store/defaults.js index 129072f19aa8f4..11f065afd2427f 100644 --- a/editor/store/defaults.js +++ b/editor/store/defaults.js @@ -4,6 +4,7 @@ export const PREFERENCES_DEFAULTS = { desktop: true, mobile: false, publish: false, + plugins: false, }, panels: { 'post-status': true }, recentlyUsedBlocks: [], diff --git a/editor/store/reducer.js b/editor/store/reducer.js index 9d7e53178658fa..55a1a5813db0d3 100644 --- a/editor/store/reducer.js +++ b/editor/store/reducer.js @@ -578,6 +578,15 @@ export function panel( state = 'document', action ) { return state; } +export function plugin( state = 'null', action ) { + switch( action.type ) { + case 'SET_ACTIVE_PLUGIN': + return action.plugin; + } + + return state; +} + /** * Reducer returning current network request state (whether a request to the WP * REST API is in progress, successful, or failed). @@ -786,6 +795,7 @@ export default optimist( combineReducers( { hoveredBlock, blocksMode, blockInsertionPoint, + plugin, preferences, panel, saving, diff --git a/editor/store/selectors.js b/editor/store/selectors.js index 99dd17ce588f66..79821b08fb29cd 100644 --- a/editor/store/selectors.js +++ b/editor/store/selectors.js @@ -97,6 +97,16 @@ export function getActivePanel( state ) { return state.panel; } +/** + * Returns the current active plugin for the plugin sidebar. + * + * @param {Object} state Global application state + * @return {String} Active plugin sidebar plugin + */ +export function getActivePlugin( state ) { + return state.plugin; +} + /** * Returns the preferences (these preferences are persisted locally) * @@ -145,8 +155,8 @@ export function isSidebarOpened( state, sidebar ) { export function hasOpenSidebar( state ) { const sidebars = getPreference( state, 'sidebars' ); return isMobile( state ) ? - sidebars.mobile || sidebars.publish : - sidebars.desktop || sidebars.publish; + sidebars.mobile || sidebars.publish || sidebars.plugins : + sidebars.desktop || sidebars.publish || sidebars.plugins ; } /** From 9428aa92a79d2020e292e0009eda735b9f537e56 Mon Sep 17 00:00:00 2001 From: Alexander Botteram Date: Mon, 8 Jan 2018 13:53:22 +0100 Subject: [PATCH 06/26] Removed accidentally added IDE file --- .idea/watcherTasks.xml | 4 ---- 1 file changed, 4 deletions(-) delete mode 100644 .idea/watcherTasks.xml diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml deleted file mode 100644 index fb0d65a4bb2218..00000000000000 --- a/.idea/watcherTasks.xml +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file From 724160954d27c56dc396c094f5758ab2dfb15048 Mon Sep 17 00:00:00 2001 From: Alexander Botteram Date: Tue, 9 Jan 2018 16:33:19 +0100 Subject: [PATCH 07/26] Initial changes --- .idea/gutenberg.iml | 21 + .idea/inspectionProfiles/Project_Default.xml | 6 + .idea/misc.xml | 6 + .idea/modules.xml | 8 + .idea/vcs.xml | 6 + .idea/watcherTasks.xml | 4 + .idea/workspace.xml | 846 +++++++++++++++++++ editor/store/actions.js | 48 +- editor/store/defaults.js | 11 +- editor/store/reducer.js | 13 +- editor/store/selectors.js | 18 +- 11 files changed, 951 insertions(+), 36 deletions(-) create mode 100644 .idea/gutenberg.iml create mode 100644 .idea/inspectionProfiles/Project_Default.xml create mode 100644 .idea/misc.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml create mode 100644 .idea/watcherTasks.xml create mode 100644 .idea/workspace.xml diff --git a/.idea/gutenberg.iml b/.idea/gutenberg.iml new file mode 100644 index 00000000000000..1ff237ec476130 --- /dev/null +++ b/.idea/gutenberg.iml @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 00000000000000..c6cc8c8196a222 --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 00000000000000..24eb271ab350b6 --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 00000000000000..48855671bec508 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 00000000000000..94a25f7f4cb416 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml new file mode 100644 index 00000000000000..fb0d65a4bb2218 --- /dev/null +++ b/.idea/watcherTasks.xml @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/.idea/workspace.xml b/.idea/workspace.xml new file mode 100644 index 00000000000000..e2b3996a80f7b1 --- /dev/null +++ b/.idea/workspace.xml @@ -0,0 +1,846 @@ + + + + + + + + + + + + composer + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ReactDOM.render + ReactDOM + editor.js + editor/build + gutenberg_url + createEditorInstance + editor + blocks + TOGGLE_SI + prefere + TOGGLE_SIDE + mode + publish + + + + + + + + + + + + + false + + false + false + true + + + true + DEFINITION_ORDER + + + + + + + + + + + + + + + + + + AngularJS + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1513764191507 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - $PROJECT_DIR$/../../.. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file From cc0b1247dafe3e63e9259a111286d892ee5b0fea Mon Sep 17 00:00:00 2001 From: Alexander Botteram Date: Wed, 10 Jan 2018 14:43:35 +0100 Subject: [PATCH 09/26] Updated actions, reducers and selectors --- editor/api/sidebar.js | 6 +- .../block-inspector-button.js | 7 +- editor/components/plugins-panel/index.js | 5 +- editor/edit-post/header/index.js | 32 ++++++--- editor/edit-post/header/plugins/index.js | 4 +- editor/edit-post/layout/index.js | 50 +++++++++----- .../sidebar/discussion-panel/index.js | 4 +- .../sidebar/document-outline-panel/index.js | 4 +- .../edit-post/sidebar/featured-image/index.js | 4 +- editor/edit-post/sidebar/header.js | 11 ++- .../sidebar/page-attributes/index.js | 4 +- .../edit-post/sidebar/post-excerpt/index.js | 4 +- editor/edit-post/sidebar/post-status/index.js | 4 +- .../sidebar/post-taxonomies/index.js | 4 +- editor/store/actions.js | 69 +++++++++++++++---- editor/store/defaults.js | 7 +- editor/store/selectors.js | 43 +++++++++--- editor/utils/mobile/index.js | 4 +- 18 files changed, 181 insertions(+), 85 deletions(-) diff --git a/editor/api/sidebar.js b/editor/api/sidebar.js index aee08ecfa2672b..79b69eb70906e3 100644 --- a/editor/api/sidebar.js +++ b/editor/api/sidebar.js @@ -5,7 +5,7 @@ import { isFunction } from 'lodash'; /* Internal dependencies */ import store from '../store'; -import { setActivePlugin } from '../store/actions'; +import { setGeneralSidebarActivePanel } from '../store/actions'; import { applyFilters } from '@wordpress/hooks'; const sidebars = {}; @@ -102,6 +102,6 @@ export function getSidebars() { * * @param {string} name The name of the sidebar to activate. */ -export function activateSidebar( name ) { - store.dispatch( setActivePlugin( name ) ); +export function activateSidebar( pluginId ) { + store.dispatch( setGeneralSidebarActivePanel( 'plugins', pluginId ) ); } diff --git a/editor/components/block-settings-menu/block-inspector-button.js b/editor/components/block-settings-menu/block-inspector-button.js index 65442babff0fb2..af3cbcd689221c 100644 --- a/editor/components/block-settings-menu/block-inspector-button.js +++ b/editor/components/block-settings-menu/block-inspector-button.js @@ -13,7 +13,7 @@ import { IconButton, withSpokenMessages } from '@wordpress/components'; /** * Internal dependencies */ -import { getActivePanel, isSidebarOpened } from '../../store/selectors'; +import { getActivePanel, isGeneralSidebarPanelOpened } from '../../store/selectors'; import { toggleSidebar, setActivePanel } from '../../store/actions'; export function BlockInspectorButton( { @@ -45,8 +45,7 @@ export function BlockInspectorButton( { className="editor-block-settings-menu__control" onClick={ flow( toggleInspector, speakMessage, onClick ) } icon="admin-generic" - label={ small ? label : undefined } - > + label={ small ? label : undefined } > { ! small && label } ); @@ -54,7 +53,7 @@ export function BlockInspectorButton( { export default connect( ( state ) => ( { - isDefaultSidebarOpened: isSidebarOpened( state ), + isGeneralSidebarEditorOpened: isGeneralSidebarPanelOpened( state, 'editor' ), panel: getActivePanel( state ), } ), ( dispatch ) => ( { diff --git a/editor/components/plugins-panel/index.js b/editor/components/plugins-panel/index.js index 75eb568a89c41a..c50e115c79e6e7 100644 --- a/editor/components/plugins-panel/index.js +++ b/editor/components/plugins-panel/index.js @@ -9,13 +9,14 @@ import { connect } from 'react-redux'; import { __, sprintf } from '@wordpress/i18n'; import { compose } from '@wordpress/element'; import { Panel, PanelBody, IconButton, withFocusReturn } from '@wordpress/components'; -import { getActivePlugin } from '../../store/selectors'; /** * Internal Dependencies */ import './style.scss'; import { getSidebar } from '../../api/sidebar'; +import { getActivePlugin } from '../../store/selectors'; +import { closeGeneralSidebar } from '../../store/actions'; /** * Returns the sidebar that should be rendered in the sidebar registered by @@ -67,5 +68,7 @@ export default connect( return { plugin: getActivePlugin( state ), }; + }, { + onClose: closeGeneralSidebar, } )( withFocusReturn( PluginsPanel ) ); diff --git a/editor/edit-post/header/index.js b/editor/edit-post/header/index.js index e4082ad2f2111e..a3cf0930aed4d1 100644 --- a/editor/edit-post/header/index.js +++ b/editor/edit-post/header/index.js @@ -20,10 +20,18 @@ import { } from '../../components'; import EllipsisMenu from './ellipsis-menu'; import HeaderToolbar from './header-toolbar'; -import { isSidebarOpened } from '../../store/selectors'; -import { toggleSidebar } from '../../store/actions'; +import { + getOpenedGeneralSidebar, + isPublishSidebarOpened, +} from '../../store/selectors'; +import { + openGeneralSidebar, + closeGeneralSidebar, + togglePublishSidebar +} from '../../store/actions'; -function Header( { onToggleSidebar, isDefaultSidebarOpened, isPublishSidebarOpened } ) { +function Header( { isGeneralSidebarOpened, onOpenGeneralSidebar, onCloseGeneralSidebar, onTogglePublishSidebar } ) { + const toggleGeneralSidebar = isGeneralSidebarOpened ? onCloseGeneralSidebar : onOpenGeneralSidebar; return (
onToggleSidebar( 'publish' ) } + onToggle={ onTogglePublishSidebar } /> onToggleSidebar() } - isToggled={ isDefaultSidebarOpened } + onClick={ toggleGeneralSidebar } + isToggled={ isGeneralSidebarOpened } label={ __( 'Settings' ) } - aria-expanded={ isDefaultSidebarOpened } + aria-expanded={ isGeneralSidebarOpened } />
@@ -56,10 +64,12 @@ function Header( { onToggleSidebar, isDefaultSidebarOpened, isPublishSidebarOpen export default connect( ( state ) => ( { - isDefaultSidebarOpened: isSidebarOpened( state ), - isPublishSidebarOpened: isSidebarOpened( state, 'publish' ), + isGeneralSidebarOpened: !! getOpenedGeneralSidebar( state ), + isPublishSidebarOpened: isPublishSidebarOpened( state ), } ), { - onToggleSidebar: toggleSidebar, - } + onOpenGeneralSidebar: () => openGeneralSidebar( 'editor' ), + onCloseGeneralSidebar: closeGeneralSidebar, + onTogglePublishSidebar: togglePublishSidebar, + }, )( Header ); diff --git a/editor/edit-post/header/plugins/index.js b/editor/edit-post/header/plugins/index.js index 2c90cb0d6bd245..cd761735343f6d 100644 --- a/editor/edit-post/header/plugins/index.js +++ b/editor/edit-post/header/plugins/index.js @@ -15,7 +15,7 @@ import { MenuItemsGroup } from '@wordpress/components'; */ import { getSidebars, activateSidebar } from '../../../api/sidebar'; import { getActivePanel, hasOpenSidebar } from '../../../store/selectors'; -import { toggleSidebar } from '../../../store/actions'; +import { openGeneralSidebar } from '../../../store/actions'; /** * Renders a list of plugins that will activate different UI elements. @@ -82,7 +82,7 @@ export default connect( ownProps.onToggle( value ); }, onTogglePluginsSidebar: () => { - dispatch( toggleSidebar( 'plugins' ) ); + dispatch( openGeneralSidebar( 'plugins' ) ); }, }; } diff --git a/editor/edit-post/layout/index.js b/editor/edit-post/layout/index.js index cc9bb5f2e73a82..831f1bd997bda8 100644 --- a/editor/edit-post/layout/index.js +++ b/editor/edit-post/layout/index.js @@ -26,31 +26,44 @@ import { UnsavedChangesWarning, EditorNotices, PostPublishPanel, - PluginsPanel + PluginsPanel, } from '../../components'; import { getEditorMode, hasOpenSidebar, - isSidebarOpened, isFeatureActive, + getOpenedGeneralSidebar, + isPublishSidebarOpened, } from '../../store/selectors'; -import { toggleSidebar } from '../../store/actions'; +import { + closeGeneralSidebar, + closePublishSidebar +} from '../../store/actions'; + +function GeneralSidebar( { openedGeneralSidebar } ) { + switch( openedGeneralSidebar ) { + case 'editor': + return ; + case 'plugins': + return ; + default: + return null; + } +} function Layout( { mode, layoutHasOpenSidebar, - isDefaultSidebarOpened, - isPublishSidebarOpened, - isPluginsSidebarOpened, + publishSidebarOpen, + openedGeneralSidebar, hasFixedToolbar, - onToggleSidebar, + onCloseGeneralSidebar, + onClosePublishSidebar, } ) { const className = classnames( 'editor-layout', { 'is-sidebar-opened': layoutHasOpenSidebar, 'has-fixed-toolbar': hasFixedToolbar, } ); - const closePublishPanel = () => onToggleSidebar( 'publish', false ); - const closePluginsPanel = () => onToggleSidebar( 'plugins', false ); return (
@@ -72,9 +85,12 @@ function Layout( {
- { isDefaultSidebarOpened && } - { isPublishSidebarOpened && } - { isPluginsSidebarOpened && } + { publishSidebarOpen && } + { + openedGeneralSidebar !== null && + } ); @@ -84,10 +100,12 @@ export default connect( ( state ) => ( { mode: getEditorMode( state ), layoutHasOpenSidebar: hasOpenSidebar( state ), - isDefaultSidebarOpened: isSidebarOpened( state ), - isPublishSidebarOpened: isSidebarOpened( state, 'publish' ), - isPluginsSidebarOpened: isSidebarOpened( state, 'plugins' ), + openedGeneralSidebar: getOpenedGeneralSidebar( state ), + publishSidebarOpen: isPublishSidebarOpened( state ), hasFixedToolbar: isFeatureActive( state, 'fixedToolbar' ), } ), - { onToggleSidebar: toggleSidebar } + { + onCloseGeneralSidebar: closeGeneralSidebar, + onClosePublishSidebar: closePublishSidebar, + } )( navigateRegions( Layout ) ); diff --git a/editor/edit-post/sidebar/discussion-panel/index.js b/editor/edit-post/sidebar/discussion-panel/index.js index e516f79ee12a39..7e4a6bd6ed5e08 100644 --- a/editor/edit-post/sidebar/discussion-panel/index.js +++ b/editor/edit-post/sidebar/discussion-panel/index.js @@ -14,7 +14,7 @@ import { PanelBody, PanelRow } from '@wordpress/components'; */ import { PostComments, PostPingbacks, PostTypeSupportCheck } from '../../../components'; import { isEditorSidebarPanelOpened } from '../../../store/selectors'; -import { toggleSidebarPanel } from '../../../store/actions'; +import { toggleGeneralSidebarEditorPanel } from '../../../store/actions'; /** * Module Constants @@ -49,7 +49,7 @@ export default connect( }, { onTogglePanel() { - return toggleSidebarPanel( PANEL_NAME ); + return toggleGeneralSidebarEditorPanel( PANEL_NAME ); }, } )( DiscussionPanel ); diff --git a/editor/edit-post/sidebar/document-outline-panel/index.js b/editor/edit-post/sidebar/document-outline-panel/index.js index 8bfcf901f9702d..28308c979d3249 100644 --- a/editor/edit-post/sidebar/document-outline-panel/index.js +++ b/editor/edit-post/sidebar/document-outline-panel/index.js @@ -14,7 +14,7 @@ import { PanelBody } from '@wordpress/components'; */ import { DocumentOutline, DocumentOutlineCheck } from '../../../components'; import { isEditorSidebarPanelOpened } from '../../../store/selectors'; -import { toggleSidebarPanel } from '../../../store/actions'; +import { toggleGeneralSidebarEditorPanel } from '../../../store/actions'; /** * Module constants @@ -39,7 +39,7 @@ export default connect( }, { onTogglePanel() { - return toggleSidebarPanel( PANEL_NAME ); + return toggleGeneralSidebarEditorPanel( PANEL_NAME ); }, } )( DocumentOutlinePanel ); diff --git a/editor/edit-post/sidebar/featured-image/index.js b/editor/edit-post/sidebar/featured-image/index.js index 2a54fe8892031e..b100a24e68ef20 100644 --- a/editor/edit-post/sidebar/featured-image/index.js +++ b/editor/edit-post/sidebar/featured-image/index.js @@ -14,7 +14,7 @@ import { PanelBody } from '@wordpress/components'; */ import { PostFeaturedImage, PostFeaturedImageCheck } from '../../../components'; import { isEditorSidebarPanelOpened } from '../../../store/selectors'; -import { toggleSidebarPanel } from '../../../store/actions'; +import { toggleGeneralSidebarEditorPanel } from '../../../store/actions'; /** * Module Constants @@ -39,7 +39,7 @@ export default connect( }, { onTogglePanel() { - return toggleSidebarPanel( PANEL_NAME ); + return toggleGeneralSidebarEditorPanel( PANEL_NAME ); }, } )( FeaturedImage ); diff --git a/editor/edit-post/sidebar/header.js b/editor/edit-post/sidebar/header.js index 66019d5b3349fa..57d50c179511ca 100644 --- a/editor/edit-post/sidebar/header.js +++ b/editor/edit-post/sidebar/header.js @@ -13,12 +13,11 @@ import { IconButton } from '@wordpress/components'; * Internal Dependencies */ import { getActivePanel, getSelectedBlockCount } from '../../store/selectors'; -import { toggleSidebar, setActivePanel } from '../../store/actions'; +import { closeGeneralSidebar, setGeneralSidebarActivePanel } from '../../store/actions'; -const SidebarHeader = ( { panel, onSetPanel, onToggleSidebar, count } ) => { +const SidebarHeader = ( { panel, onSetPanel, onCloseSidebar, count } ) => { // Do not display "0 Blocks". count = count === 0 ? 1 : count; - const closeSidebar = () => onToggleSidebar( undefined, false ); return (
@@ -37,7 +36,7 @@ const SidebarHeader = ( { panel, onSetPanel, onToggleSidebar, count } ) => { { sprintf( _n( 'Block', '%d Blocks', count ), count ) } @@ -51,7 +50,7 @@ export default connect( count: getSelectedBlockCount( state ), } ), { - onSetPanel: setActivePanel, - onToggleSidebar: toggleSidebar, + onSetPanel: setGeneralSidebarActivePanel.bind( null, 'editor' ), + onCloseSidebar: closeGeneralSidebar, } )( SidebarHeader ); diff --git a/editor/edit-post/sidebar/page-attributes/index.js b/editor/edit-post/sidebar/page-attributes/index.js index f7f1cf62b5c3a9..f96115798fea5e 100644 --- a/editor/edit-post/sidebar/page-attributes/index.js +++ b/editor/edit-post/sidebar/page-attributes/index.js @@ -13,7 +13,7 @@ import { PanelBody, PanelRow } from '@wordpress/components'; * Internal dependencies */ import { PageAttributesCheck, PageAttributesOrder, PageAttributesParent } from '../../../components'; -import { toggleSidebarPanel } from '../../../store/actions'; +import { toggleGeneralSidebarEditorPanel } from '../../../store/actions'; import { isEditorSidebarPanelOpened } from '../../../store/selectors'; /** @@ -46,7 +46,7 @@ export default connect( }, { onTogglePanel() { - return toggleSidebarPanel( PANEL_NAME ); + return toggleGeneralSidebarEditorPanel( PANEL_NAME ); }, } )( PageAttributes ); diff --git a/editor/edit-post/sidebar/post-excerpt/index.js b/editor/edit-post/sidebar/post-excerpt/index.js index ea1f395989079c..a4a083ca4eb927 100644 --- a/editor/edit-post/sidebar/post-excerpt/index.js +++ b/editor/edit-post/sidebar/post-excerpt/index.js @@ -14,7 +14,7 @@ import { PanelBody } from '@wordpress/components'; */ import { PostExcerpt as PostExcerptForm, PostExcerptCheck } from '../../../components'; import { isEditorSidebarPanelOpened } from '../../../store/selectors'; -import { toggleSidebarPanel } from '../../../store/actions'; +import { toggleGeneralSidebarEditorPanel } from '../../../store/actions'; /** * Module Constants @@ -39,7 +39,7 @@ export default connect( }, { onTogglePanel() { - return toggleSidebarPanel( PANEL_NAME ); + return toggleGeneralSidebarEditorPanel( PANEL_NAME ); }, } )( PostExcerpt ); diff --git a/editor/edit-post/sidebar/post-status/index.js b/editor/edit-post/sidebar/post-status/index.js index 2c6579f8317966..d54f8950190b72 100644 --- a/editor/edit-post/sidebar/post-status/index.js +++ b/editor/edit-post/sidebar/post-status/index.js @@ -22,7 +22,7 @@ import PostPendingStatus from '../post-pending-status'; import { isEditorSidebarPanelOpened, } from '../../../store/selectors'; -import { toggleSidebarPanel } from '../../../store/actions'; +import { toggleGeneralSidebarEditorPanel } from '../../../store/actions'; /** * Module Constants @@ -49,7 +49,7 @@ export default connect( } ), { onTogglePanel() { - return toggleSidebarPanel( PANEL_NAME ); + return toggleGeneralSidebarEditorPanel( PANEL_NAME ); }, } )( PostStatus ); diff --git a/editor/edit-post/sidebar/post-taxonomies/index.js b/editor/edit-post/sidebar/post-taxonomies/index.js index fe34c27ce207b4..9a28d40b79b4e4 100644 --- a/editor/edit-post/sidebar/post-taxonomies/index.js +++ b/editor/edit-post/sidebar/post-taxonomies/index.js @@ -14,7 +14,7 @@ import { PanelBody } from '@wordpress/components'; */ import { PostTaxonomies as PostTaxonomiesForm, PostTaxonomiesCheck } from '../../../components'; import { isEditorSidebarPanelOpened } from '../../../store/selectors'; -import { toggleSidebarPanel } from '../../../store/actions'; +import { toggleGeneralSidebarEditorPanel } from '../../../store/actions'; /** * Module Constants @@ -43,7 +43,7 @@ export default connect( }, { onTogglePanel() { - return toggleSidebarPanel( PANEL_NAME ); + return toggleGeneralSidebarEditorPanel( PANEL_NAME ); }, } )( PostTaxonomies ); diff --git a/editor/store/actions.js b/editor/store/actions.js index 614c49ac6d259c..84dc8fabf6d4e9 100644 --- a/editor/store/actions.js +++ b/editor/store/actions.js @@ -349,39 +349,41 @@ export function toggleGeneralSidebar( sidebar, force ) { /** * Returns an action object used in signalling that the user switched the active sidebar tab panel. * - * @param {String} panel The panel name + * @param {String} sidebar Sidebar name + * @param {String} panel Panel name * @return {Object} Action object */ -export function setGeneralSidebarActivePanel( panel ) { +export function setGeneralSidebarActivePanel( sidebar, panel ) { return { type: 'SET_GENERAL_SIDEBAR_ACTIVE_PANEL', + sidebar, panel, }; } /** - * Returns an action object usid in signalling that the user switched the active plugin. - * - * @param {String} panel The plugin name - * @return {Object} Action object + * Returns an action object used in signalling that the user opened a sidebar. + * + * @param {string} sidebar Sidebar to open. + * @param {string} [panel = null] Panel to open in the sidebar. + * @returns {Object} Action object. */ -export function setPluginSidebarPanel( panel ) { +export function openGeneralSidebar( sidebar, panel = null ) { return { - type: 'SET_PLUGIN_SIDEBAR_PANEL', + type: 'OPEN_GENERAL_SIDEBAR', + sidebar, panel, }; } /** - * Returns an action object used in signalling that the user toggled a sidebar panel + * Returns an action object signalling that the user closed the sidebar. * - * @param {String} panel The panel name - * @return {Object} Action object + * @returns {Object} Action object. */ -export function setEditorSidebarPanel( panel ) { +export function closeGeneralSidebar() { return { - type: 'SET_EDITOR_SIDEBAR_PANEL', - panel, + type: 'CLOSE_GENERAL_SIDEBAR', }; } @@ -397,7 +399,7 @@ export function openPublishSidebar() { } /** - * Returns an action object used in signalling that the user toggled the publish sidebar + * Returns an action object used in signalling that the user closed the publish sidebar * * @return {Object} Action object */ @@ -407,6 +409,43 @@ export function closePublishSidebar() { }; } +/** + * Returns an action object used in signalling that the user toggles the publish sidebar + * + * @return {Object} Action object + */ +export function togglePublishSidebar() { + return { + type: 'TOGGLE_PUBLISH_SIDEBAR', + }; +} + +/** + * Returns an action object used in signalling that use toggled a panel in the editor. + * + * @param {string} panel The panel to toggle. + * @return {Object} Action object. + */ +export function toggleGeneralSidebarEditorPanel( panel ) { + return { + type: 'TOGGLE_GENERAL_SIDEBAR_EDITOR_PANEL', + panel, + }; +} + +/** + * Returns an action object used in signalling that the view mode preference should be set. + * + * @param {string} viewMode The view mode (desktop or mobile). + * @return {Object} Action object. + */ +export function setViewMode( viewMode ) { + return { + type: 'SET_VIEW_MODE', + viewMode, + }; +} + /** * Returns an action object used to create a notice * diff --git a/editor/store/defaults.js b/editor/store/defaults.js index b6f3435d3848b8..a52f8d4df0373a 100644 --- a/editor/store/defaults.js +++ b/editor/store/defaults.js @@ -1,8 +1,11 @@ export const PREFERENCES_DEFAULTS = { editorMode: 'visual', viewMode: 'desktop', // 'desktop' | 'mobile' - generalSidebarActivePanel: null, // null | 'editor' | 'plugins' - activePlugin: null, + activeGeneralSidebar: null, // null | 'editor' | 'plugins' + activeSidebarPanel: { // The keys in this object should match activeSidebarPanel values + editor: null, // 'document' | 'block' + plugins: null, // pluginId + }, panels: { 'post-status': true }, recentlyUsedBlocks: [], blockUsage: {}, diff --git a/editor/store/selectors.js b/editor/store/selectors.js index 79b5fd0c98f361..a14a4dfc938e44 100644 --- a/editor/store/selectors.js +++ b/editor/store/selectors.js @@ -131,17 +131,42 @@ export function getPreference( state, preferenceKey, defaultValue ) { } /** - * Returns true if the sidebar is open, or false otherwise. + * Returns the opened general sidebar and null if the sidebar is closed. + * + * @param {Object} state Global application state. + * @returns {String} The opened general sidebar panel. + */ +export function getOpenedGeneralSidebar( state ) { + return getPreference( state, 'activeGeneralSidebar' ); +} + +/** + * Returns true if the panel is open in the currently opened sidebar. * * @param {Object} state Global application state - * @param {string} sidebar Sidebar name (leave undefined for the default sidebar) - * @return {Boolean} Whether the given sidebar is open + * @param {string} panel Sidebar name (leave undefined for the default sidebar) + * @return {Boolean} Whether the given general sidebar panel is open */ -export function isSidebarOpened( state, sidebar ) { - const generalSidebarOpen = getPreference( state, 'generalSidebarActivePanel' ) !== null; - const publishSidebarOpen = state.publishSidebarActive; +export function isGeneralSidebarPanelOpened( state, panel ) { + const activeGeneralSidebar = getPreference( state, 'activeGeneralSidebar' ); - return generalSidebarOpen || publishSidebarOpen; + if ( activeGeneralSidebar === null ) { + return false; + } + + const activeSidebarPanel = getPreference( state, 'activeSidebarPanel' ); + + return activeSidebarPanel[ activeSidebarPanel ] === panel; +} + +/** + * Returns true if the publish sidebar is opened. + * + * @param {Object} state Global application state + * @returns {bool} Whether the publish sidebar is open. + */ +export function isPublishSidebarOpened( state ) { + return state.publishSidebarActive; } /** @@ -151,7 +176,7 @@ export function isSidebarOpened( state, sidebar ) { * @return {Boolean} Whether sidebar is open */ export function hasOpenSidebar( state ) { - const generalSidebarOpen = getPreference( state, 'generalSidebarActivePanel' ) !== null; + const generalSidebarOpen = getPreference( state, 'activeGeneralSidebar' ) !== null; const publishSidebarOpen = state.publishSidebarActive; return generalSidebarOpen || publishSidebarOpen; @@ -161,7 +186,7 @@ export function hasOpenSidebar( state ) { * Returns true if the editor sidebar panel is open, or false otherwise. * * @param {Object} state Global application state - * @param {STring} panel Sidebar panel name + * @param {String} panel Sidebar panel name * @return {Boolean} Whether sidebar is open */ export function isEditorSidebarPanelOpened( state, panel ) { diff --git a/editor/utils/mobile/index.js b/editor/utils/mobile/index.js index 1a725ff78007ef..c340bd1e50cd13 100644 --- a/editor/utils/mobile/index.js +++ b/editor/utils/mobile/index.js @@ -2,7 +2,7 @@ * Internal dependencies */ import { isMobile } from '../../store/selectors'; -import { toggleSidebar } from '../../store/actions'; +import { setViewMode } from '../../store/actions'; /** * Disables isSidebarOpened on rehydrate payload if the user is on a mobile screen size. @@ -28,7 +28,7 @@ export const mobileMiddleware = ( { getState } ) => next => action => { } ); } if ( action.type === 'TOGGLE_SIDEBAR' && action.sidebar === undefined ) { - return next( toggleSidebar( isMobile( getState() ) ? 'mobile' : 'desktop', action.force ) ); + return next( setViewMode( isMobile( getState() ) ? 'mobile' : 'desktop' ) ); } return next( action ); }; From b3aa610184a6fc55fbbd73f8c69864e319ee8b43 Mon Sep 17 00:00:00 2001 From: Alexander Botteram Date: Wed, 10 Jan 2018 16:38:49 +0100 Subject: [PATCH 10/26] finished implementing new actions, reducers and selectors --- editor/api/sidebar.js | 11 +++++----- editor/components/plugins-panel/index.js | 27 +++++++++++++++--------- editor/edit-post/header/index.js | 19 +++++++++-------- editor/edit-post/layout/index.js | 4 ++-- editor/store/actions.js | 17 +-------------- editor/store/reducer.js | 27 +++++++++++++++++++----- editor/store/selectors.js | 4 ++-- 7 files changed, 60 insertions(+), 49 deletions(-) diff --git a/editor/api/sidebar.js b/editor/api/sidebar.js index 79b69eb70906e3..5891874d9483a5 100644 --- a/editor/api/sidebar.js +++ b/editor/api/sidebar.js @@ -75,17 +75,17 @@ export function registerSidebar( name, settings ) { /** * Retrieves the sidebar settings object. * - * @param {string} name The name of the sidebar to retrieve. + * @param {string} pluginId The name of the sidebar to retrieve. * * @returns {Object} The settings object of the sidebar. Or false if the * sidebar doesn't exist. */ -export function getSidebar( name ) { - if ( ! sidebars.hasOwnProperty( name ) ) { +export function getSidebar( pluginId ) { + if ( ! sidebars.hasOwnProperty( pluginId ) ) { return null; } - return sidebars[ name ]; + return sidebars[ pluginId ]; } /** @@ -100,7 +100,8 @@ export function getSidebars() { /** * Activates the gives sidebar. * - * @param {string} name The name of the sidebar to activate. + * @param {string} pluginId The name of the sidebar to activate. + * @return {void} */ export function activateSidebar( pluginId ) { store.dispatch( setGeneralSidebarActivePanel( 'plugins', pluginId ) ); diff --git a/editor/components/plugins-panel/index.js b/editor/components/plugins-panel/index.js index c50e115c79e6e7..6c3917fe1f8b39 100644 --- a/editor/components/plugins-panel/index.js +++ b/editor/components/plugins-panel/index.js @@ -30,26 +30,33 @@ function getPluginSidebar( plugin ) { const pluginSidebar = getSidebar( plugin ); if ( ! pluginSidebar ) { - return () => { - return - - { sprintf( __( 'No matching plugin sidebar found for plugin "%s"' ), plugin ) } - - ; + return { + title: __( 'Error: Unregistered plugin requested.' ), + render: () => { + return + + { sprintf( __( 'No matching plugin sidebar found for plugin "%s"' ), plugin ) } + + ; + }, }; } - - return pluginSidebar.render; + return pluginSidebar; } function PluginsPanel( { onClose, plugin } ) { + const { + title, + render, + } = getPluginSidebar( plugin ); return ( -
+

{ title }

- { getPluginSidebar( plugin )() } + { render() }
); diff --git a/editor/edit-post/header/index.js b/editor/edit-post/header/index.js index a3cf0930aed4d1..c24ae9484be723 100644 --- a/editor/edit-post/header/index.js +++ b/editor/edit-post/header/index.js @@ -27,11 +27,12 @@ import { import { openGeneralSidebar, closeGeneralSidebar, - togglePublishSidebar + togglePublishSidebar, } from '../../store/actions'; -function Header( { isGeneralSidebarOpened, onOpenGeneralSidebar, onCloseGeneralSidebar, onTogglePublishSidebar } ) { - const toggleGeneralSidebar = isGeneralSidebarOpened ? onCloseGeneralSidebar : onOpenGeneralSidebar; +function Header( { isGeneralSidebarEditorOpen, isPublishSidebarOpen, onOpenGeneralSidebar, onCloseGeneralSidebar, onTogglePublishSidebar } ) { + const toggleGeneralSidebar = isGeneralSidebarEditorOpen ? onCloseGeneralSidebar : onOpenGeneralSidebar; + return (
- { ! isPublishSidebarOpened && ( + { ! isPublishSidebarOpen && (
@@ -64,8 +65,8 @@ function Header( { isGeneralSidebarOpened, onOpenGeneralSidebar, onCloseGeneralS export default connect( ( state ) => ( { - isGeneralSidebarOpened: !! getOpenedGeneralSidebar( state ), - isPublishSidebarOpened: isPublishSidebarOpened( state ), + isGeneralSidebarEditorOpen: getOpenedGeneralSidebar( state ) === 'editor', + isPublishSidebarOpen: isPublishSidebarOpened( state ), } ), { onOpenGeneralSidebar: () => openGeneralSidebar( 'editor' ), diff --git a/editor/edit-post/layout/index.js b/editor/edit-post/layout/index.js index 831f1bd997bda8..9f301d1ed64222 100644 --- a/editor/edit-post/layout/index.js +++ b/editor/edit-post/layout/index.js @@ -41,14 +41,14 @@ import { } from '../../store/actions'; function GeneralSidebar( { openedGeneralSidebar } ) { - switch( openedGeneralSidebar ) { + switch ( openedGeneralSidebar ) { case 'editor': return ; case 'plugins': return ; default: - return null; } + return null; } function Layout( { diff --git a/editor/store/actions.js b/editor/store/actions.js index 84dc8fabf6d4e9..10068161ba19ca 100644 --- a/editor/store/actions.js +++ b/editor/store/actions.js @@ -331,21 +331,6 @@ export function stopTyping() { }; } -/** - * Returns an action object used in signalling that the user toggled the general sidebar - * - * @param {String} sidebar Name of the sidebar to toggle (editor or plugins) - * @param {Boolean?} force Force a sidebar state - * @return {Object} Action object - */ -export function toggleGeneralSidebar( sidebar, force ) { - return { - type: 'TOGGLE_GENERAL_SIDEBAR', - sidebar, - force, - }; -} - /** * Returns an action object used in signalling that the user switched the active sidebar tab panel. * @@ -365,7 +350,7 @@ export function setGeneralSidebarActivePanel( sidebar, panel ) { * Returns an action object used in signalling that the user opened a sidebar. * * @param {string} sidebar Sidebar to open. - * @param {string} [panel = null] Panel to open in the sidebar. + * @param {string} [panel = null] Panel to open in the sidebar. Null if unchanged. * @returns {Object} Action object. */ export function openGeneralSidebar( sidebar, panel = null ) { diff --git a/editor/store/reducer.js b/editor/store/reducer.js index 556f3e00257a6b..df1624780feaf5 100644 --- a/editor/store/reducer.js +++ b/editor/store/reducer.js @@ -504,15 +504,30 @@ export function blockInsertionPoint( state = {}, action ) { */ export function preferences( state = PREFERENCES_DEFAULTS, action ) { switch ( action.type ) { - case 'TOGGLE_SIDEBAR': + case 'OPEN_GENERAL_SIDEBAR': + const activeSidebarPanel = action.panel ? action.panel : state.activeSidebarPanel[ action.sidebar ]; return { ...state, - sidebars: { - ...state.sidebars, - [ action.sidebar ]: action.force !== undefined ? action.force : ! state.sidebars[ action.sidebar ], + activeGeneralSidebar: action.sidebar, + activeSidebarPanel: { + ...state.activeSidebarPanel, + [ action.sidebar ]: activeSidebarPanel, }, }; - case 'TOGGLE_SIDEBAR_PANEL': + case 'SET_GENERAL_SIDEBAR_ACTIVE_PANEL': + return { + ...state, + activeSidebarPanel: { + ...state.activeSidebarPanel, + [ action.sidebar ]: action.panel, + }, + }; + case 'CLOSE_GENERAL_SIDEBAR': + return { + ...state, + activeGeneralSidebar: null, + }; + case 'TOGGLE_GENERAL_SIDEBAR_EDITOR_PANEL': return { ...state, panels: { @@ -584,6 +599,8 @@ export function publishSidebarActive( state = false, action ) { return true; case 'CLOSE_PUBLISH_SIDEBAR': return false; + case 'TOGGLE_PUBLISH_SIDEBAR': + return ! state; } return state; } diff --git a/editor/store/selectors.js b/editor/store/selectors.js index a14a4dfc938e44..3de1d514f78ea1 100644 --- a/editor/store/selectors.js +++ b/editor/store/selectors.js @@ -35,7 +35,7 @@ const MAX_FREQUENT_BLOCKS = 3; * @return {String} Editing mode */ export function getEditorMode( state ) { - return getPreference( state, 'mode', 'visual' ); + return getPreference( state, 'editorMode', 'visual' ); } /** @@ -104,7 +104,7 @@ export function getActivePanel( state ) { * @return {String} Active plugin sidebar plugin */ export function getActivePlugin( state ) { - return getPreference( state, 'activeplugin', null ); + return getPreference( state, 'activeSidebarPanel', {} ).plugins; } /** From c7b36b3c8c9961ca15d1ec1839d81b4774c69e72 Mon Sep 17 00:00:00 2001 From: Alexander Botteram Date: Wed, 10 Jan 2018 18:03:09 +0100 Subject: [PATCH 11/26] Fixed last build errors --- .../block-inspector-button.js | 29 +++++++------------ editor/edit-post/header/plugins/index.js | 10 +++---- editor/edit-post/sidebar/header.js | 4 +-- editor/edit-post/sidebar/index.js | 6 ++-- editor/store/selectors.js | 4 +-- 5 files changed, 21 insertions(+), 32 deletions(-) diff --git a/editor/components/block-settings-menu/block-inspector-button.js b/editor/components/block-settings-menu/block-inspector-button.js index af3cbcd689221c..f1d207be0e9d39 100644 --- a/editor/components/block-settings-menu/block-inspector-button.js +++ b/editor/components/block-settings-menu/block-inspector-button.js @@ -13,37 +13,31 @@ import { IconButton, withSpokenMessages } from '@wordpress/components'; /** * Internal dependencies */ -import { getActivePanel, isGeneralSidebarPanelOpened } from '../../store/selectors'; -import { toggleSidebar, setActivePanel } from '../../store/actions'; +import { getActiveEditorPanel, isGeneralSidebarPanelOpened } from '../../store/selectors'; +import { openGeneralSidebar } from '../../store/actions'; export function BlockInspectorButton( { - isDefaultSidebarOpened, + isGeneralSidebarEditorOpened, + onOpenGeneralSidebarEditor, panel, - onOpenSidebar, - onShowInspector, onClick = noop, small = false, speak, } ) { - const toggleInspector = () => { - onShowInspector(); - onOpenSidebar( undefined, true ); - }; - const speakMessage = () => { - if ( ! isDefaultSidebarOpened || ( isDefaultSidebarOpened && panel !== 'block' ) ) { + if ( ! isGeneralSidebarEditorOpened || ( isGeneralSidebarEditorOpened && panel !== 'block' ) ) { speak( __( 'Additional settings are now available in the Editor advanced settings sidebar' ) ); } else { speak( __( 'Advanced settings closed' ) ); } }; - const label = ( isDefaultSidebarOpened && panel === 'block' ) ? __( 'Hide Advanced Settings' ) : __( 'Show Advanced Settings' ); + const label = ( isGeneralSidebarEditorOpened && panel === 'block' ) ? __( 'Hide Advanced Settings' ) : __( 'Show Advanced Settings' ); return ( { ! small && label } @@ -54,14 +48,11 @@ export function BlockInspectorButton( { export default connect( ( state ) => ( { isGeneralSidebarEditorOpened: isGeneralSidebarPanelOpened( state, 'editor' ), - panel: getActivePanel( state ), + panel: getActiveEditorPanel( state ), } ), ( dispatch ) => ( { - onShowInspector() { - dispatch( setActivePanel( 'block' ) ); - }, - onOpenSidebar() { - dispatch( toggleSidebar( undefined, true ) ); + onOpenGeneralSidebarEditor() { + dispatch( openGeneralSidebar( 'editor', 'block' ) ); }, } ) )( withSpokenMessages( BlockInspectorButton ) ); diff --git a/editor/edit-post/header/plugins/index.js b/editor/edit-post/header/plugins/index.js index cd761735343f6d..e6aa7429acc75d 100644 --- a/editor/edit-post/header/plugins/index.js +++ b/editor/edit-post/header/plugins/index.js @@ -14,7 +14,7 @@ import { MenuItemsGroup } from '@wordpress/components'; * Internal dependencies */ import { getSidebars, activateSidebar } from '../../../api/sidebar'; -import { getActivePanel, hasOpenSidebar } from '../../../store/selectors'; +import { getActiveEditorPanel, hasOpenSidebar } from '../../../store/selectors'; import { openGeneralSidebar } from '../../../store/actions'; /** @@ -30,12 +30,12 @@ import { openGeneralSidebar } from '../../../store/actions'; * * @returns {Object} The rendered list of menu items. */ -function Plugins( { activePanel, onSwitch, isSidebarOpen, onTogglePluginsSidebar } ) { +function Plugins( { activeEditorPanel, onSwitch, isSidebarOpen, onTogglePluginsSidebar } ) { const sidebars = getSidebars(); // This makes sure no check mark is before a plugin if the sidebar is closed. if ( ! isSidebarOpen ) { - activePanel = ''; + activeEditorPanel = ''; } /** @@ -62,7 +62,7 @@ function Plugins( { activePanel, onSwitch, isSidebarOpen, onTogglePluginsSidebar ); @@ -71,7 +71,7 @@ function Plugins( { activePanel, onSwitch, isSidebarOpen, onTogglePluginsSidebar export default connect( ( state ) => { return { - activePanel: getActivePanel( state ), + activeEditorPanel: getActiveEditorPanel( state ), isSidebarOpen: hasOpenSidebar( state ), }; }, diff --git a/editor/edit-post/sidebar/header.js b/editor/edit-post/sidebar/header.js index 57d50c179511ca..be60f914702f81 100644 --- a/editor/edit-post/sidebar/header.js +++ b/editor/edit-post/sidebar/header.js @@ -12,7 +12,7 @@ import { IconButton } from '@wordpress/components'; /** * Internal Dependencies */ -import { getActivePanel, getSelectedBlockCount } from '../../store/selectors'; +import { getActiveEditorPanel, getSelectedBlockCount } from '../../store/selectors'; import { closeGeneralSidebar, setGeneralSidebarActivePanel } from '../../store/actions'; const SidebarHeader = ( { panel, onSetPanel, onCloseSidebar, count } ) => { @@ -46,7 +46,7 @@ const SidebarHeader = ( { panel, onSetPanel, onCloseSidebar, count } ) => { export default connect( ( state ) => ( { - panel: getActivePanel( state ), + panel: getActiveEditorPanel( state ), count: getSelectedBlockCount( state ), } ), { diff --git a/editor/edit-post/sidebar/index.js b/editor/edit-post/sidebar/index.js index 1ef23a22973613..b66d04394ee29b 100644 --- a/editor/edit-post/sidebar/index.js +++ b/editor/edit-post/sidebar/index.js @@ -16,9 +16,7 @@ import './style.scss'; import PostSettings from './post-settings'; import BlockInspectorPanel from './block-inspector-panel'; import Header from './header'; -import { getSidebar } from '../../api/sidebar'; - -import { getActivePanel } from '../../store/selectors'; +import { getActiveEditorPanel } from '../../store/selectors'; /** * Returns the panel that should be rendered in the sidebar. @@ -70,7 +68,7 @@ const Sidebar = ( { panel } ) => { export default connect( ( state ) => { return { - panel: getActivePanel( state ), + panel: getActiveEditorPanel( state ), }; } )( withFocusReturn( Sidebar ) ); diff --git a/editor/store/selectors.js b/editor/store/selectors.js index 3de1d514f78ea1..7a89ddf47d5e59 100644 --- a/editor/store/selectors.js +++ b/editor/store/selectors.js @@ -93,8 +93,8 @@ export const isMetaBoxStateDirty = ( state ) => getDirtyMetaBoxes( state ).lengt * @param {Object} state Global application state * @return {String} Active sidebar panel */ -export function getActivePanel( state ) { - return state.panel; +export function getActiveEditorPanel( state ) { + return getPreference( state, 'activeSidebarPanel', {} ).editor; } /** From 693e5a819344e95d72436669d0839341efd216d5 Mon Sep 17 00:00:00 2001 From: IreneStr Date: Fri, 12 Jan 2018 16:00:44 +0100 Subject: [PATCH 12/26] Add renderSidebar function --- editor/api/index.js | 2 + editor/api/sidebar.js | 40 ++++++--- editor/components/plugins-panel/index.js | 2 +- .../edit-post/header/ellipsis-menu/index.js | 3 - editor/edit-post/header/plugins/index.js | 89 ------------------- editor/edit-post/layout/index.js | 2 +- editor/index.js | 1 + 7 files changed, 34 insertions(+), 105 deletions(-) delete mode 100644 editor/edit-post/header/plugins/index.js diff --git a/editor/api/index.js b/editor/api/index.js index 1252f8010ec3f4..aa4dd1e7da70c2 100644 --- a/editor/api/index.js +++ b/editor/api/index.js @@ -1,4 +1,6 @@ export { registerSidebar, + renderSidebar, activateSidebar, + getSidebar } from './sidebar'; diff --git a/editor/api/sidebar.js b/editor/api/sidebar.js index 5891874d9483a5..7b757a87c51cc5 100644 --- a/editor/api/sidebar.js +++ b/editor/api/sidebar.js @@ -11,7 +11,7 @@ import { applyFilters } from '@wordpress/hooks'; const sidebars = {}; /** - * Registers a sidebar with the editor. + * Registers a sidebar to the editor. * * A button will be shown in the settings menu to open the sidebar. The sidebar * can be manually opened by calling the `activateSidebar` function. @@ -75,30 +75,48 @@ export function registerSidebar( name, settings ) { /** * Retrieves the sidebar settings object. * - * @param {string} pluginId The name of the sidebar to retrieve. + * @param {string} name The name of the sidebar to retrieve. * * @returns {Object} The settings object of the sidebar. Or false if the * sidebar doesn't exist. */ -export function getSidebar( pluginId ) { - if ( ! sidebars.hasOwnProperty( pluginId ) ) { +export function getSidebar( name ) { + if ( ! sidebars.hasOwnProperty( name ) ) { return null; } - - return sidebars[ pluginId ]; + return sidebars[ name ]; } /** - * Retrieves all sidebars that are registered. + * Renders a plugin sidebar. + * + * @param {string} name The name of the plugin sidebar. + * @param {Object} render The render function for the plugin sidebar. * - * @returns {Object} Registered sidebars. + * @returns {void} */ -export function getSidebars() { - return sidebars; +export function renderSidebar( name ) { + if ( ! sidebars[ name ] ) { + console.error( + 'Sidebar "' + name + '" is not registered yet.' + ); + } + + let settings = sidebars[ name ].settings; + + /*if ( ! settings || ! isFunction( settings.renderFunction ) ) { + console.error( + 'The "renderFunction" property must be specified and must be a valid function.' + ); + return null; + }*/ + + let render = getSidebar( name ).render; + render(); } /** - * Activates the gives sidebar. + * Activates the given sidebar. * * @param {string} pluginId The name of the sidebar to activate. * @return {void} diff --git a/editor/components/plugins-panel/index.js b/editor/components/plugins-panel/index.js index 6c3917fe1f8b39..fd9ab149851e1b 100644 --- a/editor/components/plugins-panel/index.js +++ b/editor/components/plugins-panel/index.js @@ -26,7 +26,7 @@ import { closeGeneralSidebar } from '../../store/actions'; * * @returns {Object} The React element to render as a panel. */ -function getPluginSidebar( plugin ) { +export function getPluginSidebar( plugin ) { const pluginSidebar = getSidebar( plugin ); if ( ! pluginSidebar ) { diff --git a/editor/edit-post/header/ellipsis-menu/index.js b/editor/edit-post/header/ellipsis-menu/index.js index 4f7bcae00fc9df..d78f028d0feb61 100644 --- a/editor/edit-post/header/ellipsis-menu/index.js +++ b/editor/edit-post/header/ellipsis-menu/index.js @@ -10,7 +10,6 @@ import { IconButton, Dropdown } from '@wordpress/components'; import './style.scss'; import ModeSwitcher from '../mode-switcher'; import FixedToolbarToggle from '../fixed-toolbar-toggle'; -import Plugins from '../plugins'; const element = (
-
-
) } /> diff --git a/editor/edit-post/header/plugins/index.js b/editor/edit-post/header/plugins/index.js deleted file mode 100644 index e6aa7429acc75d..00000000000000 --- a/editor/edit-post/header/plugins/index.js +++ /dev/null @@ -1,89 +0,0 @@ -/** - * External dependencies - */ -import { map } from 'lodash'; -import { connect } from 'react-redux'; - -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { MenuItemsGroup } from '@wordpress/components'; - -/** - * Internal dependencies - */ -import { getSidebars, activateSidebar } from '../../../api/sidebar'; -import { getActiveEditorPanel, hasOpenSidebar } from '../../../store/selectors'; -import { openGeneralSidebar } from '../../../store/actions'; - -/** - * Renders a list of plugins that will activate different UI elements. - * - * @param {Object} props Props. - * @param {Function} props.onSwitch Function to call when a plugin is - * switched to. - * @param {string} props.activePanel The currently active panel. - * @param {boolean} props.isSidebarOpen Whether a sidebar is currently open. - * @param {Function} props.onToggleSidebar Function to call when the sidebar - * should be toggled. - * - * @returns {Object} The rendered list of menu items. - */ -function Plugins( { activeEditorPanel, onSwitch, isSidebarOpen, onTogglePluginsSidebar } ) { - const sidebars = getSidebars(); - - // This makes sure no check mark is before a plugin if the sidebar is closed. - if ( ! isSidebarOpen ) { - activeEditorPanel = ''; - } - - /** - * Handles the user clicking on one of the plugins in the menu - * - * @param {string} panelToActivate The sidebar panel to activate. - */ - function onSelect( panelToActivate ) { - onSwitch( panelToActivate ); - - if ( ! isSidebarOpen ) { - onTogglePluginsSidebar(); - } - } - - const plugins = map( sidebars, ( sidebar ) => { - return { - value: sidebar.name, - label: sidebar.title, - }; - } ); - - return ( - - ); -} - -export default connect( - ( state ) => { - return { - activeEditorPanel: getActiveEditorPanel( state ), - isSidebarOpen: hasOpenSidebar( state ), - }; - }, - ( dispatch, ownProps ) => { - return { - onSwitch: ( value ) => { - activateSidebar( value ); - ownProps.onToggle( value ); - }, - onTogglePluginsSidebar: () => { - dispatch( openGeneralSidebar( 'plugins' ) ); - }, - }; - } -)( Plugins ); diff --git a/editor/edit-post/layout/index.js b/editor/edit-post/layout/index.js index a4c09c002a43e4..2801d403942ff9 100644 --- a/editor/edit-post/layout/index.js +++ b/editor/edit-post/layout/index.js @@ -63,7 +63,7 @@ function Layout( { } ) { const className = classnames( 'editor-layout', { 'is-sidebar-opened': layoutHasOpenSidebar, - 'has-fixed-toolbar': fixedToolbarActive, + 'has-fixed-toolbar': hasFixedToolbar, } ); return ( diff --git a/editor/index.js b/editor/index.js index 072cc9dc7d86dc..a8c1aecbf71b0c 100644 --- a/editor/index.js +++ b/editor/index.js @@ -20,6 +20,7 @@ import { initializeMetaBoxState } from './store/actions'; export * from './components'; export * from './api'; +export { getPluginSidebar } from './components/plugins-panel/index.js'; import store from './store'; // Registers the state tree // Configure moment globally From 04d6e2b48a180819cfc7b4591c65d2a14675a812 Mon Sep 17 00:00:00 2001 From: IreneStr Date: Wed, 17 Jan 2018 15:26:11 +0100 Subject: [PATCH 13/26] Add renderSidebar function --- editor/api/sidebar.js | 49 +++++++++++------------- editor/components/plugins-panel/index.js | 6 ++- 2 files changed, 27 insertions(+), 28 deletions(-) diff --git a/editor/api/sidebar.js b/editor/api/sidebar.js index 7b757a87c51cc5..ad8401a60e637e 100644 --- a/editor/api/sidebar.js +++ b/editor/api/sidebar.js @@ -5,7 +5,7 @@ import { isFunction } from 'lodash'; /* Internal dependencies */ import store from '../store'; -import { setGeneralSidebarActivePanel } from '../store/actions'; +import { setGeneralSidebarActivePanel, openGeneralSidebar } from '../store/actions'; import { applyFilters } from '@wordpress/hooks'; const sidebars = {}; @@ -75,12 +75,13 @@ export function registerSidebar( name, settings ) { /** * Retrieves the sidebar settings object. * - * @param {string} name The name of the sidebar to retrieve. + * @param {string} name The name of the sidebar to retrieve the settings for. * - * @returns {Object} The settings object of the sidebar. Or false if the + * @returns {Object} The settings object of the sidebar. Or null if the * sidebar doesn't exist. */ -export function getSidebar( name ) { +export function getSidebarSettings( name ) { + console.log("getSidebarSettings", sidebars) if ( ! sidebars.hasOwnProperty( name ) ) { return null; } @@ -91,36 +92,32 @@ export function getSidebar( name ) { * Renders a plugin sidebar. * * @param {string} name The name of the plugin sidebar. - * @param {Object} render The render function for the plugin sidebar. + * @param {Object} settings The settings for this sidebar. + * @param {string} settings.title The name to show in the settings menu. + * @param {Function} settings.render The function that renders the sidebar. * * @returns {void} */ -export function renderSidebar( name ) { - if ( ! sidebars[ name ] ) { - console.error( - 'Sidebar "' + name + '" is not registered yet.' - ); - } - - let settings = sidebars[ name ].settings; - - /*if ( ! settings || ! isFunction( settings.renderFunction ) ) { - console.error( - 'The "renderFunction" property must be specified and must be a valid function.' - ); - return null; - }*/ - - let render = getSidebar( name ).render; - render(); +export function renderSidebar( name, settings ) { + registerSidebar( name, settings ); + activateSidebar( name, settings ); +/* + let render = getSidebarSettings( name ).render; + render();*/ } /** * Activates the given sidebar. * - * @param {string} pluginId The name of the sidebar to activate. + * @param {string} name The name of the sidebar to activate. * @return {void} */ -export function activateSidebar( pluginId ) { - store.dispatch( setGeneralSidebarActivePanel( 'plugins', pluginId ) ); +export function activateSidebar( name ) { + if ( ! sidebars[ name ] ) { + console.error( + 'Sidebar "' + name + '" is not registered yet.' + ); + } + store.dispatch( openGeneralSidebar( 'plugins' ) ); + store.dispatch( setGeneralSidebarActivePanel( 'plugins', name ) ); } diff --git a/editor/components/plugins-panel/index.js b/editor/components/plugins-panel/index.js index fd9ab149851e1b..c874a04cd8f286 100644 --- a/editor/components/plugins-panel/index.js +++ b/editor/components/plugins-panel/index.js @@ -14,7 +14,7 @@ import { Panel, PanelBody, IconButton, withFocusReturn } from '@wordpress/compon * Internal Dependencies */ import './style.scss'; -import { getSidebar } from '../../api/sidebar'; +import { getSidebarSettings } from '../../api/sidebar'; import { getActivePlugin } from '../../store/selectors'; import { closeGeneralSidebar } from '../../store/actions'; @@ -27,7 +27,9 @@ import { closeGeneralSidebar } from '../../store/actions'; * @returns {Object} The React element to render as a panel. */ export function getPluginSidebar( plugin ) { - const pluginSidebar = getSidebar( plugin ); + const pluginSidebar = getSidebarSettings( plugin ); + console.log( "pluginSidebar", pluginSidebar ); + console.log( "plugin", plugin ); if ( ! pluginSidebar ) { return { From aa3c84bb904de2ffa62ff530b71f3ae4b3cb6f62 Mon Sep 17 00:00:00 2001 From: IreneStr Date: Thu, 18 Jan 2018 11:21:43 +0100 Subject: [PATCH 14/26] Remove console.logs and unneeded argument --- editor/api/sidebar.js | 6 +----- editor/components/plugins-panel/index.js | 2 -- 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/editor/api/sidebar.js b/editor/api/sidebar.js index ad8401a60e637e..423380b6edf2a8 100644 --- a/editor/api/sidebar.js +++ b/editor/api/sidebar.js @@ -81,7 +81,6 @@ export function registerSidebar( name, settings ) { * sidebar doesn't exist. */ export function getSidebarSettings( name ) { - console.log("getSidebarSettings", sidebars) if ( ! sidebars.hasOwnProperty( name ) ) { return null; } @@ -100,10 +99,7 @@ export function getSidebarSettings( name ) { */ export function renderSidebar( name, settings ) { registerSidebar( name, settings ); - activateSidebar( name, settings ); -/* - let render = getSidebarSettings( name ).render; - render();*/ + activateSidebar( name ); } /** diff --git a/editor/components/plugins-panel/index.js b/editor/components/plugins-panel/index.js index c874a04cd8f286..2a6d28bed61933 100644 --- a/editor/components/plugins-panel/index.js +++ b/editor/components/plugins-panel/index.js @@ -28,8 +28,6 @@ import { closeGeneralSidebar } from '../../store/actions'; */ export function getPluginSidebar( plugin ) { const pluginSidebar = getSidebarSettings( plugin ); - console.log( "pluginSidebar", pluginSidebar ); - console.log( "plugin", plugin ); if ( ! pluginSidebar ) { return { From ed6ea39ea273d9bb8925f3a0c4cb0080beadc66d Mon Sep 17 00:00:00 2001 From: IreneStr Date: Fri, 19 Jan 2018 16:18:38 +0100 Subject: [PATCH 15/26] Alter class name to enable plugin sidebar-specific styling --- editor/components/plugins-panel/index.js | 2 +- editor/components/plugins-panel/style.scss | 91 ++++++++++++---------- 2 files changed, 51 insertions(+), 42 deletions(-) diff --git a/editor/components/plugins-panel/index.js b/editor/components/plugins-panel/index.js index 2a6d28bed61933..3db9b34809ec95 100644 --- a/editor/components/plugins-panel/index.js +++ b/editor/components/plugins-panel/index.js @@ -55,7 +55,7 @@ function PluginsPanel( { onClose, plugin } ) { role="region" aria-label={ __( 'Editor plugins' ) } tabIndex="-1"> -
+

{ title }

.components-panel .components-panel__header { +.editor-sidebar { + .editor-plugins-panel { position: fixed; - z-index: z-index( '.components-panel__header' ); top: 0; - left: 0; right: 0; - height: $panel-header-height; + bottom: 0; + width: $sidebar-width; + border-left: 1px solid $light-gray-500; + background: $light-gray-300; + color: $dark-gray-500; + height: 100vh; + overflow: hidden; @include break-small() { - position: inherit; - top: auto; - left: auto; - right: auto; + top: $admin-bar-height-big + $header-height; + z-index: auto; + height: auto; + overflow: auto; + -webkit-overflow-scrolling: touch; + } + + @include break-medium() { + top: $admin-bar-height + $header-height; + } + + > .components-panel .components-panel__header { + position: fixed; + z-index: z-index('.components-panel__header'); + top: 0; + left: 0; + right: 0; + height: $panel-header-height; + + @include break-small() { + position: inherit; + top: auto; + left: auto; + right: auto; + } } } -} -.editor-plugins-panel__header { - padding-left: 16px; - height: $header-height; - border-bottom: 1px solid $light-gray-500; - display: flex; - align-items: center; - align-content: space-between; -} \ No newline at end of file + .editor-plugins-panel__header { + padding-left: 16px; + height: $header-height; + border-bottom: 1px solid $light-gray-500; + display: flex; + align-items: center; + + .components-icon-button { + margin-left: auto; + } + + h3 { + margin: 0; + } + } +} From 3af224068cf110b2a8ab59dcbedc8f2df16acac1 Mon Sep 17 00:00:00 2001 From: IreneStr Date: Mon, 22 Jan 2018 12:11:59 +0100 Subject: [PATCH 16/26] Unexpose activateSidebar and registerSidebar --- editor/api/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/editor/api/index.js b/editor/api/index.js index aa4dd1e7da70c2..0c58e722500855 100644 --- a/editor/api/index.js +++ b/editor/api/index.js @@ -1,6 +1,4 @@ export { - registerSidebar, renderSidebar, - activateSidebar, - getSidebar + getSidebarSettings } from './sidebar'; From 10529c845b75a3ed7adc9c4cc33fff769ce4e626 Mon Sep 17 00:00:00 2001 From: IreneStr Date: Mon, 22 Jan 2018 12:18:46 +0100 Subject: [PATCH 17/26] Fix console error syntax and remove unnecessary error --- editor/api/sidebar.js | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/editor/api/sidebar.js b/editor/api/sidebar.js index 423380b6edf2a8..cafc30e2c113fe 100644 --- a/editor/api/sidebar.js +++ b/editor/api/sidebar.js @@ -38,7 +38,7 @@ export function registerSidebar( name, settings ) { } if ( ! /^[a-z][a-z0-9-]*\/[a-z][a-z0-9-]*$/.test( name ) ) { console.error( - 'Sidebar names must contain a namespace prefix, include only lowercase alphanumeric characters or dashes, and start with a letter. Example: my-plugin/my-custom-sidebar' + 'Sidebar names must contain a namespace prefix, include only lowercase alphanumeric characters or dashes, and start with a letter. Example: my-plugin/my-custom-sidebar.' ); return null; } @@ -50,13 +50,13 @@ export function registerSidebar( name, settings ) { } if ( sidebars[ name ] ) { console.error( - 'Sidebar "' + name + '" is already registered.' + `Sidebar ${ name } is already registered.` ); } if ( ! settings.title ) { console.error( - 'The sidebar "' + name + '" must have a title.' + `The sidebar ${ name } must have a title.` ); return null; } @@ -108,12 +108,7 @@ export function renderSidebar( name, settings ) { * @param {string} name The name of the sidebar to activate. * @return {void} */ -export function activateSidebar( name ) { - if ( ! sidebars[ name ] ) { - console.error( - 'Sidebar "' + name + '" is not registered yet.' - ); - } +function activateSidebar( name ) { store.dispatch( openGeneralSidebar( 'plugins' ) ); store.dispatch( setGeneralSidebarActivePanel( 'plugins', name ) ); } From fd057e81fd3b29e8045c9d698080c8aa0417b7cb Mon Sep 17 00:00:00 2001 From: IreneStr Date: Mon, 22 Jan 2018 14:51:50 +0100 Subject: [PATCH 18/26] Rename viewMode to viewportType --- editor/store/actions.js | 8 ++++---- editor/store/defaults.js | 2 +- editor/utils/mobile/index.js | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/editor/store/actions.js b/editor/store/actions.js index e95b4685307103..f6357d2c1e3f3c 100644 --- a/editor/store/actions.js +++ b/editor/store/actions.js @@ -419,15 +419,15 @@ export function toggleGeneralSidebarEditorPanel( panel ) { } /** - * Returns an action object used in signalling that the view mode preference should be set. + * Returns an action object used in signalling that the viewport type preference should be set. * - * @param {string} viewMode The view mode (desktop or mobile). + * @param {string} viewportType The viewport type (desktop or mobile). * @return {Object} Action object. */ -export function setViewMode( viewMode ) { +export function setViewportType( viewportType ) { return { type: 'SET_VIEW_MODE', - viewMode, + viewportType, }; } diff --git a/editor/store/defaults.js b/editor/store/defaults.js index a52f8d4df0373a..055f8fc2f84d81 100644 --- a/editor/store/defaults.js +++ b/editor/store/defaults.js @@ -1,6 +1,6 @@ export const PREFERENCES_DEFAULTS = { editorMode: 'visual', - viewMode: 'desktop', // 'desktop' | 'mobile' + viewportType: 'desktop', // 'desktop' | 'mobile' activeGeneralSidebar: null, // null | 'editor' | 'plugins' activeSidebarPanel: { // The keys in this object should match activeSidebarPanel values editor: null, // 'document' | 'block' diff --git a/editor/utils/mobile/index.js b/editor/utils/mobile/index.js index 67023984c9be66..6385161885c116 100644 --- a/editor/utils/mobile/index.js +++ b/editor/utils/mobile/index.js @@ -2,7 +2,7 @@ * Internal dependencies */ import { isMobile } from '../../store/selectors'; -import { setViewMode } from '../../store/actions'; +import { setViewportType } from '../../store/actions'; /** * Disables isSidebarOpened on rehydrate payload if the user is on a mobile screen size. @@ -26,7 +26,7 @@ export const mobileMiddleware = ( { getState } ) => next => action => { } ); } if ( action.type === 'TOGGLE_SIDEBAR' && action.sidebar === undefined ) { - return next( setViewMode( isMobile( getState() ) ? 'mobile' : 'desktop' ) ); + return next( setViewportType( isMobile( getState() ) ? 'mobile' : 'desktop' ) ); } return next( action ); }; From c7daa6339cc50bdd05cbc8260c0308bfa790c181 Mon Sep 17 00:00:00 2001 From: IreneStr Date: Tue, 23 Jan 2018 11:54:05 +0100 Subject: [PATCH 19/26] Add SET_VIEWPORT_TYPE to reducers --- editor/store/reducer.js | 12 ++++- editor/store/test/actions.js | 88 +++++++++++++++++++++++++++++------- editor/utils/mobile/index.js | 2 +- 3 files changed, 83 insertions(+), 19 deletions(-) diff --git a/editor/store/reducer.js b/editor/store/reducer.js index 65b6cf16767656..6a07d8bc793563 100644 --- a/editor/store/reducer.js +++ b/editor/store/reducer.js @@ -563,7 +563,17 @@ export function preferences( state = PREFERENCES_DEFAULTS, action ) { [ action.panel ]: ! get( state, [ 'panels', action.panel ], false ), }, }; - case 'SWITCH_MODE': + case 'SET_VIEWPORT_TYPE': + return { + ...state, + viewportType: action.viewportType + }; + case 'UPDATE_MOBILE_STATE': + return { + ...state, + viewportType: action.isMobile ? 'mobile' : 'desktop' + }; + case 'SWITCH_MODE': return { ...state, mode: action.mode, diff --git a/editor/store/test/actions.js b/editor/store/test/actions.js index f97c7abfe5f512..621226c23a5624 100644 --- a/editor/store/test/actions.js +++ b/editor/store/test/actions.js @@ -41,9 +41,14 @@ import { removeBlocks, removeBlock, toggleBlockMode, - toggleSidebar, - setActivePanel, - toggleSidebarPanel, + setGeneralSidebarActivePanel, + toggleGeneralSidebarEditorPanel, + openGeneralSidebar, + closeGeneralSidebar, + openPublishSidebar, + closePublishSidebar, + togglePublishSidebar, + setViewportType, createNotice, createSuccessNotice, createInfoNotice, @@ -376,34 +381,83 @@ describe( 'actions', () => { } ); } ); - describe( 'toggleSidebar', () => { - it( 'should return TOGGLE_SIDEBAR action', () => { - expect( toggleSidebar( 'publish', true ) ).toEqual( { - type: 'TOGGLE_SIDEBAR', - sidebar: 'publish', - forcedValue: true, + describe( 'setGeneralSidebarActivePanel', () => { + it( 'should return SET_GENERAL_SIDEBAR_ACTIVE_PANEL action', () => { + expect( setGeneralSidebarActivePanel( 'editor', 'document' ) ).toEqual( { + type: 'SET_GENERAL_SIDEBAR_ACTIVE_PANEL', + sidebar: 'editor', + panel: 'document', } ); } ); } ); - describe( 'setActivePanel', () => { - const panel = 'panelName'; - expect( setActivePanel( panel ) ).toEqual( { - type: 'SET_ACTIVE_PANEL', - panel, + describe( 'openGeneralSidebar', () => { + it( 'should return OPEN_GENERAL_SIDEBAR action', () => { + const sidebar = 'sidebarName'; + const panel = 'panelName'; + expect( openGeneralSidebar( sidebar, panel ) ).toEqual( { + type: 'OPEN_GENERAL_SIDEBAR', + sidebar, + panel, + } ); + } ); + } ); + + describe( 'closeGeneralSidebar', () => { + it( 'should return CLOSE_GENERAL_SIDEBAR action', () => { + expect( closeGeneralSidebar() ).toEqual( { + type: 'CLOSE_GENERAL_SIDEBAR', + } ); + } ); + } ); + + describe( 'openPublishSidebar', () => { + it( 'should return an OPEN_PUBLISH_SIDEBAR action', () => { + expect( openPublishSidebar() ).toEqual( { + type: 'OPEN_PUBLISH_SIDEBAR', + + } ); + } ); + } ); + + describe( 'closePublishSidebar', () => { + it( 'should return an CLOSE_PUBLISH_SIDEBAR action', () => { + expect( closePublishSidebar() ).toEqual( { + type: 'CLOSE_PUBLISH_SIDEBAR', + + } ); + } ); + } ); + + describe( 'togglePublishSidebar', () => { + it( 'should return an TOGGLE_PUBLISH_SIDEBAR action', () => { + expect( togglePublishSidebar() ).toEqual( { + type: 'TOGGLE_PUBLISH_SIDEBAR', + + } ); } ); } ); describe( 'toggleSidebarPanel', () => { - it( 'should return TOGGLE_SIDEBAR_PANEL action', () => { + it( 'should return TOGGLE_GENERAL_SIDEBAR_EDITOR_PANEL action', () => { const panel = 'panelName'; - expect( toggleSidebarPanel( panel ) ).toEqual( { - type: 'TOGGLE_SIDEBAR_PANEL', + expect( toggleGeneralSidebarEditorPanel( panel ) ).toEqual( { + type: 'TOGGLE_GENERAL_SIDEBAR_EDITOR_PANEL', panel, } ); } ); } ); + describe( 'setViewportType', () => { + it( 'should return SET_VIEWPORT_TYPE action', () => { + const viewportType = 'mobile'; + expect( setViewportType( viewportType ) ).toEqual( { + type: 'SET_VIEWPORT_TYPE', + viewportType, + } ); + } ); + } ); + describe( 'createNotice', () => { const status = 'status'; const content =

element

; diff --git a/editor/utils/mobile/index.js b/editor/utils/mobile/index.js index 65cada67954886..a7b9575523f42e 100644 --- a/editor/utils/mobile/index.js +++ b/editor/utils/mobile/index.js @@ -9,7 +9,7 @@ import { setViewportType } from '../../store/actions'; */ export const mobileMiddleware = ( { getState } ) => next => action => { - if ( action.type === 'TOGGLE_SIDEBAR' && action.sidebar === undefined ) { + if ( action.type === 'OPEN_GENERAL_SIDEBAR' ) { return next( setViewportType( isMobile( getState() ) ? 'mobile' : 'desktop' ) ); } return next( action ); From a5ffe6c11d3bca9c2b19eaa71c232af3965c10b0 Mon Sep 17 00:00:00 2001 From: IreneStr Date: Tue, 23 Jan 2018 14:09:10 +0100 Subject: [PATCH 20/26] Fix unittests part 1 --- editor/api/index.js | 2 +- editor/components/plugins-panel/index.js | 1 - editor/edit-post/layout/index.js | 3 +- editor/edit-post/sidebar/index.js | 4 +- editor/store/actions.js | 2 +- editor/store/reducer.js | 6 +-- editor/store/selectors.js | 15 ++---- editor/store/test/reducer.js | 13 ++--- editor/store/test/selectors.js | 61 ++++++++++++++---------- 9 files changed, 56 insertions(+), 51 deletions(-) diff --git a/editor/api/index.js b/editor/api/index.js index 0c58e722500855..d4ca54d44c6164 100644 --- a/editor/api/index.js +++ b/editor/api/index.js @@ -1,4 +1,4 @@ export { renderSidebar, - getSidebarSettings + getSidebarSettings, } from './sidebar'; diff --git a/editor/components/plugins-panel/index.js b/editor/components/plugins-panel/index.js index 3db9b34809ec95..3a95767b0ea769 100644 --- a/editor/components/plugins-panel/index.js +++ b/editor/components/plugins-panel/index.js @@ -7,7 +7,6 @@ import { connect } from 'react-redux'; * WordPress dependencies */ import { __, sprintf } from '@wordpress/i18n'; -import { compose } from '@wordpress/element'; import { Panel, PanelBody, IconButton, withFocusReturn } from '@wordpress/components'; /** diff --git a/editor/edit-post/layout/index.js b/editor/edit-post/layout/index.js index 2801d403942ff9..b79926f3a65f87 100644 --- a/editor/edit-post/layout/index.js +++ b/editor/edit-post/layout/index.js @@ -30,7 +30,6 @@ import { } from '../../components'; import { getEditorMode, - hasFixedToolbar, hasOpenSidebar, isFeatureActive, getOpenedGeneralSidebar, @@ -38,7 +37,7 @@ import { } from '../../store/selectors'; import { closeGeneralSidebar, - closePublishSidebar + closePublishSidebar, } from '../../store/actions'; function GeneralSidebar( { openedGeneralSidebar } ) { diff --git a/editor/edit-post/sidebar/index.js b/editor/edit-post/sidebar/index.js index b66d04394ee29b..4cf839c5dd0b0c 100644 --- a/editor/edit-post/sidebar/index.js +++ b/editor/edit-post/sidebar/index.js @@ -6,8 +6,8 @@ import { connect } from 'react-redux'; /** * WordPress Dependencies */ -import { __, sprintf } from '@wordpress/i18n'; -import { withFocusReturn, Panel, PanelBody } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { withFocusReturn } from '@wordpress/components'; /** * Internal Dependencies diff --git a/editor/store/actions.js b/editor/store/actions.js index 2593e0c2beae77..18b82233679a0d 100644 --- a/editor/store/actions.js +++ b/editor/store/actions.js @@ -440,7 +440,7 @@ export function toggleGeneralSidebarEditorPanel( panel ) { */ export function setViewportType( viewportType ) { return { - type: 'SET_VIEW_MODE', + type: 'SET_VIEWPORT_TYPE', viewportType, }; } diff --git a/editor/store/reducer.js b/editor/store/reducer.js index 6a07d8bc793563..db15d6b3c8fe9e 100644 --- a/editor/store/reducer.js +++ b/editor/store/reducer.js @@ -566,14 +566,14 @@ export function preferences( state = PREFERENCES_DEFAULTS, action ) { case 'SET_VIEWPORT_TYPE': return { ...state, - viewportType: action.viewportType + viewportType: action.viewportType, }; case 'UPDATE_MOBILE_STATE': return { ...state, - viewportType: action.isMobile ? 'mobile' : 'desktop' + viewportType: action.isMobile ? 'mobile' : 'desktop', }; - case 'SWITCH_MODE': + case 'SWITCH_MODE': return { ...state, mode: action.mode, diff --git a/editor/store/selectors.js b/editor/store/selectors.js index e1917dbbd9dbcd..a439817e62fd8a 100644 --- a/editor/store/selectors.js +++ b/editor/store/selectors.js @@ -147,19 +147,14 @@ export function getOpenedGeneralSidebar( state ) { * Returns true if the panel is open in the currently opened sidebar. * * @param {Object} state Global application state - * @param {string} panel Sidebar name (leave undefined for the default sidebar) - * @return {Boolean} Whether the given general sidebar panel is open + * @param {string} sidebar Sidebar name (leave undefined for the default sidebar) + * @param {string} panel Sidebar panel name (leave undefined for the default panel) + * @returns {Boolean} Whether the given general sidebar panel is open */ -export function isGeneralSidebarPanelOpened( state, panel ) { +export function isGeneralSidebarPanelOpened( state, sidebar, panel ) { const activeGeneralSidebar = getPreference( state, 'activeGeneralSidebar' ); - - if ( activeGeneralSidebar === null ) { - return false; - } - const activeSidebarPanel = getPreference( state, 'activeSidebarPanel' ); - - return activeSidebarPanel[ activeSidebarPanel ] === panel; + return activeGeneralSidebar === sidebar && activeSidebarPanel === panel; } /** diff --git a/editor/store/test/reducer.js b/editor/store/test/reducer.js index b545dbbed087d7..689c67b1ae1633 100644 --- a/editor/store/test/reducer.js +++ b/editor/store/test/reducer.js @@ -961,16 +961,17 @@ describe( 'state', () => { const state = preferences( undefined, {} ); expect( state ).toEqual( { + activeGeneralSidebar: null, + activeSidebarPanel: { + editor: null, + plugins: null, + }, blockUsage: {}, + editorMode: 'visual', recentlyUsedBlocks: [], - mode: 'visual', - sidebars: { - desktop: true, - mobile: false, - publish: false, - }, panels: { 'post-status': true }, features: { fixedToolbar: false }, + viewportType: 'desktop', } ); } ); diff --git a/editor/store/test/selectors.js b/editor/store/test/selectors.js index 30396887243dd0..36b19a27e434a7 100644 --- a/editor/store/test/selectors.js +++ b/editor/store/test/selectors.js @@ -15,7 +15,7 @@ import { registerBlockType, unregisterBlockType, getBlockTypes } from '@wordpres import { getEditorMode, getPreference, - isSidebarOpened, + isGeneralSidebarPanelOpened, hasOpenSidebar, isEditorSidebarPanelOpened, hasEditorUndo, @@ -119,7 +119,7 @@ describe( 'selectors', () => { describe( 'getEditorMode', () => { it( 'should return the selected editor mode', () => { const state = { - preferences: { mode: 'text' }, + preferences: { editorMode: 'text' }, }; expect( getEditorMode( state ) ).toEqual( 'text' ); @@ -253,47 +253,58 @@ describe( 'selectors', () => { } ); } ); - describe( 'isSidebarOpened', () => { - it( 'should return true when is not mobile and the normal sidebar is opened', () => { + describe( 'isGeneralSidebarPanelOpened', () => { + it( 'should return true when the specified sidebar panel is opened', () => { const state = { - mobile: false, preferences: { - sidebars: { - desktop: true, - mobile: false, - }, + activeGeneralSidebar: 'editor', + viewportType: 'desktop', + activeSidebarPanel: 'document', }, }; + const panel = 'document'; + const sidebar = 'editor'; - expect( isSidebarOpened( state ) ).toBe( true ); + expect( isGeneralSidebarPanelOpened( state, sidebar, panel ) ).toBe( true ); } ); - it( 'should return false when is not mobile and the normal sidebar is closed', () => { + it( 'should return false when another panel than the specified sidebar panel is opened', () => { const state = { - mobile: false, preferences: { - sidebars: { - desktop: false, - mobile: true, - }, + activeGeneralSidebar: 'editor', + viewportType: 'desktop', + activeSidebarPanel: 'blocks', }, }; + const panel = 'blocks'; + const sidebar = 'editor'; - expect( isSidebarOpened( state ) ).toBe( false ); + expect( isGeneralSidebarPanelOpened( state, sidebar, panel ) ).toBe( false ); } ); - it( 'should return true when is mobile and the mobile sidebar is opened', () => { + it( 'should return false when no sidebar panel is opened', () => { const state = { - mobile: true, preferences: { - sidebars: { - desktop: false, - mobile: true, - }, + activeGeneralSidebar: null, + viewportType: 'desktop', + activeSidebarPanel: null, + }, + }; + const panel = 'blocks'; + const sidebar = 'editor'; + + expect( isGeneralSidebarPanelOpened( state, sidebar, panel ) ).toBe( false ); + } ); + /* + it( 'should return true when the viewport type is mobile and the mobile sidebar is opened', () => { + const state = { + preferences: { + activeGeneralSidebar: 'mobile', + viewportType: 'mobile', }, }; - expect( isSidebarOpened( state ) ).toBe( true ); + expect( isGeneralSidebarPanelOpened( state ) ).toBe( true ); } ); it( 'should return false when is mobile and the mobile sidebar is closed', () => { @@ -332,7 +343,7 @@ describe( 'selectors', () => { }; expect( isSidebarOpened( state, 'publish' ) ).toBe( false ); - } ); + } );*/ } ); describe( 'hasOpenSidebar', () => { From ec870c3847e08f099f1aa34f01499825866a35fa Mon Sep 17 00:00:00 2001 From: IreneStr Date: Wed, 24 Jan 2018 15:02:17 +0100 Subject: [PATCH 21/26] Fix unittests part 2 --- editor/api/index.js | 1 + editor/api/sidebar.js | 2 +- editor/store/test/reducer.js | 60 ++++++------------- editor/store/test/selectors.js | 102 +++------------------------------ editor/utils/mobile/index.js | 2 +- 5 files changed, 29 insertions(+), 138 deletions(-) diff --git a/editor/api/index.js b/editor/api/index.js index d4ca54d44c6164..6fa256c8d25000 100644 --- a/editor/api/index.js +++ b/editor/api/index.js @@ -1,4 +1,5 @@ export { renderSidebar, + activateSidebar, getSidebarSettings, } from './sidebar'; diff --git a/editor/api/sidebar.js b/editor/api/sidebar.js index cafc30e2c113fe..3d6bf1801d9ac4 100644 --- a/editor/api/sidebar.js +++ b/editor/api/sidebar.js @@ -108,7 +108,7 @@ export function renderSidebar( name, settings ) { * @param {string} name The name of the sidebar to activate. * @return {void} */ -function activateSidebar( name ) { +export function activateSidebar( name ) { store.dispatch( openGeneralSidebar( 'plugins' ) ); store.dispatch( setGeneralSidebarActivePanel( 'plugins', name ) ); } diff --git a/editor/store/test/reducer.js b/editor/store/test/reducer.js index 689c67b1ae1633..e8a3bd269b8e5e 100644 --- a/editor/store/test/reducer.js +++ b/editor/store/test/reducer.js @@ -975,53 +975,31 @@ describe( 'state', () => { } ); } ); - it( 'should toggle the given sidebar flag', () => { - const state = preferences( deepFreeze( { sidebars: { - mobile: true, - desktop: true, - } } ), { - type: 'TOGGLE_SIDEBAR', - sidebar: 'desktop', - } ); - - expect( state.sidebars ).toEqual( { - mobile: true, - desktop: false, - } ); - } ); - - it( 'should set the sidebar open flag to true if unset', () => { - const state = preferences( deepFreeze( { sidebars: { - mobile: true, - } } ), { - type: 'TOGGLE_SIDEBAR', - sidebar: 'desktop', - } ); - - expect( state.sidebars ).toEqual( { - mobile: true, - desktop: true, - } ); - } ); - - it( 'should force the given sidebar flag', () => { - const state = preferences( deepFreeze( { sidebars: { - mobile: true, - } } ), { - type: 'TOGGLE_SIDEBAR', - sidebar: 'desktop', - forcedValue: false, + it( 'should set the general sidebar active panel', () => { + const state = preferences( deepFreeze( { + activeGeneralSidebar: 'editor', + activeSidebarPanel: { + editor: null, + plugins: null, + }, + } ), { + type: 'SET_GENERAL_SIDEBAR_ACTIVE_PANEL', + sidebar: 'editor', + panel: 'document', } ); - expect( state.sidebars ).toEqual( { - mobile: true, - desktop: false, + expect( state ).toEqual( { + activeGeneralSidebar: 'editor', + activeSidebarPanel: { + editor: 'document', + plugins: null, + }, } ); } ); it( 'should set the sidebar panel open flag to true if unset', () => { const state = preferences( deepFreeze( {} ), { - type: 'TOGGLE_SIDEBAR_PANEL', + type: 'TOGGLE_GENERAL_SIDEBAR_EDITOR_PANEL', panel: 'post-taxonomies', } ); @@ -1030,7 +1008,7 @@ describe( 'state', () => { it( 'should toggle the sidebar panel open flag', () => { const state = preferences( deepFreeze( { panels: { 'post-taxonomies': true } } ), { - type: 'TOGGLE_SIDEBAR_PANEL', + type: 'TOGGLE_GENERAL_SIDEBAR_EDITOR_PANEL', panel: 'post-taxonomies', } ); diff --git a/editor/store/test/selectors.js b/editor/store/test/selectors.js index 36b19a27e434a7..9d8522b495978a 100644 --- a/editor/store/test/selectors.js +++ b/editor/store/test/selectors.js @@ -276,7 +276,7 @@ describe( 'selectors', () => { activeSidebarPanel: 'blocks', }, }; - const panel = 'blocks'; + const panel = 'document'; const sidebar = 'editor'; expect( isGeneralSidebarPanelOpened( state, sidebar, panel ) ).toBe( false ); @@ -295,112 +295,24 @@ describe( 'selectors', () => { expect( isGeneralSidebarPanelOpened( state, sidebar, panel ) ).toBe( false ); } ); - /* - it( 'should return true when the viewport type is mobile and the mobile sidebar is opened', () => { - const state = { - preferences: { - activeGeneralSidebar: 'mobile', - viewportType: 'mobile', - }, - }; - - expect( isGeneralSidebarPanelOpened( state ) ).toBe( true ); - } ); - - it( 'should return false when is mobile and the mobile sidebar is closed', () => { - const state = { - mobile: true, - preferences: { - sidebars: { - desktop: true, - mobile: false, - }, - }, - }; - - expect( isSidebarOpened( state ) ).toBe( false ); - } ); - - it( 'should return true when the given is opened', () => { - const state = { - preferences: { - sidebars: { - publish: true, - }, - }, - }; - - expect( isSidebarOpened( state, 'publish' ) ).toBe( true ); - } ); - - it( 'should return false when the given is not opened', () => { - const state = { - preferences: { - sidebars: { - publish: false, - }, - }, - }; - - expect( isSidebarOpened( state, 'publish' ) ).toBe( false ); - } );*/ } ); describe( 'hasOpenSidebar', () => { - it( 'should return true if at least one sidebar is open (using the desktop sidebar as default)', () => { + it( 'should return true if at least one sidebar is open', () => { const state = { - mobile: false, preferences: { - sidebars: { - desktop: true, - mobile: false, - publish: false, - }, - }, - }; - - expect( hasOpenSidebar( state ) ).toBe( true ); - } ); - - it( 'should return true if at no sidebar is open (using the desktop sidebar as default)', () => { - const state = { - mobile: false, - preferences: { - sidebars: { - desktop: false, - mobile: true, - publish: false, - }, - }, - }; - - expect( hasOpenSidebar( state ) ).toBe( false ); - } ); - - it( 'should return true if at least one sidebar is open (using the mobile sidebar as default)', () => { - const state = { - mobile: true, - preferences: { - sidebars: { - desktop: false, - mobile: true, - publish: false, - }, + activeSidebarPanel: null, }, }; expect( hasOpenSidebar( state ) ).toBe( true ); } ); - it( 'should return true if at no sidebar is open (using the mobile sidebar as default)', () => { + it( 'should return false if no sidebar is open', () => { const state = { - mobile: true, + publishSidebarActive: false, preferences: { - sidebars: { - desktop: true, - mobile: false, - publish: false, - }, + activeGeneralSidebar: null, }, }; @@ -1899,7 +1811,7 @@ describe( 'selectors', () => { it( 'should return the last block for the text mode', () => { const state = { - preferences: { mode: 'text' }, + preferences: { editorMode: 'text' }, blockSelection: { start: 2, end: 2 }, editor: { present: { diff --git a/editor/utils/mobile/index.js b/editor/utils/mobile/index.js index a7b9575523f42e..65cada67954886 100644 --- a/editor/utils/mobile/index.js +++ b/editor/utils/mobile/index.js @@ -9,7 +9,7 @@ import { setViewportType } from '../../store/actions'; */ export const mobileMiddleware = ( { getState } ) => next => action => { - if ( action.type === 'OPEN_GENERAL_SIDEBAR' ) { + if ( action.type === 'TOGGLE_SIDEBAR' && action.sidebar === undefined ) { return next( setViewportType( isMobile( getState() ) ? 'mobile' : 'desktop' ) ); } return next( action ); From b34991d4ec3e5556a0d0335b144a25228a646366 Mon Sep 17 00:00:00 2001 From: IreneStr Date: Thu, 25 Jan 2018 10:44:52 +0100 Subject: [PATCH 22/26] Remove unneeded padding --- editor/edit-post/sidebar/style.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/editor/edit-post/sidebar/style.scss b/editor/edit-post/sidebar/style.scss index 1b70bb1e543cbf..66a718d47d734c 100644 --- a/editor/edit-post/sidebar/style.scss +++ b/editor/edit-post/sidebar/style.scss @@ -29,14 +29,12 @@ overflow: auto; -webkit-overflow-scrolling: touch; height: 100%; - padding-top: $panel-header-height; margin-top: -1px; margin-bottom: -1px; @include break-small() { overflow: inherit; height: auto; - padding-top: 0; } } From 06950bd28c38a8678519fb9b4d8f2884c0241372 Mon Sep 17 00:00:00 2001 From: IreneStr Date: Thu, 25 Jan 2018 10:46:35 +0100 Subject: [PATCH 23/26] Remove mobile middleware --- editor/store/middlewares.js | 2 -- editor/store/selectors.js | 2 +- editor/utils/mobile/README.md | 15 --------------- editor/utils/mobile/index.js | 16 ---------------- 4 files changed, 1 insertion(+), 34 deletions(-) delete mode 100644 editor/utils/mobile/README.md delete mode 100644 editor/utils/mobile/index.js diff --git a/editor/store/middlewares.js b/editor/store/middlewares.js index c0a8fef307bc11..9a440a6bb9ab72 100644 --- a/editor/store/middlewares.js +++ b/editor/store/middlewares.js @@ -8,7 +8,6 @@ import { flowRight } from 'lodash'; /** * Internal dependencies */ -import { mobileMiddleware } from '../utils/mobile'; import effects from './effects'; /** @@ -20,7 +19,6 @@ import effects from './effects'; */ function applyMiddlewares( store ) { const middlewares = [ - mobileMiddleware, refx( effects ), multi, ]; diff --git a/editor/store/selectors.js b/editor/store/selectors.js index a439817e62fd8a..179b0e00c1e054 100644 --- a/editor/store/selectors.js +++ b/editor/store/selectors.js @@ -1303,7 +1303,7 @@ export function hasFixedToolbar( state ) { * @param {Object} state Global application state. * @param {string} feature Feature slug. * - * @returns {booleean} Is active. + * @returns {boolean} Is active. */ export function isFeatureActive( state, feature ) { return !! state.preferences.features[ feature ]; diff --git a/editor/utils/mobile/README.md b/editor/utils/mobile/README.md deleted file mode 100644 index fff39c3f681c85..00000000000000 --- a/editor/utils/mobile/README.md +++ /dev/null @@ -1,15 +0,0 @@ -mobileMiddleware -=========== - -`mobileMiddleware` is a very simple [redux middleware](https://redux.js.org/docs/advanced/Middleware.html) that sets the isSidebarOpened flag to false on REDUX_REHYDRATE payloads. -This useful to make isSidebarOpened false on mobile even if the value that was saved to local storage was true. -The middleware just needs to be added to the enhancers list: - -```js - const enhancers = [ - ... - applyMiddleware( mobileMiddleware ), - ]; - ... - const store = createStore( reducer, flowRight( enhancers ) ); -``` diff --git a/editor/utils/mobile/index.js b/editor/utils/mobile/index.js deleted file mode 100644 index 65cada67954886..00000000000000 --- a/editor/utils/mobile/index.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Internal dependencies - */ -import { isMobile } from '../../store/selectors'; -import { setViewportType } from '../../store/actions'; - -/** - * Middleware - */ - -export const mobileMiddleware = ( { getState } ) => next => action => { - if ( action.type === 'TOGGLE_SIDEBAR' && action.sidebar === undefined ) { - return next( setViewportType( isMobile( getState() ) ? 'mobile' : 'desktop' ) ); - } - return next( action ); -}; From fce3ddd4513690d7904bf8d756bc5871f0433c24 Mon Sep 17 00:00:00 2001 From: IreneStr Date: Thu, 25 Jan 2018 10:55:50 +0100 Subject: [PATCH 24/26] Close sidebar when switching to mobile view --- editor/store/reducer.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/editor/store/reducer.js b/editor/store/reducer.js index db15d6b3c8fe9e..e6c1f435bf479f 100644 --- a/editor/store/reducer.js +++ b/editor/store/reducer.js @@ -569,9 +569,16 @@ export function preferences( state = PREFERENCES_DEFAULTS, action ) { viewportType: action.viewportType, }; case 'UPDATE_MOBILE_STATE': + if ( action.isMobile ){ + return { + ...state, + viewportType: 'mobile', + activeGeneralSidebar: null, + }; + } return { ...state, - viewportType: action.isMobile ? 'mobile' : 'desktop', + viewportType: 'desktop', }; case 'SWITCH_MODE': return { From 02cc0749630aaee00b0be90a3f30cd5339953366 Mon Sep 17 00:00:00 2001 From: IreneStr Date: Thu, 25 Jan 2018 11:00:20 +0100 Subject: [PATCH 25/26] Unexpose activateSidebar --- editor/api/index.js | 1 - editor/api/sidebar.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/editor/api/index.js b/editor/api/index.js index 6fa256c8d25000..d4ca54d44c6164 100644 --- a/editor/api/index.js +++ b/editor/api/index.js @@ -1,5 +1,4 @@ export { renderSidebar, - activateSidebar, getSidebarSettings, } from './sidebar'; diff --git a/editor/api/sidebar.js b/editor/api/sidebar.js index 3d6bf1801d9ac4..cafc30e2c113fe 100644 --- a/editor/api/sidebar.js +++ b/editor/api/sidebar.js @@ -108,7 +108,7 @@ export function renderSidebar( name, settings ) { * @param {string} name The name of the sidebar to activate. * @return {void} */ -export function activateSidebar( name ) { +function activateSidebar( name ) { store.dispatch( openGeneralSidebar( 'plugins' ) ); store.dispatch( setGeneralSidebarActivePanel( 'plugins', name ) ); } From 0072e66c0a6e02e4a9d8700c92570f0f33f6cc14 Mon Sep 17 00:00:00 2001 From: IreneStr Date: Thu, 25 Jan 2018 11:16:03 +0100 Subject: [PATCH 26/26] Fix codestyle --- editor/store/reducer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/editor/store/reducer.js b/editor/store/reducer.js index e6c1f435bf479f..ee18a22bf67707 100644 --- a/editor/store/reducer.js +++ b/editor/store/reducer.js @@ -569,7 +569,7 @@ export function preferences( state = PREFERENCES_DEFAULTS, action ) { viewportType: action.viewportType, }; case 'UPDATE_MOBILE_STATE': - if ( action.isMobile ){ + if ( action.isMobile ) { return { ...state, viewportType: 'mobile',