Packages: Extract dom package and make it maintained with Lerna (#6758)

.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.',

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.

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';

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

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

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

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

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: {

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

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

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.

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,

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 {

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

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

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;

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

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';

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';
 
 /**

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',

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"

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
+```
+
+<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

packages/dom/package.json

@@ -0,0 +1,29 @@
+{
+	"name": "@wordpress/dom",
+	"version": "0.0.1",
+	"description": "DOM utils module for WordPress",
+	"author": "WordPress",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"dom",
+		"utils"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/dom/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"main": "src/index.js",
+	"dependencies": {
+		"element-closest": "2.0.2",
+		"lodash": "4.17.5",
+		"tinymce": "4.7.2"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

packages/dom/src/index.js

@@ -0,0 +1,9 @@
+/**
+ * Internal dependencies
+ */
+import * as focusable from './focusable';
+import * as tabbable from './tabbable';
+
+export const focus = { focusable, tabbable };
+
+export * from './dom';

test/unit/jest.config.json

@@ -5,8 +5,8 @@
 		"packages/**/*.js"
 	],
 	"moduleNameMapper": {
-		"@wordpress\\/(blocks|components|editor|data|utils|edit-post|viewport|plugins|core-data|core-blocks)": "$1",
-		"@wordpress\\/(date|element)": "packages/$1/src"
+		"@wordpress\\/(blocks|components|editor|data|utils|edit-post|viewport|plugins|core-data|core-blocks)$": "$1",
+		"@wordpress\\/(date|dom|element)$": "packages/$1/src"
 	},
 	"preset": "@wordpress/jest-preset-default",
 	"setupFiles": [

utils/dom-deprecated.js

@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import * as dom from '@wordpress/dom';
+
+/**
+ * Internal dependencies
+ */
+import { deprecated } from './deprecation';
+
+const wrapFunction = ( functionName, source = dom ) => ( ...args ) => {
+	deprecated( 'wp.utils.' + functionName, {
+		version: '3.1',
+		alternative: 'wp.dom.' + functionName,
+		plugin: 'Gutenberg',
+	} );
+	return source[ functionName ]( ...args );
+};
+
+export const computeCaretRect = wrapFunction( 'computeCaretRect' );
+export const documentHasSelection = wrapFunction( 'documentHasSelection' );
+export const focus = {
+	focusable: {
+		find: wrapFunction( 'find', dom.focus.focusable ),
+	},
+	tabbable: {
+		find: wrapFunction( 'find', dom.focus.tabbable ),
+		isTabbableIndex: wrapFunction( 'isTabbableIndex', dom.focus.tabbable ),
+	},
+};
+export const getRectangleFromRange = wrapFunction( 'getRectangleFromRange' );
+export const getScrollContainer = wrapFunction( 'getScrollContainer' );
+export const insertAfter = wrapFunction( 'insertAfter' );
+export const isHorizontalEdge = wrapFunction( 'isHorizontalEdge' );
+export const isTextField = wrapFunction( 'isTextField' );
+export const isVerticalEdge = wrapFunction( 'isVerticalEdge' );
+export const placeCaretAtHorizontalEdge = wrapFunction( 'placeCaretAtHorizontalEdge' );
+export const placeCaretAtVerticalEdge = wrapFunction( 'placeCaretAtVerticalEdge' );
+export const remove = wrapFunction( 'remove' );
+export const replace = wrapFunction( 'replace' );
+export const replaceTag = wrapFunction( 'replaceTag' );
+export const unwrap = wrapFunction( 'unwrap' );