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