Heading Block: Enable Automatic Anchor Tags Generation

· Ricky Lee
Heading Block: Enable Automatic Anchor Tags Generation

The WordPress block editor (Gutenberg) comes with many powerful features, but one that’s often overlooked is the ability to automatically generate HTML anchors for your blocks. In this tutorial, I’ll show you how to enable this feature using the block_editor_settings_all filter hook.

What Are Block Anchors?

Block anchors allow you to create unique HTML IDs for your blocks, making it easier to:

  • Link directly to specific sections of your content
  • Create smooth scroll navigation
  • Style specific blocks with CSS
  • Enhance accessibility with proper document structure

Enabling Generate Anchors

To enable automatic anchor generation for your blocks, add the following code to your theme’s functions.php file or in a custom plugin:

This simple code does two important things:

  1. Creates a function that modifies the block editor settings
  2. Hooks into WordPress using the block_editor_settings_all filter

How It Works

When you enable generateAnchors, the block editor will automatically:

  1. Generate unique IDs for blocks that support anchors
  2. Add these IDs to the HTML output of your blocks
  3. Make the anchor field visible in the block sidebar

Using Block Anchors

Once enabled, you can:

1. Create Manual Anchors

  • Select a block
  • Open the block settings sidebar
  • Look for the “Advanced” panel
  • Enter a custom HTML anchor

2. Let WordPress Generate Automatic Anchors

  • The system will create unique IDs based on block content
  • These IDs follow proper HTML naming conventions
  • Duplicates are automatically handled

Example Usage

After enabling anchor generation, your blocks will output HTML like this:

<h2 id="my-custom-heading">My Heading</h2>

You can then link to these sections using standard HTML anchors:

<a href="#my-custom-heading">My Block Section</a>

Benefits of Using Anchors

  1. Improved Navigation
  • Create table of contents
  • Enable jump links within long content
  • Better user experience for long-form content
  1. Enhanced SEO
  • More structured content
  • Better internal linking
  • Improved crawlability
  1. Accessibility
  • Clearer document structure
  • Better navigation for screen readers
  • Improved keyboard navigation

Troubleshooting

If you don’t see the anchor option:

  1. Make sure the code is properly added to your theme
  2. Check if your theme supports block editor features
  3. Verify the block type supports anchors

Security Considerations

The generated anchors are automatically sanitized by WordPress to ensure they:

  • Contain only valid characters
  • Start with a letter
  • Don’t contain spaces
  • Follow HTML ID naming conventions

Conclusion

Enabling automatic anchor generation in the WordPress block editor is a simple yet powerful way to enhance your content structure and navigation. With just a few lines of code, you can add this functionality to your WordPress site and improve the overall user experience.

Remember to test the feature thoroughly with your theme and make sure it works well with your existing styles and functionality.