From ee3a61c6038c67f3d787a868ad8f02a119d38faf Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 23 Feb 2018 09:40:53 +0100 Subject: [PATCH] MetaBoxes: Moving meta boxes out of the generic editor module (#5175) --- edit-post/assets/stylesheets/_z-index.scss | 4 +- edit-post/components/header/index.js | 11 +- edit-post/components/layout/index.js | 14 +- edit-post/components/layout/style.scss | 2 +- .../components/meta-boxes/index.js | 11 +- .../meta-boxes/meta-boxes-area/index.js | 13 +- .../meta-boxes/meta-boxes-area/style.scss | 8 +- .../meta-boxes/meta-boxes-panel/index.js | 6 +- .../meta-boxes/meta-boxes-panel/style.scss | 6 +- .../components/sidebar/post-settings/index.js | 2 +- edit-post/index.js | 7 +- edit-post/store/actions.js | 58 ++++++++ edit-post/store/effects.js | 88 ++++++++++++ edit-post/store/index.js | 5 +- edit-post/store/middlewares.js | 5 +- edit-post/store/reducer.js | 71 ++++++++++ edit-post/store/selectors.js | 53 +++++++ edit-post/store/test/actions.js | 25 ++++ edit-post/store/test/reducer.js | 90 ++++++++++++ edit-post/store/test/selectors.js | 96 +++++++++++++ {editor => edit-post}/utils/meta-boxes.js | 2 +- editor/components/index.js | 1 - editor/components/post-saved-state/index.js | 12 +- editor/components/provider/index.js | 7 +- .../unsaved-changes-warning/index.js | 13 +- editor/store/actions.js | 58 -------- editor/store/effects.js | 60 +------- editor/store/reducer.js | 71 ---------- editor/store/selectors.js | 53 +------ editor/store/test/actions.js | 25 ---- editor/store/test/effects.js | 33 +---- editor/store/test/reducer.js | 96 ------------- editor/store/test/selectors.js | 129 ------------------ 33 files changed, 566 insertions(+), 569 deletions(-) rename {editor => edit-post}/components/meta-boxes/index.js (74%) rename {editor => edit-post}/components/meta-boxes/meta-boxes-area/index.js (83%) rename {editor => edit-post}/components/meta-boxes/meta-boxes-area/style.scss (87%) rename {editor => edit-post}/components/meta-boxes/meta-boxes-panel/index.js (86%) rename {editor => edit-post}/components/meta-boxes/meta-boxes-panel/style.scss (67%) create mode 100644 edit-post/store/effects.js rename {editor => edit-post}/utils/meta-boxes.js (80%) diff --git a/edit-post/assets/stylesheets/_z-index.scss b/edit-post/assets/stylesheets/_z-index.scss index d78279d2c71de..d8a7227a80fe8 100644 --- a/edit-post/assets/stylesheets/_z-index.scss +++ b/edit-post/assets/stylesheets/_z-index.scss @@ -15,8 +15,8 @@ $z-layers: ( '.editor-inserter__tabs': 1, '.editor-inserter__tab.is-active': 1, '.components-panel__header': 1, - '.editor-meta-boxes-area.is-loading:before': 1, - '.editor-meta-boxes-area .spinner': 2, + '.edit-post-meta-boxes-area.is-loading:before': 1, + '.edit-post-meta-boxes-area .spinner': 2, '.blocks-format-toolbar__link-modal': 2, '.editor-block-contextual-toolbar': 2, '.editor-block-switcher__menu': 2, diff --git a/edit-post/components/header/index.js b/edit-post/components/header/index.js index 5e44f98f90b1b..19f13f24598fc 100644 --- a/edit-post/components/header/index.js +++ b/edit-post/components/header/index.js @@ -23,6 +23,8 @@ import HeaderToolbar from './header-toolbar'; import { getOpenedGeneralSidebar, isPublishSidebarOpened, + hasMetaBoxes, + isSavingMetaBoxes, } from '../../store/selectors'; import { openGeneralSidebar, @@ -36,6 +38,8 @@ function Header( { onCloseGeneralSidebar, isPublishSidebarOpen, onTogglePublishSidebar, + hasActiveMetaboxes, + isSaving, } ) { const toggleGeneralSidebar = isGeneralSidebarEditorOpen ? onCloseGeneralSidebar : onOpenGeneralSidebar; @@ -49,7 +53,10 @@ function Header( { { ! isPublishSidebarOpen && (
- + ( { isGeneralSidebarEditorOpen: getOpenedGeneralSidebar( state ) === 'editor', isPublishSidebarOpen: isPublishSidebarOpened( state ), + hasActiveMetaboxes: hasMetaBoxes( state ), + isSaving: isSavingMetaBoxes( state ), } ), { onOpenGeneralSidebar: () => openGeneralSidebar( 'editor' ), diff --git a/edit-post/components/layout/index.js b/edit-post/components/layout/index.js index 6037e50d33251..5ec118509484b 100644 --- a/edit-post/components/layout/index.js +++ b/edit-post/components/layout/index.js @@ -3,6 +3,7 @@ */ import { connect } from 'react-redux'; import classnames from 'classnames'; +import { some } from 'lodash'; /** * WordPress dependencies @@ -10,7 +11,6 @@ import classnames from 'classnames'; import { Popover, navigateRegions } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { - MetaBoxes, AutosaveMonitor, UnsavedChangesWarning, EditorNotices, @@ -27,6 +27,8 @@ import Sidebar from '../sidebar'; import TextEditor from '../modes/text-editor'; import VisualEditor from '../modes/visual-editor'; import EditorModeKeyboardShortcuts from '../modes/keyboard-shortcuts'; +import MetaBoxes from '../meta-boxes'; +import { getMetaBoxContainer } from '../../utils/meta-boxes'; import { getEditorMode, hasOpenSidebar, @@ -34,6 +36,7 @@ import { getOpenedGeneralSidebar, isPublishSidebarOpened, getActivePlugin, + getMetaBoxes, } from '../../store/selectors'; import { closePublishSidebar } from '../../store/actions'; import PluginsPanel from '../../components/plugins-panel/index.js'; @@ -58,6 +61,7 @@ function Layout( { hasFixedToolbar, onClosePublishSidebar, plugin, + metaBoxes, } ) { const isSidebarOpened = layoutHasOpenSidebar && ( openedGeneralSidebar !== 'plugin' || getSidebarSettings( plugin ) ); @@ -69,7 +73,12 @@ function Layout( { return (
- + { + return some( metaBoxes, ( metaBox, location ) => { + return metaBox.isActive && + jQuery( getMetaBoxContainer( location ) ).serialize() !== metaBox.data; + } ); + } } />
@@ -104,6 +113,7 @@ export default connect( publishSidebarOpen: isPublishSidebarOpened( state ), hasFixedToolbar: isFeatureActive( state, 'fixedToolbar' ), plugin: getActivePlugin( state ), + metaBoxes: getMetaBoxes( state ), } ), { onClosePublishSidebar: closePublishSidebar, diff --git a/edit-post/components/layout/style.scss b/edit-post/components/layout/style.scss index 0cef72e1906e5..733827d2b8419 100644 --- a/edit-post/components/layout/style.scss +++ b/edit-post/components/layout/style.scss @@ -62,7 +62,7 @@ padding: 10px 0 10px; clear: both; - .editor-meta-boxes-area { + .edit-post-meta-boxes-area { max-width: $visual-editor-max-width; margin: auto; } diff --git a/editor/components/meta-boxes/index.js b/edit-post/components/meta-boxes/index.js similarity index 74% rename from editor/components/meta-boxes/index.js rename to edit-post/components/meta-boxes/index.js index 3af2c12dc7471..7e611e3a95b5c 100644 --- a/editor/components/meta-boxes/index.js +++ b/edit-post/components/meta-boxes/index.js @@ -28,6 +28,11 @@ function MetaBoxes( { location, isActive, usePanel = false } ) { ); } -export default connect( ( state, ownProps ) => ( { - isActive: getMetaBox( state, ownProps.location ).isActive, -} ) )( MetaBoxes ); +export default connect( + ( state, ownProps ) => ( { + isActive: getMetaBox( state, ownProps.location ).isActive, + } ), + undefined, + undefined, + { storeKey: 'edit-post' } +)( MetaBoxes ); diff --git a/editor/components/meta-boxes/meta-boxes-area/index.js b/edit-post/components/meta-boxes/meta-boxes-area/index.js similarity index 83% rename from editor/components/meta-boxes/meta-boxes-area/index.js rename to edit-post/components/meta-boxes/meta-boxes-area/index.js index be78633428b7f..fe6692a0c2805 100644 --- a/editor/components/meta-boxes/meta-boxes-area/index.js +++ b/edit-post/components/meta-boxes/meta-boxes-area/index.js @@ -60,7 +60,7 @@ class MetaBoxesArea extends Component { const { location, isSaving } = this.props; const classes = classnames( - 'editor-meta-boxes-area', + 'edit-post-meta-boxes-area', `is-${ location }`, { 'is-loading': isSaving, @@ -70,8 +70,8 @@ class MetaBoxesArea extends Component { return (
{ isSaving && } -
-
+
+
); } @@ -86,4 +86,9 @@ function mapStateToProps( state ) { }; } -export default connect( mapStateToProps )( MetaBoxesArea ); +export default connect( + mapStateToProps, + undefined, + undefined, + { storeKey: 'edit-post' } +)( MetaBoxesArea ); diff --git a/editor/components/meta-boxes/meta-boxes-area/style.scss b/edit-post/components/meta-boxes/meta-boxes-area/style.scss similarity index 87% rename from editor/components/meta-boxes/meta-boxes-area/style.scss rename to edit-post/components/meta-boxes/meta-boxes-area/style.scss index dffb73969e431..2e00937b43e9f 100644 --- a/editor/components/meta-boxes/meta-boxes-area/style.scss +++ b/edit-post/components/meta-boxes/meta-boxes-area/style.scss @@ -1,5 +1,5 @@ -.editor-meta-boxes-area { +.edit-post-meta-boxes-area { position: relative; /* Match width and positioning of the meta boxes. Override default styles. */ @@ -80,17 +80,17 @@ bottom: 0; content: ''; background: transparent; - z-index: z-index( '.editor-meta-boxes-area.is-loading:before'); + z-index: z-index( '.edit-post-meta-boxes-area.is-loading:before'); } .spinner { position: absolute; top: 10px; right: 20px; - z-index: z-index( '.editor-meta-boxes-area .spinner'); + z-index: z-index( '.edit-post-meta-boxes-area .spinner'); } } -.editor-meta-boxes-area__clear { +.edit-post-meta-boxes-area__clear { clear: both; } diff --git a/editor/components/meta-boxes/meta-boxes-panel/index.js b/edit-post/components/meta-boxes/meta-boxes-panel/index.js similarity index 86% rename from editor/components/meta-boxes/meta-boxes-panel/index.js rename to edit-post/components/meta-boxes/meta-boxes-panel/index.js index 4ed5ab1384797..5c90e14ceae36 100644 --- a/editor/components/meta-boxes/meta-boxes-panel/index.js +++ b/edit-post/components/meta-boxes/meta-boxes-panel/index.js @@ -41,14 +41,14 @@ class MetaBoxesPanel extends Component { const { children, opened } = this.props; const isOpened = opened === undefined ? this.state.opened : opened; const icon = `arrow-${ isOpened ? 'down' : 'right' }`; - const className = classnames( 'editor-meta-boxes-panel__body', { 'is-opened': isOpened } ); + const className = classnames( 'edit-post-meta-boxes-panel__body', { 'is-opened': isOpened } ); return ( - +