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 +``` + +

Code is Poetry.

diff --git a/packages/dom/package.json b/packages/dom/package.json new file mode 100644 index 0000000000000..100d8a6276ccd --- /dev/null +++ b/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" + } +} diff --git a/utils/dom.js b/packages/dom/src/dom.js similarity index 100% rename from utils/dom.js rename to packages/dom/src/dom.js diff --git a/utils/focus/focusable.js b/packages/dom/src/focusable.js similarity index 100% rename from utils/focus/focusable.js rename to packages/dom/src/focusable.js diff --git a/packages/dom/src/index.js b/packages/dom/src/index.js new file mode 100644 index 0000000000000..9fde374193ad5 --- /dev/null +++ b/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'; diff --git a/utils/focus/tabbable.js b/packages/dom/src/tabbable.js similarity index 100% rename from utils/focus/tabbable.js rename to packages/dom/src/tabbable.js diff --git a/utils/test/dom.js b/packages/dom/src/test/dom.js similarity index 100% rename from utils/test/dom.js rename to packages/dom/src/test/dom.js diff --git a/utils/focus/test/focusable.js b/packages/dom/src/test/focusable.js similarity index 100% rename from utils/focus/test/focusable.js rename to packages/dom/src/test/focusable.js diff --git a/utils/focus/test/tabbable.js b/packages/dom/src/test/tabbable.js similarity index 100% rename from utils/focus/test/tabbable.js rename to packages/dom/src/test/tabbable.js diff --git a/utils/focus/test/utils/create-element.js b/packages/dom/src/test/utils/create-element.js similarity index 100% rename from utils/focus/test/utils/create-element.js rename to packages/dom/src/test/utils/create-element.js diff --git a/test/unit/jest.config.json b/test/unit/jest.config.json index a615b0a2b37af..01c3d24d6ec60 100644 --- a/test/unit/jest.config.json +++ b/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": [ diff --git a/utils/dom-deprecated.js b/utils/dom-deprecated.js new file mode 100644 index 0000000000000..cbc1c9f0be722 --- /dev/null +++ b/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' ); diff --git a/utils/focus/index.js b/utils/focus/index.js deleted file mode 100644 index 5dfbfba81bfa7..0000000000000 --- a/utils/focus/index.js +++ /dev/null @@ -1,4 +0,0 @@ -import * as focusable from './focusable'; -import * as tabbable from './tabbable'; - -export { focusable, tabbable }; diff --git a/utils/index.js b/utils/index.js index ea860814df14d..ed1ce1520ff8e 100644 --- a/utils/index.js +++ b/utils/index.js @@ -1,16 +1,18 @@ -import * as focus from './focus'; +/** + * Internal dependencies + */ import * as keycodes from './keycodes'; import * as viewPort from './viewport'; import { decodeEntities } from './entities'; -export { focus }; -export { keycodes }; export { decodeEntities }; +export { keycodes }; +export { viewPort }; export * from './blob-cache'; -export * from './dom'; +export * from './deprecation'; export * from './mediaupload'; export * from './terms'; -export * from './deprecation'; -export { viewPort }; +// Deprecations +export * from './dom-deprecated'; diff --git a/webpack.config.js b/webpack.config.js index 7670b9981a109..5fb504af3fdec 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -127,6 +127,7 @@ const entryPointNames = [ const gutenbergPackages = [ 'date', + 'dom', 'element', ];