From 4f1cc30e69f014d9dff10bdeb2ce927821f1f0d0 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 11 Jun 2020 13:58:42 +0300 Subject: [PATCH 1/4] make copied Block flash --- .../src/components/block-actions/index.js | 7 +++++++ .../block-settings-menu/block-settings-dropdown.js | 14 ++++---------- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/block-actions/index.js b/packages/block-editor/src/components/block-actions/index.js index 9b890ee5c4ed78..df3bd5bf4e27e4 100644 --- a/packages/block-editor/src/components/block-actions/index.js +++ b/packages/block-editor/src/components/block-actions/index.js @@ -22,6 +22,7 @@ function BlockActions( { onRemove, onUngroup, blocks, + onCopy, } ) { return children( { canDuplicate, @@ -34,6 +35,7 @@ function BlockActions( { onRemove, onUngroup, blocks, + onCopy, } ); } @@ -80,6 +82,7 @@ export default compose( [ duplicateBlocks, insertAfterBlock, insertBeforeBlock, + flashBlock, } = dispatch( 'core/block-editor' ); return { @@ -129,6 +132,10 @@ export default compose( [ replaceBlocks( clientIds, innerBlocks ); }, + onCopy() { + const [ { clientId: selectedBlockClientId } ] = blocks; + flashBlock( selectedBlockClientId ); + }, }; } ), ] )( BlockActions ); diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js index e9e3ae9b235a9b..9b938d4025f7c6 100644 --- a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js +++ b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js @@ -15,7 +15,6 @@ import { } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; import { moreHorizontal } from '@wordpress/icons'; -import { useState } from '@wordpress/element'; import { serialize } from '@wordpress/blocks'; /** @@ -57,8 +56,6 @@ export function BlockSettingsDropdown( { clientIds, ...props } ) { }; }, [] ); - const [ hasCopied, setHasCopied ] = useState(); - return ( { ( { @@ -69,6 +66,7 @@ export function BlockSettingsDropdown( { clientIds, ...props } ) { onInsertAfter, onInsertBefore, onRemove, + onCopy, blocks, } ) => ( serialize( blocks ) } role="menuitem" className="components-menu-item__button" - onCopy={ () => { - setHasCopied( true ); - } } - onFinishCopy={ () => setHasCopied( false ) } + onCopy={ onCopy } + onFinishCopy={ onClose } > - { hasCopied - ? __( 'Copied!' ) - : __( 'Copy' ) } + { __( 'Copy' ) } { canDuplicate && ( Date: Thu, 11 Jun 2020 18:21:15 +0300 Subject: [PATCH 2/4] show copy Blocks notifications from block-actions Copy button Refactored BlockActions component to use hooks --- .../src/components/block-actions/index.js | 221 ++++++++---------- .../src/components/copy-handler/index.js | 2 +- 2 files changed, 97 insertions(+), 126 deletions(-) diff --git a/packages/block-editor/src/components/block-actions/index.js b/packages/block-editor/src/components/block-actions/index.js index df3bd5bf4e27e4..d1b0f8c8f72bf0 100644 --- a/packages/block-editor/src/components/block-actions/index.js +++ b/packages/block-editor/src/components/block-actions/index.js @@ -6,136 +6,107 @@ import { castArray, first, last, every } from 'lodash'; /** * WordPress dependencies */ -import { compose } from '@wordpress/compose'; -import { withSelect, withDispatch } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; import { hasBlockSupport, switchToBlockType } from '@wordpress/blocks'; -function BlockActions( { - canDuplicate, - canInsertDefaultBlock, - children, - isLocked, - onDuplicate, - onGroup, - onInsertAfter, - onInsertBefore, - onRemove, - onUngroup, - blocks, - onCopy, -} ) { +/** + * Internal dependencies + */ +import { useNotifyCopy } from '../copy-handler'; + +export default function BlockActions( { clientIds, children } ) { + const { + canInsertBlockType, + getBlockRootClientId, + getBlocksByClientId, + getTemplateLock, + } = useSelect( ( select ) => select( 'core/block-editor' ), [] ); + const { + getDefaultBlockName, + getGroupingBlockName, + } = useSelect( ( select ) => select( 'core/blocks' ) ); + + const blocks = getBlocksByClientId( clientIds ); + const rootClientId = getBlockRootClientId( clientIds[ 0 ] ); + const canDuplicate = every( blocks, ( block ) => { + return ( + !! block && + hasBlockSupport( block.name, 'multiple', true ) && + canInsertBlockType( block.name, rootClientId ) + ); + } ); + + const canInsertDefaultBlock = canInsertBlockType( + getDefaultBlockName(), + rootClientId + ); + + const { + removeBlocks, + replaceBlocks, + duplicateBlocks, + insertAfterBlock, + insertBeforeBlock, + flashBlock, + } = useDispatch( 'core/block-editor' ); + + const notifyCopy = useNotifyCopy(); + return children( { canDuplicate, canInsertDefaultBlock, - isLocked, - onDuplicate, - onGroup, - onInsertAfter, - onInsertBefore, - onRemove, - onUngroup, + isLocked: !! getTemplateLock( rootClientId ), + rootClientId, blocks, - onCopy, + onDuplicate() { + return duplicateBlocks( clientIds ); + }, + onRemove() { + removeBlocks( clientIds ); + }, + onInsertBefore() { + insertBeforeBlock( first( castArray( clientIds ) ) ); + }, + onInsertAfter() { + insertAfterBlock( last( castArray( clientIds ) ) ); + }, + onGroup() { + if ( ! blocks.length ) { + return; + } + + const groupingBlockName = getGroupingBlockName(); + + // Activate the `transform` on `core/group` which does the conversion + const newBlocks = switchToBlockType( blocks, groupingBlockName ); + + if ( ! newBlocks ) { + return; + } + replaceBlocks( clientIds, newBlocks ); + }, + + onUngroup() { + if ( ! blocks.length ) { + return; + } + + const innerBlocks = blocks[ 0 ].innerBlocks; + + if ( ! innerBlocks.length ) { + return; + } + + replaceBlocks( clientIds, innerBlocks ); + }, + onCopy() { + const selectedBlockClientIds = blocks.map( + ( { clientId } ) => clientId + ); + if ( blocks.length === 1 ) { + flashBlock( selectedBlockClientIds[ 0 ] ); + } + notifyCopy( 'copy', selectedBlockClientIds ); + }, } ); } - -export default compose( [ - withSelect( ( select, props ) => { - const { - canInsertBlockType, - getBlockRootClientId, - getBlocksByClientId, - getTemplateLock, - } = select( 'core/block-editor' ); - const { getDefaultBlockName } = select( 'core/blocks' ); - - const blocks = getBlocksByClientId( props.clientIds ); - const rootClientId = getBlockRootClientId( props.clientIds[ 0 ] ); - const canDuplicate = every( blocks, ( block ) => { - return ( - !! block && - hasBlockSupport( block.name, 'multiple', true ) && - canInsertBlockType( block.name, rootClientId ) - ); - } ); - - const canInsertDefaultBlock = canInsertBlockType( - getDefaultBlockName(), - rootClientId - ); - - return { - blocks, - canDuplicate, - canInsertDefaultBlock, - extraProps: props, - isLocked: !! getTemplateLock( rootClientId ), - rootClientId, - }; - } ), - withDispatch( ( dispatch, props, { select } ) => { - const { clientIds, blocks } = props; - - const { - removeBlocks, - replaceBlocks, - duplicateBlocks, - insertAfterBlock, - insertBeforeBlock, - flashBlock, - } = dispatch( 'core/block-editor' ); - - return { - onDuplicate() { - return duplicateBlocks( clientIds ); - }, - onRemove() { - removeBlocks( clientIds ); - }, - onInsertBefore() { - insertBeforeBlock( first( castArray( clientIds ) ) ); - }, - onInsertAfter() { - insertAfterBlock( last( castArray( clientIds ) ) ); - }, - onGroup() { - if ( ! blocks.length ) { - return; - } - - const { getGroupingBlockName } = select( 'core/blocks' ); - - const groupingBlockName = getGroupingBlockName(); - - // Activate the `transform` on `core/group` which does the conversion - const newBlocks = switchToBlockType( - blocks, - groupingBlockName - ); - - if ( ! newBlocks ) { - return; - } - replaceBlocks( clientIds, newBlocks ); - }, - - onUngroup() { - if ( ! blocks.length ) { - return; - } - - const innerBlocks = blocks[ 0 ].innerBlocks; - - if ( ! innerBlocks.length ) { - return; - } - - replaceBlocks( clientIds, innerBlocks ); - }, - onCopy() { - const [ { clientId: selectedBlockClientId } ] = blocks; - flashBlock( selectedBlockClientId ); - }, - }; - } ), -] )( BlockActions ); diff --git a/packages/block-editor/src/components/copy-handler/index.js b/packages/block-editor/src/components/copy-handler/index.js index b80a675ea3ee41..1ae8ba1706dcad 100644 --- a/packages/block-editor/src/components/copy-handler/index.js +++ b/packages/block-editor/src/components/copy-handler/index.js @@ -15,7 +15,7 @@ import { __, sprintf } from '@wordpress/i18n'; */ import { getPasteEventData } from '../../utils/get-paste-event-data'; -function useNotifyCopy() { +export function useNotifyCopy() { const { getBlockName } = useSelect( ( select ) => select( 'core/block-editor' ), [] From dcd525a1a92ac465ebe1a43d7ff781698eaf66e9 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Fri, 12 Jun 2020 12:25:04 +0300 Subject: [PATCH 3/4] ClipboardButton make onFinishCopy optional attribute --- packages/block-editor/src/components/block-actions/index.js | 1 - .../components/block-settings-menu/block-settings-dropdown.js | 1 - packages/components/src/clipboard-button/index.js | 4 ++-- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/block-actions/index.js b/packages/block-editor/src/components/block-actions/index.js index d1b0f8c8f72bf0..249dd6e2e8a821 100644 --- a/packages/block-editor/src/components/block-actions/index.js +++ b/packages/block-editor/src/components/block-actions/index.js @@ -85,7 +85,6 @@ export default function BlockActions( { clientIds, children } ) { } replaceBlocks( clientIds, newBlocks ); }, - onUngroup() { if ( ! blocks.length ) { return; diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js index 9b938d4025f7c6..a4e52afcbe3f90 100644 --- a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js +++ b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js @@ -98,7 +98,6 @@ export function BlockSettingsDropdown( { clientIds, ...props } ) { role="menuitem" className="components-menu-item__button" onCopy={ onCopy } - onFinishCopy={ onClose } > { __( 'Copy' ) } diff --git a/packages/components/src/clipboard-button/index.js b/packages/components/src/clipboard-button/index.js index ba918d00a705d1..d0d1bc831f9d35 100644 --- a/packages/components/src/clipboard-button/index.js +++ b/packages/components/src/clipboard-button/index.js @@ -31,9 +31,9 @@ export default function ClipboardButton( { return; } - if ( hasCopied ) { + if ( hasCopied && typeof onCopy === 'function' ) { onCopy(); - } else { + } else if ( typeof onFinishCopy === 'function' ) { onFinishCopy(); } From b99fc902658819faba01e95ca5cb340683c39799 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Fri, 12 Jun 2020 16:06:07 +0300 Subject: [PATCH 4/4] Simplify onFinishCopy check --- packages/components/src/clipboard-button/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/clipboard-button/index.js b/packages/components/src/clipboard-button/index.js index d0d1bc831f9d35..2eec3b0d365e28 100644 --- a/packages/components/src/clipboard-button/index.js +++ b/packages/components/src/clipboard-button/index.js @@ -31,9 +31,9 @@ export default function ClipboardButton( { return; } - if ( hasCopied && typeof onCopy === 'function' ) { + if ( hasCopied ) { onCopy(); - } else if ( typeof onFinishCopy === 'function' ) { + } else if ( onFinishCopy ) { onFinishCopy(); }