Slideshow Block: Fix Wide/Full Alignment

[ockham]

Fixes #17616. Carried over from WordPress/gutenberg#26552 so we have a short-term fix while waiting for that PR to land.

Changes proposed in this Pull Request:

Set max-width of .interface-interface-skeleton__editor to 100%, so that blocks cannot

exceed the editor boundaries and, when set to full width, gain a width of literally millions of pixels, making the editor unusable.

For more details, see WordPress/gutenberg#26552.

Jetpack product discussion

N/A

Does this pull request change what data or activity we track or use?

No.

Testing instructions:

Verify that #17616 is fixed.

Proposed changelog entry for your changes:

Set max-width of .interface-interface-skeleton__editor to 100% to fix wide/full alignment of Slideshow Block.

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello ockham! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D51956-code works as expected before merging this PR. Once this PR is merged, please commit the changes to WP.com. Thank you!
This revision will be updated with each commit to this PR

[jetpackbot]

Scheduled Jetpack release: November 10, 2020.
Scheduled code freeze: November 3, 2020

E2E results is available here (for debugging purposes): https://jetpack-e2e-dashboard.herokuapp.com/pr-17645

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

Generated by 🚫 dangerJS against fa3b674

[ockham]

Note: Let's add an e2e test to cover the Slideshow's full/wide alignment options to make sure we'd catch any regressions in the future.

[fullofcaffeine]

Tested in a local Jetpack instance with GB 9.2.2. Without this patch, the reported error happens. With this patch, setting the block to full-width works as expected ✔️

[jeyip]

Tests

Tested using local jetpack dev environment

Functionality

• The slideshow block does not disappear when selecting the full width setting
• The slideshow block full width setting behaves as expected
• Full width frontend block behaves as expected

Browsers

• Chrome
• Firefox
• Edge
• Safari

[jeyip]

I can confirm that this fixes the issue and doesn't appear to cause regressions in the interface layout or block width settings

[fullofcaffeine]

Thanks @jeyip!

[ockham]

Thanks Marcelo and Jeremy!

I'll go ahead and merge the WP.com counterpart, since we're seeing a steady influx of users running into this issue.

[jeherve]

r216021-wpcom

[jeherve]

Cherry-picked to branch-9.1 in f63e377

[Copons]

Hi @Automattic/good-mountain, I've got bad news!

WordPress/gutenberg#27622

[sirreal]

Thanks for flagging this @Copons.

I'm looking at my Atomic site with Gutenberg 9.5.1 and Jetpack 9.2 and it seems to include the fix.

Do we need to revert be7ab6e6f9952c815db59024eefd7b8af4e5411d before the next release?

CC: @jeherve it looks like the Gutenberg-side fix for this regressed in 9.5.

[Copons]

Thanks for looking into this y'all!

@sirreal you're right, the fix is included in 9.2 and the max-width now shows up for me on the latest master 🤔
I guess I was on an old/wonky JP master when I tested.

Also... I can't find where be7ab6e was merged... 😮
GH says:

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

So maybe we don't need to do anything JP-side?

[jeherve]

Yeah, I think we're all set. That commit is an orphan, I think it was created while testing this branch.