MetaBoxes: Moving meta boxes out of the generic editor module (#5175)

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,

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( {
 			<HeaderToolbar />
 			{ ! isPublishSidebarOpen && (
 				<div className="edit-post-header__settings">
-					<PostSavedState />
+					<PostSavedState
+						forceIsDirty={ hasActiveMetaboxes }
+						forceIsSaving={ isSaving }
+					/>
 					<PostPreviewButton />
 					<PostPublishPanelToggle
 						isOpen={ isPublishSidebarOpen }
@@ -73,6 +80,8 @@ export default connect(
 	( state ) => ( {
 		isGeneralSidebarEditorOpen: getOpenedGeneralSidebar( state ) === 'editor',
 		isPublishSidebarOpen: isPublishSidebarOpened( state ),
+		hasActiveMetaboxes: hasMetaBoxes( state ),
+		isSaving: isSavingMetaBoxes( state ),
 	} ),
 	{
 		onOpenGeneralSidebar: () => openGeneralSidebar( 'editor' ),

edit-post/components/layout/index.js

@@ -3,14 +3,14 @@
  */
 import { connect } from 'react-redux';
 import classnames from 'classnames';
+import { some } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { Popover, navigateRegions } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import {
-	MetaBoxes,
 	AutosaveMonitor,
 	UnsavedChangesWarning,
 	EditorNotices,
@@ -27,13 +27,16 @@ 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,
 	isFeatureActive,
 	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 (
 		<div className={ className }>
 			<DocumentTitle />
-			<UnsavedChangesWarning />
+			<UnsavedChangesWarning forceIsDirty={ () => {
+				return some( metaBoxes, ( metaBox, location ) => {
+					return metaBox.isActive &&
+						jQuery( getMetaBoxContainer( location ) ).serialize() !== metaBox.data;
+				} );
+			} } />
 			<AutosaveMonitor />
 			<Header />
 			<div className="edit-post-layout__content" role="region" aria-label={ __( 'Editor content' ) } tabIndex="-1">
@@ -104,6 +113,7 @@ export default connect(
 		publishSidebarOpen: isPublishSidebarOpened( state ),
 		hasFixedToolbar: isFeatureActive( state, 'fixedToolbar' ),
 		plugin: getActivePlugin( state ),
+		metaBoxes: getMetaBoxes( state ),
 	} ),
 	{
 		onClosePublishSidebar: closePublishSidebar,

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;
 	}

editor/components/meta-boxes/index.js → 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 );

editor/components/meta-boxes/meta-boxes-area/index.js → 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 (
 			<div className={ classes }>
 				{ isSaving && <Spinner /> }
-				<div className="editor-meta-boxes-area__container" ref={ this.bindContainerNode } />
-				<div className="editor-meta-boxes-area__clear" />
+				<div className="edit-post-meta-boxes-area__container" ref={ this.bindContainerNode } />
+				<div className="edit-post-meta-boxes-area__clear" />
 			</div>
 		);
 	}
@@ -86,4 +86,9 @@ function mapStateToProps( state ) {
 	};
 }
 
-export default connect( mapStateToProps )( MetaBoxesArea );
+export default connect(
+	mapStateToProps,
+	undefined,
+	undefined,
+	{ storeKey: 'edit-post' }
+)( MetaBoxesArea );

editor/components/meta-boxes/meta-boxes-area/style.scss → 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;
 }

editor/components/meta-boxes/meta-boxes-panel/index.js → 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 (
-			<Panel className="editor-meta-boxes-panel">
+			<Panel className="edit-post-meta-boxes-panel">
 				<Button
 					onClick={ this.toggle }
 					aria-expanded={ isOpened }
-					className="editor-meta-boxes-panel__toggle"
+					className="edit-post-meta-boxes-panel__toggle"
 				>
 					<PanelHeader>
 						{ __( 'Extended Settings' ) }

editor/components/meta-boxes/meta-boxes-panel/style.scss → edit-post/components/meta-boxes/meta-boxes-panel/style.scss

@@ -1,4 +1,4 @@
- .editor-meta-boxes-panel {
+ .edit-post-meta-boxes-panel {
 	border: 0;
 
 	// don't show unless sidebar is also opened
@@ -8,14 +8,14 @@
 	}
 }
 
-.editor-meta-boxes-panel__body {
+.edit-post-meta-boxes-panel__body {
 	display: none;
 	&.is-opened {
 		display: block;
 	}
 }
 
-.editor-meta-boxes-panel__toggle {
+.edit-post-meta-boxes-panel__toggle {
 	display: block;
 	padding: 0;
 	width: 100%;

edit-post/components/sidebar/post-settings/index.js

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { Panel } from '@wordpress/components';
-import { MetaBoxes } from '@wordpress/editor';
 
 /**
  * Internal Dependencies
@@ -16,6 +15,7 @@ import DiscussionPanel from '../discussion-panel';
 import LastRevision from '../last-revision';
 import PageAttributes from '../page-attributes';
 import DocumentOutlinePanel from '../document-outline-panel';
+import MetaBoxes from '../../meta-boxes';
 
 const panel = (
 	<Panel>

edit-post/index.js

@@ -19,6 +19,7 @@ import './assets/stylesheets/main.scss';
 import './hooks';
 import Layout from './components/layout';
 import store from './store';
+import { initializeMetaBoxState } from './store/actions';
 
 export * from './api';
 
@@ -91,7 +92,7 @@ export function initializeEditor( id, post, settings ) {
 	const reboot = reinitializeEditor.bind( null, target, settings );
 	const ReduxProvider = createProvider( 'edit-post' );
 
-	const provider = render(
+	render(
 		<EditorProvider settings={ settings } post={ post }>
 			<ErrorBoundary onError={ reboot }>
 				<ReduxProvider store={ store }>
@@ -103,6 +104,8 @@ export function initializeEditor( id, post, settings ) {
 	);
 
 	return {
-		initializeMetaBoxes: provider.initializeMetaBoxes,
+		initializeMetaBoxes( metaBoxes ) {
+			store.dispatch( initializeMetaBoxState( metaBoxes ) );
+		},
 	};
 }

edit-post/store/actions.js

@@ -122,3 +122,61 @@ export function switchEditorMode( mode ) {
 		mode,
 	};
 }
+
+/**
+ * Returns an action object used to check the state of meta boxes at a location.
+ *
+ * This should only be fired once to initialize meta box state. If a meta box
+ * area is empty, this will set the store state to indicate that React should
+ * not render the meta box area.
+ *
+ * Example: metaBoxes = { side: true, normal: false }.
+ *
+ * This indicates that the sidebar has a meta box but the normal area does not.
+ *
+ * @param {Object} metaBoxes Whether meta box locations are active.
+ *
+ * @return {Object} Action object.
+ */
+export function initializeMetaBoxState( metaBoxes ) {
+	return {
+		type: 'INITIALIZE_META_BOX_STATE',
+		metaBoxes,
+	};
+}
+
+/**
+ * Returns an action object used to request meta box update.
+ *
+ * @return {Object}      Action object.
+ */
+export function requestMetaBoxUpdates() {
+	return {
+		type: 'REQUEST_META_BOX_UPDATES',
+	};
+}
+
+/**
+ * Returns an action object used signal a successfull meta nox update.
+ *
+ * @return {Object} Action object.
+ */
+export function metaBoxUpdatesSuccess() {
+	return {
+		type: 'META_BOX_UPDATES_SUCCESS',
+	};
+}
+
+/**
+ * Returns an action object used set the saved meta boxes data.
+ * This is used to check if the meta boxes have been touched when leaving the editor.
+ *
+ * @param   {Object} dataPerLocation Meta Boxes Data per location.
+ * @return {Object}                 Action object.
+ */
+export function setMetaBoxSavedData( dataPerLocation ) {
+	return {
+		type: 'META_BOX_SET_SAVED_DATA',
+		dataPerLocation,
+	};
+}