diff --git a/.eslintrc.js b/.eslintrc.js
index 2d426536728e8..a4884fbb7fde5 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -62,6 +62,10 @@ module.exports = {
selector: 'ImportDeclaration[source.value=/^data$/]',
message: 'Use @wordpress/data as import path instead.',
},
+ {
+ selector: 'ImportDeclaration[source.value=/^dom$/]',
+ message: 'Use @wordpress/dom as import path instead.',
+ },
{
selector: 'ImportDeclaration[source.value=/^utils$/]',
message: 'Use @wordpress/utils as import path instead.',
diff --git a/blocks/api/raw-handling/iframe-remover.js b/blocks/api/raw-handling/iframe-remover.js
index 31733fa042853..35adb29cdf808 100644
--- a/blocks/api/raw-handling/iframe-remover.js
+++ b/blocks/api/raw-handling/iframe-remover.js
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
-import { remove } from '@wordpress/utils';
+import { remove } from '@wordpress/dom';
/**
* Removes iframes.
diff --git a/blocks/api/raw-handling/list-reducer.js b/blocks/api/raw-handling/list-reducer.js
index 3182c703eb2ab..0025cc6cb5cb6 100644
--- a/blocks/api/raw-handling/list-reducer.js
+++ b/blocks/api/raw-handling/list-reducer.js
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
-import { unwrap } from '@wordpress/utils';
+import { unwrap } from '@wordpress/dom';
function isList( node ) {
return node.nodeName === 'OL' || node.nodeName === 'UL';
diff --git a/blocks/api/raw-handling/phrasing-content-reducer.js b/blocks/api/raw-handling/phrasing-content-reducer.js
index 1f60c8d1ee823..9252238f07463 100644
--- a/blocks/api/raw-handling/phrasing-content-reducer.js
+++ b/blocks/api/raw-handling/phrasing-content-reducer.js
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
-import { unwrap, replaceTag } from '@wordpress/utils';
+import { unwrap, replaceTag } from '@wordpress/dom';
/**
* Internal dependencies
diff --git a/blocks/api/raw-handling/special-comment-converter.js b/blocks/api/raw-handling/special-comment-converter.js
index cbf4dd320821e..4564c5be0b0fe 100644
--- a/blocks/api/raw-handling/special-comment-converter.js
+++ b/blocks/api/raw-handling/special-comment-converter.js
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
-import { remove, replace } from '@wordpress/utils';
+import { remove, replace } from '@wordpress/dom';
/**
* Browser dependencies
diff --git a/blocks/api/raw-handling/utils.js b/blocks/api/raw-handling/utils.js
index d41064cc70e0c..9e7f093f3691a 100644
--- a/blocks/api/raw-handling/utils.js
+++ b/blocks/api/raw-handling/utils.js
@@ -6,7 +6,7 @@ import { omit, mergeWith, includes, noop } from 'lodash';
/**
* WordPress dependencies
*/
-import { unwrap, insertAfter, remove } from '@wordpress/utils';
+import { unwrap, insertAfter, remove } from '@wordpress/dom';
/**
* Browser dependencies
diff --git a/components/disabled/index.js b/components/disabled/index.js
index 15da09d4bcb29..52131154ebb0b 100644
--- a/components/disabled/index.js
+++ b/components/disabled/index.js
@@ -7,7 +7,7 @@ import { includes, debounce } from 'lodash';
* WordPress dependencies
*/
import { Component } from '@wordpress/element';
-import { focus } from '@wordpress/utils';
+import { focus } from '@wordpress/dom';
/**
* Internal dependencies
diff --git a/components/disabled/test/index.js b/components/disabled/test/index.js
index c6c6167cf85f3..d974b3d6d10c9 100644
--- a/components/disabled/test/index.js
+++ b/components/disabled/test/index.js
@@ -8,8 +8,8 @@ import { mount } from 'enzyme';
*/
import Disabled from '../';
-jest.mock( '@wordpress/utils', () => {
- const focus = require.requireActual( '@wordpress/utils' ).focus;
+jest.mock( '@wordpress/dom', () => {
+ const focus = require.requireActual( '@wordpress/dom' ).focus;
return {
focus: {
diff --git a/components/navigable-container/index.js b/components/navigable-container/index.js
index 073ba090b5bd3..a599c96245640 100644
--- a/components/navigable-container/index.js
+++ b/components/navigable-container/index.js
@@ -7,7 +7,8 @@ import { omit, noop, includes } from 'lodash';
* WordPress Dependencies
*/
import { Component } from '@wordpress/element';
-import { focus, keycodes } from '@wordpress/utils';
+import { focus } from '@wordpress/dom';
+import { keycodes } from '@wordpress/utils';
/**
* Module constants
diff --git a/components/popover/index.js b/components/popover/index.js
index 62f7c6712a621..bcda8de4c802f 100644
--- a/components/popover/index.js
+++ b/components/popover/index.js
@@ -8,7 +8,8 @@ import { isEqual, noop } from 'lodash';
* WordPress dependencies
*/
import { Component } from '@wordpress/element';
-import { focus, keycodes } from '@wordpress/utils';
+import { focus } from '@wordpress/dom';
+import { keycodes } from '@wordpress/utils';
/**
* Internal dependencies
diff --git a/docs/reference/deprecated.md b/docs/reference/deprecated.md
index 38659c8e99288..07311a38b9b47 100644
--- a/docs/reference/deprecated.md
+++ b/docs/reference/deprecated.md
@@ -4,7 +4,8 @@ Gutenberg's deprecation policy is intended to support backwards-compatibility fo
- All components in `wp.blocks.*` are removed. Please use `wp.editor.*` instead.
- `wp.blocks.withEditorSettings` is removed. Please use the data module to access the editor settings `wp.data.select( "core/editor" ).getEditorSettings()`.
-
+ - All DOM utils in `wp.utils.*` are removed. Please use `wp.dom.*` instead.
+
## 3.0.0
- `wp.blocks.registerCoreBlocks` function removed. Please use `wp.coreBlocks.registerCoreBlocks` instead.
diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js
index 5bb008e7ea932..580b22c3d8765 100644
--- a/editor/components/block-list/block.js
+++ b/editor/components/block-list/block.js
@@ -10,12 +10,12 @@ import tinymce from 'tinymce';
*/
import { Component, findDOMNode, Fragment, compose } from '@wordpress/element';
import {
- keycodes,
focus,
isTextField,
placeCaretAtHorizontalEdge,
placeCaretAtVerticalEdge,
-} from '@wordpress/utils';
+} from '@wordpress/dom';
+import { keycodes } from '@wordpress/utils';
import {
createBlock,
cloneBlock,
diff --git a/editor/components/copy-handler/index.js b/editor/components/copy-handler/index.js
index 2349bffffa0f9..446ad84ed4fbc 100644
--- a/editor/components/copy-handler/index.js
+++ b/editor/components/copy-handler/index.js
@@ -3,7 +3,7 @@
*/
import { Component, compose } from '@wordpress/element';
import { serialize } from '@wordpress/blocks';
-import { documentHasSelection } from '@wordpress/utils';
+import { documentHasSelection } from '@wordpress/dom';
import { withSelect, withDispatch } from '@wordpress/data';
class CopyHandler extends Component {
diff --git a/editor/components/multi-select-scroll-into-view/index.js b/editor/components/multi-select-scroll-into-view/index.js
index 6eafd423ab8e4..470d7bfa61ce8 100644
--- a/editor/components/multi-select-scroll-into-view/index.js
+++ b/editor/components/multi-select-scroll-into-view/index.js
@@ -8,7 +8,7 @@ import scrollIntoView from 'dom-scroll-into-view';
*/
import { Component } from '@wordpress/element';
import { withSelect } from '@wordpress/data';
-import { getScrollContainer } from '@wordpress/utils';
+import { getScrollContainer } from '@wordpress/dom';
/**
* Internal dependencies
diff --git a/editor/components/navigable-toolbar/index.js b/editor/components/navigable-toolbar/index.js
index f377edc63ebe1..6537ff11fcc2c 100644
--- a/editor/components/navigable-toolbar/index.js
+++ b/editor/components/navigable-toolbar/index.js
@@ -8,7 +8,8 @@ import { cond, matchesProperty } from 'lodash';
*/
import { NavigableMenu, KeyboardShortcuts } from '@wordpress/components';
import { Component, findDOMNode } from '@wordpress/element';
-import { focus, keycodes } from '@wordpress/utils';
+import { focus } from '@wordpress/dom';
+import { keycodes } from '@wordpress/utils';
/**
* Browser dependencies
diff --git a/editor/components/observe-typing/index.js b/editor/components/observe-typing/index.js
index 1ebe6a22c83bb..7caa05253dc04 100644
--- a/editor/components/observe-typing/index.js
+++ b/editor/components/observe-typing/index.js
@@ -8,7 +8,8 @@ import { includes } from 'lodash';
*/
import { Component, compose } from '@wordpress/element';
import { withSelect, withDispatch } from '@wordpress/data';
-import { isTextField, keycodes } from '@wordpress/utils';
+import { isTextField } from '@wordpress/dom';
+import { keycodes } from '@wordpress/utils';
import { withSafeTimeout } from '@wordpress/components';
const { UP, RIGHT, DOWN, LEFT, ENTER, BACKSPACE } = keycodes;
diff --git a/editor/components/preserve-scroll-in-reorder/index.js b/editor/components/preserve-scroll-in-reorder/index.js
index 400243b2fbc0b..b39b4496db3a0 100644
--- a/editor/components/preserve-scroll-in-reorder/index.js
+++ b/editor/components/preserve-scroll-in-reorder/index.js
@@ -3,7 +3,7 @@
*/
import { Component } from '@wordpress/element';
import { withSelect } from '@wordpress/data';
-import { getScrollContainer } from '@wordpress/utils';
+import { getScrollContainer } from '@wordpress/dom';
/**
* Internal dependencies
diff --git a/editor/components/rich-text/index.js b/editor/components/rich-text/index.js
index 92e440f0ccc8a..256ffa77d67e4 100644
--- a/editor/components/rich-text/index.js
+++ b/editor/components/rich-text/index.js
@@ -20,11 +20,13 @@ import 'element-closest';
*/
import { Component, Fragment, compose, RawHTML, createRef } from '@wordpress/element';
import {
- keycodes,
- createBlobURL,
isHorizontalEdge,
getRectangleFromRange,
getScrollContainer,
+} from '@wordpress/dom';
+import {
+ keycodes,
+ createBlobURL,
deprecated,
} from '@wordpress/utils';
import { withInstanceId, withSafeTimeout, Slot } from '@wordpress/components';
diff --git a/editor/components/writing-flow/index.js b/editor/components/writing-flow/index.js
index 45fe750446e2f..b93ec9ea256e8 100644
--- a/editor/components/writing-flow/index.js
+++ b/editor/components/writing-flow/index.js
@@ -8,15 +8,15 @@ import { overEvery, find, findLast, reverse } from 'lodash';
*/
import { Component, compose } from '@wordpress/element';
import {
- keycodes,
- focus,
- isTextField,
computeCaretRect,
+ focus,
isHorizontalEdge,
+ isTextField,
isVerticalEdge,
placeCaretAtHorizontalEdge,
placeCaretAtVerticalEdge,
-} from '@wordpress/utils';
+} from '@wordpress/dom';
+import { keycodes } from '@wordpress/utils';
import { withSelect, withDispatch } from '@wordpress/data';
/**
diff --git a/lib/client-assets.php b/lib/client-assets.php
index cc96f526fc849..5f9b1bcb88f6a 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -127,10 +127,17 @@ function gutenberg_register_scripts_and_styles() {
filemtime( gutenberg_dir_path() . 'build/core-data/index.js' ),
true
);
+ wp_register_script(
+ 'wp-dom',
+ gutenberg_url( 'build/dom/index.js' ),
+ array( 'tinymce-latest', 'lodash' ),
+ filemtime( gutenberg_dir_path() . 'build/dom/index.js' ),
+ true
+ );
wp_register_script(
'wp-utils',
gutenberg_url( 'build/utils/index.js' ),
- array( 'tinymce-latest', 'lodash' ),
+ array( 'lodash', 'wp-dom' ),
filemtime( gutenberg_dir_path() . 'build/utils/index.js' ),
true
);
@@ -184,6 +191,7 @@ function gutenberg_register_scripts_and_styles() {
'moment',
'wp-a11y',
'wp-api-request',
+ 'wp-dom',
'wp-element',
'wp-hooks',
'wp-i18n',
@@ -196,7 +204,7 @@ function gutenberg_register_scripts_and_styles() {
wp_register_script(
'wp-blocks',
gutenberg_url( 'build/blocks/index.js' ),
- array( 'wp-element', 'wp-utils', 'wp-hooks', 'wp-i18n', 'shortcode', 'wp-data', 'lodash' ),
+ array( 'wp-dom', 'wp-element', 'wp-utils', 'wp-hooks', 'wp-i18n', 'shortcode', 'wp-data', 'lodash' ),
filemtime( gutenberg_dir_path() . 'build/blocks/index.js' ),
true
);
@@ -306,6 +314,7 @@ function gutenberg_register_scripts_and_styles() {
'wp-core-data',
'wp-data',
'wp-date',
+ 'wp-dom',
'wp-i18n',
'wp-element',
'wp-plugins',
diff --git a/package-lock.json b/package-lock.json
index d143d63a1eb1a..d11492c2b1833 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15220,8 +15220,7 @@
"tinymce": {
"version": "4.7.2",
"resolved": "https://registry.npmjs.org/tinymce/-/tinymce-4.7.2.tgz",
- "integrity": "sha1-JL9k/x0eaBkOFUYaZY3CV6Qmxe4=",
- "dev": true
+ "integrity": "sha1-JL9k/x0eaBkOFUYaZY3CV6Qmxe4="
},
"tmpl": {
"version": "1.0.4",
diff --git a/package.json b/package.json
index 815b5b74cf127..18ae8f6001c7b 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
"showdown": "1.8.6",
"simple-html-tokenizer": "0.4.1",
"tinycolor2": "1.4.1",
+ "tinymce": "4.7.2",
"uuid": "3.1.0"
},
"devDependencies": {
@@ -95,7 +96,6 @@
"sass-loader": "6.0.7",
"sprintf-js": "1.1.1",
"style-loader": "0.20.3",
- "tinymce": "4.7.2",
"webpack": "4.4.1",
"webpack-cli": "2.0.13",
"webpack-rtl-plugin": "github:yoavf/webpack-rtl-plugin#develop"
diff --git a/packages/dom/README.md b/packages/dom/README.md
new file mode 100644
index 0000000000000..fae765532f371
--- /dev/null
+++ b/packages/dom/README.md
@@ -0,0 +1,13 @@
+# @wordpress/dom
+
+DOM utils module for WordPress.
+
+## Installation
+
+Install the module
+
+```bash
+npm install @wordpress/dom@next --save
+```
+
+