Move the block components to the block editor module

docs/designers-developers/developers/filters/autocomplete-filters.md

@@ -2,7 +2,7 @@
 
 The `editor.Autocomplete.completers` filter is for extending and overriding the list of autocompleters used by blocks.
 
-The `Autocomplete` component found in `@wordpress/editor` applies this filter. The `@wordpress/components` package provides the foundational `Autocomplete` component that does not apply such a filter, but blocks should generally use the component provided by `@wordpress/editor`.
+The `Autocomplete` component found in `@wordpress/block-editor` applies this filter. The `@wordpress/components` package provides the foundational `Autocomplete` component that does not apply such a filter, but blocks should generally use the component provided by `@wordpress/block-editor`.
 
 ### Example
 

docs/designers-developers/developers/packages.md

@@ -29,12 +29,12 @@ All the packages are also available on [npm](https://www.npmjs.com/org/wordpress
 Using the same `PlainText` example, you would install the editor module with npm:
 
 ```bash
-npm install @wordpress/editor --save
+npm install @wordpress/block-editor --save
 ```
 
 Once installed, you can access the component in your code using:
 
 ```js
-import { PlainText }  from '@wordpress/editor';
+import { PlainText }  from '@wordpress/block-editor';
 ```
 

lib/client-assets.php

@@ -367,18 +367,26 @@ function gutenberg_register_scripts_and_styles() {
 		null
 	);
 
+	gutenberg_override_style(
+		'wp-block-editor',
+		gutenberg_url( 'build/block-editor/style.css' ),
+		array( 'wp-components', 'wp-editor-font' ),
+		filemtime( gutenberg_dir_path() . 'build/editor/style.css' )
+	);
+	wp_style_add_data( 'wp-block-editor', 'rtl', 'replace' );
+
 	gutenberg_override_style(
 		'wp-editor',
 		gutenberg_url( 'build/editor/style.css' ),
-		array( 'wp-components', 'wp-editor-font', 'wp-nux' ),
+		array( 'wp-components', 'wp-block-editor', 'wp-nux' ),
 		filemtime( gutenberg_dir_path() . 'build/editor/style.css' )
 	);
 	wp_style_add_data( 'wp-editor', 'rtl', 'replace' );
 
 	gutenberg_override_style(
 		'wp-edit-post',
 		gutenberg_url( 'build/edit-post/style.css' ),
-		array( 'wp-components', 'wp-editor', 'wp-edit-blocks', 'wp-block-library', 'wp-nux' ),
+		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-block-library', 'wp-nux' ),
 		filemtime( gutenberg_dir_path() . 'build/edit-post/style.css' )
 	);
 	wp_style_add_data( 'wp-edit-post', 'rtl', 'replace' );
@@ -402,7 +410,7 @@ function gutenberg_register_scripts_and_styles() {
 	gutenberg_override_style(
 		'wp-format-library',
 		gutenberg_url( 'build/format-library/style.css' ),
-		array(),
+		array( 'wp-block-editor', 'wp-components' ),
 		filemtime( gutenberg_dir_path() . 'build/format-library/style.css' )
 	);
 	wp_style_add_data( 'wp-format-library', 'rtl', 'replace' );

lib/packages-dependencies.php

@@ -47,12 +47,23 @@
 	'wp-block-serialization-spec-parser'    => array(),
 	'wp-block-editor'                       => array(
 		'lodash',
+		'wp-a11y',
+		'wp-blob',
 		'wp-blocks',
 		'wp-compose',
 		'wp-components',
 		'wp-data',
+		'wp-dom',
 		'wp-element',
+		'wp-hooks',
+		'wp-html-entities',
 		'wp-i18n',
+		'wp-is-shallow-equal',
+		'wp-keycodes',
+		'wp-rich-text',
+		'wp-token-list',
+		'wp-url',
+		'wp-viewport',
 	),
 	'wp-blocks'                             => array(
 		'lodash',
@@ -180,6 +191,7 @@
 	),
 	'wp-escape-html'                        => array(),
 	'wp-format-library'                     => array(
+		'wp-block-editor',
 		'wp-components',
 		'wp-editor',
 		'wp-element',

packages/block-editor/package.json

@@ -23,15 +23,30 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.0.0",
+		"@wordpress/a11y": "file:../a11y",
+		"@wordpress/blob": "file:../blob",
 		"@wordpress/blocks": "file:../blocks",
 		"@wordpress/components": "file:../components",
 		"@wordpress/compose": "file:../compose",
 		"@wordpress/data": "file:../data",
+		"@wordpress/dom": "file:../dom",
 		"@wordpress/element": "file:../element",
+		"@wordpress/hooks": "file:../hooks",
+		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",
+		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
+		"@wordpress/keycodes": "file:../keycodes",
+		"@wordpress/rich-text": "file:../rich-text",
+		"@wordpress/token-list": "file:../token-list",
+		"@wordpress/url": "file:../url",
+		"@wordpress/viewport": "file:../viewport",
+		"classnames": "^2.2.5",
+		"dom-scroll-into-view": "^1.2.1",
 		"lodash": "^4.17.10",
+		"redux-multi": "^0.1.12",
 		"refx": "^3.0.0",
-		"rememo": "^3.0.0"
+		"rememo": "^3.0.0",
+		"tinycolor2": "^1.4.1"
 	},
 	"publishConfig": {
 		"access": "public"

packages/block-editor/src/components/block-editor-keyboard-shortcuts/index.js

@@ -0,0 +1,160 @@
+/**
+ * External dependencies
+ */
+import { first, last, some, flow } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Component, Fragment } from '@wordpress/element';
+import { KeyboardShortcuts } from '@wordpress/components';
+import { withSelect, withDispatch } from '@wordpress/data';
+import { rawShortcut, displayShortcut } from '@wordpress/keycodes';
+import { compose } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import BlockActions from '../block-actions';
+
+const preventDefault = ( event ) => {
+	event.preventDefault();
+	return event;
+};
+
+export const shortcuts = {
+	duplicate: {
+		raw: rawShortcut.primaryShift( 'd' ),
+		display: displayShortcut.primaryShift( 'd' ),
+	},
+	removeBlock: {
+		raw: rawShortcut.access( 'z' ),
+		display: displayShortcut.access( 'z' ),
+	},
+	insertBefore: {
+		raw: rawShortcut.primaryAlt( 't' ),
+		display: displayShortcut.primaryAlt( 't' ),
+	},
+	insertAfter: {
+		raw: rawShortcut.primaryAlt( 'y' ),
+		display: displayShortcut.primaryAlt( 'y' ),
+	},
+};
+
+class BlockEditorKeyboardShortcuts extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.selectAll = this.selectAll.bind( this );
+		this.deleteSelectedBlocks = this.deleteSelectedBlocks.bind( this );
+		this.clearMultiSelection = this.clearMultiSelection.bind( this );
+	}
+
+	selectAll( event ) {
+		const { rootBlocksClientIds, onMultiSelect } = this.props;
+		event.preventDefault();
+		onMultiSelect( first( rootBlocksClientIds ), last( rootBlocksClientIds ) );
+	}
+
+	deleteSelectedBlocks( event ) {
+		const { selectedBlockClientIds, hasMultiSelection, onRemove, isLocked } = this.props;
+		if ( hasMultiSelection ) {
+			event.preventDefault();
+			if ( ! isLocked ) {
+				onRemove( selectedBlockClientIds );
+			}
+		}
+	}
+
+	/**
+	 * Clears current multi-selection, if one exists.
+	 */
+	clearMultiSelection() {
+		const { hasMultiSelection, clearSelectedBlock } = this.props;
+		if ( hasMultiSelection ) {
+			clearSelectedBlock();
+			window.getSelection().removeAllRanges();
+		}
+	}
+
+	render() {
+		const { selectedBlockClientIds } = this.props;
+		return (
+			<Fragment>
+				<KeyboardShortcuts
+					shortcuts={ {
+						[ rawShortcut.primary( 'a' ) ]: this.selectAll,
+						backspace: this.deleteSelectedBlocks,
+						del: this.deleteSelectedBlocks,
+						escape: this.clearMultiSelection,
+					} }
+				/>
+				{ selectedBlockClientIds.length > 0 && (
+					<BlockActions clientIds={ selectedBlockClientIds }>
+						{ ( { onDuplicate, onRemove, onInsertAfter, onInsertBefore } ) => (
+							<KeyboardShortcuts
+								bindGlobal
+								shortcuts={ {
+									// Prevents bookmark all Tabs shortcut in Chrome when devtools are closed.
+									// Prevents reposition Chrome devtools pane shortcut when devtools are open.
+									[ shortcuts.duplicate.raw ]: flow( preventDefault, onDuplicate ),
+
+									// Does not clash with any known browser/native shortcuts, but preventDefault
+									// is used to prevent any obscure unknown shortcuts from triggering.
+									[ shortcuts.removeBlock.raw ]: flow( preventDefault, onRemove ),
+
+									// Prevent 'view recently closed tabs' in Opera using preventDefault.
+									[ shortcuts.insertBefore.raw ]: flow( preventDefault, onInsertBefore ),
+
+									// Does not clash with any known browser/native shortcuts, but preventDefault
+									// is used to prevent any obscure unknown shortcuts from triggering.
+									[ shortcuts.insertAfter.raw ]: flow( preventDefault, onInsertAfter ),
+								} }
+							/>
+						) }
+					</BlockActions>
+				) }
+			</Fragment>
+		);
+	}
+}
+
+const EnhancedVisualEditorGlobalKeyboardShortcuts = compose( [
+	withSelect( ( select ) => {
+		const {
+			getBlockOrder,
+			getMultiSelectedBlockClientIds,
+			hasMultiSelection,
+			getBlockRootClientId,
+			getTemplateLock,
+			getSelectedBlockClientId,
+		} = select( 'core/block-editor' );
+		const selectedBlockClientId = getSelectedBlockClientId();
+		const selectedBlockClientIds = selectedBlockClientId ? [ selectedBlockClientId ] : getMultiSelectedBlockClientIds();
+
+		return {
+			rootBlocksClientIds: getBlockOrder(),
+			hasMultiSelection: hasMultiSelection(),
+			isLocked: some(
+				selectedBlockClientIds,
+				( clientId ) => !! getTemplateLock( getBlockRootClientId( clientId ) )
+			),
+			selectedBlockClientIds,
+		};
+	} ),
+	withDispatch( ( dispatch ) => {
+		const {
+			clearSelectedBlock,
+			multiSelect,
+			removeBlocks,
+		} = dispatch( 'core/block-editor' );
+
+		return {
+			clearSelectedBlock,
+			onMultiSelect: multiSelect,
+			onRemove: removeBlocks,
+		};
+	} ),
+] )( BlockEditorKeyboardShortcuts );
+
+export default EnhancedVisualEditorGlobalKeyboardShortcuts;

