OpenTable: Allow the various block styles to be centre aligned

[pablinos]

The centre alignment wasn't working as the iframe is set to 100% and its
content was left-aligned.

Changes proposed in this Pull Request:

This change adds CSS to fix the width of the iframe when the embed is centre aligned. The width of the iframe is getting set by the OpenTable embed JS code, so in order to override it, we need to use !important. That's not ideal, but I think as it's isolated, it should be ok.

Is this a new feature or does it add/remove features to an existing part of Jetpack?

This is a bug fix to a new feature

Testing instructions:

• Add on OpenTable block
• Set the alignment to centre
• Check that the block is centred in the various styles. N.B. the wide style is larger than the main content column of TwentyTwenty, and so can't be centred.

Proposed changelog entry for your changes:

No changelog entry necessary.
As this has moved milestone it probably does need a changelog entry now. How about:

Centre alignment fixed for the OpenTable block

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello pablinos! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer, review, and approve D38695-code before merging this PR. Thank you!

[jetpackbot]

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.

Scheduled Jetpack release: March 3, 2020.
Scheduled code freeze: February 25, 2020

Generated by 🚫 dangerJS against fd485d5

[scruffian]

This works for me, but I wonder if we should also get it working in the editor?

[Copons]

This works for me, but I wonder if we should also get it working in the editor?

+1

It's really annoying when editor and front end don't look the same.
I gave it a quick try, and something like this should work:

[data-type='jetpack/opentable'][data-align='center'] iframe {
	margin: 0 auto;
	width: 224px !important;
}

EDIT: or... what @scruffian did in fd485d5 😄

[matticbot]

pablinos, Your synced wpcom patch D38695-code has been updated.

[scruffian]

@Copons I did it a different way in fd485d5

[Copons]

@Copons I did it a different way in fd485d5

Yup, I didn't realize we didn't set the align class in the editor. 👍

[pablinos]

That's weird, it was working in the editor for me!

[pablinos]

Ah, so the centre alignment gets added as a data attribute to a parent div. I think what happened was that I changed the CSS so we only set the width when it's centre aligned. We could:

• change that and set the width all the time
• add some rules that include .block-editor-block-list__block[data-align="center"] for the editor
• leave it as it is with an extra alignment class added to the edit component

[scruffian]

IMO we should make the editor and the frontend as close to each other as possible.

[jeherve]

Seems to work well in my tests. 👍

[scruffian]

r202886-wpcom