From 84df4bd6082e7793a2befddb2a652cb42f445d21 Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Fri, 12 Jun 2020 17:09:38 +0300 Subject: [PATCH] Consolidate disparate "copy block" actions (#23088) * make copied Block flash * show copy Blocks notifications from block-actions Copy button Refactored BlockActions component to use hooks * ClipboardButton make onFinishCopy optional attribute * Simplify onFinishCopy check --- .../src/components/block-actions/index.js | 213 ++++++++---------- .../block-settings-dropdown.js | 13 +- .../src/components/copy-handler/index.js | 2 +- .../components/src/clipboard-button/index.js | 2 +- 4 files changed, 100 insertions(+), 130 deletions(-) diff --git a/packages/block-editor/src/components/block-actions/index.js b/packages/block-editor/src/components/block-actions/index.js index 9b890ee5c4ed7..249dd6e2e8a82 100644 --- a/packages/block-editor/src/components/block-actions/index.js +++ b/packages/block-editor/src/components/block-actions/index.js @@ -6,129 +6,106 @@ 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, -} ) { +/** + * 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, + 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, - } = 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 ); - }, - }; - } ), -] )( 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 e9e3ae9b235a9..a4e52afcbe3f9 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 } > - { hasCopied - ? __( 'Copied!' ) - : __( 'Copy' ) } + { __( 'Copy' ) } { canDuplicate && ( select( 'core/block-editor' ), [] diff --git a/packages/components/src/clipboard-button/index.js b/packages/components/src/clipboard-button/index.js index ba918d00a705d..2eec3b0d365e2 100644 --- a/packages/components/src/clipboard-button/index.js +++ b/packages/components/src/clipboard-button/index.js @@ -33,7 +33,7 @@ export default function ClipboardButton( { if ( hasCopied ) { onCopy(); - } else { + } else if ( onFinishCopy ) { onFinishCopy(); }