Image block: change to custom style selector hierarchy breaks frontend display on classic themes

[glendaviesnz]

Description

The change to remove the extra alignment wrapper on image blocks breaks some image styling options in the frontend for non theme.json themes when an Image block has both alignment and a custom style applied.

The change was designed to be backwards compatible with classic themes by adding the wrapper back in the frontend for these themes. However, this change only adds the wp-block-image class to this wrapper, and some themes and plugins rely on any custom classes also being applied to the same element, eg. .wp-block-image.is-style-rounded.

For themes relying on the core css for the is-style-rounded style this has been fixed here.

The TwentyTwentyOne theme has its own custom image styles that are broken by this change, and it appears that there are approx 12 plugins and 59 themes that might be affected in the public repo.

Step-by-step reproduction instructions

1. With TwentyTwentyOne theme selected add an Image
2. Apply right alignment and one of the custom Borders or Frame style
3. Save post and view in the frontend and notice that the styles do not display

Screenshots, screen recording, code snippet

https://user-images.githubusercontent.com/3629020/157344357-b49ffd5e-d4c8-4cda-9815-8350c5f4a77b.mp4

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[glendaviesnz]

@youknowriad I wonder if it would be possible with some extra regex to move any is-style classes back up to the <div class="wp-block-image"> wrapper that is added back for classic themes? That way the only breaking change would be for themes/plugins that are expecting any custom classnames added via the block Additional CSS class(es) option to be on the wp-block-image div wrapper - which I expect would be much more of an edge case.

[ocean90]

That way the only breaking change would be for themes/plugins that are expecting any custom classnames added via the block Additional CSS class(es) option to be on the wp-block-image div wrapper - which I expect would be much more of an edge case.

Don't we have access to the block attributes in the render_block filter which would allow us to add them back too?

[youknowriad]

wonder if it would be possible with some extra regex to move any is-style classes back up to the

wrapper that is added back for classic themes?

is-style-* and custom classes are not different, they both use the className block attribute, so yeah, I think we should try to use @ocean90's suggestion to move all of these classNames on the wrapper 👍.

[glendaviesnz]

Don't we have access to the block attributes in the render_block filter which would allow us to add them back too?

🤦 thanks @ocean90, that is an obvious and easier option than trying to regex these! @youknowriad I have added a draft PR that uses this approach and it works in theory, but I have a couple of questions about it that I have left on the PR.