Gutenberg navigation menu widget block

  • SJW

    (@whitsey)


    1 month, 2 weeks ago

    I have registered my widget in functions with a title: h3:

    register_sidebar( array(
    		'name' => esc_html__( 'First Footer Widget Area', 'omg' ),
    		'id' => 'sidebar-footer',
    		'description' => esc_html__( 'Appears in the footer sidebar', 'omg' ),
    		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    		'after_widget' => '</aside>',
    		'before_title' => '<h3 class="widget-title">',
    		'after_title' => '</h3>'
    	) );

    But when using Gutenberg and adding a navigation menu into my widget, it completely ignores my register_sidebar syntax and Puts the title inside a h2 with a different class:

    <h2 class="widgettitle">About Us</h2>

    How do I get gutenberg to honour my register_sidebar syntax OR force it to use a h3

Viewing 2 replies - 1 through 2 (of 2 total)
  • Wajid Ali

    (@wajid-ali-tabassum)

    1 month, 2 weeks ago

    What you’re seeing is expected behavior with the Block Editor (Gutenberg), not a bug in your register_sidebar() code. Why your <h3> is ignored

    Your before_title / after_title args only apply to classic widgets. When you add a Navigation block (or any block) inside a widget area, WordPress treats that sidebar as a block widget area, and:

    • The markup is controlled by the block itself, not register_sidebar()
    • The Navigation block outputs its own heading (<h2 class="widgettitle">) by default
    • Your PHP wrapper (before_title => '<h3>') is bypassed entirely

    Proper ways to handle this (recommended approaches)

    1. ✅ Use CSS (safest + simplest)

    If your goal is just styling/SEO hierarchy, override it with CSS:

    .widgettitle {
        font-size: 1.17em; /* mimic h3 */
    }

    Or more explicitly:

    .widgettitle {
        all: unset;
        display: block;
        font-size: 1.17em;
        font-weight: bold;
    }

    2. ✅ Filter block output (developer-level control)

    You can hook into block rendering and modify the heading tag:

    add_filter( 'render_block', function( $block_content, $block ) {
        if ( isset( $block['blockName'] ) && $block['blockName'] === 'core/navigation' ) {
            $block_content = preg_replace(
                '/<h2 class="widgettitle">(.*?)<\/h2>/',
                '<h3 class="widget-title">$1</h3>',
                $block_content
            );
        }
        return $block_content;
    }, 10, 2 );

    ⚠️ Use carefully:

    • This is a global filter
    • Regex on HTML isn’t perfect
    • Test performance and edge cases

    3. ✅ Use a block theme / theme.json (modern approach)

    If you’re working in a block theme, control heading styles globally:

    {
      "styles": {
        "elements": {
          "heading": {
            "typography": {
              "fontSize": "1.17rem"
            }
          }
        }
      }
    }

    4. ❌ Not recommended: forcing Gutenberg to respect register_sidebar()

    There is no official way to make block widgets honor:

    'before_title' => '<h3>'

    That API is part of the Classic Widgets system, and Gutenberg intentionally overrides it.

    Best-practice mindset

    • Don’t fight Gutenberg’s markup
    • Either style it via CSS or hook into block rendering
    • For long-term compatibility, lean toward block-based customization instead of legacy widget filters

    Conclusion

    This is expected with block widgets. The before_title / after_title args only apply to classic widgets. Gutenberg blocks (like Navigation) render their own markup and ignore register_sidebar() wrappers.

    If you need to change <h2> to <h3>, either:

    • Override via CSS (recommended), or
    • Use the render_block filter to modify output programmatically.

    There’s currently no native way to force block widgets to respect register_sidebar() title markup.

    sarahlauren0471

    (@sarahlauren0471)

    1 month, 2 weeks ago

    Before you go any further, make sure you’ve updated your plugins and themes to the latest versions, clear your browser’s cache and cookies and re-log in to your WordPress dashboard. If your post doesn’t show up right away, please be patient. With a release often comes a higher than normal post volume, more posts get flagged as spam by our auto-spam tool. We’re working hard to keep the queue clear, but making multiple posts slows us down, as we have to go back and check if you already posted. Post once.

Viewing 2 replies - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.