diff --git a/components/autocomplete/index.js b/components/autocomplete/index.js
index da69e58d9c490..78753c2ba097f 100644
--- a/components/autocomplete/index.js
+++ b/components/autocomplete/index.js
@@ -8,9 +8,10 @@ import 'element-closest';
/**
* WordPress dependencies
*/
-import { Component, compose, renderToString } from '@wordpress/element';
+import { Component, renderToString } from '@wordpress/element';
import { ENTER, ESCAPE, UP, DOWN, LEFT, RIGHT, SPACE } from '@wordpress/keycodes';
import { __, _n, sprintf } from '@wordpress/i18n';
+import { withInstanceId, compose } from '@wordpress/compose';
/**
* Internal dependencies
@@ -19,7 +20,6 @@ import './style.scss';
import withFocusOutside from '../higher-order/with-focus-outside';
import Button from '../button';
import Popover from '../popover';
-import withInstanceId from '../higher-order/with-instance-id';
import withSpokenMessages from '../higher-order/with-spoken-messages';
/**
diff --git a/components/checkbox-control/index.js b/components/checkbox-control/index.js
index 4344db2cacf84..286f5ab2feb80 100644
--- a/components/checkbox-control/index.js
+++ b/components/checkbox-control/index.js
@@ -1,8 +1,12 @@
+/**
+ * External dependencies
+ */
+import { withInstanceId } from '@wordpress/compose';
+
/**
* Internal dependencies
*/
import BaseControl from '../base-control';
-import withInstanceId from '../higher-order/with-instance-id';
import './style.scss';
function CheckboxControl( { label, className, heading, checked, help, instanceId, onChange, ...props } ) {
diff --git a/components/deprecated.js b/components/deprecated.js
new file mode 100644
index 0000000000000..1f7714435ea6a
--- /dev/null
+++ b/components/deprecated.js
@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import { mapValues } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import {
+ ifCondition,
+ withGlobalEvents,
+ withInstanceId,
+ withSafeTimeout,
+ withState,
+} from '@wordpress/compose';
+import deprecated from '@wordpress/deprecated';
+
+const deprecatedFunctions = {
+ ifCondition,
+ withGlobalEvents,
+ withInstanceId,
+ withSafeTimeout,
+ withState,
+};
+
+export default mapValues( deprecatedFunctions, ( deprecatedFunction, key ) => {
+ return ( ...args ) => {
+ deprecated( 'wp.components.' + key, {
+ version: '3.5',
+ alternative: 'wp.compose.' + key,
+ } );
+
+ return deprecatedFunction( ...args );
+ };
+} );
diff --git a/components/draggable/index.js b/components/draggable/index.js
index ec0ac57464c2d..d713a1a812be9 100644
--- a/components/draggable/index.js
+++ b/components/draggable/index.js
@@ -8,11 +8,11 @@ import classnames from 'classnames';
* WordPress Dependencies
*/
import { Component } from '@wordpress/element';
+import { withSafeTimeout } from '@wordpress/compose';
/**
* Internal Dependencies
*/
-import withSafeTimeout from '../higher-order/with-safe-timeout';
import './style.scss';
const dragImageClass = 'components-draggable__invisible-drag-image';
diff --git a/components/focusable-iframe/index.js b/components/focusable-iframe/index.js
index 2d6a1a2b17765..24581406d9d65 100644
--- a/components/focusable-iframe/index.js
+++ b/components/focusable-iframe/index.js
@@ -7,11 +7,7 @@ import { omit } from 'lodash';
* WordPress dependencies
*/
import { Component, createRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import withGlobalEvents from '../higher-order/with-global-events';
+import { withGlobalEvents } from '@wordpress/compose';
/**
* Browser dependencies
diff --git a/components/form-token-field/index.js b/components/form-token-field/index.js
index 2a0f27256bed9..61d960374138c 100644
--- a/components/form-token-field/index.js
+++ b/components/form-token-field/index.js
@@ -9,6 +9,7 @@ import classnames from 'classnames';
*/
import { __, _n, sprintf } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
+import { withInstanceId } from '@wordpress/compose';
/**
* Internal dependencies
@@ -17,7 +18,6 @@ import './style.scss';
import Token from './token';
import TokenInput from './token-input';
import SuggestionsList from './suggestions-list';
-import withInstanceId from '../higher-order/with-instance-id';
import withSpokenMessages from '../higher-order/with-spoken-messages';
const initialState = {
diff --git a/components/form-token-field/token.js b/components/form-token-field/token.js
index 90c6c95f9c335..93af65a064fd8 100644
--- a/components/form-token-field/token.js
+++ b/components/form-token-field/token.js
@@ -7,7 +7,7 @@ import { noop } from 'lodash';
/**
* WordPress dependencies
*/
-import withInstanceId from '../higher-order/with-instance-id';
+import { withInstanceId } from '@wordpress/compose';
import { __, sprintf } from '@wordpress/i18n';
/**
diff --git a/components/index.js b/components/index.js
index fe1888fbd9f37..e016168939a1f 100644
--- a/components/index.js
+++ b/components/index.js
@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import deprecated from './deprecated';
+
// Components
export { default as APIProvider } from './higher-order/with-api-data/provider';
export { default as Autocomplete } from './autocomplete';
@@ -57,7 +62,6 @@ export { default as TreeSelect } from './tree-select';
export { createSlotFill, Slot, Fill, Provider as SlotFillProvider } from './slot-fill';
// Higher-Order Components
-export { default as ifCondition } from './higher-order/if-condition';
export { default as navigateRegions } from './higher-order/navigate-regions';
export { default as withAPIData } from './higher-order/with-api-data';
export { default as withContext } from './higher-order/with-context';
@@ -66,9 +70,11 @@ export { default as withFallbackStyles } from './higher-order/with-fallback-styl
export { default as withFilters } from './higher-order/with-filters';
export { default as withFocusOutside } from './higher-order/with-focus-outside';
export { default as withFocusReturn } from './higher-order/with-focus-return';
-export { default as withGlobalEvents } from './higher-order/with-global-events';
-export { default as withInstanceId } from './higher-order/with-instance-id';
export { default as withNotices } from './higher-order/with-notices';
-export { default as withSafeTimeout } from './higher-order/with-safe-timeout';
export { default as withSpokenMessages } from './higher-order/with-spoken-messages';
-export { default as withState } from './higher-order/with-state';
+
+export const ifCondition = deprecated.ifCondition;
+export const withGlobalEvents = deprecated.withGlobalEvents;
+export const withInstanceId = deprecated.withInstanceId;
+export const withSafeTimeout = deprecated.withSafeTimeout;
+export const withState = deprecated.withState;
diff --git a/components/menu-group/index.js b/components/menu-group/index.js
index ef11c27434f4e..423365d1f34ea 100644
--- a/components/menu-group/index.js
+++ b/components/menu-group/index.js
@@ -8,13 +8,13 @@ import classnames from 'classnames';
*/
import { Children } from '@wordpress/element';
import { applyFilters } from '@wordpress/hooks';
+import { withInstanceId } from '@wordpress/compose';
/**
* Internal dependencies
*/
import './style.scss';
import { NavigableMenu } from '../navigable-container';
-import withInstanceId from '../higher-order/with-instance-id';
export function MenuGroup( {
children,
diff --git a/components/modal/frame.js b/components/modal/frame.js
index be9b44dde7c44..1d903c40eabe1 100644
--- a/components/modal/frame.js
+++ b/components/modal/frame.js
@@ -1,9 +1,10 @@
/**
* WordPress dependencies
*/
-import { Component, compose, createRef } from '@wordpress/element';
+import { Component, createRef } from '@wordpress/element';
import { ESCAPE } from '@wordpress/keycodes';
import { focus } from '@wordpress/dom';
+import { withGlobalEvents, compose } from '@wordpress/compose';
/**
* External dependencies
@@ -16,7 +17,6 @@ import clickOutside from 'react-click-outside';
import './style.scss';
import withFocusReturn from '../higher-order/with-focus-return';
import withConstrainedTabbing from '../higher-order/with-constrained-tabbing';
-import withGlobalEvents from '../higher-order/with-global-events';
class ModalFrame extends Component {
constructor() {
diff --git a/components/modal/index.js b/components/modal/index.js
index 63c719431efe7..a97930f1d8e56 100644
--- a/components/modal/index.js
+++ b/components/modal/index.js
@@ -8,6 +8,7 @@ import { noop } from 'lodash';
* WordPress dependencies
*/
import { Component, createPortal } from '@wordpress/element';
+import { withInstanceId } from '@wordpress/compose';
/**
* Internal dependencies
@@ -16,7 +17,6 @@ import './style.scss';
import ModalFrame from './frame';
import ModalHeader from './header';
import * as ariaHelper from './aria-helper';
-import withInstanceId from '../higher-order/with-instance-id';
// Used to count the number of open modals.
let parentElement,
diff --git a/components/radio-control/index.js b/components/radio-control/index.js
index 9a474c4e4d0f7..5fa3c5eb87150 100644
--- a/components/radio-control/index.js
+++ b/components/radio-control/index.js
@@ -4,11 +4,15 @@
import { isEmpty } from 'lodash';
import classnames from 'classnames';
+/**
+ * WordPress dependencies
+ */
+import { withInstanceId } from '@wordpress/compose';
+
/**
* Internal dependencies
*/
import BaseControl from '../base-control';
-import withInstanceId from '../higher-order/with-instance-id';
import './style.scss';
function RadioControl( { label, className, selected, help, instanceId, onChange, options = [] } ) {
diff --git a/components/range-control/index.js b/components/range-control/index.js
index 7df0752c63358..353df5d10a9dc 100644
--- a/components/range-control/index.js
+++ b/components/range-control/index.js
@@ -8,12 +8,12 @@ import classnames from 'classnames';
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
+import { withInstanceId } from '@wordpress/compose';
/**
* Internal dependencies
*/
import { BaseControl, Button, Dashicon } from '../';
-import withInstanceId from '../higher-order/with-instance-id';
import './style.scss';
function RangeControl( {
diff --git a/components/sandbox/index.js b/components/sandbox/index.js
index e099a75c22d21..60091b519cce3 100644
--- a/components/sandbox/index.js
+++ b/components/sandbox/index.js
@@ -2,12 +2,12 @@
* WordPress dependencies
*/
import { Component, renderToString, createRef } from '@wordpress/element';
+import { withGlobalEvents } from '@wordpress/compose';
/**
* Internal dependencies
*/
import FocusableIframe from '../focusable-iframe';
-import withGlobalEvents from '../higher-order/with-global-events';
class Sandbox extends Component {
constructor() {
@@ -151,7 +151,7 @@ class Sandbox extends Component {
aspectRatio = potentialIframe.width / potentialIframe.height;
potentialIframe.width = '100%';
}
- }
+ }
sendResize();
diff --git a/components/select-control/index.js b/components/select-control/index.js
index ecacc637e6b9f..3413a409b8c68 100644
--- a/components/select-control/index.js
+++ b/components/select-control/index.js
@@ -3,11 +3,15 @@
*/
import { isEmpty } from 'lodash';
+/**
+ * WordPress dependencies
+ */
+import { withInstanceId } from '@wordpress/compose';
+
/**
* Internal dependencies
*/
import BaseControl from '../base-control';
-import withInstanceId from '../higher-order/with-instance-id';
import './style.scss';
function SelectControl( {
diff --git a/components/tab-panel/index.js b/components/tab-panel/index.js
index 953b82c25b9f1..e2cb1edbdc731 100644
--- a/components/tab-panel/index.js
+++ b/components/tab-panel/index.js
@@ -7,11 +7,11 @@ import { partial, noop, find } from 'lodash';
* WordPress dependencies
*/
import { Component } from '@wordpress/element';
+import { withInstanceId } from '@wordpress/compose';
/**
* Internal dependencies
*/
-import { default as withInstanceId } from '../higher-order/with-instance-id';
import { NavigableMenu } from '../navigable-container';
const TabButton = ( { tabId, onClick, children, selected, ...rest } ) => (
diff --git a/components/text-control/index.js b/components/text-control/index.js
index 66d5812f45916..0025dfa05d5ee 100644
--- a/components/text-control/index.js
+++ b/components/text-control/index.js
@@ -1,8 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { withInstanceId } from '@wordpress/compose';
+
/**
* Internal dependencies
*/
import BaseControl from '../base-control';
-import withInstanceId from '../higher-order/with-instance-id';
import './style.scss';
function TextControl( { label, value, help, className, instanceId, onChange, type = 'text', ...props } ) {
diff --git a/components/textarea-control/index.js b/components/textarea-control/index.js
index 9de4675e7cdd2..5315a83e94f47 100644
--- a/components/textarea-control/index.js
+++ b/components/textarea-control/index.js
@@ -1,8 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { withInstanceId } from '@wordpress/compose';
+
/**
* Internal dependencies
*/
import BaseControl from '../base-control';
-import withInstanceId from '../higher-order/with-instance-id';
import './style.scss';
function TextareaControl( { label, value, help, instanceId, onChange, rows = 4, className, ...props } ) {
diff --git a/components/toggle-control/index.js b/components/toggle-control/index.js
index da692b8bd6b11..4bae84ba3e4ef 100644
--- a/components/toggle-control/index.js
+++ b/components/toggle-control/index.js
@@ -7,12 +7,12 @@ import { isFunction } from 'lodash';
* WordPress dependencies
*/
import { Component } from '@wordpress/element';
-import FormToggle from '../form-toggle';
-import withInstanceId from '../higher-order/with-instance-id';
+import { withInstanceId } from '@wordpress/compose';
/**
* Internal dependencies
*/
+import FormToggle from '../form-toggle';
import BaseControl from './../base-control';
import './style.scss';
diff --git a/core-blocks/block/edit-panel/index.js b/core-blocks/block/edit-panel/index.js
index 57f19636b1e79..2827f2c546f9b 100644
--- a/core-blocks/block/edit-panel/index.js
+++ b/core-blocks/block/edit-panel/index.js
@@ -1,10 +1,11 @@
/**
* WordPress dependencies
*/
-import { Button, withInstanceId } from '@wordpress/components';
+import { Button } from '@wordpress/components';
import { Component, Fragment, createRef } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { ESCAPE } from '@wordpress/keycodes';
+import { withInstanceId } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/core-blocks/block/edit.js b/core-blocks/block/edit.js
index 82f5c8672a094..a03befd1c6d23 100644
--- a/core-blocks/block/edit.js
+++ b/core-blocks/block/edit.js
@@ -6,11 +6,12 @@ import { noop, partial } from 'lodash';
/**
* WordPress dependencies
*/
-import { Component, Fragment, compose } from '@wordpress/element';
+import { Component, Fragment } from '@wordpress/element';
import { Placeholder, Spinner, Disabled } from '@wordpress/components';
import { withSelect, withDispatch } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { BlockEdit } from '@wordpress/editor';
+import { compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/core-blocks/file/edit.js b/core-blocks/file/edit.js
index 14e10d65bfa3d..0f9bf176675b9 100644
--- a/core-blocks/file/edit.js
+++ b/core-blocks/file/edit.js
@@ -15,7 +15,7 @@ import {
withNotices,
} from '@wordpress/components';
import { withSelect } from '@wordpress/data';
-import { Component, compose, Fragment } from '@wordpress/element';
+import { Component, Fragment } from '@wordpress/element';
import {
MediaUpload,
MediaPlaceholder,
@@ -23,6 +23,7 @@ import {
RichText,
editorMediaUpload,
} from '@wordpress/editor';
+import { compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/core-blocks/html/index.js b/core-blocks/html/index.js
index 0c829ab99a9d2..c50283445a277 100644
--- a/core-blocks/html/index.js
+++ b/core-blocks/html/index.js
@@ -3,9 +3,10 @@
*/
import { RawHTML } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
-import { withState, Disabled, SandBox, CodeEditor } from '@wordpress/components';
+import { Disabled, SandBox, CodeEditor } from '@wordpress/components';
import { getPhrasingContentSchema } from '@wordpress/blocks';
import { BlockControls } from '@wordpress/editor';
+import { withState } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/core-blocks/image/edit.js b/core-blocks/image/edit.js
index ea219b726af44..0c148d52d737b 100644
--- a/core-blocks/image/edit.js
+++ b/core-blocks/image/edit.js
@@ -15,7 +15,7 @@ import {
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { Component, compose, Fragment } from '@wordpress/element';
+import { Component, Fragment } from '@wordpress/element';
import { getBlobByURL, revokeBlobURL } from '@wordpress/blob';
import {
Button,
@@ -39,6 +39,7 @@ import {
editorMediaUpload,
} from '@wordpress/editor';
import { withViewportMatch } from '@wordpress/viewport';
+import { compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/core-blocks/image/image-size.js b/core-blocks/image/image-size.js
index 9b37c44726384..0a1b88aed12d7 100644
--- a/core-blocks/image/image-size.js
+++ b/core-blocks/image/image-size.js
@@ -6,7 +6,7 @@ import { noop } from 'lodash';
/**
* WordPress dependencies
*/
-import { withGlobalEvents } from '@wordpress/components';
+import { withGlobalEvents } from '@wordpress/compose';
import { Component } from '@wordpress/element';
class ImageSize extends Component {
diff --git a/core-blocks/paragraph/index.js b/core-blocks/paragraph/index.js
index fbcba6a550949..acdc498c55faf 100644
--- a/core-blocks/paragraph/index.js
+++ b/core-blocks/paragraph/index.js
@@ -11,7 +11,6 @@ import { __ } from '@wordpress/i18n';
import {
concatChildren,
Component,
- compose,
Fragment,
RawHTML,
} from '@wordpress/element';
@@ -32,6 +31,7 @@ import {
RichText,
} from '@wordpress/editor';
import { createBlock, getPhrasingContentSchema } from '@wordpress/blocks';
+import { compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/core-blocks/shortcode/index.js b/core-blocks/shortcode/index.js
index 264e1a7566a0c..3f8d0b049fc7d 100644
--- a/core-blocks/shortcode/index.js
+++ b/core-blocks/shortcode/index.js
@@ -3,8 +3,9 @@
*/
import { RawHTML } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
-import { withInstanceId, Dashicon } from '@wordpress/components';
+import { Dashicon } from '@wordpress/components';
import { PlainText } from '@wordpress/editor';
+import { withInstanceId } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/core-blocks/spacer/index.js b/core-blocks/spacer/index.js
index 7822f0f2df20d..ca7b7483db8c3 100644
--- a/core-blocks/spacer/index.js
+++ b/core-blocks/spacer/index.js
@@ -9,7 +9,8 @@ import ResizableBox from 're-resizable';
import { Fragment } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { InspectorControls } from '@wordpress/editor';
-import { BaseControl, PanelBody, withInstanceId } from '@wordpress/components';
+import { BaseControl, PanelBody } from '@wordpress/components';
+import { withInstanceId } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/docs/reference/deprecated.md b/docs/reference/deprecated.md
index ea5c2c54fda1f..a490eb55fcdd2 100644
--- a/docs/reference/deprecated.md
+++ b/docs/reference/deprecated.md
@@ -1,5 +1,15 @@
Gutenberg's deprecation policy is intended to support backwards-compatibility for two minor releases, when possible. The current deprecations are listed below and are grouped by _the version at which they will be removed completely_. If your plugin depends on these behaviors, you must update to the recommended alternative before the noted version.
+## 3.5.0
+
+ - `wp.components.ifCondition` has been removed. Please use `wp.compose.ifCondition` instead.
+ - `wp.components.withGlobalEvents` has been removed. Please use `wp.compose.withGlobalEvents` instead.
+ - `wp.components.withInstanceId` has been removed. Please use `wp.compose.withInstanceId` instead.
+ - `wp.components.withSafeTimeout` has been removed. Please use `wp.compose.withSafeTimeout` instead.
+ - `wp.components.withState` has been removed. Please use `wp.compose.withState` instead.
+ - `wp.element.pure` has been removed. Please use `wp.compose.pure` instead.
+ - `wp.element.compose` has been removed. Please use `wp.compose.compose` instead.
+
## 3.4.0
- `focusOnMount` prop in the `Popover` component has been changed from `Boolean`-only to an enum-style property that accepts `"firstElement"`, `"container"`, or `false`. Please convert any `` usage to ``.
diff --git a/edit-post/components/header/fixed-toolbar-toggle/index.js b/edit-post/components/header/fixed-toolbar-toggle/index.js
index e20ee631c0b65..eb7080d2c653f 100644
--- a/edit-post/components/header/fixed-toolbar-toggle/index.js
+++ b/edit-post/components/header/fixed-toolbar-toggle/index.js
@@ -7,7 +7,7 @@ import { withSelect, withDispatch } from '@wordpress/data';
* WordPress Dependencies
*/
import { __ } from '@wordpress/i18n';
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { MenuItem } from '@wordpress/components';
import { ifViewportMatches } from '@wordpress/viewport';
diff --git a/edit-post/components/header/header-toolbar/index.js b/edit-post/components/header/header-toolbar/index.js
index 452656debf362..8e38da3afed64 100644
--- a/edit-post/components/header/header-toolbar/index.js
+++ b/edit-post/components/header/header-toolbar/index.js
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { withSelect } from '@wordpress/data';
import { withViewportMatch } from '@wordpress/viewport';
diff --git a/edit-post/components/header/index.js b/edit-post/components/header/index.js
index 72066bfdfc3fa..f37359fdd44e5 100644
--- a/edit-post/components/header/index.js
+++ b/edit-post/components/header/index.js
@@ -9,7 +9,7 @@ import {
PostPublishPanelToggle,
} from '@wordpress/editor';
import { withDispatch, withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { DotTip } from '@wordpress/nux';
/**
diff --git a/edit-post/components/header/mode-switcher/index.js b/edit-post/components/header/mode-switcher/index.js
index c93265c6341cc..527e77f101117 100644
--- a/edit-post/components/header/mode-switcher/index.js
+++ b/edit-post/components/header/mode-switcher/index.js
@@ -3,7 +3,7 @@
*/
import { __ } from '@wordpress/i18n';
import { MenuItemsChoice, MenuGroup } from '@wordpress/components';
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
/**
diff --git a/edit-post/components/header/plugin-sidebar-more-menu-item/index.js b/edit-post/components/header/plugin-sidebar-more-menu-item/index.js
index e95ac5608cea2..fa36e95c38b41 100644
--- a/edit-post/components/header/plugin-sidebar-more-menu-item/index.js
+++ b/edit-post/components/header/plugin-sidebar-more-menu-item/index.js
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
import { MenuItem } from '@wordpress/components';
import { withPluginContext } from '@wordpress/plugins';
diff --git a/edit-post/components/header/tips-toggle/index.js b/edit-post/components/header/tips-toggle/index.js
index 27b131cb04333..807fd3eb652ed 100644
--- a/edit-post/components/header/tips-toggle/index.js
+++ b/edit-post/components/header/tips-toggle/index.js
@@ -7,7 +7,7 @@ import { withSelect, withDispatch } from '@wordpress/data';
* WordPress Dependencies
*/
import { __ } from '@wordpress/i18n';
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { MenuItem } from '@wordpress/components';
function TipsToggle( { onToggle, isActive } ) {
diff --git a/edit-post/components/keyboard-shortcuts/index.js b/edit-post/components/keyboard-shortcuts/index.js
index 59dcb2513b641..91667b2b54fda 100644
--- a/edit-post/components/keyboard-shortcuts/index.js
+++ b/edit-post/components/keyboard-shortcuts/index.js
@@ -1,9 +1,10 @@
/**
* WordPress dependencies
*/
-import { Component, compose } from '@wordpress/element';
+import { Component } from '@wordpress/element';
import { KeyboardShortcuts } from '@wordpress/components';
import { withSelect, withDispatch } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/edit-post/components/layout/index.js b/edit-post/components/layout/index.js
index 14e5fe442d4fa..6695bf1efd58b 100644
--- a/edit-post/components/layout/index.js
+++ b/edit-post/components/layout/index.js
@@ -18,9 +18,10 @@ import {
PreserveScrollInReorder,
} from '@wordpress/editor';
import { withDispatch, withSelect } from '@wordpress/data';
-import { compose, Fragment } from '@wordpress/element';
+import { Fragment } from '@wordpress/element';
import { PluginArea } from '@wordpress/plugins';
import { withViewportMatch } from '@wordpress/viewport';
+import { compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/edit-post/components/sidebar/discussion-panel/index.js b/edit-post/components/sidebar/discussion-panel/index.js
index 6dde6cd7597b7..27bd6e04b2cb7 100644
--- a/edit-post/components/sidebar/discussion-panel/index.js
+++ b/edit-post/components/sidebar/discussion-panel/index.js
@@ -4,7 +4,7 @@
import { __ } from '@wordpress/i18n';
import { PanelBody, PanelRow } from '@wordpress/components';
import { PostComments, PostPingbacks, PostTypeSupportCheck } from '@wordpress/editor';
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
/**
diff --git a/edit-post/components/sidebar/featured-image/index.js b/edit-post/components/sidebar/featured-image/index.js
index 9d979dbf6affd..a5e8aeb3b2e96 100644
--- a/edit-post/components/sidebar/featured-image/index.js
+++ b/edit-post/components/sidebar/featured-image/index.js
@@ -9,7 +9,7 @@ import { get, partial } from 'lodash';
import { __ } from '@wordpress/i18n';
import { PanelBody } from '@wordpress/components';
import { PostFeaturedImage, PostFeaturedImageCheck } from '@wordpress/editor';
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
/**
diff --git a/edit-post/components/sidebar/index.js b/edit-post/components/sidebar/index.js
index c69f8167dfd1f..c8fbec0abc031 100644
--- a/edit-post/components/sidebar/index.js
+++ b/edit-post/components/sidebar/index.js
@@ -1,9 +1,9 @@
/**
* WordPress Dependencies
*/
-import { createSlotFill, ifCondition, withFocusReturn } from '@wordpress/components';
+import { createSlotFill, withFocusReturn } from '@wordpress/components';
import { withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/element';
+import { ifCondition, compose } from '@wordpress/compose';
/**
* Internal Dependencies
diff --git a/edit-post/components/sidebar/page-attributes/index.js b/edit-post/components/sidebar/page-attributes/index.js
index 72f1eeaf56d81..b6250faf4e2ef 100644
--- a/edit-post/components/sidebar/page-attributes/index.js
+++ b/edit-post/components/sidebar/page-attributes/index.js
@@ -8,7 +8,7 @@ import { get, partial } from 'lodash';
*/
import { __ } from '@wordpress/i18n';
import { PanelBody, PanelRow } from '@wordpress/components';
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { PageAttributesCheck, PageAttributesOrder, PageAttributesParent, PageTemplate } from '@wordpress/editor';
import { withSelect, withDispatch } from '@wordpress/data';
diff --git a/edit-post/components/sidebar/plugin-sidebar/index.js b/edit-post/components/sidebar/plugin-sidebar/index.js
index 4f21ffc41a37b..3594ad34666bc 100644
--- a/edit-post/components/sidebar/plugin-sidebar/index.js
+++ b/edit-post/components/sidebar/plugin-sidebar/index.js
@@ -3,9 +3,10 @@
*/
import { IconButton, Panel } from '@wordpress/components';
import { withDispatch, withSelect } from '@wordpress/data';
-import { compose, Fragment } from '@wordpress/element';
+import { Fragment } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { withPluginContext } from '@wordpress/plugins';
+import { compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/edit-post/components/sidebar/post-excerpt/index.js b/edit-post/components/sidebar/post-excerpt/index.js
index 994532ba40d25..0a603f58b7a6b 100644
--- a/edit-post/components/sidebar/post-excerpt/index.js
+++ b/edit-post/components/sidebar/post-excerpt/index.js
@@ -4,7 +4,7 @@
import { __ } from '@wordpress/i18n';
import { PanelBody } from '@wordpress/components';
import { PostExcerpt as PostExcerptForm, PostExcerptCheck } from '@wordpress/editor';
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
/**
diff --git a/edit-post/components/sidebar/post-status/index.js b/edit-post/components/sidebar/post-status/index.js
index 40f6bb0bfca0d..3b11c2d78de0c 100644
--- a/edit-post/components/sidebar/post-status/index.js
+++ b/edit-post/components/sidebar/post-status/index.js
@@ -3,8 +3,9 @@
*/
import { __ } from '@wordpress/i18n';
import { PanelBody } from '@wordpress/components';
-import { compose, Fragment } from '@wordpress/element';
+import { Fragment } from '@wordpress/element';
import { withSelect, withDispatch } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
/**
* Internal Dependencies
diff --git a/edit-post/components/sidebar/post-taxonomies/index.js b/edit-post/components/sidebar/post-taxonomies/index.js
index a7a63b211f9e7..b5376f5bb84b3 100644
--- a/edit-post/components/sidebar/post-taxonomies/index.js
+++ b/edit-post/components/sidebar/post-taxonomies/index.js
@@ -2,7 +2,7 @@
* WordPress dependencies
*/
import { PostTaxonomies as PostTaxonomiesForm, PostTaxonomiesCheck } from '@wordpress/editor';
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
/**
diff --git a/edit-post/components/sidebar/post-taxonomies/taxonomy-panel.js b/edit-post/components/sidebar/post-taxonomies/taxonomy-panel.js
index 048458882ac09..d8d9ed58c3571 100644
--- a/edit-post/components/sidebar/post-taxonomies/taxonomy-panel.js
+++ b/edit-post/components/sidebar/post-taxonomies/taxonomy-panel.js
@@ -6,7 +6,7 @@ import { get } from 'lodash';
/**
* WordPress dependencies
*/
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { PanelBody } from '@wordpress/components';
import { withSelect, withDispatch } from '@wordpress/data';
diff --git a/edit-post/components/sidebar/settings-header/index.js b/edit-post/components/sidebar/settings-header/index.js
index e5457c4b6d7e3..bf1cbfcafbe12 100644
--- a/edit-post/components/sidebar/settings-header/index.js
+++ b/edit-post/components/sidebar/settings-header/index.js
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { __, _n, sprintf } from '@wordpress/i18n';
import { withDispatch, withSelect } from '@wordpress/data';
diff --git a/edit-post/components/sidebar/sidebar-header/index.js b/edit-post/components/sidebar/sidebar-header/index.js
index e4fa4a0559f08..b548b4e28c4de 100644
--- a/edit-post/components/sidebar/sidebar-header/index.js
+++ b/edit-post/components/sidebar/sidebar-header/index.js
@@ -6,7 +6,8 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
-import { Fragment, compose } from '@wordpress/element';
+import { Fragment } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';
import { IconButton } from '@wordpress/components';
import { withDispatch, withSelect } from '@wordpress/data';
diff --git a/edit-post/components/visual-editor/block-inspector-button.js b/edit-post/components/visual-editor/block-inspector-button.js
index d5e17d40f4acb..e6014d55e025b 100644
--- a/edit-post/components/visual-editor/block-inspector-button.js
+++ b/edit-post/components/visual-editor/block-inspector-button.js
@@ -9,7 +9,7 @@ import { flow, noop } from 'lodash';
import { __ } from '@wordpress/i18n';
import { IconButton, withSpokenMessages } from '@wordpress/components';
import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
export function BlockInspectorButton( {
areAdvancedSettingsOpened,
diff --git a/edit-post/hooks/more-menu/copy-content-menu-item/index.js b/edit-post/hooks/more-menu/copy-content-menu-item/index.js
index f10e9ba386ed7..345d792c0e4d3 100644
--- a/edit-post/hooks/more-menu/copy-content-menu-item/index.js
+++ b/edit-post/hooks/more-menu/copy-content-menu-item/index.js
@@ -1,10 +1,10 @@
/**
* WordPress dependencies
*/
-import { ClipboardButton, withState } from '@wordpress/components';
-import { compose } from '@wordpress/element';
+import { ClipboardButton } from '@wordpress/components';
import { withSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
+import { withState, compose } from '@wordpress/compose';
function CopyContentMenuItem( { editedPostContent, hasCopied, setState } ) {
return (
diff --git a/edit-post/hooks/validate-multiple-use/index.js b/edit-post/hooks/validate-multiple-use/index.js
index db5b848e3e931..b6b86ecee1b47 100644
--- a/edit-post/hooks/validate-multiple-use/index.js
+++ b/edit-post/hooks/validate-multiple-use/index.js
@@ -16,9 +16,10 @@ import {
import { Button } from '@wordpress/components';
import { withSelect, withDispatch } from '@wordpress/data';
import { Warning } from '@wordpress/editor';
-import { compose, createHigherOrderComponent } from '@wordpress/element';
+import { createHigherOrderComponent } from '@wordpress/element';
import { addFilter } from '@wordpress/hooks';
import { __ } from '@wordpress/i18n';
+import { compose } from '@wordpress/compose';
const enhance = compose(
/*
diff --git a/editor/components/autocomplete/index.js b/editor/components/autocomplete/index.js
index 1a9c66f26597c..419ae8a8af812 100644
--- a/editor/components/autocomplete/index.js
+++ b/editor/components/autocomplete/index.js
@@ -7,7 +7,8 @@ import { clone } from 'lodash';
* WordPress dependencies
*/
import { applyFilters, hasFilter } from '@wordpress/hooks';
-import { Component, compose } from '@wordpress/element';
+import { Component } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { Autocomplete as OriginalAutocomplete } from '@wordpress/components';
/**
diff --git a/editor/components/autosave-monitor/index.js b/editor/components/autosave-monitor/index.js
index 28f393c7d150c..8164d64979f8b 100644
--- a/editor/components/autosave-monitor/index.js
+++ b/editor/components/autosave-monitor/index.js
@@ -1,7 +1,8 @@
/**
* WordPress dependencies
*/
-import { Component, compose } from '@wordpress/element';
+import { Component } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
export class AutosaveMonitor extends Component {
diff --git a/editor/components/block-drop-zone/index.js b/editor/components/block-drop-zone/index.js
index d265283752522..b249125018ba9 100644
--- a/editor/components/block-drop-zone/index.js
+++ b/editor/components/block-drop-zone/index.js
@@ -14,8 +14,9 @@ import {
getBlockTransforms,
findTransform,
} from '@wordpress/blocks';
-import { compose, Component } from '@wordpress/element';
+import { Component } from '@wordpress/element';
import { withDispatch, withSelect } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/editor/components/block-list/block-html.js b/editor/components/block-list/block-html.js
index 8a33cfa9f8f66..bd5a18a90b4a5 100644
--- a/editor/components/block-list/block-html.js
+++ b/editor/components/block-list/block-html.js
@@ -8,7 +8,8 @@ import { isEqual } from 'lodash';
/**
* WordPress Dependencies
*/
-import { Component, compose } from '@wordpress/element';
+import { Component } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { getBlockAttributes, getBlockContent, getBlockType, isValidBlock } from '@wordpress/blocks';
import { withSelect, withDispatch } from '@wordpress/data';
diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js
index 89d19270d16c7..6258c46722168 100644
--- a/editor/components/block-list/block.js
+++ b/editor/components/block-list/block.js
@@ -8,7 +8,7 @@ import tinymce from 'tinymce';
/**
* WordPress dependencies
*/
-import { Component, findDOMNode, Fragment, compose } from '@wordpress/element';
+import { Component, findDOMNode, Fragment } from '@wordpress/element';
import {
focus,
isTextField,
@@ -28,6 +28,7 @@ import { withFilters } from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
import { withDispatch, withSelect } from '@wordpress/data';
import { withViewportMatch } from '@wordpress/viewport';
+import { compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/editor/components/block-list/breadcrumb.js b/editor/components/block-list/breadcrumb.js
index 128c6c98617a3..c78b39d21c4c6 100644
--- a/editor/components/block-list/breadcrumb.js
+++ b/editor/components/block-list/breadcrumb.js
@@ -1,9 +1,10 @@
/**
* WordPress dependencies
*/
-import { compose, Component, Fragment } from '@wordpress/element';
+import { Component, Fragment } from '@wordpress/element';
import { Toolbar } from '@wordpress/components';
import { withSelect } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/editor/components/block-list/insertion-point.js b/editor/components/block-list/insertion-point.js
index d39167607687b..67a78a251d3a5 100644
--- a/editor/components/block-list/insertion-point.js
+++ b/editor/components/block-list/insertion-point.js
@@ -8,9 +8,10 @@ import classnames from 'classnames';
*/
import { __ } from '@wordpress/i18n';
import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
-import { Component, compose } from '@wordpress/element';
-import { ifCondition, IconButton } from '@wordpress/components';
+import { Component } from '@wordpress/element';
+import { IconButton } from '@wordpress/components';
import { withSelect, withDispatch } from '@wordpress/data';
+import { ifCondition, compose } from '@wordpress/compose';
class BlockInsertionPoint extends Component {
constructor() {
diff --git a/editor/components/block-list/layout.js b/editor/components/block-list/layout.js
index d380de5689072..1b28a663b121b 100644
--- a/editor/components/block-list/layout.js
+++ b/editor/components/block-list/layout.js
@@ -16,9 +16,10 @@ import 'element-closest';
/**
* WordPress dependencies
*/
-import { Component, compose } from '@wordpress/element';
+import { Component } from '@wordpress/element';
import { withSelect, withDispatch } from '@wordpress/data';
import { getDefaultBlockName } from '@wordpress/blocks';
+import { compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/editor/components/block-mover/index.js b/editor/components/block-mover/index.js
index 1ac35a6a26b55..e9205feb890c7 100644
--- a/editor/components/block-mover/index.js
+++ b/editor/components/block-mover/index.js
@@ -8,10 +8,11 @@ import classnames from 'classnames';
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { IconButton, withInstanceId } from '@wordpress/components';
+import { IconButton } from '@wordpress/components';
import { getBlockType } from '@wordpress/blocks';
-import { compose, Component } from '@wordpress/element';
+import { Component } from '@wordpress/element';
import { withSelect, withDispatch } from '@wordpress/data';
+import { withInstanceId, compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/editor/components/block-selection-clearer/index.js b/editor/components/block-selection-clearer/index.js
index 57b29c6a1bc1c..7e092163d81b8 100644
--- a/editor/components/block-selection-clearer/index.js
+++ b/editor/components/block-selection-clearer/index.js
@@ -6,8 +6,9 @@ import { omit } from 'lodash';
/**
* WordPress dependencies
*/
-import { Component, compose } from '@wordpress/element';
+import { Component } from '@wordpress/element';
import { withSelect, withDispatch } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
class BlockSelectionClearer extends Component {
constructor() {
diff --git a/editor/components/block-settings-menu/block-duplicate-button.js b/editor/components/block-settings-menu/block-duplicate-button.js
index c9b15fa4f8bbb..e44529480ab73 100644
--- a/editor/components/block-settings-menu/block-duplicate-button.js
+++ b/editor/components/block-settings-menu/block-duplicate-button.js
@@ -8,7 +8,7 @@ import { flow, noop, last, every, first, castArray } from 'lodash';
*/
import { __ } from '@wordpress/i18n';
import { IconButton } from '@wordpress/components';
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
import { cloneBlock, hasBlockSupport } from '@wordpress/blocks';
diff --git a/editor/components/block-settings-menu/block-html-convert-button.js b/editor/components/block-settings-menu/block-html-convert-button.js
index e4b24ceabbc2c..4809eae9dac08 100644
--- a/editor/components/block-settings-menu/block-html-convert-button.js
+++ b/editor/components/block-settings-menu/block-html-convert-button.js
@@ -2,7 +2,7 @@
* WordPress dependencies
*/
import { rawHandler, getBlockContent } from '@wordpress/blocks';
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
/**
diff --git a/editor/components/block-settings-menu/block-mode-toggle.js b/editor/components/block-settings-menu/block-mode-toggle.js
index 2245c9fd70252..61d1af42d6550 100644
--- a/editor/components/block-settings-menu/block-mode-toggle.js
+++ b/editor/components/block-settings-menu/block-mode-toggle.js
@@ -10,7 +10,7 @@ import { __ } from '@wordpress/i18n';
import { IconButton } from '@wordpress/components';
import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
export function BlockModeToggle( { blockType, mode, onToggleMode, small = false, role } ) {
if ( ! hasBlockSupport( blockType, 'html', true ) ) {
diff --git a/editor/components/block-settings-menu/block-remove-button.js b/editor/components/block-settings-menu/block-remove-button.js
index 08bcc5befd27c..00a63b4eeb18c 100644
--- a/editor/components/block-settings-menu/block-remove-button.js
+++ b/editor/components/block-settings-menu/block-remove-button.js
@@ -8,7 +8,7 @@ import { castArray, flow, noop, some } from 'lodash';
*/
import { __ } from '@wordpress/i18n';
import { IconButton } from '@wordpress/components';
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { withDispatch, withSelect } from '@wordpress/data';
export function BlockRemoveButton( { onRemove, onClick = noop, isLocked, role, ...props } ) {
diff --git a/editor/components/block-settings-menu/block-unknown-convert-button.js b/editor/components/block-settings-menu/block-unknown-convert-button.js
index baa62dbf1a508..f31e54f65e101 100644
--- a/editor/components/block-settings-menu/block-unknown-convert-button.js
+++ b/editor/components/block-settings-menu/block-unknown-convert-button.js
@@ -2,7 +2,7 @@
* WordPress dependencies
*/
import { getUnknownTypeHandlerName, rawHandler, serialize } from '@wordpress/blocks';
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
/**
diff --git a/editor/components/block-settings-menu/shared-block-convert-button.js b/editor/components/block-settings-menu/shared-block-convert-button.js
index df652a04e313b..8fa70535413c0 100644
--- a/editor/components/block-settings-menu/shared-block-convert-button.js
+++ b/editor/components/block-settings-menu/shared-block-convert-button.js
@@ -6,11 +6,12 @@ import { noop } from 'lodash';
/**
* WordPress dependencies
*/
-import { Fragment, compose } from '@wordpress/element';
+import { Fragment } from '@wordpress/element';
import { IconButton } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { isSharedBlock } from '@wordpress/blocks';
import { withSelect, withDispatch } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
export function SharedBlockConvertButton( {
isVisible,
diff --git a/editor/components/block-settings-menu/shared-block-delete-button.js b/editor/components/block-settings-menu/shared-block-delete-button.js
index 11caeb04f43ff..e08e23ba2c998 100644
--- a/editor/components/block-settings-menu/shared-block-delete-button.js
+++ b/editor/components/block-settings-menu/shared-block-delete-button.js
@@ -6,7 +6,7 @@ import { noop } from 'lodash';
/**
* WordPress dependencies
*/
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { IconButton } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { isSharedBlock } from '@wordpress/blocks';
diff --git a/editor/components/block-styles/index.js b/editor/components/block-styles/index.js
index 47cf5dd8364d6..0a308dcd70be3 100644
--- a/editor/components/block-styles/index.js
+++ b/editor/components/block-styles/index.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
import { getBlockType } from '@wordpress/blocks';
import { __, sprintf } from '@wordpress/i18n';
diff --git a/editor/components/block-switcher/index.js b/editor/components/block-switcher/index.js
index 32c72ab55eecd..6afa580683b1f 100644
--- a/editor/components/block-switcher/index.js
+++ b/editor/components/block-switcher/index.js
@@ -9,9 +9,10 @@ import { castArray, get, some } from 'lodash';
import { __ } from '@wordpress/i18n';
import { Dropdown, IconButton, Toolbar, PanelBody } from '@wordpress/components';
import { getBlockType, getPossibleBlockTransformations, switchToBlockType, hasChildBlocks } from '@wordpress/blocks';
-import { compose, Component, Fragment } from '@wordpress/element';
+import { Component, Fragment } from '@wordpress/element';
import { DOWN } from '@wordpress/keycodes';
import { withSelect, withDispatch } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/editor/components/colors/with-colors-deprecated.js b/editor/components/colors/with-colors-deprecated.js
index e55dbd6e5b51c..ba0ffeeecc5c9 100644
--- a/editor/components/colors/with-colors-deprecated.js
+++ b/editor/components/colors/with-colors-deprecated.js
@@ -7,8 +7,9 @@ import { get } from 'lodash';
/**
* WordPress dependencies
*/
-import { createHigherOrderComponent, Component, compose } from '@wordpress/element';
+import { createHigherOrderComponent, Component } from '@wordpress/element';
import { withSelect } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/editor/components/colors/with-colors.js b/editor/components/colors/with-colors.js
index 312b7a703c5c8..aeed7fb8e7c05 100644
--- a/editor/components/colors/with-colors.js
+++ b/editor/components/colors/with-colors.js
@@ -6,9 +6,10 @@ import { find, get, isFunction, isString, kebabCase, reduce, upperFirst } from '
/**
* WordPress dependencies
*/
-import { createHigherOrderComponent, Component, compose } from '@wordpress/element';
+import { createHigherOrderComponent, Component } from '@wordpress/element';
import { withSelect } from '@wordpress/data';
import deprecated from '@wordpress/deprecated';
+import { compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/editor/components/copy-handler/index.js b/editor/components/copy-handler/index.js
index 446ad84ed4fbc..7c2d40497fc82 100644
--- a/editor/components/copy-handler/index.js
+++ b/editor/components/copy-handler/index.js
@@ -1,10 +1,11 @@
/**
* WordPress dependencies
*/
-import { Component, compose } from '@wordpress/element';
+import { Component } from '@wordpress/element';
import { serialize } from '@wordpress/blocks';
import { documentHasSelection } from '@wordpress/dom';
import { withSelect, withDispatch } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
class CopyHandler extends Component {
constructor() {
diff --git a/editor/components/default-block-appender/index.js b/editor/components/default-block-appender/index.js
index f769f3a47688f..9899a92c71346 100644
--- a/editor/components/default-block-appender/index.js
+++ b/editor/components/default-block-appender/index.js
@@ -8,7 +8,7 @@ import { get } from 'lodash';
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { getDefaultBlockName } from '@wordpress/blocks';
import { decodeEntities } from '@wordpress/utils';
import { withSelect, withDispatch } from '@wordpress/data';
diff --git a/editor/components/document-outline/index.js b/editor/components/document-outline/index.js
index dadcf5f73a171..c16cedf059416 100644
--- a/editor/components/document-outline/index.js
+++ b/editor/components/document-outline/index.js
@@ -7,7 +7,7 @@ import { countBy, flatMap, get } from 'lodash';
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
/**
diff --git a/editor/components/editor-global-keyboard-shortcuts/index.js b/editor/components/editor-global-keyboard-shortcuts/index.js
index 4780d6577fdfa..0839338294202 100644
--- a/editor/components/editor-global-keyboard-shortcuts/index.js
+++ b/editor/components/editor-global-keyboard-shortcuts/index.js
@@ -6,10 +6,11 @@ import { first, last, some } from 'lodash';
/**
* WordPress dependencies
*/
-import { Component, Fragment, compose } from '@wordpress/element';
+import { Component, Fragment } from '@wordpress/element';
import { KeyboardShortcuts } from '@wordpress/components';
import { withSelect, withDispatch } from '@wordpress/data';
import { rawShortcut } from '@wordpress/keycodes';
+import { compose } from '@wordpress/compose';
class EditorGlobalKeyboardShortcuts extends Component {
constructor() {
diff --git a/editor/components/editor-history/redo.js b/editor/components/editor-history/redo.js
index 9bfe2ab756f3a..5ee92629de528 100644
--- a/editor/components/editor-history/redo.js
+++ b/editor/components/editor-history/redo.js
@@ -4,7 +4,7 @@
import { __ } from '@wordpress/i18n';
import { IconButton } from '@wordpress/components';
import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { displayShortcut } from '@wordpress/keycodes';
function EditorHistoryRedo( { hasRedo, redo } ) {
diff --git a/editor/components/editor-history/undo.js b/editor/components/editor-history/undo.js
index ae50a68e2351c..9dce40badfea2 100644
--- a/editor/components/editor-history/undo.js
+++ b/editor/components/editor-history/undo.js
@@ -4,7 +4,7 @@
import { __ } from '@wordpress/i18n';
import { IconButton } from '@wordpress/components';
import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { displayShortcut } from '@wordpress/keycodes';
function EditorHistoryUndo( { hasUndo, undo } ) {
diff --git a/editor/components/editor-notices/index.js b/editor/components/editor-notices/index.js
index b90ee5734a014..b00136b2a7d13 100644
--- a/editor/components/editor-notices/index.js
+++ b/editor/components/editor-notices/index.js
@@ -3,7 +3,7 @@
*/
import { NoticeList } from '@wordpress/components';
import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/editor/components/inner-blocks/index.js b/editor/components/inner-blocks/index.js
index 6f10f095d6f3f..32a6c4b692129 100644
--- a/editor/components/inner-blocks/index.js
+++ b/editor/components/inner-blocks/index.js
@@ -9,10 +9,11 @@ import classnames from 'classnames';
*/
import { withContext } from '@wordpress/components';
import { withViewportMatch } from '@wordpress/viewport';
-import { Component, compose } from '@wordpress/element';
+import { Component } from '@wordpress/element';
import { withSelect, withDispatch } from '@wordpress/data';
import { synchronizeBlocksWithTemplate } from '@wordpress/blocks';
import isShallowEqual from '@wordpress/is-shallow-equal';
+import { compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/editor/components/inserter-with-shortcuts/index.js b/editor/components/inserter-with-shortcuts/index.js
index c75366d454b51..60ed1434bd3e3 100644
--- a/editor/components/inserter-with-shortcuts/index.js
+++ b/editor/components/inserter-with-shortcuts/index.js
@@ -7,7 +7,7 @@ import { filter, isEmpty } from 'lodash';
* WordPress dependencies
*/
import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { IconButton } from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
import { withDispatch, withSelect } from '@wordpress/data';
diff --git a/editor/components/inserter/child-blocks.js b/editor/components/inserter/child-blocks.js
index ae9c287272900..c6a9392cfafd4 100644
--- a/editor/components/inserter/child-blocks.js
+++ b/editor/components/inserter/child-blocks.js
@@ -1,9 +1,8 @@
/**
* WordPress dependencies
*/
-import { compose } from '@wordpress/element';
import { withSelect } from '@wordpress/data';
-import { ifCondition } from '@wordpress/components';
+import { ifCondition, compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/editor/components/inserter/index.js b/editor/components/inserter/index.js
index e20c95c203300..549193a4a0ca0 100644
--- a/editor/components/inserter/index.js
+++ b/editor/components/inserter/index.js
@@ -4,8 +4,9 @@
import { __ } from '@wordpress/i18n';
import { Dropdown, IconButton } from '@wordpress/components';
import { createBlock, isUnmodifiedDefaultBlock } from '@wordpress/blocks';
-import { Component, compose } from '@wordpress/element';
+import { Component } from '@wordpress/element';
import { withSelect, withDispatch } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/editor/components/inserter/menu.js b/editor/components/inserter/menu.js
index 88fc5bb1c6606..68d34a5dafa8f 100644
--- a/editor/components/inserter/menu.js
+++ b/editor/components/inserter/menu.js
@@ -20,15 +20,14 @@ import scrollIntoView from 'dom-scroll-into-view';
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { Component, compose, findDOMNode, createRef } from '@wordpress/element';
+import { Component, findDOMNode, createRef } from '@wordpress/element';
import {
- withInstanceId,
withSpokenMessages,
PanelBody,
- withSafeTimeout,
} from '@wordpress/components';
import { getCategories, isSharedBlock } from '@wordpress/blocks';
import { withDispatch, withSelect } from '@wordpress/data';
+import { withInstanceId, compose, withSafeTimeout } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/editor/components/observe-typing/index.js b/editor/components/observe-typing/index.js
index 7f9e064731efe..2530399dc9eb3 100644
--- a/editor/components/observe-typing/index.js
+++ b/editor/components/observe-typing/index.js
@@ -6,11 +6,11 @@ import { includes } from 'lodash';
/**
* WordPress dependencies
*/
-import { Component, compose } from '@wordpress/element';
+import { Component } from '@wordpress/element';
import { withSelect, withDispatch } from '@wordpress/data';
import { isTextField } from '@wordpress/dom';
import { UP, RIGHT, DOWN, LEFT, ENTER, BACKSPACE } from '@wordpress/keycodes';
-import { withSafeTimeout } from '@wordpress/components';
+import { withSafeTimeout, compose } from '@wordpress/compose';
/**
* Set of key codes upon which typing is to be initiated on a keydown event.
diff --git a/editor/components/page-attributes/order.js b/editor/components/page-attributes/order.js
index e0e1a73948c3b..486ac7411c9bc 100644
--- a/editor/components/page-attributes/order.js
+++ b/editor/components/page-attributes/order.js
@@ -2,9 +2,9 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { withInstanceId } from '@wordpress/components';
-import { compose, Fragment } from '@wordpress/element';
+import { Fragment } from '@wordpress/element';
import { withSelect, withDispatch } from '@wordpress/data';
+import { compose, withInstanceId } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/editor/components/page-attributes/parent.js b/editor/components/page-attributes/parent.js
index 09b1a3e0963b3..f15d156a3bb2f 100644
--- a/editor/components/page-attributes/parent.js
+++ b/editor/components/page-attributes/parent.js
@@ -9,7 +9,7 @@ import { stringify } from 'querystringify';
*/
import { __ } from '@wordpress/i18n';
import { TreeSelect, withAPIData } from '@wordpress/components';
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { buildTermsTree } from '@wordpress/utils';
import { withSelect, withDispatch } from '@wordpress/data';
diff --git a/editor/components/page-attributes/template.js b/editor/components/page-attributes/template.js
index 977982c87bb34..c54366a71c183 100644
--- a/editor/components/page-attributes/template.js
+++ b/editor/components/page-attributes/template.js
@@ -7,8 +7,7 @@ import { isEmpty, map } from 'lodash';
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { withInstanceId } from '@wordpress/components';
-import { compose } from '@wordpress/element';
+import { withInstanceId, compose } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
/**
diff --git a/editor/components/panel-color/index.js b/editor/components/panel-color/index.js
index 316cd7826ef5c..5ef1a44610bb4 100644
--- a/editor/components/panel-color/index.js
+++ b/editor/components/panel-color/index.js
@@ -6,8 +6,8 @@ import { omit } from 'lodash';
/**
* WordPress dependencies
*/
-import { ifCondition, PanelColor as PanelColorComponent } from '@wordpress/components';
-import { compose } from '@wordpress/element';
+import { PanelColor as PanelColorComponent } from '@wordpress/components';
+import { ifCondition, compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/editor/components/post-author/check.js b/editor/components/post-author/check.js
index 69ba4f6938156..4f725e792a44f 100644
--- a/editor/components/post-author/check.js
+++ b/editor/components/post-author/check.js
@@ -6,8 +6,7 @@ import { get } from 'lodash';
/**
* WordPress dependencies
*/
-import { withInstanceId } from '@wordpress/components';
-import { compose } from '@wordpress/element';
+import { withInstanceId, compose } from '@wordpress/compose';
import { withSelect } from '@wordpress/data';
/**
diff --git a/editor/components/post-author/index.js b/editor/components/post-author/index.js
index 46e3b4b3fe220..5bb31bf294fd6 100644
--- a/editor/components/post-author/index.js
+++ b/editor/components/post-author/index.js
@@ -2,8 +2,8 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { withInstanceId } from '@wordpress/components';
-import { Component, compose } from '@wordpress/element';
+import { withInstanceId, compose } from '@wordpress/compose';
+import { Component } from '@wordpress/element';
import { withSelect, withDispatch } from '@wordpress/data';
/**
diff --git a/editor/components/post-comments/index.js b/editor/components/post-comments/index.js
index f28db1f849b28..fcf1856570957 100644
--- a/editor/components/post-comments/index.js
+++ b/editor/components/post-comments/index.js
@@ -2,9 +2,9 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { FormToggle, withInstanceId } from '@wordpress/components';
+import { FormToggle } from '@wordpress/components';
+import { withInstanceId, compose } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/element';
function PostComments( { commentStatus = 'open', instanceId, ...props } ) {
const onToggleComments = () => props.editPost( { comment_status: commentStatus === 'open' ? 'closed' : 'open' } );
diff --git a/editor/components/post-excerpt/index.js b/editor/components/post-excerpt/index.js
index 9b42d9fa2477d..2e49a650962d9 100644
--- a/editor/components/post-excerpt/index.js
+++ b/editor/components/post-excerpt/index.js
@@ -4,7 +4,7 @@
import { __ } from '@wordpress/i18n';
import { ExternalLink, TextareaControl } from '@wordpress/components';
import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
/**
* Internal Dependencies
diff --git a/editor/components/post-featured-image/index.js b/editor/components/post-featured-image/index.js
index 779c3d7df6f1a..e2abe7963d579 100644
--- a/editor/components/post-featured-image/index.js
+++ b/editor/components/post-featured-image/index.js
@@ -8,7 +8,7 @@ import { get } from 'lodash';
*/
import { __ } from '@wordpress/i18n';
import { Button, Spinner, ResponsiveWrapper, withFilters } from '@wordpress/components';
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
/**
diff --git a/editor/components/post-format/index.js b/editor/components/post-format/index.js
index e0cd2c5cc4e75..3098523be1c49 100644
--- a/editor/components/post-format/index.js
+++ b/editor/components/post-format/index.js
@@ -7,9 +7,9 @@ import { find, get, includes, union } from 'lodash';
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { withInstanceId, Button } from '@wordpress/components';
-import { compose } from '@wordpress/element';
+import { Button } from '@wordpress/components';
import { withSelect, withDispatch } from '@wordpress/data';
+import { withInstanceId, compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/editor/components/post-pending-status/check.js b/editor/components/post-pending-status/check.js
index e5631c70bb1be..2c6c19b928042 100644
--- a/editor/components/post-pending-status/check.js
+++ b/editor/components/post-pending-status/check.js
@@ -6,7 +6,7 @@ import { get } from 'lodash';
/**
* WordPress dependencies
*/
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { withSelect } from '@wordpress/data';
export function PostPendingStatusCheck( { hasPublishAction, isPublished, children } ) {
diff --git a/editor/components/post-pending-status/index.js b/editor/components/post-pending-status/index.js
index 0352df2849e6f..4fa5f13c8b2ec 100644
--- a/editor/components/post-pending-status/index.js
+++ b/editor/components/post-pending-status/index.js
@@ -2,9 +2,9 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { FormToggle, withInstanceId } from '@wordpress/components';
-import { compose } from '@wordpress/element';
+import { FormToggle } from '@wordpress/components';
import { withSelect, withDispatch } from '@wordpress/data';
+import { withInstanceId, compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/editor/components/post-permalink/editor.js b/editor/components/post-permalink/editor.js
index 18624916969a6..70e1c751fd297 100644
--- a/editor/components/post-permalink/editor.js
+++ b/editor/components/post-permalink/editor.js
@@ -2,9 +2,10 @@
* WordPress dependencies
*/
import { withDispatch, withSelect } from '@wordpress/data';
-import { Component, compose } from '@wordpress/element';
+import { Component } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
+import { compose } from '@wordpress/compose';
/**
* Internal Dependencies
diff --git a/editor/components/post-permalink/index.js b/editor/components/post-permalink/index.js
index e81302a486cdc..ced2fc2437211 100644
--- a/editor/components/post-permalink/index.js
+++ b/editor/components/post-permalink/index.js
@@ -7,9 +7,10 @@ import classnames from 'classnames';
* WordPress dependencies
*/
import { withDispatch, withSelect } from '@wordpress/data';
-import { Component, compose } from '@wordpress/element';
+import { Component } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { ClipboardButton, Button } from '@wordpress/components';
+import { compose } from '@wordpress/compose';
/**
* Internal Dependencies
diff --git a/editor/components/post-pingbacks/index.js b/editor/components/post-pingbacks/index.js
index 848a923f7121a..8a4dc8189d309 100644
--- a/editor/components/post-pingbacks/index.js
+++ b/editor/components/post-pingbacks/index.js
@@ -2,9 +2,9 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { FormToggle, withInstanceId } from '@wordpress/components';
+import { FormToggle } from '@wordpress/components';
import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/element';
+import { withInstanceId, compose } from '@wordpress/compose';
function PostPingbacks( { pingStatus = 'open', instanceId, ...props } ) {
const onTogglePingback = () => props.editPost( { ping_status: pingStatus === 'open' ? 'closed' : 'open' } );
diff --git a/editor/components/post-preview-button/index.js b/editor/components/post-preview-button/index.js
index 034dcefb643fe..154f9f98d7c54 100644
--- a/editor/components/post-preview-button/index.js
+++ b/editor/components/post-preview-button/index.js
@@ -6,11 +6,12 @@ import { get } from 'lodash';
/**
* WordPress dependencies
*/
-import { Component, compose } from '@wordpress/element';
-import { Button, ifCondition } from '@wordpress/components';
+import { Component } from '@wordpress/element';
+import { Button } from '@wordpress/components';
import { __, _x } from '@wordpress/i18n';
import { withSelect, withDispatch } from '@wordpress/data';
import { DotTip } from '@wordpress/nux';
+import { ifCondition, compose } from '@wordpress/compose';
export class PostPreviewButton extends Component {
constructor() {
diff --git a/editor/components/post-publish-button/index.js b/editor/components/post-publish-button/index.js
index e6741c4453f14..3cd74e24e9f13 100644
--- a/editor/components/post-publish-button/index.js
+++ b/editor/components/post-publish-button/index.js
@@ -7,8 +7,9 @@ import { noop, get } from 'lodash';
* WordPress dependencies
*/
import { Button } from '@wordpress/components';
-import { compose, Component, createRef } from '@wordpress/element';
+import { Component, createRef } from '@wordpress/element';
import { withSelect, withDispatch } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/editor/components/post-publish-button/label.js b/editor/components/post-publish-button/label.js
index 600cbacf47326..d44cf1bec3e1c 100644
--- a/editor/components/post-publish-button/label.js
+++ b/editor/components/post-publish-button/label.js
@@ -7,7 +7,7 @@ import { get } from 'lodash';
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { withSelect } from '@wordpress/data';
export function PublishButtonLabel( {
diff --git a/editor/components/post-publish-panel/index.js b/editor/components/post-publish-panel/index.js
index f1863a030fd6c..19c1fb231501a 100644
--- a/editor/components/post-publish-panel/index.js
+++ b/editor/components/post-publish-panel/index.js
@@ -7,9 +7,10 @@ import { get } from 'lodash';
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { compose, Component } from '@wordpress/element';
+import { Component } from '@wordpress/element';
import { IconButton, Spinner } from '@wordpress/components';
import { withSelect } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
/**
* Internal Dependencies
diff --git a/editor/components/post-publish-panel/toggle.js b/editor/components/post-publish-panel/toggle.js
index f51eebebd7fb2..6418adf81bd24 100644
--- a/editor/components/post-publish-panel/toggle.js
+++ b/editor/components/post-publish-panel/toggle.js
@@ -7,7 +7,7 @@ import { get } from 'lodash';
* WordPress Dependencies
*/
import { Button } from '@wordpress/components';
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';
import { withSelect } from '@wordpress/data';
import { DotTip } from '@wordpress/nux';
diff --git a/editor/components/post-saved-state/index.js b/editor/components/post-saved-state/index.js
index 06f0f633a886a..4bc8b75ed3ad1 100644
--- a/editor/components/post-saved-state/index.js
+++ b/editor/components/post-saved-state/index.js
@@ -7,10 +7,11 @@ import classnames from 'classnames';
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { Dashicon, IconButton, withSafeTimeout } from '@wordpress/components';
-import { Component, compose } from '@wordpress/element';
+import { Dashicon, IconButton } from '@wordpress/components';
+import { Component } from '@wordpress/element';
import { withSelect, withDispatch } from '@wordpress/data';
import { displayShortcut } from '@wordpress/keycodes';
+import { withSafeTimeout, compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/editor/components/post-schedule/check.js b/editor/components/post-schedule/check.js
index c6e9de39ab6bb..7495f216b014c 100644
--- a/editor/components/post-schedule/check.js
+++ b/editor/components/post-schedule/check.js
@@ -6,7 +6,7 @@ import { get } from 'lodash';
/**
* WordPress dependencies
*/
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { withSelect } from '@wordpress/data';
export function PostScheduleCheck( { hasPublishAction, children } ) {
diff --git a/editor/components/post-schedule/index.js b/editor/components/post-schedule/index.js
index 52c3ed4a26d03..9c4a02230f93b 100644
--- a/editor/components/post-schedule/index.js
+++ b/editor/components/post-schedule/index.js
@@ -3,11 +3,7 @@
*/
import { getSettings } from '@wordpress/date';
import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
+import { compose } from '@wordpress/compose';
import { DateTimePicker } from '@wordpress/components';
export function PostSchedule( { date, onUpdateDate } ) {
diff --git a/editor/components/post-sticky/check.js b/editor/components/post-sticky/check.js
index 08fd8fbd56318..949c18cf43efd 100644
--- a/editor/components/post-sticky/check.js
+++ b/editor/components/post-sticky/check.js
@@ -6,7 +6,7 @@ import { get } from 'lodash';
/**
* WordPress dependencies
*/
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { withSelect } from '@wordpress/data';
export function PostStickyCheck( { hasStickyAction, postType, children } ) {
diff --git a/editor/components/post-sticky/index.js b/editor/components/post-sticky/index.js
index c6d2ac16ed7ce..66650aaa4a581 100644
--- a/editor/components/post-sticky/index.js
+++ b/editor/components/post-sticky/index.js
@@ -2,9 +2,9 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { FormToggle, withInstanceId } from '@wordpress/components';
-import { compose } from '@wordpress/element';
+import { FormToggle } from '@wordpress/components';
import { withSelect, withDispatch } from '@wordpress/data';
+import { withInstanceId, compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/editor/components/post-switch-to-draft-button/index.js b/editor/components/post-switch-to-draft-button/index.js
index e4b41063a7e2b..8ea77f0f8a0d3 100644
--- a/editor/components/post-switch-to-draft-button/index.js
+++ b/editor/components/post-switch-to-draft-button/index.js
@@ -4,7 +4,7 @@
import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
function PostSwitchToDraftButton( { isSaving, isPublished, onClick } ) {
if ( ! isPublished ) {
diff --git a/editor/components/post-taxonomies/check.js b/editor/components/post-taxonomies/check.js
index 8a5589032fdf5..e892b672d7778 100644
--- a/editor/components/post-taxonomies/check.js
+++ b/editor/components/post-taxonomies/check.js
@@ -6,7 +6,7 @@ import { some, includes } from 'lodash';
/**
* WordPress dependencies
*/
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { withSelect } from '@wordpress/data';
export function PostTaxonomiesCheck( { postType, taxonomies, children } ) {
diff --git a/editor/components/post-taxonomies/flat-term-selector.js b/editor/components/post-taxonomies/flat-term-selector.js
index f73ba815cbac5..8c767de2d0e15 100644
--- a/editor/components/post-taxonomies/flat-term-selector.js
+++ b/editor/components/post-taxonomies/flat-term-selector.js
@@ -8,10 +8,11 @@ import { stringify } from 'querystring';
* WordPress dependencies
*/
import { __, _x, sprintf } from '@wordpress/i18n';
-import { Component, compose } from '@wordpress/element';
+import { Component } from '@wordpress/element';
import { FormTokenField, withAPIData } from '@wordpress/components';
import { withSelect, withDispatch } from '@wordpress/data';
import apiRequest from '@wordpress/api-request';
+import { compose } from '@wordpress/compose';
/**
* Module constants
diff --git a/editor/components/post-taxonomies/hierarchical-term-selector.js b/editor/components/post-taxonomies/hierarchical-term-selector.js
index 7933f83b2a564..c130334fbe29d 100644
--- a/editor/components/post-taxonomies/hierarchical-term-selector.js
+++ b/editor/components/post-taxonomies/hierarchical-term-selector.js
@@ -8,11 +8,12 @@ import { stringify } from 'querystring';
* WordPress dependencies
*/
import { __, _x, sprintf } from '@wordpress/i18n';
-import { Component, compose } from '@wordpress/element';
-import { TreeSelect, withAPIData, withInstanceId, withSpokenMessages, Button } from '@wordpress/components';
+import { Component } from '@wordpress/element';
+import { TreeSelect, withAPIData, withSpokenMessages, Button } from '@wordpress/components';
import { buildTermsTree } from '@wordpress/utils';
import { withSelect, withDispatch } from '@wordpress/data';
import apiRequest from '@wordpress/api-request';
+import { withInstanceId, compose } from '@wordpress/compose';
/**
* Module Constants
diff --git a/editor/components/post-taxonomies/index.js b/editor/components/post-taxonomies/index.js
index 486dfb2128fad..a7841b062e67b 100644
--- a/editor/components/post-taxonomies/index.js
+++ b/editor/components/post-taxonomies/index.js
@@ -6,8 +6,9 @@ import { filter, identity, includes } from 'lodash';
/**
* WordPress dependencies
*/
-import { compose, Fragment } from '@wordpress/element';
+import { Fragment } from '@wordpress/element';
import { withSelect } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/editor/components/post-text-editor/index.js b/editor/components/post-text-editor/index.js
index cb3bf75617309..bf700223da19c 100644
--- a/editor/components/post-text-editor/index.js
+++ b/editor/components/post-text-editor/index.js
@@ -8,10 +8,10 @@ import Textarea from 'react-autosize-textarea';
*/
import { __ } from '@wordpress/i18n';
import { decodeEntities } from '@wordpress/utils';
-import { Component, compose, Fragment } from '@wordpress/element';
+import { Component, Fragment } from '@wordpress/element';
import { parse } from '@wordpress/blocks';
import { withSelect, withDispatch } from '@wordpress/data';
-import { withInstanceId } from '@wordpress/components';
+import { withInstanceId, compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/editor/components/post-title/index.js b/editor/components/post-title/index.js
index 240bdb534aa34..6ef155b97a4c8 100644
--- a/editor/components/post-title/index.js
+++ b/editor/components/post-title/index.js
@@ -9,11 +9,12 @@ import { get } from 'lodash';
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { Component, compose } from '@wordpress/element';
+import { Component } from '@wordpress/element';
import { decodeEntities } from '@wordpress/utils';
import { ENTER } from '@wordpress/keycodes';
import { withSelect, withDispatch } from '@wordpress/data';
-import { KeyboardShortcuts, withInstanceId, withFocusOutside } from '@wordpress/components';
+import { KeyboardShortcuts, withFocusOutside } from '@wordpress/components';
+import { withInstanceId, compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/editor/components/post-trash/index.js b/editor/components/post-trash/index.js
index af3b703adecc7..e55cba6c5ae88 100644
--- a/editor/components/post-trash/index.js
+++ b/editor/components/post-trash/index.js
@@ -4,7 +4,7 @@
import { __ } from '@wordpress/i18n';
import { Button, Dashicon } from '@wordpress/components';
import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/editor/components/post-visibility/check.js b/editor/components/post-visibility/check.js
index 299bf5ea431db..134694b142916 100644
--- a/editor/components/post-visibility/check.js
+++ b/editor/components/post-visibility/check.js
@@ -6,7 +6,7 @@ import { get } from 'lodash';
/**
* WordPress dependencies
*/
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import { withSelect } from '@wordpress/data';
export function PostVisibilityCheck( { hasPublishAction, render } ) {
diff --git a/editor/components/post-visibility/index.js b/editor/components/post-visibility/index.js
index 025b5320b7a4c..69f29e280e5d4 100644
--- a/editor/components/post-visibility/index.js
+++ b/editor/components/post-visibility/index.js
@@ -2,8 +2,8 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { Component, compose } from '@wordpress/element';
-import { withInstanceId } from '@wordpress/components';
+import { Component } from '@wordpress/element';
+import { withInstanceId, compose } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
/**
diff --git a/editor/components/rich-text/index.js b/editor/components/rich-text/index.js
index 0d757fd3974cc..b51fb5ed8358f 100644
--- a/editor/components/rich-text/index.js
+++ b/editor/components/rich-text/index.js
@@ -17,7 +17,7 @@ import 'element-closest';
/**
* WordPress dependencies
*/
-import { Component, Fragment, compose, RawHTML, createRef } from '@wordpress/element';
+import { Component, Fragment, RawHTML, createRef } from '@wordpress/element';
import {
isHorizontalEdge,
getRectangleFromRange,
@@ -25,9 +25,10 @@ import {
} from '@wordpress/dom';
import { createBlobURL } from '@wordpress/blob';
import { BACKSPACE, DELETE, ENTER, LEFT, RIGHT, rawShortcut } from '@wordpress/keycodes';
-import { withInstanceId, withSafeTimeout, Slot } from '@wordpress/components';
+import { Slot } from '@wordpress/components';
import { withSelect } from '@wordpress/data';
import { rawHandler } from '@wordpress/blocks';
+import { withInstanceId, withSafeTimeout, compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/editor/components/template-validation-notice/index.js b/editor/components/template-validation-notice/index.js
index daa56189379e5..39cc0c1aacfba 100644
--- a/editor/components/template-validation-notice/index.js
+++ b/editor/components/template-validation-notice/index.js
@@ -4,7 +4,7 @@
import { Notice, Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/editor/components/url-input/index.js b/editor/components/url-input/index.js
index 5a067c4ec5418..ea1e4b56fd2ac 100644
--- a/editor/components/url-input/index.js
+++ b/editor/components/url-input/index.js
@@ -13,8 +13,9 @@ import { __, sprintf, _n } from '@wordpress/i18n';
import { Component, Fragment } from '@wordpress/element';
import { decodeEntities } from '@wordpress/utils';
import { UP, DOWN, ENTER } from '@wordpress/keycodes';
-import { Spinner, withInstanceId, withSpokenMessages, Popover } from '@wordpress/components';
+import { Spinner, withSpokenMessages, Popover } from '@wordpress/components';
import apiRequest from '@wordpress/api-request';
+import { withInstanceId } from '@wordpress/compose';
// Since URLInput is rendered in the context of other inputs, but should be
// considered a separate modal node, prevent keyboard events from propagating
diff --git a/editor/components/writing-flow/index.js b/editor/components/writing-flow/index.js
index be73959b8c88d..865b9bd4d0794 100644
--- a/editor/components/writing-flow/index.js
+++ b/editor/components/writing-flow/index.js
@@ -6,7 +6,7 @@ import { overEvery, find, findLast, reverse, first, last } from 'lodash';
/**
* WordPress dependencies
*/
-import { Component, compose } from '@wordpress/element';
+import { Component } from '@wordpress/element';
import {
computeCaretRect,
focus,
@@ -19,6 +19,7 @@ import {
} from '@wordpress/dom';
import { UP, DOWN, LEFT, RIGHT, isKeyboardEvent } from '@wordpress/keycodes';
import { withSelect, withDispatch } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/lib/client-assets.php b/lib/client-assets.php
index 106e426cca5f4..6e3dc183c52e7 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -154,6 +154,13 @@ function gutenberg_register_scripts_and_styles() {
filemtime( gutenberg_dir_path() . 'build/blob/index.js' ),
true
);
+ wp_register_script(
+ 'wp-compose',
+ gutenberg_url( 'build/compose/index.js' ),
+ array( 'wp-element', 'wp-is-shallow-equal', 'lodash' ),
+ filemtime( gutenberg_dir_path() . 'build/compose/index.js' ),
+ true
+ );
wp_register_script(
'wp-keycodes',
gutenberg_url( 'build/keycodes/index.js' ),
@@ -164,7 +171,7 @@ function gutenberg_register_scripts_and_styles() {
wp_register_script(
'wp-data',
gutenberg_url( 'build/data/index.js' ),
- array( 'wp-deprecated', 'wp-element', 'wp-is-shallow-equal', 'lodash' ),
+ array( 'wp-deprecated', 'wp-element', 'wp-compose', 'wp-is-shallow-equal', 'lodash' ),
filemtime( gutenberg_dir_path() . 'build/data/index.js' ),
true
);
@@ -253,6 +260,7 @@ function gutenberg_register_scripts_and_styles() {
'moment',
'wp-a11y',
'wp-api-request',
+ 'wp-compose',
'wp-dom',
'wp-element',
'wp-hooks',
@@ -282,7 +290,7 @@ function gutenberg_register_scripts_and_styles() {
wp_register_script(
'wp-viewport',
gutenberg_url( 'build/viewport/index.js' ),
- array( 'wp-element', 'wp-data', 'wp-components', 'lodash' ),
+ array( 'wp-element', 'wp-data', 'wp-compose', 'lodash' ),
filemtime( gutenberg_dir_path() . 'build/viewport/index.js' ),
true
);
@@ -295,6 +303,7 @@ function gutenberg_register_scripts_and_styles() {
'wp-blob',
'wp-blocks',
'wp-components',
+ 'wp-compose',
'wp-core-data',
'wp-element',
'wp-editor',
@@ -310,7 +319,7 @@ function gutenberg_register_scripts_and_styles() {
wp_register_script(
'wp-nux',
gutenberg_url( 'build/nux/index.js' ),
- array( 'wp-element', 'wp-components', 'wp-data', 'wp-i18n', 'lodash' ),
+ array( 'wp-element', 'wp-components', 'wp-compose', 'wp-data', 'wp-i18n', 'lodash' ),
filemtime( gutenberg_dir_path() . 'build/nux/index.js' ),
true
);
@@ -397,6 +406,7 @@ function gutenberg_register_scripts_and_styles() {
'wp-blob',
'wp-blocks',
'wp-components',
+ 'wp-compose',
'wp-core-data',
'wp-data',
'wp-date',
@@ -428,6 +438,7 @@ function gutenberg_register_scripts_and_styles() {
'wp-a11y',
'wp-api-request',
'wp-components',
+ 'wp-compose',
'wp-core-blocks',
'wp-date',
'wp-data',
diff --git a/nux/components/dot-tip/index.js b/nux/components/dot-tip/index.js
index 71006b1e8e981..a6e7038b92ad0 100644
--- a/nux/components/dot-tip/index.js
+++ b/nux/components/dot-tip/index.js
@@ -1,8 +1,8 @@
/**
* WordPress dependencies
*/
-import { compose } from '@wordpress/element';
-import { Popover, Button, IconButton, withSafeTimeout } from '@wordpress/components';
+import { compose, withSafeTimeout } from '@wordpress/compose';
+import { Popover, Button, IconButton } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { withSelect, withDispatch } from '@wordpress/data';
diff --git a/packages/compose/.npmrc b/packages/compose/.npmrc
new file mode 100644
index 0000000000000..43c97e719a5a8
--- /dev/null
+++ b/packages/compose/.npmrc
@@ -0,0 +1 @@
+package-lock=false
diff --git a/packages/compose/README.md b/packages/compose/README.md
new file mode 100644
index 0000000000000..8c98a6f5893a2
--- /dev/null
+++ b/packages/compose/README.md
@@ -0,0 +1,27 @@
+# @wordpress/compose
+
+The `compose` package is a collection of handy [Higher Order Components](https://facebook.github.io/react/docs/higher-order-components.html) you can use to wrap your WordPress components and provide some basic features like: State, instanceId, pure...
+
+## Installation
+
+Install the module
+
+```bash
+npm install @wordpress/compose --save
+```
+
+## Usage
+
+```js
+import { withInstanceId } from '@wordpress/compose';
+
+function WrappedComponent( props ) {
+ return props.instanceId;
+}
+
+const ComponentWithInstanceIdProp = withInstanceId( WrappedComponent );
+```
+
+Refer to each Higher Order Component's README file for more details.
+
+
diff --git a/packages/compose/package.json b/packages/compose/package.json
new file mode 100644
index 0000000000000..ffe9fbcfad6e3
--- /dev/null
+++ b/packages/compose/package.json
@@ -0,0 +1,35 @@
+{
+ "name": "@wordpress/compose",
+ "version": "1.0.0-beta.0",
+ "description": "WordPress Higher Order components",
+ "author": "The WordPress Contributors",
+ "license": "GPL-2.0-or-later",
+ "keywords": [
+ "wordpress",
+ "React",
+ "hoc"
+ ],
+ "homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/compose/README.md",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/WordPress/gutenberg.git"
+ },
+ "bugs": {
+ "url": "https://github.com/WordPress/gutenberg/issues"
+ },
+ "main": "build/index.js",
+ "module": "build-module/index.js",
+ "dependencies": {
+ "@wordpress/element": "file:../element",
+ "@wordpress/is-shallow-equal": "file:packages/is-shallow-equal",
+ "lodash": "4.17.10"
+ },
+ "devDependencies": {
+ "enzyme": "3.3.0",
+ "react-dom": "16.4.1",
+ "react-test-renderer": "16.4.1"
+ },
+ "publishConfig": {
+ "access": "public"
+ }
+}
diff --git a/components/higher-order/if-condition/README.md b/packages/compose/src/if-condition/README.md
similarity index 100%
rename from components/higher-order/if-condition/README.md
rename to packages/compose/src/if-condition/README.md
diff --git a/components/higher-order/if-condition/index.js b/packages/compose/src/if-condition/index.js
similarity index 100%
rename from components/higher-order/if-condition/index.js
rename to packages/compose/src/if-condition/index.js
diff --git a/packages/compose/src/index.js b/packages/compose/src/index.js
new file mode 100644
index 0000000000000..ee6a3a05ec584
--- /dev/null
+++ b/packages/compose/src/index.js
@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { flowRight } from 'lodash';
+
+export { default as ifCondition } from './if-condition';
+export { default as pure } from './pure';
+export { default as remountOnPropChange } from './remount-on-prop-change';
+export { default as withGlobalEvents } from './with-global-events';
+export { default as withInstanceId } from './with-instance-id';
+export { default as withSafeTimeout } from './with-safe-timeout';
+export { default as withState } from './with-state';
+
+/**
+ * Composes multiple higher-order components into a single higher-order component. Performs right-to-left function
+ * composition, where each successive invocation is supplied the return value of the previous.
+ *
+ * @param {...Function} hocs The HOC functions to invoke.
+ *
+ * @return {Function} Returns the new composite function.
+ */
+export { flowRight as compose };
diff --git a/packages/compose/src/pure/index.js b/packages/compose/src/pure/index.js
new file mode 100644
index 0000000000000..d7372a413249d
--- /dev/null
+++ b/packages/compose/src/pure/index.js
@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import isShallowEqual from '@wordpress/is-shallow-equal';
+import { createHigherOrderComponent, Component } from '@wordpress/element';
+
+/**
+ * Given a component returns the enhanced component augmented with a component
+ * only rerendering when its props/state change
+ *
+ * @param {Function} mapComponentToEnhancedComponent Function mapping component
+ * to enhanced component.
+ * @param {string} modifierName Seed name from which to
+ * generated display name.
+ *
+ * @return {WPComponent} Component class with generated display name assigned.
+ */
+const pure = createHigherOrderComponent( ( Wrapped ) => {
+ if ( Wrapped.prototype instanceof Component ) {
+ return class extends Wrapped {
+ shouldComponentUpdate( nextProps, nextState ) {
+ return ! isShallowEqual( nextProps, this.props ) || ! isShallowEqual( nextState, this.state );
+ }
+ };
+ }
+
+ return class extends Component {
+ shouldComponentUpdate( nextProps ) {
+ return ! isShallowEqual( nextProps, this.props );
+ }
+
+ render() {
+ return ;
+ }
+ };
+}, 'pure' );
+
+export default pure;
diff --git a/packages/compose/src/pure/test/index.js b/packages/compose/src/pure/test/index.js
new file mode 100644
index 0000000000000..2cb40cd7015e2
--- /dev/null
+++ b/packages/compose/src/pure/test/index.js
@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import { mount } from 'enzyme';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import pure from '../';
+
+describe( 'pure', () => {
+ it( 'functional component should rerender only when props change', () => {
+ let i = 0;
+ const MyComp = pure( () => {
+ return { ++i }
;
+ } );
+ const wrapper = mount( );
+ wrapper.update(); // Updating with same props doesn't rerender
+ expect( wrapper.html() ).toBe( '1
' );
+ wrapper.setProps( { prop: 'a' } ); // New prop should trigger a rerender
+ expect( wrapper.html() ).toBe( '2
' );
+ wrapper.setProps( { prop: 'a' } ); // Keeping the same prop value should not rerender
+ expect( wrapper.html() ).toBe( '2
' );
+ wrapper.setProps( { prop: 'b' } ); // Changing the prop value should rerender
+ expect( wrapper.html() ).toBe( '3
' );
+ } );
+
+ it( 'class component should rerender if the props or state change', () => {
+ let i = 0;
+ const MyComp = pure( class extends Component {
+ constructor() {
+ super( ...arguments );
+ this.state = {};
+ }
+ render() {
+ return { ++i }
;
+ }
+ } );
+ const wrapper = mount( );
+ wrapper.update(); // Updating with same props doesn't rerender
+ expect( wrapper.html() ).toBe( '1
' );
+ wrapper.setProps( { prop: 'a' } ); // New prop should trigger a rerender
+ expect( wrapper.html() ).toBe( '2
' );
+ wrapper.setProps( { prop: 'a' } ); // Keeping the same prop value should not rerender
+ expect( wrapper.html() ).toBe( '2
' );
+ wrapper.setProps( { prop: 'b' } ); // Changing the prop value should rerender
+ expect( wrapper.html() ).toBe( '3
' );
+ wrapper.setState( { state: 'a' } ); // New state value should trigger a rerender
+ expect( wrapper.html() ).toBe( '4
' );
+ wrapper.setState( { state: 'a' } ); // Keeping the same state value should not trigger a rerender
+ expect( wrapper.html() ).toBe( '4
' );
+ } );
+} );
diff --git a/packages/data/src/components/remountOnPropChange/index.js b/packages/compose/src/remount-on-prop-change/index.js
similarity index 100%
rename from packages/data/src/components/remountOnPropChange/index.js
rename to packages/compose/src/remount-on-prop-change/index.js
diff --git a/packages/data/src/components/remountOnPropChange/test/index.js b/packages/compose/src/remount-on-prop-change/test/index.js
similarity index 100%
rename from packages/data/src/components/remountOnPropChange/test/index.js
rename to packages/compose/src/remount-on-prop-change/test/index.js
diff --git a/components/higher-order/with-global-events/README.md b/packages/compose/src/with-global-events/README.md
similarity index 100%
rename from components/higher-order/with-global-events/README.md
rename to packages/compose/src/with-global-events/README.md
diff --git a/components/higher-order/with-global-events/index.js b/packages/compose/src/with-global-events/index.js
similarity index 100%
rename from components/higher-order/with-global-events/index.js
rename to packages/compose/src/with-global-events/index.js
diff --git a/components/higher-order/with-global-events/listener.js b/packages/compose/src/with-global-events/listener.js
similarity index 100%
rename from components/higher-order/with-global-events/listener.js
rename to packages/compose/src/with-global-events/listener.js
diff --git a/components/higher-order/with-global-events/test/index.js b/packages/compose/src/with-global-events/test/index.js
similarity index 100%
rename from components/higher-order/with-global-events/test/index.js
rename to packages/compose/src/with-global-events/test/index.js
diff --git a/components/higher-order/with-global-events/test/listener.js b/packages/compose/src/with-global-events/test/listener.js
similarity index 100%
rename from components/higher-order/with-global-events/test/listener.js
rename to packages/compose/src/with-global-events/test/listener.js
diff --git a/components/higher-order/with-instance-id/README.md b/packages/compose/src/with-instance-id/README.md
similarity index 100%
rename from components/higher-order/with-instance-id/README.md
rename to packages/compose/src/with-instance-id/README.md
diff --git a/components/higher-order/with-instance-id/index.js b/packages/compose/src/with-instance-id/index.js
similarity index 100%
rename from components/higher-order/with-instance-id/index.js
rename to packages/compose/src/with-instance-id/index.js
diff --git a/components/higher-order/with-instance-id/test/index.js b/packages/compose/src/with-instance-id/test/index.js
similarity index 100%
rename from components/higher-order/with-instance-id/test/index.js
rename to packages/compose/src/with-instance-id/test/index.js
diff --git a/components/higher-order/with-safe-timeout/README.md b/packages/compose/src/with-safe-timeout/README.md
similarity index 100%
rename from components/higher-order/with-safe-timeout/README.md
rename to packages/compose/src/with-safe-timeout/README.md
diff --git a/components/higher-order/with-safe-timeout/index.js b/packages/compose/src/with-safe-timeout/index.js
similarity index 100%
rename from components/higher-order/with-safe-timeout/index.js
rename to packages/compose/src/with-safe-timeout/index.js
diff --git a/components/higher-order/with-state/README.md b/packages/compose/src/with-state/README.md
similarity index 100%
rename from components/higher-order/with-state/README.md
rename to packages/compose/src/with-state/README.md
diff --git a/components/higher-order/with-state/index.js b/packages/compose/src/with-state/index.js
similarity index 100%
rename from components/higher-order/with-state/index.js
rename to packages/compose/src/with-state/index.js
diff --git a/components/higher-order/with-state/test/index.js b/packages/compose/src/with-state/test/index.js
similarity index 100%
rename from components/higher-order/with-state/test/index.js
rename to packages/compose/src/with-state/test/index.js
diff --git a/packages/data/package.json b/packages/data/package.json
index 661cecb993573..ce60164d4f955 100644
--- a/packages/data/package.json
+++ b/packages/data/package.json
@@ -21,6 +21,7 @@
"module": "build-module/index.js",
"react-native": "src/index",
"dependencies": {
+ "@wordpress/compose": "file:../compose",
"@wordpress/deprecated": "file:../deprecated",
"@wordpress/element": "file:../element",
"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
diff --git a/packages/data/src/components/with-dispatch/index.js b/packages/data/src/components/with-dispatch/index.js
index 13022c8b98dab..496a6d6440f71 100644
--- a/packages/data/src/components/with-dispatch/index.js
+++ b/packages/data/src/components/with-dispatch/index.js
@@ -6,17 +6,12 @@ import { mapValues } from 'lodash';
/**
* WordPress dependencies
*/
-import {
- Component,
- compose,
- createHigherOrderComponent,
- pure,
-} from '@wordpress/element';
+import { Component, createHigherOrderComponent } from '@wordpress/element';
+import { pure, compose, remountOnPropChange } from '@wordpress/compose';
/**
* Internal dependencies
*/
-import remountOnPropChange from '../remountOnPropChange';
import { RegistryConsumer } from '../registry-provider';
/**
diff --git a/packages/data/src/components/with-select/index.js b/packages/data/src/components/with-select/index.js
index 4533d96679b57..0a1a0015995b2 100644
--- a/packages/data/src/components/with-select/index.js
+++ b/packages/data/src/components/with-select/index.js
@@ -6,11 +6,11 @@ import {
createHigherOrderComponent,
} from '@wordpress/element';
import isShallowEqual from '@wordpress/is-shallow-equal';
+import { remountOnPropChange } from '@wordpress/compose';
/**
* Internal dependencies
*/
-import remountOnPropChange from '../remountOnPropChange';
import { RegistryConsumer } from '../registry-provider';
/**
diff --git a/packages/data/src/components/with-select/test/index.js b/packages/data/src/components/with-select/test/index.js
index b2505cd46246d..a5c703f12cfa6 100644
--- a/packages/data/src/components/with-select/test/index.js
+++ b/packages/data/src/components/with-select/test/index.js
@@ -6,7 +6,7 @@ import TestRenderer from 'react-test-renderer';
/**
* WordPress dependencies
*/
-import { compose } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/packages/element/src/create-higher-order-component.js b/packages/element/src/create-higher-order-component.js
new file mode 100644
index 0000000000000..448193468c94e
--- /dev/null
+++ b/packages/element/src/create-higher-order-component.js
@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { camelCase, upperFirst } from 'lodash';
+
+/**
+ * Given a function mapping a component to an enhanced component and modifier
+ * name, returns the enhanced component augmented with a generated displayName.
+ *
+ * @param {Function} mapComponentToEnhancedComponent Function mapping component
+ * to enhanced component.
+ * @param {string} modifierName Seed name from which to
+ * generated display name.
+ *
+ * @return {WPComponent} Component class with generated display name assigned.
+ */
+function createHigherOrderComponent( mapComponentToEnhancedComponent, modifierName ) {
+ return ( OriginalComponent ) => {
+ const EnhancedComponent = mapComponentToEnhancedComponent( OriginalComponent );
+ const { displayName = OriginalComponent.name || 'Component' } = OriginalComponent;
+ EnhancedComponent.displayName = `${ upperFirst( camelCase( modifierName ) ) }(${ displayName })`;
+
+ return EnhancedComponent;
+ };
+}
+
+export default createHigherOrderComponent;
diff --git a/packages/element/src/deprecated.js b/packages/element/src/deprecated.js
new file mode 100644
index 0000000000000..915042f805362
--- /dev/null
+++ b/packages/element/src/deprecated.js
@@ -0,0 +1,50 @@
+/**
+ * External dependencies
+ */
+import { flowRight } from 'lodash';
+import { Component } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+import isShallowEqual from '@wordpress/is-shallow-equal';
+
+/**
+ * Internal dependencies
+ */
+import createHigherOrderComponent from './create-higher-order-component';
+
+export const compose = ( ...args ) => {
+ deprecated( 'wp.element.compose', {
+ version: '3.5',
+ alternative: 'wp.compose.compose',
+ } );
+
+ return flowRight( ...args );
+};
+
+export const pure = createHigherOrderComponent( ( Wrapped ) => {
+ deprecated( 'wp.element.pure', {
+ version: '3.5',
+ alternative: 'wp.compose.pure',
+ } );
+
+ if ( Wrapped.prototype instanceof Component ) {
+ return class extends Wrapped {
+ shouldComponentUpdate( nextProps, nextState ) {
+ return ! isShallowEqual( nextProps, this.props ) || ! isShallowEqual( nextState, this.state );
+ }
+ };
+ }
+
+ return class extends Component {
+ shouldComponentUpdate( nextProps ) {
+ return ! isShallowEqual( nextProps, this.props );
+ }
+
+ render() {
+ return ;
+ }
+ };
+}, 'pure' );
diff --git a/packages/element/src/index.js b/packages/element/src/index.js
index c0b6fbb5f20f3..af2f8f95d1367 100644
--- a/packages/element/src/index.js
+++ b/packages/element/src/index.js
@@ -14,23 +14,15 @@ import {
StrictMode,
} from 'react';
import { render, findDOMNode, createPortal, unmountComponentAtNode } from 'react-dom';
-import {
- camelCase,
- flowRight,
- isString,
- upperFirst,
-} from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import isShallowEqual from '@wordpress/is-shallow-equal';
+import { isString } from 'lodash';
/**
* Internal dependencies
*/
import serialize from './serialize';
import { RawHTML } from './index-common';
+export { default as createHigherOrderComponent } from './create-higher-order-component';
+export * from './deprecated';
/**
* Returns a new element of given type. Type can be either a string tag name or
@@ -193,37 +185,6 @@ export function switchChildrenNodeName( children, nodeName ) {
} );
}
-/**
- * Composes multiple higher-order components into a single higher-order component. Performs right-to-left function
- * composition, where each successive invocation is supplied the return value of the previous.
- *
- * @param {...Function} hocs The HOC functions to invoke.
- *
- * @return {Function} Returns the new composite function.
- */
-export { flowRight as compose };
-
-/**
- * Given a function mapping a component to an enhanced component and modifier
- * name, returns the enhanced component augmented with a generated displayName.
- *
- * @param {Function} mapComponentToEnhancedComponent Function mapping component
- * to enhanced component.
- * @param {string} modifierName Seed name from which to
- * generated display name.
- *
- * @return {WPComponent} Component class with generated display name assigned.
- */
-export function createHigherOrderComponent( mapComponentToEnhancedComponent, modifierName ) {
- return ( OriginalComponent ) => {
- const EnhancedComponent = mapComponentToEnhancedComponent( OriginalComponent );
- const { displayName = OriginalComponent.name || 'Component' } = OriginalComponent;
- EnhancedComponent.displayName = `${ upperFirst( camelCase( modifierName ) ) }(${ displayName })`;
-
- return EnhancedComponent;
- };
-}
-
/**
* Component used as equivalent of Fragment with unescaped HTML, in cases where
* it is desirable to render dangerous HTML without needing a wrapper element.
@@ -235,34 +196,3 @@ export function createHigherOrderComponent( mapComponentToEnhancedComponent, mod
* @return {WPElement} Dangerously-rendering element.
*/
export { RawHTML };
-
-/**
- * Given a component returns the enhanced component augmented with a component
- * only rerendering when its props/state change
- *
- * @param {Function} mapComponentToEnhancedComponent Function mapping component
- * to enhanced component.
- * @param {string} modifierName Seed name from which to
- * generated display name.
- *
- * @return {WPComponent} Component class with generated display name assigned.
- */
-export const pure = createHigherOrderComponent( ( Wrapped ) => {
- if ( Wrapped.prototype instanceof Component ) {
- return class extends Wrapped {
- shouldComponentUpdate( nextProps, nextState ) {
- return ! isShallowEqual( nextProps, this.props ) || ! isShallowEqual( nextState, this.state );
- }
- };
- }
-
- return class extends Component {
- shouldComponentUpdate( nextProps ) {
- return ! isShallowEqual( nextProps, this.props );
- }
-
- render() {
- return ;
- }
- };
-}, 'pure' );
diff --git a/packages/element/src/test/create-higher-order-component.js b/packages/element/src/test/create-higher-order-component.js
new file mode 100644
index 0000000000000..7d393bac1ef62
--- /dev/null
+++ b/packages/element/src/test/create-higher-order-component.js
@@ -0,0 +1,66 @@
+/**
+ * Internal dependencies
+ */
+import { createHigherOrderComponent } from '../create-higher-order-component';
+import { Component } from './';
+
+describe( 'createHigherOrderComponent', () => {
+ it( 'should use default name for anonymous function', () => {
+ const TestComponent = createHigherOrderComponent(
+ ( OriginalComponent ) => OriginalComponent,
+ 'withTest'
+ )( () => );
+
+ expect( TestComponent.displayName ).toBe( 'WithTest(Component)' );
+ } );
+
+ it( 'should use camel case starting with upper for wrapper prefix ', () => {
+ const TestComponent = createHigherOrderComponent(
+ ( OriginalComponent ) => OriginalComponent,
+ 'with-one-two_threeFOUR'
+ )( () => );
+
+ expect( TestComponent.displayName ).toBe( 'WithOneTwoThreeFour(Component)' );
+ } );
+
+ it( 'should use function name', () => {
+ function SomeComponent() {
+ return ;
+ }
+ const TestComponent = createHigherOrderComponent(
+ ( OriginalComponent ) => OriginalComponent,
+ 'withTest'
+ )( SomeComponent );
+
+ expect( TestComponent.displayName ).toBe( 'WithTest(SomeComponent)' );
+ } );
+
+ it( 'should use component class name', () => {
+ class SomeAnotherComponent extends Component {
+ render() {
+ return ;
+ }
+ }
+ const TestComponent = createHigherOrderComponent(
+ ( OriginalComponent ) => OriginalComponent,
+ 'withTest'
+ )( SomeAnotherComponent );
+
+ expect( TestComponent.displayName ).toBe( 'WithTest(SomeAnotherComponent)' );
+ } );
+
+ it( 'should use displayName property', () => {
+ class SomeYetAnotherComponent extends Component {
+ render() {
+ return ;
+ }
+ }
+ SomeYetAnotherComponent.displayName = 'CustomDisplayName';
+ const TestComponent = createHigherOrderComponent(
+ ( OriginalComponent ) => OriginalComponent,
+ 'withTest'
+ )( SomeYetAnotherComponent );
+
+ expect( TestComponent.displayName ).toBe( 'WithTest(CustomDisplayName)' );
+ } );
+} );
diff --git a/packages/element/src/test/index.js b/packages/element/src/test/index.js
index 80d06d5545292..63299d424ebab 100644
--- a/packages/element/src/test/index.js
+++ b/packages/element/src/test/index.js
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
-import { shallow, mount } from 'enzyme';
+import { shallow } from 'enzyme';
/**
* Internal dependencies
@@ -9,12 +9,10 @@ import { shallow, mount } from 'enzyme';
import {
Component,
createElement,
- createHigherOrderComponent,
concatChildren,
renderToString,
switchChildrenNodeName,
RawHTML,
- pure,
} from '../';
describe( 'element', () => {
@@ -124,67 +122,6 @@ describe( 'element', () => {
} );
} );
- describe( 'createHigherOrderComponent', () => {
- it( 'should use default name for anonymous function', () => {
- const TestComponent = createHigherOrderComponent(
- ( OriginalComponent ) => OriginalComponent,
- 'withTest'
- )( () => );
-
- expect( TestComponent.displayName ).toBe( 'WithTest(Component)' );
- } );
-
- it( 'should use camel case starting with upper for wrapper prefix ', () => {
- const TestComponent = createHigherOrderComponent(
- ( OriginalComponent ) => OriginalComponent,
- 'with-one-two_threeFOUR'
- )( () => );
-
- expect( TestComponent.displayName ).toBe( 'WithOneTwoThreeFour(Component)' );
- } );
-
- it( 'should use function name', () => {
- function SomeComponent() {
- return ;
- }
- const TestComponent = createHigherOrderComponent(
- ( OriginalComponent ) => OriginalComponent,
- 'withTest'
- )( SomeComponent );
-
- expect( TestComponent.displayName ).toBe( 'WithTest(SomeComponent)' );
- } );
-
- it( 'should use component class name', () => {
- class SomeAnotherComponent extends Component {
- render() {
- return ;
- }
- }
- const TestComponent = createHigherOrderComponent(
- ( OriginalComponent ) => OriginalComponent,
- 'withTest'
- )( SomeAnotherComponent );
-
- expect( TestComponent.displayName ).toBe( 'WithTest(SomeAnotherComponent)' );
- } );
-
- it( 'should use displayName property', () => {
- class SomeYetAnotherComponent extends Component {
- render() {
- return ;
- }
- }
- SomeYetAnotherComponent.displayName = 'CustomDisplayName';
- const TestComponent = createHigherOrderComponent(
- ( OriginalComponent ) => OriginalComponent,
- 'withTest'
- )( SomeYetAnotherComponent );
-
- expect( TestComponent.displayName ).toBe( 'WithTest(CustomDisplayName)' );
- } );
- } );
-
describe( 'RawHTML', () => {
it( 'is dangerous', () => {
const html = 'So scary!
';
@@ -213,48 +150,4 @@ describe( 'element', () => {
expect( element.prop( 'children' ) ).toBe( undefined );
} );
} );
-
- describe( 'pure', () => {
- it( 'functional component should rerender only when props change', () => {
- let i = 0;
- const MyComp = pure( () => {
- return { ++i }
;
- } );
- const wrapper = mount( );
- wrapper.update(); // Updating with same props doesn't rerender
- expect( wrapper.html() ).toBe( '1
' );
- wrapper.setProps( { prop: 'a' } ); // New prop should trigger a rerender
- expect( wrapper.html() ).toBe( '2
' );
- wrapper.setProps( { prop: 'a' } ); // Keeping the same prop value should not rerender
- expect( wrapper.html() ).toBe( '2
' );
- wrapper.setProps( { prop: 'b' } ); // Changing the prop value should rerender
- expect( wrapper.html() ).toBe( '3
' );
- } );
-
- it( 'class component should rerender if the props or state change', () => {
- let i = 0;
- const MyComp = pure( class extends Component {
- constructor() {
- super( ...arguments );
- this.state = {};
- }
- render() {
- return { ++i }
;
- }
- } );
- const wrapper = mount( );
- wrapper.update(); // Updating with same props doesn't rerender
- expect( wrapper.html() ).toBe( '1
' );
- wrapper.setProps( { prop: 'a' } ); // New prop should trigger a rerender
- expect( wrapper.html() ).toBe( '2
' );
- wrapper.setProps( { prop: 'a' } ); // Keeping the same prop value should not rerender
- expect( wrapper.html() ).toBe( '2
' );
- wrapper.setProps( { prop: 'b' } ); // Changing the prop value should rerender
- expect( wrapper.html() ).toBe( '3
' );
- wrapper.setState( { state: 'a' } ); // New state value should trigger a rerender
- expect( wrapper.html() ).toBe( '4
' );
- wrapper.setState( { state: 'a' } ); // Keeping the same state value should not trigger a rerender
- expect( wrapper.html() ).toBe( '4
' );
- } );
- } );
} );
diff --git a/viewport/if-viewport-matches.js b/viewport/if-viewport-matches.js
index 6df11907fcbaf..ed29bc72546c8 100644
--- a/viewport/if-viewport-matches.js
+++ b/viewport/if-viewport-matches.js
@@ -1,8 +1,8 @@
/**
* WordPress dependencies
*/
-import { compose, createHigherOrderComponent } from '@wordpress/element';
-import { ifCondition } from '@wordpress/components';
+import { createHigherOrderComponent } from '@wordpress/element';
+import { ifCondition, compose } from '@wordpress/compose';
/**
* Internal dependencies
diff --git a/webpack.config.js b/webpack.config.js
index 5d1e46f8b3c8d..f653683abb88f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -151,6 +151,7 @@ const gutenbergPackages = [
'a11y',
'api-request',
'blob',
+ 'compose',
'core-data',
'data',
'date',