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:
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;
}