Gutenberg: Add Block: Bookmark/HTML Anchor

[jasmussen]

This could either be a separate block, as this ticket suggests, or a part of #887. The purpose would be to let you create an HTML anchor — a bookmark down the page, so you could link to a specific section.

What would it look like? Would it be somehwat like #983? Would it be visible on the front-end, like perhaps a small hash mark in the side? It seems worth looking at how WYSIWYG HTML editors like Dreamweaver has done this in the past.

[mtias]

I've been thinking a bit about this one and I believe we should add it as an optional (maybe advanced) setting to all blocks. It could look like "add anchor id" or "link directly to this block" with an explanation of how it works. We could check that the id is unique. It'd be nice if this setting could live at the bottom of the inspector, somehow. Maybe together with a trash this block? It shouldn't get in the way.

[jasmussen]

I've been thinking a bit about this one and I believe we should add it as an optional (maybe advanced) setting to all blocks.

+1+1 that sounds like a great approach, and good use of the advanced block interface.

[karmatosed]

I would also +1 to this being an advanced setting over a new block.

[mtias]

Punting.

[youknowriad]

Some technical thoughts about this:

An advanced option for all blocks: Does this mean we create a wrapper for all blocks? It would have a big impact on parsing.
Can't we just add it as an option for the heading block?
Uniqueness check: This means a block can access the global state (post content) to check for uniqueness, it's not possible for now because we have this separation: the blocks are defined in the blocks module and all what they need is provided using props (+ editor settings) and the global state is in the editor module.

[breath-ee]

Feature request for html anchor on image blocks. Or better still added to all blocks!

[TheMangoTrain]

FYI, Header blocks already have an anchor field (inside 'Advanced'); it works. In actuality, all it does is apply a custom ID to the Header block, which you can link to as an anchor. This is according to HTML5 spec.

Technically all Gutenblocks could have a custom ID, useful for all kinds of things, not just anchors.

As for an actual Anchor block, personally I would find it useful because I like to place hidden anchors higher up on a page so that when the user clicks an anchor link, the anchor content starts 1/3 down the screen rather than the top edge --- a more pleasant experience. This is done with something like <div id="my_anchor" style="visibility:hidden"></div>. In this case, an Anchor block would be convenient and less annoying than seeing HTML code blocks in the middle of my editor view.

[shabikaplan]

FYI, Header blocks already have an anchor field (inside 'Advanced'); it works. In actuality, all it does is apply a custom ID to the Header block, which you can link to as an anchor. This is according to HTML5 spec.

Technically all Gutenblocks could have a custom ID, useful for all kinds of things, not just anchors.

As for an actual Anchor block, personally I would find it useful because I like to place hidden anchors higher up on a page so that when the user clicks an anchor link, the anchor content starts 1/3 down the screen rather than the top edge --- a more pleasant experience. This is done with something like <div id="my_anchor" style="visibility:hidden"></div>. In this case, an Anchor block would be convenient and less annoying than seeing HTML code blocks in the middle of my editor view.

This is true, but we should have an option to hide the heading also, so that the user can create an anchor without having to display a heading block