Framework: Extract "edit-post" to its own module (#4661)

* Framework: Extract edit-post to its own module
* Fixing the unit tests
* Rename 'editor-*' classes to 'edit-post-*' when applicable
* Fix e2e tests
* Editor with shortcuts: Fix the classnames
* Fix Block Inspector Button classname
* Changes per review
* update renderBlockMenu API

.eslintrc.json

@@ -123,6 +123,10 @@
 				"selector": "ImportDeclaration[source.value=/^utils$/]",
 				"message": "Use @wordpress/utils as import path instead."
 			},
+			{
+				"selector": "ImportDeclaration[source.value=/^edit-poost$/]",
+				"message": "Use @wordpress/edit-post as import path instead."
+			},
 			{
 				"selector": "CallExpression[callee.name=/^__|_n|_x$/]:not([arguments.0.type=/^Literal|BinaryExpression$/])",
 				"message": "Translate function arguments must be string literals."

bin/build-plugin-zip.sh

@@ -106,6 +106,7 @@ zip -r gutenberg.zip \
 	i18n/build/*.{js,map} \
 	data/build/*.{js,map} \
 	utils/build/*.{js,map} \
+	edit-post/build/*.{js,map} \
 	blocks/build/*.css \
 	components/build/*.css \
 	editor/build/*.css \

data/index.js

@@ -5,6 +5,11 @@ import { connect } from 'react-redux';
 import { createStore, combineReducers } from 'redux';
 import { flowRight } from 'lodash';
 
+/**
+ * Internal dependencies
+ */
+export { loadAndPersist, withRehydratation } from './persist';
+
 /**
  * Module constants
  */

docs/coding-guidelines.md

@@ -62,7 +62,7 @@ import TinyMCE from 'tinymce';
 
 #### WordPress Dependencies
 
-To encourage reusability between features, our JavaScript is split into domain-specific modules which [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) one or more functions or objects. In the Gutenberg project, we've distinguished these modules under top-level directories `blocks`, `components`, `editor`, `element`, `data` and `i18n`. These each serve an independent purpose, and often code is shared between them. For example, in order to localize its text, editor code will need to include functions from the `i18n` module.
+To encourage reusability between features, our JavaScript is split into domain-specific modules which [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) one or more functions or objects. In the Gutenberg project, we've distinguished these modules under top-level directories `blocks`, `components`, `editor`, `edit-post`, `element`, `data` and `i18n`. These each serve an independent purpose, and often code is shared between them. For example, in order to localize its text, editor code will need to include functions from the `i18n` module.
 
 Example:
 

docs/meta-box.md

@@ -46,7 +46,7 @@ A copy of the global `$wp_meta_boxes` is made then filtered through `apply_filte
 
 Then each location for this particular type of meta box is checked for whether it is active. If it is not empty a value of true is stored, if it is empty a value of false is stored. This meta box location data is then dispatched by the editor Redux store in `INITIALIZE_META_BOX_STATE`.
 
-Ideally, this could be done at instantiation of the editor and help simplify this flow. However, it is not possible to know the meta box state before `admin_enqueue_scripts`, where we are calling `createEditorInstance()`. This will have to do, unless we want to move `createEditorInstance()` to fire in the footer or at some point after `admin_head`. With recent changes to editor bootstrapping this might now be possible. Test with ACF to make sure.
+Ideally, this could be done at instantiation of the editor and help simplify this flow. However, it is not possible to know the meta box state before `admin_enqueue_scripts`, where we are calling `initializeEditor()`. This will have to do, unless we want to move `initializeEditor()` to fire in the footer or at some point after `admin_head`. With recent changes to editor bootstrapping this might now be possible. Test with ACF to make sure.
 
 ### Redux and React Meta Box Management
 

editor/assets/stylesheets/_z-index.scss → edit-post/assets/stylesheets/_z-index.scss

@@ -24,8 +24,8 @@ $z-layers: (
 	'.editor-block-mover': 1,
 	'.blocks-gallery-item__inline-menu': 20,
 	'.editor-block-settings-menu__popover': 20, // Below the header
-	'.editor-header': 30,
-	'.editor-text-editor__formatting': 30,
+	'.edit-post-header': 30,
+	'.edit-post-text-editor__formatting': 30,
 	'.wp-block-image__resize-handlers': 1, // Resize handlers above sibling inserter
 
 	// Show drop zone above most standard content, but below any overlays
@@ -34,8 +34,8 @@ $z-layers: (
 
 	// Show sidebar above wp-admin navigation bar for mobile viewports:
 	// #wpadminbar { z-index: 99999 }
-	'.editor-sidebar': 100000,
-	'.editor-layout .editor-post-publish-panel': 100001,
+	'.edit-post-sidebar': 100000,
+	'.edit-post-layout .edit-post-post-publish-panel': 100001,
 
 	// Show notices below expanded wp-admin submenus:
 	// #adminmenuwrap { z-index: 9990 }

editor/edit-post/header/editor-actions/index.js → edit-post/components/header/editor-actions/index.js

@@ -9,7 +9,7 @@ export default function EditorActions() {
 	const tools = applyFilters( 'editor.EditorActions.tools', [] );
 	return tools.length ? (
 		<MenuItemsGroup key="tools"
-			className="editor-actions"
+			className="edit-post-actions"
 			label={ __( 'Tools' ) }
 		>
 			{ tools }

editor/edit-post/header/ellipsis-menu/index.js → edit-post/components/header/ellipsis-menu/index.js

@@ -14,7 +14,7 @@ import EditorActions from '../editor-actions';
 
 const element = (
 	<Dropdown
-		className="editor-ellipsis-menu"
+		className="edit-post-ellipsis-menu"
 		position="bottom left"
 		renderToggle={ ( { isOpen, onToggle } ) => (
 			<IconButton
@@ -27,9 +27,9 @@ const element = (
 		renderContent={ ( { onClose } ) => (
 			<div>
 				<ModeSwitcher onSelect={ onClose } />
-				<div className="editor-ellipsis-menu__separator" />
+				<div className="edit-post-ellipsis-menu__separator" />
 				<FixedToolbarToggle onToggle={ onClose } />
-				<div className="editor-ellipsis-menu__separator" />
+				<div className="edit-post-ellipsis-menu__separator" />
 				<EditorActions />
 			</div>
 		) }

editor/edit-post/header/ellipsis-menu/style.scss → edit-post/components/header/ellipsis-menu/style.scss

@@ -1,4 +1,4 @@
-.editor-ellipsis-menu {
+.edit-post-ellipsis-menu {
 	// the padding and margin of the ellipsis menu is intentionally non-standard
 	@include break-small() {
 		margin-left: 4px;
@@ -14,7 +14,7 @@
 	}
 }
 
-.editor-ellipsis-menu__separator {
+.edit-post-ellipsis-menu__separator {
 	height: 1px;
 	background: $light-gray-500;
 }

editor/edit-post/header/fixed-toolbar-toggle/index.js → edit-post/components/header/fixed-toolbar-toggle/index.js

@@ -42,5 +42,7 @@ export default connect(
 			dispatch( toggleFeature( 'fixedToolbar' ) );
 			ownProps.onToggle();
 		},
-	} )
+	} ),
+	undefined,
+	{ storeKey: 'edit-post' }
 )( withInstanceId( FeatureToggle ) );

editor/edit-post/header/header-toolbar/index.js → edit-post/components/header/header-toolbar/index.js

@@ -7,26 +7,26 @@ import { connect } from 'react-redux';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import './style.scss';
 import {
 	Inserter,
 	BlockToolbar,
 	TableOfContents,
 	EditorHistoryRedo,
 	EditorHistoryUndo,
 	MultiBlocksSwitcher,
-} from '../../../components';
-import NavigableToolbar from '../../../components/navigable-toolbar';
+	NavigableToolbar,
+} from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
 import { hasFixedToolbar } from '../../../store/selectors';
 
 function HeaderToolbar( { fixedToolbarActive } ) {
 	return (
 		<NavigableToolbar
-			className="editor-header-toolbar"
+			className="edit-post-header-toolbar"
 			aria-label={ __( 'Editor Toolbar' ) }
 		>
 			<Inserter position="bottom right" />
@@ -35,7 +35,7 @@ function HeaderToolbar( { fixedToolbarActive } ) {
 			<TableOfContents />
 			<MultiBlocksSwitcher />
 			{ fixedToolbarActive && (
-				<div className="editor-header-toolbar__block-toolbar">
+				<div className="edit-post-header-toolbar__block-toolbar">
 					<BlockToolbar />
 				</div>
 			) }
@@ -46,5 +46,8 @@ function HeaderToolbar( { fixedToolbarActive } ) {
 export default connect(
 	( state ) => ( {
 		fixedToolbarActive: hasFixedToolbar( state ),
-	} )
+	} ),
+	undefined,
+	undefined,
+	{ storeKey: 'edit-post' }
 )( HeaderToolbar );

editor/edit-post/header/header-toolbar/style.scss → edit-post/components/header/header-toolbar/style.scss

@@ -1,13 +1,13 @@
 // hide all action buttons except the inserter on mobile
-.editor-header-toolbar > .components-button {
+.edit-post-header-toolbar > .components-button {
 	display: none;
 
 	@include break-small() {
 		display: inline-flex;
 	}
 }
 
-.editor-header-toolbar {
+.edit-post-header-toolbar {
 	display: inline-flex;
 	align-items: center;
 
@@ -16,7 +16,7 @@
 	}
 }
 
-.editor-header-toolbar__block-toolbar {
+.edit-post-header-toolbar__block-toolbar {
 	// stacked toolbar
 	position: absolute;
 	top: $header-height;
@@ -53,7 +53,7 @@
 	}
 }
 
-.editor-header-toolbar .table-of-contents {
+.edit-post-header-toolbar .table-of-contents {
 	display: none;
 
 	.is-sidebar-opened & {

editor/edit-post/header/index.js → edit-post/components/header/index.js

@@ -8,16 +8,16 @@ import { connect } from 'react-redux';
  */
 import { __ } from '@wordpress/i18n';
 import { IconButton } from '@wordpress/components';
+import {
+	PostPreviewButton,
+	PostSavedState,
+	PostPublishPanelToggle,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
-import {
-	PostPreviewButton,
-	PostSavedState,
-	PostPublishPanelToggle,
-} from '../../components';
 import EllipsisMenu from './ellipsis-menu';
 import HeaderToolbar from './header-toolbar';
 import { isSidebarOpened } from '../../store/selectors';
@@ -33,12 +33,12 @@ function Header( {
 		<div
 			role="region"
 			aria-label={ __( 'Editor toolbar' ) }
-			className="editor-header"
+			className="edit-post-header"
 			tabIndex="-1"
 		>
 			<HeaderToolbar />
 			{ ! isPublishSidebarOpened && (
-				<div className="editor-header__settings">
+				<div className="edit-post-header__settings">
 					<PostSavedState />
 					<PostPreviewButton />
 					<PostPublishPanelToggle
@@ -67,5 +67,7 @@ export default connect(
 	{
 		onToggleDefaultSidebar: () => toggleSidebar(),
 		onTogglePublishSidebar: () => toggleSidebar( 'publish' ),
-	}
+	},
+	undefined,
+	{ storeKey: 'edit-post' }
 )( Header );

editor/edit-post/header/mode-switcher/index.js → edit-post/components/header/mode-switcher/index.js

@@ -12,7 +12,7 @@ import { MenuItemsGroup } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import shortcuts from '../../keyboard-shortcuts';
+import shortcuts from '../../../keyboard-shortcuts';
 import { getEditorMode } from '../../../store/selectors';
 import { switchEditorMode } from '../../../store/actions';
 
@@ -59,5 +59,7 @@ export default connect(
 			dispatch( switchEditorMode( mode ) );
 			ownProps.onSelect( mode );
 		},
-	} )
+	} ),
+	undefined,
+	{ storeKey: 'edit-post' }
 )( ModeSwitcher );

editor/edit-post/header/style.scss → edit-post/components/header/style.scss

@@ -1,4 +1,4 @@
-.editor-header {
+.edit-post-header {
 	height: $header-height;
 	padding: $item-spacing;
 	border-bottom: 1px solid $light-gray-500;
@@ -7,7 +7,7 @@
 	flex-direction: row;
 	align-items: stretch;
 	justify-content: space-between;
-	z-index: z-index( '.editor-header' );
+	z-index: z-index( '.edit-post-header' );
 	left: 0;
 	right: 0;
 
@@ -27,14 +27,14 @@
 	}
 }
 
-@include editor-left('.editor-header');
+@include editor-left('.edit-post-header');
 
-.editor-header__settings {
+.edit-post-header__settings {
 	display: inline-flex;
 	align-items: center;
 }
 
-.editor-header .components-button {
+.edit-post-header .components-button {
 	border-radius: $button-style__radius-roundrect;
 
 	// header toggle buttons

editor/edit-post/layout/index.js → edit-post/components/layout/index.js

@@ -9,6 +9,14 @@ import classnames from 'classnames';
  */
 import { Popover, navigateRegions } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import {
+	MetaBoxes,
+	AutosaveMonitor,
+	UnsavedChangesWarning,
+	EditorNotices,
+	PostPublishPanel,
+	DocumentTitle,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -18,15 +26,7 @@ import Header from '../header';
 import Sidebar from '../sidebar';
 import TextEditor from '../modes/text-editor';
 import VisualEditor from '../modes/visual-editor';
-import DocumentTitle from '../document-title';
 import EditorModeKeyboardShortcuts from '../modes/keyboard-shortcuts';
-import {
-	MetaBoxes,
-	AutosaveMonitor,
-	UnsavedChangesWarning,
-	EditorNotices,
-	PostPublishPanel,
-} from '../../components';
 import {
 	getEditorMode,
 	hasFixedToolbar,
@@ -43,7 +43,7 @@ function Layout( {
 	fixedToolbarActive,
 	onClosePublishPanel,
 } ) {
-	const className = classnames( 'editor-layout', {
+	const className = classnames( 'edit-post-layout', {
 		'is-sidebar-opened': layoutHasOpenSidebar,
 		'has-fixed-toolbar': fixedToolbarActive,
 	} );
@@ -54,17 +54,17 @@ function Layout( {
 			<UnsavedChangesWarning />
 			<AutosaveMonitor />
 			<Header />
-			<div className="editor-layout__content" role="region" aria-label={ __( 'Editor content' ) } tabIndex="-1">
+			<div className="edit-post-layout__content" role="region" aria-label={ __( 'Editor content' ) } tabIndex="-1">
 				<EditorNotices />
-				<div className="editor-layout__editor">
+				<div className="edit-post-layout__editor">
 					<EditorModeKeyboardShortcuts />
 					{ mode === 'text' && <TextEditor /> }
 					{ mode === 'visual' && <VisualEditor /> }
 				</div>
-				<div className="editor-layout__metaboxes">
+				<div className="edit-post-layout__metaboxes">
 					<MetaBoxes location="normal" />
 				</div>
-				<div className="editor-layout__metaboxes">
+				<div className="edit-post-layout__metaboxes">
 					<MetaBoxes location="advanced" />
 				</div>
 			</div>
@@ -85,5 +85,7 @@ export default connect(
 	} ),
 	{
 		onClosePublishPanel: () => toggleSidebar( 'publish', false ),
-	}
+	},
+	undefined,
+	{ storeKey: 'edit-post' }
 )( navigateRegions( Layout ) );