diff --git a/editor/edit-post/header/copy-content-button/index.js b/editor/edit-post/header/copy-content-button/index.js deleted file mode 100644 index ed8045165bf03..0000000000000 --- a/editor/edit-post/header/copy-content-button/index.js +++ /dev/null @@ -1,51 +0,0 @@ -/** - * External dependencies - */ -import { connect } from 'react-redux'; - -/** - * WordPress dependencies - */ -import { ClipboardButton } from '@wordpress/components'; -import { Component } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; - -/** - * Internal dependencies - */ -import { getEditedPostContent } from '../../../store/selectors'; - -class CopyContentButton extends Component { - constructor() { - super( ...arguments ); - this.state = { hasCopied: false }; - this.onCopy = this.onCopy.bind( this ); - this.onFinishCopy = this.onFinishCopy.bind( this ); - } - onCopy() { - this.setState( { hasCopied: true } ); - } - onFinishCopy() { - this.setState( { hasCopied: false } ); - } - render() { - return ( - - { this.state.hasCopied ? - __( 'Copied!' ) : - __( 'Copy All Content' ) } - - ); - } -} - -export default connect( - ( state ) => ( { - editedPostContent: getEditedPostContent( state ), - } ) -)( CopyContentButton ); diff --git a/editor/edit-post/header/editor-actions/index.js b/editor/edit-post/header/editor-actions/index.js index 43127de4faf22..a1b424d262b12 100644 --- a/editor/edit-post/header/editor-actions/index.js +++ b/editor/edit-post/header/editor-actions/index.js @@ -2,19 +2,17 @@ * WordPress dependencies */ import { MenuItemsGroup } from '@wordpress/components'; +import { applyFilters } from '@wordpress/hooks'; import { __ } from '@wordpress/i18n'; -/** - * Internal dependencies - */ -import CopyContentButton from '../copy-content-button'; - export default function EditorActions() { - return ( - - + { tools } - ); + ) : null; } diff --git a/editor/hooks/copy-content/index.js b/editor/hooks/copy-content/index.js new file mode 100644 index 0000000000000..14ba485150862 --- /dev/null +++ b/editor/hooks/copy-content/index.js @@ -0,0 +1,38 @@ +/** + * WordPress dependencies + */ +import { ClipboardButton, withState } from '@wordpress/components'; +import { compose } from '@wordpress/element'; +import { query } from '@wordpress/data'; +import { addFilter } from '@wordpress/hooks'; +import { __ } from '@wordpress/i18n'; + +function CopyContentButton( { editedPostContent, hasCopied, setState } ) { + return ( + setState( { hasCopied: true } ) } + onFinishCopy={ () => setState( { hasCopied: false } ) } + > + { hasCopied ? + __( 'Copied!' ) : + __( 'Copy All Content' ) } + + ); +} + +const Enhanced = compose( + query( ( select ) => ( { + editedPostContent: select( 'core/editor', 'getEditedPostContent' ), + } ) ), + withState( { hasCopied: false } ) +)( CopyContentButton ); + +const buttonElement = ; + +addFilter( + 'editor.EditorActions.tools', + 'core/copy-content/button', + ( children ) => [ ...children, buttonElement ] +); diff --git a/editor/hooks/index.js b/editor/hooks/index.js new file mode 100644 index 0000000000000..540437a892858 --- /dev/null +++ b/editor/hooks/index.js @@ -0,0 +1,4 @@ +/** + * Internal dependencies + */ +import './copy-content'; diff --git a/editor/index.js b/editor/index.js index 5e5f1115c3e65..35fd38df7107f 100644 --- a/editor/index.js +++ b/editor/index.js @@ -13,6 +13,7 @@ import { settings as dateSettings } from '@wordpress/date'; /** * Internal dependencies */ +import './hooks'; import './assets/stylesheets/main.scss'; import Layout from './edit-post/layout'; import { EditorProvider, ErrorBoundary } from './components'; diff --git a/editor/store/index.js b/editor/store/index.js index 8da2e29e19aa9..ca951b7f99f7b 100644 --- a/editor/store/index.js +++ b/editor/store/index.js @@ -12,7 +12,10 @@ import { withRehydratation, loadAndPersist } from './persist'; import enhanceWithBrowserSize from './mobile'; import applyMiddlewares from './middlewares'; import { BREAK_MEDIUM } from './constants'; -import { getEditedPostTitle } from './selectors'; +import { + getEditedPostContent, + getEditedPostTitle, +} from './selectors'; /** * Module Constants @@ -26,6 +29,9 @@ const store = applyMiddlewares( loadAndPersist( store, 'preferences', STORAGE_KEY, PREFERENCES_DEFAULTS ); enhanceWithBrowserSize( store, BREAK_MEDIUM ); -registerSelectors( MODULE_KEY, { getEditedPostTitle } ); +registerSelectors( MODULE_KEY, { + getEditedPostContent, + getEditedPostTitle, +} ); export default store;