Back to Community
Home / Community / Plugin → Gutenberg

Why Are My Gutenberg Buttons Acting Strangely? Common Issues and Solutions

18 threads Sep 9, 2025 Plugin → Gutenberg

Content

Buttons are a fundamental part of web design, but when working with the Gutenberg block editor, they can sometimes behave in unexpected ways. Based on common community reports, this guide covers the most frequent button-related issues and how to resolve them.

1. The Case of the Reappearing or Duplicating Button

One of the most perplexing issues is when a deleted button mysteriously reappears after saving, refreshing, or navigating away from the page. This is almost always caused by one of two things:

  • Reusable Block Confusion: If your button was part of a Reusable Block, deleting it from one instance will delete it from every instance across your site. This is the intended behavior of Reusable Blocks, which stay in sync. To edit a single instance independently, you must first convert the Reusable Block back to a regular block.
  • Theme or Plugin Conflict: In some cases, a theme (like Astra) or a plugin might be injecting template content. To diagnose this, temporarily switch to a default theme (like Twenty Twenty-Four) and disable all plugins. If the issue stops, reactivate them one by one to find the culprit.

2. The Unwanted Button Underline That Won't Go Away

You've added CSS like text-decoration: none; to your button, but a stubborn underline remains. This is a classic case of CSS specificity. Your theme's stylesheet likely has a more specific rule that is overriding your custom CSS.

Solution: You need to write a CSS rule that is more specific than your theme's. For example, if your theme styles all links in the post content (.entry-content a { text-decoration: underline; }), you must explicitly exclude button links.

.entry-content a:not(.wp-block-button__link) {
    text-decoration: underline;
}

.wp-block-button__link {
    text-decoration: none !important;
}

Add this code to your theme's "Additional CSS" section or a custom CSS plugin.

3. Understanding the "Deprecated" Button Block

You may see a message that the single "Button" block is deprecated. Don't panic! This does not mean the block is gone. The Gutenberg team merged the single Button block into the multi-button "Buttons" block container for better organization. You can still add a single button; it will simply be placed inside a "Buttons" block container automatically.

4. Adding rel="nofollow" to Button Links

The block interface does not have a built-in option for adding rel attributes like nofollow. However, you can add them manually without causing a validation error.

Solution: Switch to the Code Editor view (not the HTML view within a block). Locate the button link and add rel="nofollow" (or rel="nofollow noopener") to the <a> tag. Switching back to the visual editor should preserve the change without an error, as confirmed in WordPress 6.6.

5. Buttons Disappearing from the Editor View

If you see an error message like "There are no blocks in this group, please add one" but the buttons display fine on the front end, the issue is often related to using a third-party block plugin (like Stackable) inside a Template Part. A temporary conflict between the plugin and the site editor can cause this visual glitch. Try saving the reusable block again or checking for updates to the block plugin.

Conclusion

Most button oddities in Gutenberg stem from a few common sources: the nature of Reusable Blocks, CSS specificity wars, or conflicts with themes or plugins. The first steps in troubleshooting should always be to test with a default theme and all plugins disabled. This will help you quickly identify the root of the problem and get your buttons working as intended.

Related Support Threads Support