Framework: Extract "edit-post" to its own module

bin/build-plugin-zip.sh

@@ -101,6 +101,7 @@ zip -r gutenberg.zip \
 	components/build/*.{js,map} \
 	date/build/*.{js,map} \
 	editor/build/*.{js,map} \
+	edit-post/build/*.{js,map} \
 	element/build/*.{js,map} \
 	i18n/build/*.{js,map} \
 	utils/build/*.{js,map} \

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`, 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`, 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:
 

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

@@ -12,8 +12,8 @@ import { MenuItemsGroup, MenuItemsToggle, withInstanceId } from '@wordpress/comp
 /**
  * Internal Dependencies
  */
-import { isFeatureActive } from '../../../selectors';
-import { toggleFeature } from '../../../actions';
+import { isFeatureActive } from '../../../store/selectors';
+import { toggleFeature } from '../../../store/actions';
 
 function FeatureToggle( { onToggle, active } ) {
 	return (

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

@@ -7,23 +7,23 @@ 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';
-import { isFeatureActive } from '../../../selectors';
+	NavigableToolbar,
+} from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { isFeatureActive } from '../../../store/selectors';
 
-function HeaderToolbar( { hasFixedToolbar } ) {
+function HeaderToolbar( { hasFixedToolbar, onShowInspector } ) {
 	return (
 		<NavigableToolbar
 			className="editor-header-toolbar"
@@ -36,7 +36,7 @@ function HeaderToolbar( { hasFixedToolbar } ) {
 			<MultiBlocksSwitcher />
 			{ hasFixedToolbar && (
 				<div className="editor-header-toolbar__block-toolbar">
-					<BlockToolbar />
+					<BlockToolbar onShowInspector={ onShowInspector } />
 				</div>
 			) }
 		</NavigableToolbar>

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

@@ -8,26 +8,26 @@ import { connect } from 'react-redux';
  */
 import { __ } from '@wordpress/i18n';
 import { IconButton } from '@wordpress/components';
+import { PostPreviewButton, PostSavedState, PostPublishWithDropdown } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
-import { PostPreviewButton, PostSavedState, PostPublishWithDropdown } from '../../components';
 import EllipsisMenu from './ellipsis-menu';
 import HeaderToolbar from './header-toolbar';
-import { isEditorSidebarOpened } from '../../selectors';
-import { toggleSidebar } from '../../actions';
+import { isEditorSidebarOpened } from '../../store/selectors';
+import { toggleSidebar } from '../../store/actions';
 
-function Header( { onToggleSidebar, isSidebarOpened } ) {
+function Header( { onToggleSidebar, isSidebarOpened, onShowInspector } ) {
 	return (
 		<div
 			role="region"
 			aria-label={ __( 'Editor toolbar' ) }
 			className="editor-header"
 			tabIndex="-1"
 		>
-			<HeaderToolbar />
+			<HeaderToolbar onShowInspector={ onShowInspector } />
 			<div className="editor-header__settings">
 				<PostSavedState />
 				<PostPreviewButton />

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 { getEditorMode } from '../../../selectors';
+import { getEditorMode } from '../../../store/selectors';
 
 /**
  * Set of available mode options.

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

@@ -9,6 +9,13 @@ import classnames from 'classnames';
  */
 import { Popover, navigateRegions } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import {
+	MetaBoxes,
+	AutosaveMonitor,
+	UnsavedChangesWarning,
+	EditorNotices,
+	DocumentTitle,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -18,29 +25,38 @@ 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 { MetaBoxes, AutosaveMonitor, UnsavedChangesWarning, EditorNotices } from '../../components';
 import {
 	getEditorMode,
 	isEditorSidebarOpened,
-} from '../../selectors';
+} from '../../store/selectors';
+import {
+	toggleSidebar,
+	setActivePanel,
+} from '../../store/actions';
 
-function Layout( { mode, isSidebarOpened } ) {
+function Layout( { mode, isSidebarOpened, ...props } ) {
 	const className = classnames( 'editor-layout', {
 		'is-sidebar-opened': isSidebarOpened,
 	} );
 
+	const onShowInspector = () => {
+		if ( ! isSidebarOpened ) {
+			props.toggleSidebar();
+		}
+		props.setActivePanel( 'block' );
+	};
+
 	return (
 		<div className={ className }>
 			<DocumentTitle />
 			<EditorNotices />
 			<UnsavedChangesWarning />
 			<AutosaveMonitor />
-			<Header />
+			<Header onShowInspector={ onShowInspector } />
 			<div className="editor-layout__content" role="region" aria-label={ __( 'Editor content' ) } tabIndex="-1">
 				<div className="editor-layout__editor">
 					{ mode === 'text' && <TextEditor /> }
-					{ mode === 'visual' && <VisualEditor /> }
+					{ mode === 'visual' && <VisualEditor onShowInspector={ onShowInspector } /> }
 				</div>
 				<div className="editor-layout__metaboxes">
 					<MetaBoxes location="normal" />
@@ -57,4 +73,5 @@ export default connect(
 		mode: getEditorMode( state ),
 		isSidebarOpened: isEditorSidebarOpened( state ),
 	} ),
+	{ toggleSidebar, setActivePanel }
 )( navigateRegions( Layout ) );

editor/edit-post/modes/text-editor/index.js → edit-post/components/modes/text-editor/index.js

@@ -1,8 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { PostTextEditor, PostTextEditorToolbar, PostTitle } from '@wordpress/editor';
+
 /**
  * Internal dependencies
  */
 import './style.scss';
-import { PostTextEditor, PostTextEditorToolbar, PostTitle } from '../../../components';
 
 function TextEditor() {
 	return (

edit-post/components/modes/visual-editor/index.js

@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockList,
+	PostTitle,
+	WritingFlow,
+	DefaultBlockAppender,
+	EditorGlobalKeyboardShortcuts,
+	BlockSelectionClearer,
+	InserterWithShortcuts,
+} from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { isFeatureActive } from '../../../store/selectors';
+
+function VisualEditor( { hasFixedToolbar, onShowInspector } ) {
+	// Disable reason: Clicking the canvas should clear the selection
+	/* eslint-disable jsx-a11y/no-static-element-interactions */
+	return (
+		<BlockSelectionClearer className="editor-visual-editor">
+			<EditorGlobalKeyboardShortcuts />
+			<WritingFlow>
+				<PostTitle />
+				<BlockList
+					showContextualToolbar={ ! hasFixedToolbar }
+					onShowInspector={ onShowInspector }
+				/>
+				<DefaultBlockAppender />
+			</WritingFlow>
+			<InserterWithShortcuts />
+		</BlockSelectionClearer>
+	);
+	/* eslint-enable jsx-a11y/no-static-element-interactions */
+}
+
+export default connect(
+	( state ) => ( {
+		hasFixedToolbar: isFeatureActive( state, 'fixedToolbar' ),
+	} )
+)( VisualEditor );

editor/edit-post/modes/visual-editor/style.scss → edit-post/components/modes/visual-editor/style.scss

@@ -66,45 +66,6 @@
 	}
 }
 
-.editor-visual-editor__inserter {
-	display: flex;
-	align-items: baseline;
-	max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible );
-	margin: 0 auto;
-	clear: both;
-
-	padding: $block-padding;
-	padding-left: $block-padding - 8px; // Offset by left button's own padding
-	@include break-small {
-		padding: $block-padding ( $block-padding + $block-mover-padding-visible );
-		padding-left: $block-padding + $block-mover-padding-visible - 8px;
-	}
-
-	> .editor-inserter__block {
-		flex-direction: row;
-		opacity: 0;
-		transition: opacity 150ms;
-		margin: 0 10px;
-		width: auto;
-		font-family: $default-font;
-		font-size: $default-font-size;
-		box-shadow: none;
-		padding: 6px;
-		align-items: center;
-	}
-
-	&:hover > .editor-inserter__block,
-	&.is-showing-controls > .editor-inserter__block {
-		opacity: 1;
-	}
-}
-
-.editor-visual-editor__inserter-block-icon {
-	display: inline-block;
-	margin-right: 8px;
-	height: 20px;
-}
-
 .editor-visual-editor .editor-post-title {
 	margin-left: auto;
 	margin-right: auto;
@@ -139,3 +100,16 @@
 		}
 	}
 }
+
+.editor-visual-editor .editor-inserter-with-shortcuts {
+	max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible );
+	margin: 0 auto;
+	clear: both;
+
+	padding: $block-padding;
+	padding-left: $block-padding - 8px; // Offset by left button's own padding
+	@include break-small {
+		padding: $block-padding ( $block-padding + $block-mover-padding-visible );
+		padding-left: $block-padding + $block-mover-padding-visible - 8px;
+	}
+}

editor/edit-post/sidebar/block-inspector-panel/index.js → edit-post/components/sidebar/block-inspector-panel/index.js

@@ -2,12 +2,12 @@
  * WordPress dependencies
  */
 import { Panel, PanelBody } from '@wordpress/components';
+import { BlockInspector } from '@wordpress/editor';
 
 /**
  * Internal Dependencies
  */
 import './style.scss';
-import { BlockInspector } from '../../../components';
 
 function BlockInspectorPanel() {
 	return (

editor/edit-post/sidebar/discussion-panel/index.js → edit-post/components/sidebar/discussion-panel/index.js

@@ -8,13 +8,13 @@ import { connect } from 'react-redux';
  */
 import { __ } from '@wordpress/i18n';
 import { PanelBody, PanelRow } from '@wordpress/components';
+import { PostComments, PostPingbacks } from '@wordpress/editor';
 
 /**
  * Internal Dependencies
  */
-import { PostComments, PostPingbacks } from '../../../components';
-import { isEditorSidebarPanelOpened } from '../../../selectors';
-import { toggleSidebarPanel } from '../../../actions';
+import { isEditorSidebarPanelOpened } from '../../../store/selectors';
+import { toggleSidebarPanel } from '../../../store/actions';
 
 /**
  * Module Constants

editor/edit-post/sidebar/document-outline-panel/index.js → edit-post/components/sidebar/document-outline-panel/index.js

@@ -8,13 +8,13 @@ import { connect } from 'react-redux';
  */
 import { __ } from '@wordpress/i18n';
 import { PanelBody } from '@wordpress/components';
+import { DocumentOutline, DocumentOutlineCheck } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import { DocumentOutline, DocumentOutlineCheck } from '../../../components';
-import { isEditorSidebarPanelOpened } from '../../../selectors';
-import { toggleSidebarPanel } from '../../../actions';
+import { isEditorSidebarPanelOpened } from '../../../store/selectors';
+import { toggleSidebarPanel } from '../../../store/actions';
 
 /**
  * Module constants

editor/edit-post/sidebar/featured-image/index.js → edit-post/components/sidebar/featured-image/index.js

@@ -8,13 +8,13 @@ import { connect } from 'react-redux';
  */
 import { __ } from '@wordpress/i18n';
 import { PanelBody } from '@wordpress/components';
+import { PostFeaturedImage } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import { PostFeaturedImage } from '../../../components';
-import { isEditorSidebarPanelOpened } from '../../../selectors';
-import { toggleSidebarPanel } from '../../../actions';
+import { isEditorSidebarPanelOpened } from '../../../store/selectors';
+import { toggleSidebarPanel } from '../../../store/actions';
 
 /**
  * Module Constants