Day 2 – Custom block #WP20

Prompt 2/20 from #WP20 From Blogs to Blocks I chose the “Develop” prompt:

‘Create a new block! … Post your block in a GitHub repo (or somewhere else that works for you), then share a link to your block (and maybe a description) in the comments.’

As it happened, I needed to create something today. The use case was when I needed to add an HTML anchor to a page. This functionality is readily available for most blocks, but unfortunately, the specific custom block pattern I had built didn’t have the option to add an HTML anchor. So, it may be a bit overengineered, but necessity dictated my actions. I created the block using ACF Pro, with a single custom field called “HTML Anchor.” This field is then outputted as:

<div id="test-anchor" class="dgwltd-block dgwltd-anchor"></div>

You can find the complete code on GitHub.

And this is what it looks like in the admin:

Screenshot of custom block in WordPress admin for a block that allows for a HTML anchor to be added to a page

Additional tip: If you need to offset the scroll margin, such as when you have a fixed header or simply want to add a little breathing space, you can accomplish this using a helpful utility. H/T to Andy Bell.

[id] {
  scroll-margin-top: 2ex;
arbitrarily assigned to WP20

Leave a Reply


No webmentions found.