Framework: Move components from the blocks to the editor module (#6521)

* Framework: Move reusable block components from the blocks module to the editor module

* Add deprecation message for wp.blocks.*

* Update documentation to match the code

* Fix unit tests

* More deprecations

* Fix e2e tests

* Fix deprecated functions

* Editor: Update class name for RN files

* Use proper import statements for deprecated block components

* Ensure the editor module is loaded before third party plugins

* Tweak editor/components react-native version

* Removing debugging code

blocks/README.md

@@ -263,113 +263,3 @@ Returns type definitions associated with a registered block.
 
 Returns settings associated with a registered control.
 
-## Components
-
-Because many blocks share the same complex behaviors, the following components
-are made available to simplify implementations of your block's `edit` function.
-
-### `BlockControls`
-
-When returned by your block's `edit` implementation, renders a toolbar of icon
-buttons. This is useful for block-level modifications to be made available when
-a block is selected. For example, if your block supports alignment, you may
-want to display alignment options in the selected block's toolbar.
-
-Example:
-
-```js
-( function( blocks, element ) {
-	var el = element.createElement,
-		BlockControls = blocks.BlockControls,
-		AlignmentToolbar = blocks.AlignmentToolbar;
-
-	function edit( props ) {
-		return [
-			// Controls: (only visible when block is selected)
-			el( BlockControls, { key: 'controls' },
-				el( AlignmentToolbar, {
-					value: props.align,
-					onChange: function( nextAlign ) {
-						props.setAttributes( { align: nextAlign } )
-					}
-				} )
-			),
-
-			// Block content: (with alignment as attribute)
-			el( 'p', { key: 'text', style: { textAlign: props.align } },
-				'Hello World!'
-			),
-		];
-	}
-} )(
-	window.wp.blocks,
-	window.wp.element
-);
-```
-
-Note in this example that we render `AlignmentToolbar` as a child of the
-`BlockControls` element. This is another pre-configured component you can use
-to simplify block text alignment.
-
-Alternatively, you can create your own toolbar controls by passing an array of
-`controls` as a prop to the `BlockControls` component. Each control should be
-an object with the following properties:
-
-- `icon: string` - Slug of the Dashicon to be shown in the control's toolbar button
-- `title: string` - A human-readable localized text to be shown as the tooltip label of the control's button
-- `subscript: ?string` - Optional text to be shown adjacent the button icon as subscript (for example, heading levels)
-- `isActive: ?boolean` - Whether the control should be considered active / selected. Defaults to `false`.
-
-To create divisions between sets of controls within the same `BlockControls`
-element, passing `controls` instead as a nested array (array of arrays of
-objects). A divider will be shown between each set of controls.
-
-### `RichText`
-
-Render a rich
-[`contenteditable` input](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content),
-providing users the option to add emphasis to content or links to content. It
-behaves similarly to a
-[controlled component](https://facebook.github.io/react/docs/forms.html#controlled-components),
-except that `onChange` is triggered less frequently than would be expected from
-a traditional `input` field, usually when the user exits the field.
-
-The following properties (non-exhaustive list) are made available:
-
-- `value: string` - Markup value of the field. Only valid markup is
-  allowed, as determined by `inline` value and available controls.
-- `onChange: Function` - Callback handler when the value of the field changes,
-  passing the new value as its only argument.
-- `placeholder: string` - A text hint to be shown to the user when the field
-  value is empty, similar to the
-  [`input` and `textarea` attribute of the same name](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/HTML5_updates#The_placeholder_attribute).
-- `multiline: String` - A tag name to use for the tag that should be inserted
-  when Enter is pressed.  For example: `li` in a list block, and `p` for a
-	block that can contain multiple paragraphs.  The default is that only inline
-	elements are allowed to be used in inserted into the text, effectively
-  disabling the behavior of the "Enter" key.
-
-Example:
-
-```js
-( function( blocks, element ) {
-	var el = element.createElement,
-		RichText = blocks.RichText;
-
-	function edit( props ) {
-		function onChange( value ) {
-			props.setAttributes( { text: value } );
-		}
-
-		return el( RichText, {
-			value: props.attributes.text,
-			onChange: onChange
-		} );
-	}
-
-	// blocks.registerBlockType( ..., { edit: edit, ... } );
-} )(
-	window.wp.blocks,
-	window.wp.element
-);
-```

blocks/api/raw-handling/test/index.js

@@ -13,7 +13,7 @@ import { registerCoreBlocks } from '../../../../core-blocks';
 describe( 'rawHandler', () => {
 	beforeAll( () => {
 		// Load all hooks that modify blocks
-		require( 'blocks/hooks' );
+		require( 'editor/hooks' );
 		registerCoreBlocks();
 	} );
 

blocks/api/raw-handling/test/integration/index.js

@@ -34,7 +34,7 @@ function readFile( filePath ) {
 describe( 'raw handling: integration', () => {
 	beforeAll( () => {
 		// Load all hooks that modify blocks
-		require( 'blocks/hooks' );
+		require( 'editor/hooks' );
 		registerCoreBlocks();
 	} );
 

blocks/api/test/factory.js

@@ -31,7 +31,7 @@ describe( 'block factory', () => {
 
 	beforeAll( () => {
 		// Load all hooks that modify blocks
-		require( 'blocks/hooks' );
+		require( 'editor/hooks' );
 	} );
 
 	afterEach( () => {

blocks/api/test/parser.js

@@ -43,7 +43,7 @@ describe( 'block parser', () => {
 
 	beforeAll( () => {
 		// Load all hooks that modify blocks
-		require( 'blocks/hooks' );
+		require( 'editor/hooks' );
 	} );
 
 	afterEach( () => {

blocks/api/test/registration.js

@@ -30,7 +30,7 @@ describe( 'blocks', () => {
 
 	beforeAll( () => {
 		// Load all hooks that modify blocks
-		require( 'blocks/hooks' );
+		require( 'editor/hooks' );
 	} );
 
 	afterEach( () => {

blocks/api/test/serializer.js

@@ -23,12 +23,14 @@ import {
 	setUnknownTypeHandlerName,
 } from '../registration';
 import { createBlock } from '../';
-import InnerBlocks from '../../inner-blocks';
+
+// Todo: move the test to the inner-blocks folder
+import InnerBlocks from '../../../editor/components/inner-blocks';
 
 describe( 'block serializer', () => {
 	beforeAll( () => {
 		// Load all hooks that modify blocks
-		require( 'blocks/hooks' );
+		require( 'editor/hooks' );
 	} );
 
 	afterEach( () => {

blocks/index.js

@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import './hooks';
-
 // A "block" is the abstract term used to describe units of markup that,
 // when composed together, form the content or layout of a page.
 // The API for blocks is exposed via `wp.blocks`.
@@ -13,29 +8,6 @@ import './hooks';
 // Blocks are inferred from the HTML source of a post through a parsing mechanism
 // and then stored as objects in state, from which it is then rendered for editing.
 export * from './api';
-export * from './autocompleters';
-export * from './colors';
 
 export { default as editorMediaUpload } from './editor-media-upload';
-export { default as AlignmentToolbar } from './alignment-toolbar';
-export { default as Autocomplete } from './autocomplete';
-export { default as BlockAlignmentToolbar } from './block-alignment-toolbar';
-export { default as BlockControls } from './block-controls';
-export { default as BlockFormatControls } from './block-format-controls';
-export { default as BlockEdit } from './block-edit';
-export { default as BlockIcon } from './block-icon';
-export { default as ColorPalette } from './color-palette';
-export { default as ContrastChecker } from './contrast-checker';
-export { default as ImagePlaceholder } from './image-placeholder';
-export { default as InnerBlocks } from './inner-blocks';
-export { default as InspectorControls } from './inspector-controls';
-export { default as InspectorAdvancedControls } from './inspector-advanced-controls';
-export { default as PlainText } from './plain-text';
-export { default as MediaUpload } from './media-upload';
-export { default as RichText } from './rich-text';
-export { default as RichTextProvider } from './rich-text/provider';
-export { default as UrlInput } from './url-input';
-export { default as UrlInputButton } from './url-input/button';
 export { default as EditorSettings, withEditorSettings } from './editor-settings';
-export { default as PanelColor } from './panel-color';
-export { default as withColorContext } from './with-color-context';

blocks/index.native.js

@@ -9,4 +9,3 @@
 // and then stored as objects in state, from which it is then rendered for editing.
 export * from './api';
 
-export { default as PlainText } from './plain-text';

core-blocks/audio/index.js

@@ -10,12 +10,12 @@ import {
 	Toolbar,
 } from '@wordpress/components';
 import { Component, Fragment } from '@wordpress/element';
+import { editorMediaUpload } from '@wordpress/blocks';
 import {
-	editorMediaUpload,
 	MediaUpload,
 	RichText,
 	BlockControls,
-} from '@wordpress/blocks';
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies

core-blocks/block/index.js

@@ -10,7 +10,7 @@ import { Component, Fragment, compose } from '@wordpress/element';
 import { Placeholder, Spinner, Disabled } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { BlockEdit } from '@wordpress/blocks';
+import { BlockEdit } from '@wordpress/editor';
 
 /**
  * Internal dependencies

core-blocks/button/editor.scss

@@ -13,7 +13,7 @@
 	margin-bottom: 0;
 	position: relative;
 
-	.blocks-rich-text__tinymce {
+	.editor-rich-text__tinymce {
 		cursor: text;
 	}
 }
@@ -30,13 +30,13 @@
 	$blocks-button__link-input-width: 280px;
 	width: $blocks-button__link-input-width;
 
-	.blocks-url-input {
+	.editor-url-input {
 		width: auto;
 	}
 
-	.blocks-url-input__suggestions {
+	.editor-url-input__suggestions {
 		width: $blocks-button__link-input-width - $icon-button-size - $icon-button-size;
-		z-index: z-index( '.blocks-button__inline-link .blocks-url-input__suggestions' );
+		z-index: z-index( '.blocks-button__inline-link .editor-url-input__suggestions' );
 	}
 
 	> .dashicon {
@@ -47,7 +47,7 @@
 		color: $dark-gray-100;
 	}
 
-	.blocks-url-input input[type=text]::placeholder {
+	.editor-url-input input[type=text]::placeholder {
 		color: $dark-gray-100;
 	}
 

core-blocks/button/index.js

@@ -26,7 +26,7 @@ import {
 	getColorClass,
 	withColors,
 	PanelColor,
-} from '@wordpress/blocks';
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies

core-blocks/button/test/__snapshots__/index.js.snap

@@ -5,7 +5,7 @@ exports[`core/button block edit matches snapshot 1`] = `
   class="wp-block-button"
 >
   <div
-    class="blocks-rich-text"
+    class="editor-rich-text"
   >
     <div>
       <div>
@@ -17,13 +17,13 @@ exports[`core/button block edit matches snapshot 1`] = `
             aria-expanded="false"
             aria-label="Add text…"
             aria-multiline="false"
-            class="wp-block-button__link blocks-rich-text__tinymce"
+            class="wp-block-button__link editor-rich-text__tinymce"
             contenteditable="true"
             data-is-placeholder-visible="true"
             role="textbox"
           />
           <span
-            class="blocks-rich-text__tinymce wp-block-button__link"
+            class="editor-rich-text__tinymce wp-block-button__link"
           >
             Add text…
           </span>

core-blocks/categories/block.js

@@ -10,7 +10,7 @@ import {
 	InspectorControls,
 	BlockControls,
 	BlockAlignmentToolbar,
-} from '@wordpress/blocks';
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies

core-blocks/code/edit.js

@@ -7,7 +7,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import './editor.scss';
-import { PlainText } from '@wordpress/blocks';
+import { PlainText } from '@wordpress/editor';
 
 export default function edit( { attributes, setAttributes, className } ) {
 	return (

core-blocks/code/edit.native.js

@@ -8,7 +8,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { PlainText } from '@wordpress/blocks';
+import { PlainText } from '@wordpress/editor';
 
 // Note: styling is applied directly to the (nested) PlainText component. Web-side components
 // apply it to the container 'div' but we don't have a proper proposal for cascading styling yet.

core-blocks/code/editor.scss

@@ -1,4 +1,4 @@
-.wp-block-code .blocks-plain-text {
+.wp-block-code .editor-plain-text {
 	font-family: $editor-html-font;
 	font-size: $text-editor-font-size;
 	color: $dark-gray-800;

core-blocks/code/index.js

@@ -2,9 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	createBlock,
-} from '@wordpress/blocks';
+import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies

core-blocks/code/test/__snapshots__/index.js.snap

@@ -6,7 +6,7 @@ exports[`core/code block edit matches snapshot 1`] = `
 >
   <textarea
     aria-label="Code"
-    class="blocks-plain-text"
+    class="editor-plain-text"
     placeholder="Write code…"
     rows="1"
   />

core-blocks/columns/index.js

@@ -14,7 +14,7 @@ import { Fragment } from '@wordpress/element';
 import {
 	InspectorControls,
 	InnerBlocks,
-} from '@wordpress/blocks';
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies