diff --git a/lib/client-assets.php b/lib/client-assets.php index d38a3c2098feb..d3e84f1b9779c 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -1026,11 +1026,32 @@ function gutenberg_editor_scripts_and_styles( $hook ) { // to disable it outright. wp_enqueue_script( 'heartbeat' ); - // Transform a "heartbeat-tick" jQuery event into "heartbeat.tick" hook action. - // This removes the need of using jQuery for listening to the event. + // Transforms heartbeat jQuery events into equivalent hook actions. This + // avoids a dependency on jQuery for listening to the event. + $heartbeat_hooks = << array( - 'jquery', 'lodash', 'wp-tinymce-lists', 'wp-a11y', diff --git a/package-lock.json b/package-lock.json index 3d54418b81877..917bb93ee5006 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2562,7 +2562,6 @@ "classnames": "^2.2.5", "dom-scroll-into-view": "^1.2.1", "inherits": "^2.0.3", - "jquery": "^3.3.1", "lodash": "^4.17.10", "memize": "^1.0.5", "react-autosize-textarea": "^3.0.2", @@ -12774,11 +12773,6 @@ "merge-stream": "^1.0.1" } }, - "jquery": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz", - "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==" - }, "js-base64": { "version": "2.4.6", "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.6.tgz", diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md index f8465425eed10..672be5a61d0a0 100644 --- a/packages/editor/CHANGELOG.md +++ b/packages/editor/CHANGELOG.md @@ -1,3 +1,9 @@ +## 9.0.7 (Unreleased) + +### Internal + +- Removed `jQuery` dependency + ## 9.0.6 (2018-12-18) ### Bug Fixes diff --git a/packages/editor/package.json b/packages/editor/package.json index 811eb9643e4c0..a1b72033210d4 100644 --- a/packages/editor/package.json +++ b/packages/editor/package.json @@ -47,7 +47,6 @@ "classnames": "^2.2.5", "dom-scroll-into-view": "^1.2.1", "inherits": "^2.0.3", - "jquery": "^3.3.1", "lodash": "^4.17.10", "memize": "^1.0.5", "react-autosize-textarea": "^3.0.2", diff --git a/packages/editor/src/components/post-locked-modal/index.js b/packages/editor/src/components/post-locked-modal/index.js index db8de6f00579c..ecdb4b6a54b32 100644 --- a/packages/editor/src/components/post-locked-modal/index.js +++ b/packages/editor/src/components/post-locked-modal/index.js @@ -1,7 +1,6 @@ /** * External dependencies */ -import jQuery from 'jquery'; import { get } from 'lodash'; /** @@ -12,7 +11,8 @@ import { Modal, Button } from '@wordpress/components'; import { withSelect, withDispatch } from '@wordpress/data'; import { addQueryArgs } from '@wordpress/url'; import { Component } from '@wordpress/element'; -import { compose, withGlobalEvents } from '@wordpress/compose'; +import { addAction, removeAction } from '@wordpress/hooks'; +import { compose, withGlobalEvents, withInstanceId } from '@wordpress/compose'; /** * Internal dependencies @@ -30,17 +30,30 @@ class PostLockedModal extends Component { } componentDidMount() { + const hookName = this.getHookName(); + // Details on these events on the Heartbeat API docs // https://developer.wordpress.org/plugins/javascript/heartbeat-api/ - jQuery( document ) - .on( 'heartbeat-send.refresh-lock', this.sendPostLock ) - .on( 'heartbeat-tick.refresh-lock', this.receivePostLock ); + addAction( 'heartbeat.send', hookName, this.sendPostLock ); + addAction( 'heartbeat.tick', hookName, this.receivePostLock ); } componentWillUnmount() { - jQuery( document ) - .off( 'heartbeat-send.refresh-lock', this.sendPostLock ) - .off( 'heartbeat-tick.refresh-lock', this.receivePostLock ); + const hookName = this.getHookName(); + + removeAction( 'heartbeat.send', hookName ); + removeAction( 'heartbeat.tick', hookName ); + } + + /** + * Returns a `@wordpress/hooks` hook name specific to the instance of the + * component. + * + * @return {string} Hook name prefix. + */ + getHookName() { + const { instanceId } = this.props; + return 'core/editor/post-locked-modal-' + instanceId; } /** @@ -49,10 +62,9 @@ class PostLockedModal extends Component { * When the user does not send a heartbeat in a heartbeat-tick * the user is no longer editing and another user can start editing. * - * @param {Object} event Event. - * @param {Object} data Data to send in the heartbeat request. + * @param {Object} data Data to send in the heartbeat request. */ - sendPostLock( event, data ) { + sendPostLock( data ) { const { isLocked, activePostLock, postId } = this.props; if ( isLocked ) { return; @@ -67,10 +79,9 @@ class PostLockedModal extends Component { /** * Refresh post locks: update the lock string or show the dialog if somebody has taken over editing. * - * @param {Object} event Event. - * @param {Object} data Data received in the heartbeat request + * @param {Object} data Data received in the heartbeat request */ - receivePostLock( event, data ) { + receivePostLock( data ) { if ( ! data[ 'wp-refresh-post-lock' ] ) { return; } @@ -104,18 +115,15 @@ class PostLockedModal extends Component { return; } - const data = { - action: 'wp-remove-post-lock', - _wpnonce: postLockUtils.unlockNonce, - post_ID: postId, - active_post_lock: activePostLock, - }; + const data = new window.FormData(); + data.append( 'action', 'wp-remove-post-lock' ); + data.append( '_wpnonce', postLockUtils.unlockNonce ); + data.append( 'post_ID', postId ); + data.append( 'active_post_lock', activePostLock ); - jQuery.post( { - async: false, - url: postLockUtils.ajaxUrl, - data, - } ); + const xhr = new window.XMLHttpRequest(); + xhr.open( 'POST', postLockUtils.ajaxUrl, false ); + xhr.send( data ); } render() { @@ -232,6 +240,7 @@ export default compose( updatePostLock, }; } ), + withInstanceId, withGlobalEvents( { beforeunload: 'releasePostLock', } )