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,47 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
+/**
+ * WordPress dependencies
+ */
+import {
+ BlockList,
+ PostTitle,
+ WritingFlow,
+ DefaultBlockAppender,
+ EditorGlobalKeyboardShortcuts,
+ BlockSelectionClearer,
+} 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 }
+ />
+ </WritingFlow>
+ <DefaultBlockAppender />
+ </BlockSelectionClearer>
+ );
+ /* eslint-enable jsx-a11y/no-static-element-interactions */
+}
+
+export default connect(
+ ( state ) => ( {
+ hasFixedToolbar: isFeatureActive( state, 'fixedToolbar' ),
+ } )
+)( VisualEditor );

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

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

@@ -8,17 +8,15 @@ import { connect } from 'react-redux';
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { IconButton } from '@wordpress/components';
+import { BlockCount } from '@wordpress/editor';
 
 /**
  * Internal Dependencies
  */
-import { getActivePanel, getSelectedBlockCount } from '../../selectors';
-import { toggleSidebar, setActivePanel } from '../../actions';
-
-const SidebarHeader = ( { panel, onSetPanel, onToggleSidebar, count } ) => {
- // Do not display "0 Blocks".
- count = count === 0 ? 1 : count;
+import { getActivePanel } from '../../store/selectors';
+import { toggleSidebar, setActivePanel } from '../../store/actions';
 
+const SidebarHeader = ( { panel, onSetPanel, onToggleSidebar } ) => {
  return (
  <div className="components-panel__header editor-sidebar__panel-tabs">
  <button
@@ -28,13 +26,22 @@ const SidebarHeader = ( { panel, onSetPanel, onToggleSidebar, count } ) => {
  >
  { __( 'Document' ) }
  </button>
- <button
- onClick={ () => onSetPanel( 'block' ) }
- className={ `editor-sidebar__panel-tab ${ panel === 'block' ? 'is-active' : '' }` }
- aria-label={ __( 'Block settings' ) }
- >
- { sprintf( _n( 'Block', '%d Blocks', count ), count ) }
- </button>
+ <BlockCount>
+ { ( count ) => {
+ // Do not display "0 Blocks".
+ count = count === 0 ? 1 : count;
+
+ return (
+ <button
+ onClick={ () => onSetPanel( 'block' ) }
+ className={ `editor-sidebar__panel-tab ${ panel === 'block' ? 'is-active' : '' }` }
+ aria-label={ __( 'Block settings' ) }
+ >
+ { sprintf( _n( 'Block', '%d Blocks', count ), count ) }
+ </button>
+ );
+ } }
+ </BlockCount>
  <IconButton
  onClick={ onToggleSidebar }
  icon="no-alt"
@@ -47,7 +54,6 @@ const SidebarHeader = ( { panel, onSetPanel, onToggleSidebar, count } ) => {
 export default connect(
  ( state ) => ( {
  panel: getActivePanel( state ),
- count: getSelectedBlockCount( state ),
  } ),
  ( dispatch ) => ( {
  onSetPanel: ( panel ) => dispatch( setActivePanel( panel ) ),

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

@@ -17,7 +17,7 @@ import PostSettings from './post-settings';
 import BlockInspectorPanel from './block-inspector-panel';
 import Header from './header';
 
-import { getActivePanel } from '../../selectors';
+import { getActivePanel } from '../../store/selectors';
 
 const Sidebar = ( { panel } ) => {
  return (

editor/edit-post/sidebar/last-revision/index.js → edit-post/components/sidebar/last-revision/index.js

@@ -2,11 +2,7 @@
  * WordPress dependencies
  */
 import { PanelBody } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { PostLastRevision, PostLastRevisionCheck } from '../../../components';
+import { PostLastRevision, PostLastRevisionCheck } from '@wordpress/editor';
 
 function LastRevision() {
  return (