packages/editor/src/components/block-settings-menu/index.js → packages/block-editor/src/components/block-settings-menu/index.js

@@ -15,7 +15,7 @@ import { withDispatch } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { shortcuts } from '../global-keyboard-shortcuts/visual-editor-shortcuts';
+import { shortcuts } from '../block-editor-keyboard-shortcuts';
 import BlockActions from '../block-actions';
 import BlockModeToggle from './block-mode-toggle';
 import ReusableBlockConvertButton from './reusable-block-convert-button';

packages/block-editor/src/components/index.js

@@ -1 +1,58 @@
+// Block Creation Components
+export { default as Autocomplete } from './autocomplete';
+export { default as AlignmentToolbar } from './alignment-toolbar';
+export { default as BlockAlignmentToolbar } from './block-alignment-toolbar';
+export { default as BlockControls } from './block-controls';
+export { default as BlockEdit } from './block-edit';
+export { default as BlockFormatControls } from './block-format-controls';
+export { default as BlockNavigationDropdown } from './block-navigation/dropdown';
+export { default as BlockIcon } from './block-icon';
+export { default as ColorPalette } from './color-palette';
+export { default as withColorContext } from './color-palette/with-color-context';
+export * from './colors';
+export { default as ContrastChecker } from './contrast-checker';
+export * from './font-sizes';
+export { default as InnerBlocks } from './inner-blocks';
+export { default as InspectorAdvancedControls } from './inspector-advanced-controls';
+export { default as InspectorControls } from './inspector-controls';
+export { default as PanelColorSettings } from './panel-color-settings';
+export { default as PlainText } from './plain-text';
+export {
+	default as RichText,
+	RichTextShortcut,
+	RichTextToolbarButton,
+	RichTextInserterItem,
+	UnstableRichTextInputEvent,
+} from './rich-text';
+export { default as MediaPlaceholder } from './media-placeholder';
+export { default as MediaUpload } from './media-upload';
+export { default as MediaUploadCheck } from './media-upload/check';
+export { default as URLInput } from './url-input';
+export { default as URLInputButton } from './url-input/button';
+export { default as URLPopover } from './url-popover';
+
+// Content Related Components
+export { default as BlockEditorKeyboardShortcuts } from './block-editor-keyboard-shortcuts';
+export { default as BlockInspector } from './block-inspector';
+export { default as BlockList } from './block-list';
+export { default as BlockMover } from './block-mover';
+export { default as BlockSelectionClearer } from './block-selection-clearer';
+export { default as BlockSettingsMenu } from './block-settings-menu';
+export { default as _BlockSettingsMenuFirstItem } from './block-settings-menu/block-settings-menu-first-item';
+export { default as _BlockSettingsMenuPluginsExtension } from './block-settings-menu/block-settings-menu-plugins-extension';
+export { default as BlockTitle } from './block-title';
+export { default as BlockToolbar } from './block-toolbar';
+export { default as CopyHandler } from './copy-handler';
+export { default as DefaultBlockAppender } from './default-block-appender';
+export { default as Inserter } from './inserter';
+export { default as MultiBlocksSwitcher } from './block-switcher/multi-blocks-switcher';
+export { default as MultiSelectScrollIntoView } from './multi-select-scroll-into-view';
+export { default as NavigableToolbar } from './navigable-toolbar';
+export { default as ObserveTyping } from './observe-typing';
+export { default as PreserveScrollInReorder } from './preserve-scroll-in-reorder';
+export { default as SkipToSelectedBlock } from './skip-to-selected-block';
+export { default as Warning } from './warning';
+export { default as WritingFlow } from './writing-flow';
+
+// State Related Components
 export { default as BlockEditorProvider } from './provider';

