Add hook to validate useOnce blocks

[mcsf]

Description

Fixes #4932.

This pull request is one answer to handling scenarios in which multiple instances of a block are found in a post even though the block's type specifies it should only be used once (useOnce). The following example should be useful:

Edit: The Edit as HTML button has been removed for now, and the More block doesn't offer any transformation (offering "Next Page" was merely conceptual). Instead, a Find original button was added that selects (and moves into view) the one block in the content that is valid for the same block type.

Source	Result

Caveat

• The inspector controls aren't disabled for invalid blocks. This is a limitation stemming from the chosen hook (blocks.BlockEdit) and can be revisited.
• The suggestion to convert More to a Next Page block came out of my own liberty. We do not provide such a block yet, but it seemed like it would be a very timely suggestion: a lot of users may not even know of <!--nextpage--> and may be stitching together a post and realize they have multiple break points that they were representing with <!--more-->. Creating blocks/library/next-page and adding a transform from More would solve this. Edit: more on Pagination below.

How Has This Been Tested?

• Source of a post with multiple Subhead and More blocks.
• Very rough, needs testing, UX and design feedback.
• Needs a couple of unit tests.

Screenshots (jpeg or gifs if applicable):

Types of changes

Enhancement; extension.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code has proper inline documentation.

[mcsf]

Adding that the current take is pretty opinionated in that it requires the user to take action. My first stab included a Ignore option. I’m not sure where I stand on honoring this contract between block author and block user. It could be argued that offering transforms + conversion to HTML is a way to let the user keep their content and not restrict them too much.

[mcsf]

On the Pagination block (nextpage), there a couple of past issues for it. Linking to the most recent issue (#4930) and an open PR (#1467). Furthermore, noting that work should be performed in accordance with #2973.

[hedgefield]

I like your approach of giving the user options instead of locking them down with "this is wrong". That's a good UX. And the transformations sound logical, so for me this is a good solution to #4932.

[mtias]

Looks good to me.

[mcsf]

I'm going to merge this. Noting that more of Gutenberg's core validation process could be moved to a hook like this. Until then, I want this atom merged so it can serve as yet another example of usage of hooks.

[hedgefield]

@mcsf Ah, noticed a bug with this: when adding the subheading block more than once, it shows the "you cannot use this block more than once" as expected. BUT, you can then transform that block into a paragraph, and it still stays locked, saying "Paragraph can not be used more than once" 😄

[mcsf]

@hedgefield: interesting. I can't repro, though. Could you perhaps provide a screencast?

[hedgefield]

Can't repro on master either (I just get two subhead blocks, no warning), but this is what happens on 2.3.0 for my colleague.

Thinking about it more, not sure if this is your code anymore, that was limited to the code editor I think? Shall I report this as a bug?

[mcsf]

Ah, good catch. I can repro. Yep, you can make an issue, thanks!

[hedgefield]

👍 #5471

[aduth]

Is this actually doing anything? Where is block.id assigned for this? Is this a typo for block.uid?

(Asking as I seek to upgrade all references of uid to clientId)

[mcsf]

It's passed from BlockListBlock to BlockEdit, but it's a synonym of clientId.

[mcsf]

gutenberg/editor/components/block-list/block.js

Lines 633 to 644 in 07dbbb0

	<BlockEdit
	name={ blockName }
	isSelected={ isSelected }
	attributes={ block.attributes }
	setAttributes={ this.setAttributes }
	insertBlocksAfter={ isLocked ? undefined : this.insertBlocksAfter }
	onReplace={ isLocked ? undefined : onReplace }
	mergeBlocks={ isLocked ? undefined : this.mergeBlocks }
	id={ block.uid }
	isSelectionEnabled={ this.props.isSelectionEnabled }
	toggleSelection={ this.props.toggleSelection }
	/>

[aduth]

Another reason #7990 was desperately needed 😅