When available, FilterSubmitButton should use the button class name provided by the elements API

[Aljullu]

Currently, the FilterSubmitButton component uses the wp-block-button__link class name to get styling from the theme. However, I don't think that class is intended to be used like that; I think it's a class specific to the button block.

As an alternative approach, Gutenberg is introducing the elements API (see WordPress/gutenberg#41753 and pdnLyh-1kY-p2), which will allow us to get a generic button class name that will apply theme styles.

In other words, I think we should check if @wordpress/block-editor includes the __experimentalGetElementClassName() function (that happens if the store has Gutenberg installed or is in WP >=6.1). If it does, we should get the class returned by __experimentalGetElementClassName( 'button' ) and use that one instead of wp-block-button__link.

• (Alternatively, we could pass the class from PHP so we don't need to import block-editor in the frontend)

What do you think @albarin @dinhtungdu?

[dinhtungdu]

However, I don't think that class is intended to be used like that; I think it's a class specific to the button block.

I agree.

As an alternative approach, Gutenberg is introducing the elements API (see WordPress/gutenberg#41753 and pdnLyh-1kY-p2), which will allow us to get a generic button class name that will apply theme styles.

That function will return wp-element-button for button. Here is the result when I swapped the wp-block-button__link by wp-element-button:

At this point, I think we have another question to answer: which button style should we use for filter buttons? Generic style or button link style?

The __experimentalGetElementClassName( 'button' ) returns only wp-element-button, so we still need to pass wp-block-button__link to it if we want to use the button link style. See the comment submit button.

• (Alternatively, we could pass the class from PHP so we don't need to import block-editor in the frontend)

I prefer this because block-editor shouldn't be used on the frontend.

[Aljullu]

The __experimentalGetElementClassName( 'button' ) returns only wp-element-button, so we still need to pass wp-block-button__link to it if we want to use the button link style. See the comment submit button.

Oh, good point, I didn't notice Gutenberg sets wp-block-button__link as well. I'm a bit confused by this, but it makes sense being aligned with them.

Given that the issue is now about making use of the Elements API without doing any other changes, I'm closing in favor of #6567.

Thanks for your feedback, @dinhtungdu!