Allow developers to add custom SVG for navigation open and close icons

[j-mccarthy]

What problem does this address?

During developing a block theme, I came to add a site header and navigation. I added navigation using the new navigation block. The style of the svg in the navigation doesn't work well with my themes design and I want to change it. I looked into the server rendering of the block and was frustrated to see I was unable to switch out the svg for my own using a filter.

Would it be possible to filter the returned svg html. Is there a reason it shouldn't be possible or is there another way to do this that's better than adding a filter?

What is your proposed solution?

I'm not 100% up to speed with code standard/style in the block rendering files so this is just to illustrate the above and proposed solution.

/**
 * Returns responsive menu trigger SVG icon.
 * 
 * @return string
 */
function gutenberg_block_core_navigation_render_responsive_menu_trigger_icon() {
	return apply_filters( 'gutenberg_block_core_navigation_render_responsive_menu_trigger_icon', '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg>' );
}

Followed by the below in the gutenberg_render_block_core_navigation function.

$responsive_container_markup = sprintf(
	'<button aria-expanded="false" aria-haspopup="true" aria-label="%3$s" class="wp-block-navigation__responsive-container-open" data-micromodal-trigger="modal-%1$s">%5$s</button>
		<div class="wp-block-navigation__responsive-container" id="modal-%1$s" aria-hidden="true">
			<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
				<div class="wp-block-navigation__responsive-dialog" role="dialog" aria-modal="true" aria-labelledby="modal-%1$s-title" >
						<button aria-label="%4$s" data-micromodal-close class="wp-block-navigation__responsive-container-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="img" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg></button>
					<div class="wp-block-navigation__responsive-container-content" id="modal-%1$s-content">
						<ul class="wp-block-navigation__container">%2$s</ul>
					</div>
				</div>
			</div>
		</div>',
	$modal_unique_id,
	$inner_blocks_html,
	__( 'Open menu' ), // Open button label.
	__( 'Close menu' ), // Close button label.
        gutenberg_block_core_navigation_render_responsive_menu_trigger_icon()
);

[Sandstromer]

I previously experimented with setting the default svg to display:none and using pseudo :before/:after to display a custom icon. It wasn't pretty and not at all ideal.

Making the svg icon filterable would be fantastic!

[j-mccarthy]

@Sandstromer For sure! Using pseudo elements is a viable workaround. Would be great to not have to.

Correct me if I'm wrong but I believe we loose the ability to access the elements of the svg by adding it via background-image or content? If so, we miss out on our opportunity to run further customisations via CSS.

[skorasaurus]

There's quite a bit more discussion about this at #37930 ; so closing this to ensure discussion is in one central.