Components: Expose the Editor's reusable components

editor/components/README.md

@@ -0,0 +1,10 @@
+# Editor Components
+
+This folder holds reusable editor components exported by the `editor` module.
+These components combined as children of the `EditorProvider` component can be use to build alternative Editor Layouts.
+
+## Which components should live in this folder?
+
+ - A component in this folder is any component you can reuse to build your own editor's layout.
+ - It shouldn't include any "layout styling".
+ - the only requirement to use this component is to to be included as a children of EditorProvider in the elements' hierarchy.

editor/autosave-monitor/index.js → editor/components/autosave-monitor/index.js

@@ -11,11 +11,11 @@ import { Component } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { autosave } from '../actions';
+import { autosave } from '../../actions';
 import {
 	isEditedPostDirty,
 	isEditedPostSaveable,
-} from '../selectors';
+} from '../../selectors';
 
 export class AutosaveMonitor extends Component {
 	componentDidUpdate( prevProps ) {

editor/document-outline/index.js → editor/components/document-outline/index.js

@@ -14,8 +14,8 @@ import { __ } from '@wordpress/i18n';
  */
 import './style.scss';
 import DocumentOutlineItem from './item';
-import { getBlocks } from '../selectors';
-import { selectBlock } from '../actions';
+import { getBlocks } from '../../selectors';
+import { selectBlock } from '../../actions';
 
 /**
  * Module constants

editor/components/index.js

@@ -0,0 +1,38 @@
+// Post Related Components
+export { default as AutosaveMonitor } from './autosave-monitor';
+export { default as DocumentOutline } from './document-outline';
+export { default as MetaBoxes } from './meta-boxes';
+export { default as PageAttributes } from './page-attributes';
+export { default as PageAttributesCheck } from './page-attributes/check';
+export { default as PostAuthor } from './post-author';
+export { default as PostAuthorCheck } from './post-author/check';
+export { default as PostComments } from './post-comments';
+export { default as PostExcerpt } from './post-excerpt';
+export { default as PostFeaturedImage } from './post-featured-image';
+export { default as PostFormat } from './post-format';
+export { default as PostFormatCheck } from './post-format/check';
+export { default as PostLastRevision } from './post-last-revision';
+export { default as PostLastRevisionCheck } from './post-last-revision/check';
+export { default as PostPendingStatus } from './post-pending-status';
+export { default as PostPendingStatusCheck } from './post-pending-status/check';
+export { default as PostPingbacks } from './post-pingbacks';
+export { default as PostPreviewButton } from './post-preview-button';
+export { default as PostPublishButton } from './post-publish-button';
+export { default as PostPublishButtonLabel } from './post-publish-button/label';
+export { default as PostSavedState } from './post-saved-state';
+export { default as PostSchedule } from './post-schedule';
+export { default as PostScheduleLabel } from './post-schedule/label';
+export { default as PostSticky } from './post-sticky';
+export { default as PostStickyCheck } from './post-sticky/check';
+export { default as PostTaxonomies } from './post-taxonomies';
+export { default as PostTrash } from './post-trash';
+export { default as PostVisibility } from './post-visibility';
+export { default as PostVisibilityLabel } from './post-visibility/label';
+export { default as UnsavedChangesWarning } from './unsaved-changes-warning';
+export { default as WordCount } from './word-count';
+
+// Content Related Components
+export { default as Inserter } from './inserter';
+
+// State Related Components
+export { default as EditorProvider } from './provider';

editor/inserter/index.js → editor/components/inserter/index.js

@@ -16,13 +16,13 @@ import { Component } from '@wordpress/element';
  * Internal dependencies
  */
 import InserterMenu from './menu';
-import { getBlockInsertionPoint, getEditorMode } from '../selectors';
+import { getBlockInsertionPoint, getEditorMode } from '../../selectors';
 import {
 	insertBlock,
 	setBlockInsertionPoint,
 	clearBlockInsertionPoint,
 	hideInsertionPoint,
-} from '../actions';
+} from '../../actions';
 
 class Inserter extends Component {
 	constructor() {

editor/inserter/menu.js → editor/components/inserter/menu.js

@@ -17,8 +17,8 @@ import { getCategories, getBlockTypes, BlockIcon } from '@wordpress/blocks';
  * Internal dependencies
  */
 import './style.scss';
-import { getBlocks, getRecentlyUsedBlocks } from '../selectors';
-import { showInsertionPoint, hideInsertionPoint } from '../actions';
+import { getBlocks, getRecentlyUsedBlocks } from '../../selectors';
+import { showInsertionPoint, hideInsertionPoint } from '../../actions';
 
 const { TAB, LEFT, UP, RIGHT, DOWN } = keycodes;
 

editor/meta-boxes/index.js → editor/components/meta-boxes/index.js

@@ -8,9 +8,9 @@ import { connect } from 'react-redux';
  */
 import MetaBoxesIframe from './meta-boxes-iframe';
 import MetaBoxesPanel from './meta-boxes-panel';
-import { getMetaBox } from '../selectors';
+import { getMetaBox } from '../../selectors';
 
-function MetaBox( { location, isActive, usePanel = false } ) {
+function MetaBoxes( { location, isActive, usePanel = false } ) {
 	if ( ! isActive ) {
 		return null;
 	}
@@ -30,4 +30,4 @@ function MetaBox( { location, isActive, usePanel = false } ) {
 
 export default connect( ( state, ownProps ) => ( {
 	isActive: getMetaBox( state, ownProps.location ).isActive,
-} ) )( MetaBox );
+} ) )( MetaBoxes );

editor/meta-boxes/meta-boxes-iframe/index.js → editor/components/meta-boxes/meta-boxes-iframe/index.js

@@ -17,8 +17,8 @@ import { Component } from '@wordpress/element';
  */
 import './style.scss';
 import './meta-box-iframe.scss';
-import { handleMetaBoxReload, metaBoxStateChanged } from '../../actions';
-import { getMetaBox, isSavingPost } from '../../selectors';
+import { handleMetaBoxReload, metaBoxStateChanged } from '../../../actions';
+import { getMetaBox, isSavingPost } from '../../../selectors';
 
 class MetaBoxesIframe extends Component {
 	constructor() {

editor/page-attributes/check.js → editor/components/page-attributes/check.js

@@ -12,7 +12,7 @@ import { withAPIData } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import { getCurrentPostType } from '../selectors';
+import { getCurrentPostType } from '../../selectors';
 
 export function PageAttributesCheck( { postType, children } ) {
 	const supportsPageAttributes = get( postType.data, [

editor/page-attributes/index.js → editor/components/page-attributes/index.js

@@ -14,8 +14,8 @@ import { withInstanceId } from '@wordpress/components';
  * Internal dependencies
  */
 import PageAttributesCheck from './check';
-import { editPost } from '../actions';
-import { getEditedPostAttribute } from '../selectors';
+import { editPost } from '../../actions';
+import { getEditedPostAttribute } from '../../selectors';
 
 export function PageAttributes( { onUpdateOrder, instanceId, order } ) {
 	const setUpdatedOrder = ( event ) => {

editor/post-author/index.js → editor/components/post-author/index.js

@@ -15,8 +15,8 @@ import { Component } from '@wordpress/element';
  * Internal dependencies
  */
 import PostAuthorCheck from './check';
-import { getEditedPostAttribute } from '../selectors';
-import { editPost } from '../actions';
+import { getEditedPostAttribute } from '../../selectors';
+import { editPost } from '../../actions';
 
 export class PostAuthor extends Component {
 	constructor() {

editor/post-comments/index.js → editor/components/post-comments/index.js

@@ -12,8 +12,8 @@ import { FormToggle, withInstanceId } from '@wordpress/components';
 /**
  * Internal Dependencies
  */
-import { getEditedPostAttribute } from '../selectors';
-import { editPost } from '../actions';
+import { getEditedPostAttribute } from '../../selectors';
+import { editPost } from '../../actions';
 
 function PostComments( { commentStatus = 'open', instanceId, ...props } ) {
 	const onToggleComments = () => props.editPost( { comment_status: commentStatus === 'open' ? 'closed' : 'open' } );

editor/post-excerpt/index.js → editor/components/post-excerpt/index.js

@@ -13,8 +13,8 @@ import { ExternalLink } from '@wordpress/components';
  * Internal Dependencies
  */
 import './style.scss';
-import { getEditedPostExcerpt } from '../selectors';
-import { editPost } from '../actions';
+import { getEditedPostExcerpt } from '../../selectors';
+import { editPost } from '../../actions';
 
 function PostExcerpt( { excerpt, onUpdateExcerpt } ) {
 	const onChange = ( event ) => onUpdateExcerpt( event.target.value );

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

@@ -15,8 +15,8 @@ import { MediaUploadButton } from '@wordpress/blocks';
  * Internal dependencies
  */
 import './style.scss';
-import { getEditedPostAttribute } from '../selectors';
-import { editPost } from '../actions';
+import { getEditedPostAttribute } from '../../selectors';
+import { editPost } from '../../actions';
 
 function PostFeaturedImage( { featuredImageId, onUpdateImage, onRemoveImage, media } ) {
 	return (

editor/post-format/check.js → editor/components/post-format/check.js

@@ -12,7 +12,7 @@ import { withAPIData } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import { getCurrentPostType } from '../selectors';
+import { getCurrentPostType } from '../../selectors';
 
 function PostFormatCheck( { postType, children } ) {
 	if ( ! get( postType.data, [ 'supports', 'post-formats' ] ) ) {

editor/post-format/index.js → editor/components/post-format/index.js

@@ -15,8 +15,8 @@ import { withInstanceId } from '@wordpress/components';
  */
 import './style.scss';
 import PostFormatCheck from './check';
-import { getEditedPostAttribute, getSuggestedPostFormat } from '../selectors';
-import { editPost } from '../actions';
+import { getEditedPostAttribute, getSuggestedPostFormat } from '../../selectors';
+import { editPost } from '../../actions';
 
 const POST_FORMATS = [
 	{ id: 'aside', caption: __( 'Aside' ) },

editor/post-last-revision/check.js → editor/components/post-last-revision/check.js

@@ -6,7 +6,7 @@ import { connect } from 'react-redux';
 /**
  * Internal dependencies
  */
-import { getCurrentPostLastRevisionId } from '../selectors';
+import { getCurrentPostLastRevisionId } from '../../selectors';
 
 function PostLastRevisionCheck( { lastRevisionId, children } ) {
 	if ( ! lastRevisionId ) {

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

@@ -17,8 +17,8 @@ import PostLastRevisionCheck from './check';
 import {
 	getCurrentPostLastRevisionId,
 	getCurrentPostRevisionsCount,
-} from '../selectors';
-import { getWPAdminURL } from '../utils/url';
+} from '../../selectors';
+import { getWPAdminURL } from '../../utils/url';
 
 function LastRevision( { lastRevisionId, revisionsCount } ) {
 	return (

editor/post-pending-status/check.js → editor/components/post-pending-status/check.js

@@ -12,7 +12,7 @@ import { withAPIData } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import { isCurrentPostPublished } from '../selectors';
+import { isCurrentPostPublished } from '../../selectors';
 
 export function PostPendingStatusCheck( { isPublished, children, user } ) {
 	if ( isPublished || ! user.data || ! user.data.capabilities.publish_posts ) {

editor/post-pending-status/index.js → editor/components/post-pending-status/index.js

@@ -14,8 +14,8 @@ import { FormToggle, withInstanceId } from '@wordpress/components';
  * Internal dependencies
  */
 import PostPendingStatusCheck from './check';
-import { getEditedPostAttribute } from '../selectors';
-import { editPost } from '../actions';
+import { getEditedPostAttribute } from '../../selectors';
+import { editPost } from '../../actions';
 
 export function PostPendingStatus( { instanceId, status, onUpdateStatus } ) {
 	const pendingId = 'pending-toggle-' + instanceId;

editor/post-pingbacks/index.js → editor/components/post-pingbacks/index.js

@@ -12,8 +12,8 @@ import { FormToggle, withInstanceId } from '@wordpress/components';
 /**
  * Internal Dependencies
  */
-import { getEditedPostAttribute } from '../selectors';
-import { editPost } from '../actions';
+import { getEditedPostAttribute } from '../../selectors';
+import { editPost } from '../../actions';
 
 function PostPingbacks( { pingStatus = 'open', instanceId, ...props } ) {
 	const onTogglePingback = () => props.editPost( { ping_status: pingStatus === 'open' ? 'closed' : 'open' } );

editor/header/preview-button/index.js → editor/components/post-preview-button/index.js

@@ -22,7 +22,7 @@ import {
 } from '../../selectors';
 import { autosave } from '../../actions';
 
-export class PreviewButton extends Component {
+export class PostPreviewButton extends Component {
 	constructor() {
 		super( ...arguments );
 
@@ -124,4 +124,4 @@ export default connect(
 		modified: getEditedPostAttribute( state, 'modified' ),
 	} ),
 	{ autosave }
-)( PreviewButton );
+)( PostPreviewButton );

editor/header/preview-button/test/index.js → editor/components/post-preview-button/test/index.js

@@ -6,20 +6,20 @@ import { shallow } from 'enzyme';
 /**
  * Internal dependencies
  */
-import { PreviewButton } from '../';
+import { PostPreviewButton } from '../';
 
-describe( 'PreviewButton', () => {
+describe( 'PostPreviewButton', () => {
 	describe( 'constructor()', () => {
 		it( 'should initialize with non-awaiting-save', () => {
-			const instance = new PreviewButton( {} );
+			const instance = new PostPreviewButton( {} );
 
 			expect( instance.state.isAwaitingSave ).toBe( false );
 		} );
 	} );
 
 	describe( 'getWindowTarget()', () => {
 		it( 'returns a string unique to the post id', () => {
-			const instance = new PreviewButton( {
+			const instance = new PostPreviewButton( {
 				postId: 1,
 			} );
 
@@ -30,7 +30,7 @@ describe( 'PreviewButton', () => {
 	describe( 'componentDidUpdate()', () => {
 		it( 'should change popup location if save finishes', () => {
 			const wrapper = shallow(
-				<PreviewButton
+				<PostPreviewButton
 					postId={ 1 }
 					link="https://wordpress.org/?p=1"
 					isSaveable
@@ -63,7 +63,7 @@ describe( 'PreviewButton', () => {
 			} );
 
 			const wrapper = shallow(
-				<PreviewButton { ...props } autosave={ autosave } />
+				<PostPreviewButton { ...props } autosave={ autosave } />
 			);
 
 			wrapper.simulate( 'click', { preventDefault } );
@@ -115,7 +115,7 @@ describe( 'PreviewButton', () => {
 	describe( 'render()', () => {
 		it( 'should render a link', () => {
 			const wrapper = shallow(
-				<PreviewButton
+				<PostPreviewButton
 					postId={ 1 }
 					isSaveable
 					link="https://wordpress.org/?p=1" />
@@ -128,7 +128,7 @@ describe( 'PreviewButton', () => {
 
 		it( 'should be disabled if post is not saveable', () => {
 			const wrapper = shallow(
-				<PreviewButton
+				<PostPreviewButton
 					postId={ 1 }
 					link="https://wordpress.org/?p=1" />
 			);

editor/header/publish-button/index.js → editor/components/post-publish-button/index.js

@@ -24,7 +24,7 @@ import {
 	isEditedPostPublishable,
 } from '../../selectors';
 
-export function PublishButton( {
+export function PostPublishButton( {
 	isSaving,
 	onStatusChange,
 	onSave,
@@ -49,7 +49,7 @@ export function PublishButton( {
 		publishStatus = 'publish';
 	}
 
-	const className = classnames( 'editor-publish-button', {
+	const className = classnames( 'editor-post-publish-button', {
 		'is-saving': isSaving,
 	} );
 
@@ -95,4 +95,4 @@ const applyWithAPIData = withAPIData( () => {
 export default flowRight( [
 	applyConnect,
 	applyWithAPIData,
-] )( PublishButton );
+] )( PostPublishButton );

editor/header/publish-button/style.scss → editor/components/post-publish-button/style.scss

@@ -1,5 +1,5 @@
-.editor-publish-button.is-saving,
-.editor-publish-button.is-saving:disabled {
+.editor-post-publish-button.is-saving,
+.editor-post-publish-button.is-saving:disabled {
 	position: relative;
 
 	// These styles overrides the disabled state with the button primary styles