Icon of anchor is not shown in the Block Editor

[ricjcs]

When we use anchors in a post, the icon indicating that there is an anchor is not shown in the Block Editor (view mode), in the Classic Editor there is no such problem.

Exemplifying with the following code:

<!-- wp:heading {"level":3} -->
<h3>Index:</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><a href="#title1">Title 1</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="#title2"> Title 2</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph --><!-- /wp:paragraph -->

<!-- wp:separator --><hr class="wp-block-separator" /><!-- /wp:separator -->

<!-- wp:heading {"level":3} -->
<h3><a name="title1"></a> Title 1</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse egestas risus sit amet accumsan consectetur. Aenean eget velit in lorem congue suscipit et eget nulla. Nunc id sapien quam. Fusce laoreet et ligula in volutpat. Cras id dolor a massa molestie varius at in ante.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3><a name="title2"></a> Title 2</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse egestas risus sit amet accumsan consectetur. Aenean eget velit in lorem congue suscipit et eget nulla. Nunc id sapien quam. Fusce laoreet et ligula in volutpat. Cras id dolor a massa molestie varius at in ante.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} --><!-- /wp:paragraph -->

As shown in the following print, in the Block Editor (view mode), the anchor icon is not shown:

In the Classic Editor, it is shown the icon that indicates the existence of an anchor:

The Block Editor should also show the icon which indicates that there is an anchor.

[melchoyce]

Quick terrible mockup idea, adding the anchor into the block navigator instead of inside the editor:

[paaljoachim]

The issue that comes up for me is...
Should the anchor in the backend layout be seen as it is not seen in the frontend?
I believe at the moment one is working on only showing in the backend what is a part of the layout on the frontend.

I do also believe that when Full Site Editing comes into place that we will likely face the issue of showing something in the backend that we will not see in the frontend layout.

@melchoyce suggestion is a very good idea. Something we can move forward with.

I will also ask for Mark's @mapk and Joen's @jasmussen comment on this issue.

[jasmussen]

Not a bad idea, Mel. Anchors are important when you need/use them, but they are also a rather advanced feature.

Quick sidenote, there's some related conversation deep in the archives: #1734

The primary issue with showing a little anchor icon next to the item that has one, is that it either indents the heading (like in the classic editor), breaking the WYSIWYG feel. Or it sits offset to the side, and risks overlapping other content in complex layouts, or just getting cropped off the side of the screen.

If we had a solid idea for where/how to show the anchor, I suspect it would be okay to do so. It would only show up if the user had intentionally added the anchor as text in the advanced section. I wonder if it could be aprt of the block toolbar?

[mapk]

If the anchor is something only visible on the backend, I'm in favor of Mel's proposed solution. I don't think it should be included in the editor if it's not going on the frontend.

There's always the option of showing a # right after the text similar to how WordPress.org Handbook pages work.

[joyously]

I tried making an anchor, and found I could only do it on a Heading. Is that correct, or did I miss something? Unlike the markup shown above, the current editor uses id, not name attribute. But there could be id attributes on various blocks, especially third party blocks. Would they all get an icon? They all would be potential link targets.
I don't see why the editor has to look just like the front end. Everyone knows they are editing, and there is always a Preview button. It could be something like the little blue circle used in the Customizer. Something that floats on top and isn't too intrusive. But it should help the user make a link to it (however that is done).

[mapk]

Because the Block Navigator is getting filled with features, I'm rethinking this. Maybe we can add a visual in the Editor. Rather than placing it at the beginning of the text, how about after the text? Keeping the color muted helps indicate this hashtag is different than the rest of the text.

[paaljoachim]

I think it is a good idea to try out, and see how it works.
I also think it is a good idea to keep the color muted as you mentioned.

Let's remove the Needs Design Feedback and add the Needs Dev label to get started.

[jasmussen]

Because the Block Navigator is getting filled with features, I'm rethinking this. Maybe we can add a visual in the Editor. Rather than placing it at the beginning of the text, how about after the text? Keeping the color muted helps indicate this hashtag is different than the rest of the text.

Good to not put it on the left, because side UI has failed the many contexts in which blocks need to work.

However when using the same font as the heading itself, it distinctly looks like content rather than block UI, which breaks the front-end/back-end visual sync, which is important. Is this meant to also show up on the frontend?

[mapk]

However when using the same font as the heading itself, it distinctly looks like content rather than block UI, which breaks the front-end/back-end visual sync, which is important. Is this meant to also show up on the frontend?

I don't think it should show on the frontend.
Here's an iteration with a hashtag icon to signify the anchor rather than the text itself. Should it be a lighter grey?

[jasmussen]

If it is to only show in the editor, I'd only show it on select, and I'd make it look more like block UI (like give it a background of the same material as the block toolbar).

[joyously]

+100 on styling it as UI, including the background, because if you only affect the color, you have no idea if it's visible with what the theme is doing.

[talldan]

Is the idea to only show the anchor in the heading block? Anchor can be set on lots of blocks now, so just showing it on the header seems inconsistent.

[jasmussen]

Is the idea to only show the anchor in the heading block? Anchor can be set on lots of blocks now, so just showing it on the header seems inconsistent.

You're referring to this one in the sidebar, right?

You make a good point. Any block, virtually, can get anchors. But we can't show an anchor in-canvas in a consistent way, it won't work as blocks can be anything. Which rewinds us back to Mel's solution outlined in #16621 (comment) as a potential path forward.

[mtias]

Closing this as we have a solution that renders the anchor name in the list view: