Remove the image block inline style max-width

[Luehrsen]

Description

As written in #5745 the hardcoded max-width 50% are sometimes problematic if your content width != 100%.

How Has This Been Tested?

This has been tested locally.

Screenshots (jpeg or gifs if applicable):

Types of changes

Removed the 50% from the block markup.

ToDo:

• Introduce an appropriate max-width solution with CSS

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code has proper inline documentation.

[youknowriad]

There's been a lot of back and forth about these, not sure about the last state of the discussion about these styles. cc @iseulde @jasmussen

[samikeijonen]

I'd go with this solution and themers can more easily overwrite the styles.

[jasmussen]

I'm also unsure what the best approach is, there are many good approaches namely. But I know @aduth and @mtias have refined thoughts.

[aduth]

I'm a bit confused by the original approach in general:

• It's not dynamic, why does it need to be inline?
• Why do we impose a max-width at all?

To me, it's theme territory. If that means as overridable style at minimum, changes here seem reasonable enough.

But it's backwards-incompatible. I expect it could invalidate existing floated blocks. Might need deprecated migration.

[samikeijonen]

But it's backwards-incompatible. I expect it could invalidate existing floated blocks. Might need deprecated migration.

I don't think that's important in this point. One option is to add the same style rule in the front-end stylesheet.

[Luehrsen]

I don't think that's important in this point. One option is to add the same style rule in the front-end stylesheet.

@samikeijonen Isn't this PR already part of the front-end stylesheet due to the added rules in the style.scss?

@aduth What makes you fear the conflict with floated blocks? The rules should be consistent, but just less specific. (Or down in hierarchy by 2 levels.)

[samikeijonen]

@Luehrsen Ah sorry, didn't noticed that.

[aduth]

The conflict is the invalidation.

1. Create a floated image block in master or the latest release
2. Checkout this branch
3. Refresh the page

validation.js:148 Block validation: Block validation failed for `core/image` (Object).

Expected:

<figure class="wp-block-image alignright"><img src="http://editor.test/wp-content/uploads/2018/03/image.jpeg" alt="" class="wp-image-9710"/></figure>

Actual:

<figure class="wp-block-image alignright" style="max-width:50%"><img src="http://editor.test/wp-content/uploads/2018/03/image.jpeg" alt="" class="wp-image-9710" /></figure>

[jasmussen]

Apologies for duplicating work, but I just created a PR that essentially does the same as this one, but a few other things, in #5973. The end goal is the same.

I don't know which branch is best to proceed with, this one or my branch? I will be sure to add props, @Luehrsen, if we go with the branch I created. What do you think? Any thoughts, @aduth?

[Luehrsen]

@jasmussen As long as it gets done, I'm fine with any branch. :D

[karmatosed]

As similar things seem to be going on in different branches, lets close this for now. We can always reopen.