2

How would I create an anchor link from the Test text to the embed conten? I tried adding an id="03T" inside of the div within the embed comment block. However, when doing that I am unable to see the embed block in the visual editor.

<!-- wp:paragraph -->
<p><a href="#03T" data-type="internal" data-id="#03T">Test</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Videos</h2>
<!-- /wp:heading -->

<!-- wp:embed {"url":"https://player.vimeo.com/video/25323516?","type":"video","providerNameSlug":"vimeo","responsive":true,"className":"wp-embed-aspect-4-3 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-video is-provider-vimeo wp-block-embed-vimeo wp-embed-aspect-4-3 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper" id="03T">
https://player.vimeo.com/video/25323516
</div></figure>
<!-- /wp:embed -->

Any ideas on what could be fixed to insert the anchor link and see it visible in the visual editor?

Improve this question
2
  • blocks already have an anchor attribute, have you tried using that? Otherwise if you want to make a visible clickable link then you should insert a paragraph or a button with text, and turn the text into a link to that anchor, simply adding an id to a HTML tag doesn't give it a clickable visible link and there's no reason the editor would change that. Note that if you modify the HTML directly there's a very strong chance your block will either fail validation, or it'll be regenerated based on the block attributes in the HTML comment and the ID will vanish
    – Tom J Nowell ♦
    Feb 1 at 17:14
  • @TomJNowell Because of the embed element - I cannot see what the block for the anchor attribute (that's why I tried editing the HTML) wpmarmite.com/en/wordpress-anchor-links
    – Andrew Ryan
    Feb 1 at 17:18

1 Answer 1

Reset to default
3

Editing the raw HTML isn't going to work, a worst case scenario is it fails block validation when reopened in the editor and your edits get replaced automatically.

Instead, use the anchor box under the advanced panel. Since the HTML of an embed usually comes from a 3rd party via OEmbed, you can wrap the embed block inside a group block, and give the group block the anchor.

E.g.

enter image description here

Note that "group block" is just a standard block of type group that comes with core. There are multiple ways to create them but they are just blocks that contain things, and can be found in the block picker/inserter. Any block that contains things/has children and can take an anchor attribute will also work. E.g. Column blocks, cover images, etc but group blocks are the simplest and least intrusive:

enter image description here

Remember, when building things with lego bricks you don't get a chisel out and carve the shape you want into the brick, you build what you want out of many smaller blocks. WP blocks are the same, don't modify blocks, combine and use them as building bricks to create what you actually want.

Improve this answer
1
  • the name of the block is group block, group blocks just act as containers, analogous to a generic <div> tag, just search for group in the block inserter and add it, then put an embed block inside it
    – Tom J Nowell ♦
    Feb 1 at 17:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.