Make ClipboardButton inside a block work correctly in Safari (#7106)

* Make ClipboardButton inside a block work in Safari * Update changelogs * Block Editor: Update "Next" to "Unreleased" per guidelines https://github.com/WordPress/gutenberg/blob/master/packages/README.md#maintaining-changelogs
WordPress · Apr 3, 2019 · afc5b0f · afc5b0f
1 parent abc096d
commit afc5b0f
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 26 deletions.
diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 2.0.0 (Unreleased)
+
+### Breaking Changes
+
+- `CopyHandler` will now only catch cut/copy events coming from its `props.children`, instead of from anywhere in the `document`.
+
 ## 1.0.0 (2019-03-06)
 
 ### New Features

diff --git a/packages/block-editor/src/components/copy-handler/index.js b/packages/block-editor/src/components/copy-handler/index.js
@@ -1,33 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
 import { serialize } from '@wordpress/blocks';
 import { documentHasSelection } from '@wordpress/dom';
 import { withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 
-class CopyHandler extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.onCopy = ( event ) => this.props.onCopy( event );
-		this.onCut = ( event ) => this.props.onCut( event );
-	}
-
-	componentDidMount() {
-		document.addEventListener( 'copy', this.onCopy );
-		document.addEventListener( 'cut', this.onCut );
-	}
-
-	componentWillUnmount() {
-		document.removeEventListener( 'copy', this.onCopy );
-		document.removeEventListener( 'cut', this.onCut );
-	}
-
-	render() {
-		return null;
-	}
+function CopyHandler( { children, onCopy, onCut } ) {
+	return (
+		<div onCopy={ onCopy } onCut={ onCut }>
+			{ children }
+		</div>
+	);
 }
 
 export default compose( [

diff --git a/packages/edit-post/CHANGELOG.md b/packages/edit-post/CHANGELOG.md
@@ -5,7 +5,9 @@
 * Expose the `className` property to style the `PluginSidebar` component.
 
 ### Bug Fixes
- - Fix 'save' keyboard shortcut not functioning in the Code Editor.
+
+- Fix 'save' keyboard shortcut not functioning in the Code Editor.
+- Prevent `ClipboardButton` from incorrectly copying a serialized block string instead of the intended text in Safari.
 
 ## 3.1.7 (2019-01-03)
 

diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
@@ -26,12 +26,13 @@ function VisualEditor() {
 	return (
 		<BlockSelectionClearer className="edit-post-visual-editor editor-styles-wrapper">
 			<VisualEditorGlobalKeyboardShortcuts />
-			<CopyHandler />
 			<MultiSelectScrollIntoView />
 			<WritingFlow>
 				<ObserveTyping>
-					<PostTitle />
-					<BlockList />
+					<CopyHandler>
+						<PostTitle />
+						<BlockList />
+					</CopyHandler>
 				</ObserveTyping>
 			</WritingFlow>
 			<_BlockSettingsMenuFirstItem>