fix: 🐛 Correct issue of images breaking out of content area

[Herm71]

What does this do/fix?

Fixes #257, which describes a 🐛 wherein images that are aligned left or right (floated) break out of their binding box

QA

Links to relevant issues

• UCSC's discussion
• Gutenberg discussion

Links to deployed, scaffolded demo:
N/A

Screenshots/video:

Before

After

Again

Tests

Does this have tests?

• Yes
• No, this doesn't need tests because it's a style change.
• No, I need help figuring out how to write the tests.

[knice]

@Herm71 This looks like it will fix the problem. One question: you've included the code in the image.css block file, but the two rules as written are not specific to the image block. Seems like that will cause an issue when there is an image on a page and another block with .alignleft or .alignright classes.

If we think this is the behavior we want for any block that gets those classes (as shown here), these styles should live in a global CSS file, not a block-specific file.

[knice]

@Herm71 ⬆️

[Herm71]

Ohh, I see. Yeah, I was thinking only images, and I saw we had that css already in there, so that's where I put it.