Button 2: Fancy class causes invalid block content error

[KokkieH]

Steps to replicate

1. Add an image block and insert an image
2. Edit block in HTML mode, and add class fancy to the class attribute for the img tag.

Result

The block shows an invalid content warning which only goes away if the block is converted to an HTML block instead. The styling is replied to the image regardless, though.

Expected

For no errors to appear, and ideally for the styling to even be visible in the editor itself.

• User report: https://en.forums.wordpress.com/topic/block-editing-2/#post-3217078
• User's site: https://abooknbrew2.wordpress.com/reviews/, though they've since returned to the classic editor. I was able to replicate this on a test site.

Should we update the instructions at https://button2demo.wordpress.com/fancy-image-corners/ to explain how to do this in the block editor? As the html for an image block is a bit different from the classic editor HTML shown there.

[laurelfulford]

@KokkieH Thanks for the report!

The block shows an invalid content warning which only goes away if the block is converted to an HTML block instead.

Were you able to recreate just the error with another theme? This doesn't seem like it would be specific to Button 2, since its block editor support is really standard.

[KokkieH]

Hmm, I didn't think to test, as this class is specifically styled for Button, but you make a good point - someone may well want to add their own classes to blocks to then style with custom CSS, in which case it's causing an error with other themes as well, yes.

Looks like this happens in Core as well, and I've found a possibly related issue in WordPress/gutenberg#11054, so we can close this one, then as it's not a theme bug.

[laurelfulford]

Thanks for double-checking, @KokkieH!

I'm going to re-open this one, as it looks like Button 2 still doesn't have styles for the .fancy class in the editor -- I think this is a good suggestion to make sure the experience is truly WYSIWYG!

[laurelfulford]

Just adding a note for follow-up:

I've styled the 'fancy' class in the editor when applied to the Image Block, and added an option to the Image Block to apply a block style that looks the same. The docs should probably be updated, at least to reference the latter; leaving this open until that is done.

[laurelfulford]

I've added a one-liner and screenshot to the theme docs to cover this, so this issue should be good to close!