Gutenberg Button blocks are styled incorrectly in widget areas

The styles in /assets/css/src/_widgets.scss don’t account for Gutenberg Button blocks (which are technically anchor elements). For example, consider the following rule:

.widget-area a:not(.button) {
	color: var(--global-palette3);
	text-decoration: none;
	&:hover {
		color: var(--global-palette-highlight);
		text-decoration: underline;
	}
}

Because the :not() excludes only elements with the .button class, a Gutenberg Block button will be incorrectly styled as if it were a normal link.

There are a couple additional classes you should target to fix this:

– wp-element-button is the new standard class name applied to all front-end buttons (both literal button elements and links styled to look like buttons) rendered by core Gutenberg blocks (e.g. the Search block or Button block). However, it was only introduced quite recently (Gutenberg 13.4), and it is currently not applied retroactively to statically-rendered blocks (unless you open and resave the post they’re contained in).
– wp-block-button__link is a class applied to the <a> element of Button blocks. Note that you can’t just target wp-block-button because (for legacy reasons) each Button block has a <div> wrapper as its root element, so you’d be targeting the wrong element.

In short, everything that currently targets .button should probably also target .wp-element-button and wp-block-button__link.

For reference:

What’s new in Gutenberg 13.4? (8 June)

https://github.com/WordPress/gutenberg/pull/40260

https://github.com/WordPress/gutenberg/blob/34932d72320da970a7d7db39c2ca02d1c27b2bf4/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php#L98