packages/editor/src/components/inner-blocks/README.md → packages/block-editor/src/components/inner-blocks/README.md

@@ -11,7 +11,7 @@ In a block's `edit` implementation, render `InnerBlocks`. Then, in the `save` im
 
 ```jsx
 import { registerBlockType } from '@wordpress/blocks';
-import { InnerBlocks } from '@wordpress/editor';
+import { InnerBlocks } from '@wordpress/block-editor';
 
 registerBlockType( 'my-plugin/my-block', {
 	// ...

packages/editor/src/components/media-upload/README.md → packages/block-editor/src/components/media-upload/README.md

@@ -28,7 +28,7 @@ To make sure the current user has Upload permissions, you need to wrap the Media
 
 ```jsx
 import { Button } from '@wordpress/components';
-import { MediaUpload, MediaUploadCheck } from '@wordpress/editor';
+import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
 
 const ALLOWED_MEDIA_TYPES = [ 'audio' ];
 

packages/editor/src/components/rich-text/index.native.js → packages/block-editor/src/components/rich-text/index.native.js

@@ -9,7 +9,7 @@ import { View, Platform } from 'react-native';
  */
 import { Component, RawHTML } from '@wordpress/element';
 import { withInstanceId, compose } from '@wordpress/compose';
-import { BlockFormatControls } from '@wordpress/editor';
+import { BlockFormatControls } from '@wordpress/block-editor';
 import { withSelect } from '@wordpress/data';
 import {
 	applyFormat,

packages/editor/src/components/url-popover/README.md → packages/block-editor/src/components/url-popover/README.md

@@ -10,7 +10,7 @@ The component will be rendered adjacent to its parent.
 ```jsx
 import { Fragment } from '@wordpress/elements';
 import { ToggleControl, IconButton, Button } from '@wordpress/components';
-import { URLPopover } from '@wordpress/editor';
+import { URLPopover } from '@wordpress/block-editor';
 
 class MyURLPopover extends Component {
 	constructor() {

packages/block-editor/src/hooks/index.js

@@ -0,0 +1,7 @@
+/**
+ * Internal dependencies
+ */
+import './align';
+import './anchor';
+import './custom-class-name';
+import './generated-class-name';