Enable JSON formatting of mobile/hamburger menu button

[likethegoddess]

What problem does this address?

The navigation block defaults to a 24px by 24px mobile/menu button in full site editing themes. A 24px square button is small it is hard to operate. It also needs to be changed to meet WCAG 2.1 AAA accessibility standards.

Currently, CSS is required to enlarge the button in full site editing themes.

What is your proposed solution?

Enable formatting of the mobile/hamburger menu button in JSON, including changing size.

[skorasaurus]

Hi,

I agree; that is too small; I thought there was an issue about the size of the icon being too small but I can't find it at the moment.

Regarding customizing the formatting of the icon for navigation block, that has been reported in #37930

[likethegoddess]

Thanks, @skorasaurus, I looked for an issue about the icon being too small too. Wasn't able to find it. I would be happy to open that issue too if it doesn't already exist.

[justintadlock]

You can customize this via theme.json (as CSS) (if anyone needs to in the meantime):

{
	"styles": {
		"blocks": {
			"core/navigation": {
				"css": "& .wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; } & .wp-block-navigation__responsive-container-open svg { width: 30px; height: 30px; }"
			}
		}
	}
}

Agreed that it'd be nice to have a way to specifically customize its design through dedicated properties.