---
title: "Day 2 - Custom block #WP20"
date: 2023-05-10T10:56:52Z
modified: 2023-05-23T09:09:50Z
permalink: "https://dogwonder.co.uk/2023/05/day-2-custom-block-wp20/"
type: post
status: publish
excerpt: ""
wpid: 4553
categories:
  - WP20
---

[Prompt 2/20](https://make.wordpress.org/marketing/2023/05/09/day-2-wp20-from-blogs-to-blocks/) from [\#WP20 From Blogs to Blocks](https://make.wordpress.org/marketing/2023/05/09/day-2-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](https://wordpress.org/documentation/article/page-jumps/), 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](https://github.com/dogwonder/dgwltd-plugin/tree/1dc8a7ff7c655599f27e01ee554012d5692e3d39/src/blocks/anchor).

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](https://i0.wp.com/dogwonder.co.uk/wp-content/uploads/2023/05/CleanShot-2023-05-10-at-12.07.09%402x.png?resize=640%2C180&ssl=1)

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](https://piccalil.li/quick-tip/add-scroll-margin-to-all-elements-which-can-be-targeted/).


```
[id] {
  scroll-margin-top: 2ex;
}
```