Add: `DeepLink` Component

[fabiankaegy]

On several Projects now I've seen the need to allow editors to more easily create deep links into something. It may be a Tab item, an accordion or any other block. And under the hood this can simply be achieved by adding the supports.anchor flag to a block.

This still leaves a lot of manual work & advanced knowledge for editors who may not understand that the anchor allows you to directly link to something.

So the idea is to create a custom component that can be added by block authors to directly add the anchor field with an additional field to allow you to copy the full URL including the anchor. It shows inline validation etc.

Screenshot:

More ideas to get this Feature to be less verbose are appreciated.

[Firestorm980]

@fabiankaegy I have an initial go at this working OK in the editor. Could probably use some extra eyes.

Here is how this component appears when added to a custom "Deep Link" panel in a custom block. I'm showing the core "Advanced" panel to show that the values are syncing:

Done:

• The HTML anchor field from core stays in sync with the component's text fields
• The deep link field is read only
• Copy to clipboard button is working (using our component for that)
• Pulling the post permalink automatically into the deep link field
• Copy to clipboard is disabled when there is no anchor

To do:

• Handling for when anchor support is not included on the block
• Inline validation to see if there is an anchor set
• (Proposed) Inline validation to check if there are duplicates (anchor is already taken)

Appreciate any initial feedback (particularly around code quality or doing things in a more "Gutenberg" way). Here's a compare: https://github.com/10up/block-components/compare/develop...Firestorm980:feature/deep-link