Block Settings Menu: Adding a duplicate block button #5098

youknowriad · 2018-02-16T11:55:50Z

Testing instructions

Add any block
Open the block settings menu
Click "Duplicate"
A new block should be created right after the current block

It should also work for multiselection

aduth · 2018-02-16T16:41:37Z

editor/store/selectors.js

@@ -486,6 +486,16 @@ export const getBlocks = createSelector(
 	]
 );

+export const getBlocksByUid = createSelector(


More accurately: getBlocksByUids

Also need consensus on capitalization pattern getBlocksByUids vs. getBlocksByUIDs

What's your preference on the capitalization, let's make it a guideline ;)?

I agree a guideline would be good. I don't know which I prefer. I think capitalized abbreviations is more the norm, but there's exceptions. It also makes it difficult when a name has two adjacent abbreviations (imagine an XMLHTTPRequest).

🤷‍♂️

#2511

I guess I'd slightly lean toward capitalized abbreviations.

aduth · 2018-02-16T16:44:44Z

editor/components/block-settings-menu/block-duplicate-button.js

+			index: getBlockIndex( state, last( ownProps.uids ), ownProps.rootUID ),
+		} ),
+		{ insertBlocks },
+		( { blocks, index }, dispatchProps, { rootUID } ) => ( {


I see why it's used here, but I've becoming increasingly cautious of mergeProps upon discovery in #5090 about excessive renders it can incur.

Another option would be to do this inside the component. Do you think it's better?

Better in performance. Worse in having it become less purely presentational.

🤷‍♂️

Is this blocking, I think we should keep it as is and revisit once we update the data module.

Should be possible to simplify now with #5137

mtias · 2018-02-21T23:24:59Z

editor/components/block-settings-menu/block-duplicate-button.js

+import { insertBlocks } from '../../store/actions';
+
+export function BlockDuplicateButton( { onDuplicate, onClick = noop, isLocked, small = false } ) {
+	if ( isLocked ) {


Should also check for useOnce here :)

👍 Good catch

jasmussen · 2018-02-22T18:33:38Z

This is VERY nice. I think this is going to be a very popular feature.

The block ellipsis menu is getting a little crowded, but that's due to the transformations rather than this addition. If we feel it's getting out of hand we can revisit having the transformations in this menu. Not for this PR.

One enhancement to consider for this, is selecting the new block after it's been duplicated. Especially if you multi select three blocks and duplicate, it'd be nice if the three duplicate blocks were simply still selected so you could move them around or whatever.

But no blocker.

👍 👍 nice work!

youknowriad · 2018-02-22T18:38:11Z

One enhancement to consider for this, is selecting the new block after it's been duplicated

It works for a single block, but I'll take a look to see if we can keep the multi-selection as well.

jasmussen · 2018-02-22T18:46:43Z

It's not a requirement, just a nicety.

mtias · 2018-02-22T19:17:39Z

I think we should do the flyout menu for transforms :)

aduth

Most of my comments are minor. Seems to work well in my testing.

aduth · 2018-02-23T04:45:53Z

editor/components/block-settings-menu/block-duplicate-button.js

+		} ),
+		{ insertBlocks },
+		( { blocks, index }, dispatchProps, { rootUID } ) => ( {
+			blockNames: blocks.map( block => block.name ),


Honestly, it would probably be more efficient to pass in the blocks array in its entirety from getBlocksByUid, since at least that's memoized, not returning a new instance each time.

aduth · 2018-02-23T04:46:45Z

editor/components/block-settings-menu/block-duplicate-button.js

+		const type = getBlockType( name );
+		return ! type.useOnce;
+	} ) );
+	if ( isLocked || ! canDuplicate ) {


Minor (since it's not a common scenario): if isLocked is true here, we've wasted effort calculating canDuplicate, when we could have done an early return before the every.

aduth · 2018-02-23T04:49:38Z

editor/store/selectors.js

@@ -486,6 +486,16 @@ export const getBlocks = createSelector(
 	]
 );

+export const getBlocksByUid = createSelector(


I guess I'd slightly lean toward capitalized abbreviations.

aduth · 2018-02-23T04:50:00Z

editor/store/selectors.js

+		return map( uids, ( uid ) => getBlock( state, uid ) );
+	},
+	( state ) => [
+		state.editor.present.blockOrder,


How does this depend on blockOrder ?

Also, since this depends on getBlock, it should define all of the dependants of getBlock.

Aside: [email protected] adds a helper utility for this via getBlock.getDependants (changelog).

I avoided using getDependants because of two things:

I have to map over the uids, to call the getDependants of the getBlock

I thought it's simpler to just add the global block state as dependants instead of using specific uids since a selector returning multiple blocks.

blockOrder is necessary because getBlock depends on blockOrder see getBlockDependantsCacheBust

youknowriad · 2018-02-26T12:07:55Z

I feel like I addressed everything here. Merging.

youknowriad self-assigned this Feb 16, 2018

youknowriad requested a review from jasmussen February 16, 2018 11:55

aduth reviewed Feb 16, 2018

View reviewed changes

mtias reviewed Feb 21, 2018

View reviewed changes

mtias added [Type] Task Issues or PRs that have been broken down into an individual action to take [Feature] Block API API that allows to express the block paradigm. [Feature] Blocks Overall functionality of blocks labels Feb 21, 2018

aduth reviewed Feb 23, 2018

View reviewed changes

aduth mentioned this pull request Feb 23, 2018

Made each taxonomy appear on its own panel. #5183

Merged

youknowriad added 4 commits February 23, 2018 09:41

Block Settings Menu: Adding a duplicate block button

9ecdb8c

Hide duplicate button for useOnce blocks

07bb55a

Refactor duplicate button using the data module

80b1a2a

update getBlocksByUID

968580d

youknowriad force-pushed the add/duplicate-button branch from 3067e8c to 968580d Compare February 23, 2018 08:58

Keep multiselection after duplicating multiple blocks

f606380

youknowriad merged commit 6e273fc into master Feb 26, 2018

youknowriad deleted the add/duplicate-button branch February 26, 2018 12:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Block Settings Menu: Adding a duplicate block button #5098

Block Settings Menu: Adding a duplicate block button #5098

youknowriad commented Feb 16, 2018

aduth Feb 16, 2018

youknowriad Feb 16, 2018

aduth Feb 16, 2018

aduth Feb 23, 2018

aduth Feb 16, 2018

youknowriad Feb 16, 2018

aduth Feb 16, 2018

youknowriad Feb 21, 2018

aduth Feb 23, 2018

mtias Feb 21, 2018

youknowriad Feb 22, 2018

jasmussen commented Feb 22, 2018

youknowriad commented Feb 22, 2018

jasmussen commented Feb 22, 2018

mtias commented Feb 22, 2018

aduth left a comment

aduth Feb 23, 2018

aduth Feb 23, 2018

aduth Feb 23, 2018

aduth Feb 23, 2018

aduth Feb 23, 2018

youknowriad Feb 23, 2018

youknowriad commented Feb 26, 2018

Block Settings Menu: Adding a duplicate block button #5098

Block Settings Menu: Adding a duplicate block button #5098

Conversation

youknowriad commented Feb 16, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jasmussen commented Feb 22, 2018

youknowriad commented Feb 22, 2018

jasmussen commented Feb 22, 2018

mtias commented Feb 22, 2018

aduth left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youknowriad commented Feb 26, 2018