Add ability to style and/or use a custom icon for responsive menu

[annezazu]

What problem does this address?

The responsive menu option for the navigation block currently comes with the ability to only use one icon.

What is your proposed solution?

Allow for the ability to either use different styled icons or use your own (depending). Doing so will allow for greater customization and unification of designs folks are trying to implement.

[Andrew-Starr]

Yes please!

My thoughts on this, some of which may or may not be possible. Just putting them out there.

Make the returned icon filterable.

Options in the block controls to select a different icon.

Option to use the Button block instead. I know some who dislike hamburger icons and would prefer to have a button, that could then use any text they like such as 'Menu' etc.

[jasmussen]

We've discussed at a high level some ideas on how we can bring additional customization to the icon in this PR. The basic idea is to add a "card" preview to the inspector, similar to that of Global Styles, which can be clicked to surface additional customization options. This is a first draft mockup of how that might work:

[annezazu]

Noting that this came up in the latest call for testing for the FSE Outreach Program:

One missing piece of the header I was attempting to replicate was a mobile menu at the far right of the layout. WordPress’s mobile Navigation menu icon provides no customization options. Users can customize the overall background and text color but not target the button directly.

Updating the title of this issue to more clearly reflect the description too :)

[LukaszJaro]

Also I don't see option to add inline text to the icon, either right, left, below or top. It's either icon with no text or just text. Would also be nice if the "Menu" text can be edited.

[strarsis]

A filter for the theme would be great! Each theme can have its own custom icon/DOM/provision for the button. Currently the icon is hardcoded: https://github.com/WordPress/gutenberg/blob/33d84b036592a5bf31af05b7710f3b2b14163dc4/packages/block-library/src/navigation/index.php#L612 Adding a simple filter here allows themes to change the icon for the frontend.

[dennisheiden]

• customizable burger and close icon
• adding text left / right to the icon

Hint for everyone else looking for a solution now: Use CSS to hide the SVG inside the button and add your SVG e.g. via :before. Don't forget do add width / height dimensions to the button itself.

[kevin940726]

I'm implementing a partial solution in https://github.com/WordPress/gutenberg/issues/37930#issuecomment-1012965606. Will link the PR once it's out.

[jasmussen]

Thanks for looking at this! Just coming back to this one, we might want to use the emerging "settings icon" pattern that Typography uses for "custom":

It could look like this:

[kevin940726]

I found out a couple of things that I think might be the dealbreakers for the "uploading custom icons" feature:

1. We have some CSS defined to override the icon’s color (fill), so it can show a white icon on a dark background, for instance. This means the icon should only be an svg file and rendered inline.
2. WordPress traditionally doesn’t allow uploading SVG files by default. We can bypass the media-upload util and just render it inline, but it might have security concerns (XSS).

I’m not sure if this is still worth doing in the block settings anymore. Maybe a preset and a PHP filter would be enough to cover most of the use cases?

[jasmussen]

Just being able to choose between a couple of stock icons like the ones suggested, is a great first step worth doing.

Uploading a PNG file, even if it can't be re-colored, or even allowing pasting some custom SVG code, that could still be interesting. But it's nothing that need block the main feature.

[dennisheiden]

Just being able to choose between a couple of stock icons like the ones suggested, is a great first step worth doing.

Uploading a PNG file, even if it can't be re-colored, or even allowing pasting some custom SVG code, that could still be interesting. But it's nothing that need block the main feature.

There exist some plugins which bring SVG support to the media lib. IMO this is the way most people get SVGs into their WP sites. Just allow to pick a custom icon / image from media lib would solve the main need to replace the native icon. Coloring could be done either on graphic tool side or through custom css. Having a set of some preset icons with coloring options would be a nice plus for less experienced users I guess.

[annezazu]

As part of the seventeenth FSE Outreach Program call for testing, the following feedback was shared:

I also was hoping to have an option for having the text “Menu” show with the icon, and not just icon-only options.

This touches on this issue as well around customizing the text: https://github.com/WordPress/gutenberg/issues/40580

[Marc-pi]

appart from being able to set custom svg icon, there is also the critical need to manage

the icon size / color / border / border-radius i.e to style the icon.

Actually the burger icon is displayed with a 24px/24px default size, and there is no way to enlarge it from the nav block settings.

Please also note that if we enlarge with css the icon size, it is blured !

seems there is also an svg design issue.

[jasmussen]

Actually the burger icon is displayed with a 24px/24px default size, and there is no way to enlarge it from the nav block settings.

Can you speak to this a bit? I know that even vector-based SVGs such as the icon used for the overlay menu is designed to an initial pixel grid. But in being vector based, it should at least scale better than pixels.

[Marc-pi]

yep, if anyone is stucked with this bluring issue, we have a use a integer multiple of 24px to not have a blur i set 48px on open/close icons, that's better, thanks @jasmussen

hope the nav will be improved very soon on the nav icon styling...included the icon sizes.

[strarsis]

+1! I currently have to parse the navigation block HTML and replace the <svg> element with another one.

[strarsis]

Navigation icon customization would be still great, but it is now possible to select between two different icons (one with two lines and one with three lines). Select the icon in the settings sidebar for a selected navigation block, then a menu icon can be selected.

[carolinan]

Upstream ticket about allowing SVG uploads

[getdave]

Now tracked in https://github.com/WordPress/gutenberg/issues/49156

[getdave]

I raised a canonical issue to solve this across the editor https://github.com/WordPress/gutenberg/issues/51563

Update: the Issue still stands, but there is now also a formalised Github Discussion about a new API to facilitate icons.

[annezazu]

With four weeks left ahead of 6.4 beta 1, I'm removing this from the board due to lack of progress/updates.

[getdave]

This won't happen for 6.4. The requirements here are:

1. Add an API for registering icons in the block editor.
2. Register some icons for the Nav block.
3. Make those icons available in the UI.

Step 1 is a significant effort that will likely take a while to land.

The best way to advance this feature request is to participate in the active discussion regarding Icon Registration.

[asafm7]

In the meantime, it might be a good case for the WP_HTML_Tag_Processor class:

add_filter('render_block_core/navigation', 'filter_navigation_block_output', 10, 2);

function filter_navigation_block_output($output, $block) {
    $tags = new WP_HTML_Tag_Processor($output);

    if ($tags->next_tag(array('tag_name' => 'button', 'class' => 'wp-block-navigation__responsive-container-open'))) {

        if ($tags->next_tag(array('tag_name' => 'svg'))) {

            if ($tags->next_tag(array('tag_name' => 'path'))) {
                // NOTE: Google Material Symbol: Manage Search https://fonts.google.com/icons?selected=Material+Symbols+Outlined:manage_search:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=search 
                $tags->set_attribute('d', 'M80-200v-80h400v80H80Zm0-200v-80h200v80H80Zm0-200v-80h200v80H80Zm744 400L670-354q-24 17-52.5 25.5T560-320q-83 0-141.5-58.5T360-520q0-83 58.5-141.5T560-720q83 0 141.5 58.5T760-520q0 29-8.5 57.5T726-410l154 154-56 56ZM560-400q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Z');
            }
        }
    }

    $output = $tags->get_updated_html();

    return $output;
}