Skip to content

OpenTable: Allow the various block styles to be centre aligned#14633

Merged
pablinos merged 2 commits intomasterfrom
fix/opentable-alignment
Feb 12, 2020
Merged

OpenTable: Allow the various block styles to be centre aligned#14633
pablinos merged 2 commits intomasterfrom
fix/opentable-alignment

Conversation

@pablinos
Copy link
Copy Markdown
Contributor

@pablinos pablinos commented Feb 11, 2020 •
edited
Loading

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

@pablinos
Allow the various block styles to be centre aligned
e9e713b 
The centre alignment wasn't working as the iframe is set to 100% and its
content was left-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.
@pablinos pablinos added [Status] Needs Review This PR is ready for review. [Block] OpenTable labels Feb 11, 2020
@pablinos pablinos requested review from a team February 11, 2020 11:43
@pablinos pablinos self-assigned this Feb 11, 2020
@matticbot
Copy link
Copy Markdown
Contributor

matticbot commented Feb 11, 2020

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
Copy link
Copy Markdown
Collaborator

jetpackbot commented Feb 11, 2020 •
edited
Loading

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
Copy link
Copy Markdown
Member

scruffian commented Feb 11, 2020

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

@Copons
Copy link
Copy Markdown
Contributor

Copons commented Feb 11, 2020 •
edited
Loading

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
Copy link
Copy Markdown
Contributor

matticbot commented Feb 11, 2020

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

@scruffian
Copy link
Copy Markdown
Member

scruffian commented Feb 11, 2020

@Copons I did it a different way in fd485d5

@Copons
Copy link
Copy Markdown
Contributor

Copons commented Feb 11, 2020

@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
Copy link
Copy Markdown
Contributor Author

pablinos commented Feb 11, 2020

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

@pablinos
Copy link
Copy Markdown
Contributor Author

pablinos commented Feb 11, 2020

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
Copy link
Copy Markdown
Member

scruffian commented Feb 12, 2020

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

jeherve
jeherve approved these changes Feb 12, 2020
View reviewed changes
Copy link
Copy Markdown
Member

@jeherve jeherve left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems to work well in my tests. 👍

@jeherve jeherve added [Status] Ready to Merge Go ahead, you can push that green button! and removed [Status] Needs Review This PR is ready for review. labels Feb 12, 2020
@jeherve jeherve added this to the 8.3 milestone Feb 12, 2020
@pablinos pablinos merged commit 51e6669 into master Feb 12, 2020
@pablinos pablinos deleted the fix/opentable-alignment branch February 12, 2020 19:13
@matticbot matticbot added [Status] Needs Changelog and removed [Status] Ready to Merge Go ahead, you can push that green button! labels Feb 12, 2020
@scruffian
Copy link
Copy Markdown
Member

scruffian commented Feb 14, 2020

r202886-wpcom

jeherve added a commit that referenced this pull request Feb 25, 2020
@jeherve
Changelog: add #14633
7dba0b6
jeherve added a commit that referenced this pull request Feb 25, 2020
@jeherve
Changelog: 8.3 running changelog (#14642)
8797bea 
* 8.3 release: changelog

* Changelog: add #14516

* Changelog: add #14574

* Bring in changes from 8.2.1 and 8.2.2

* Update stable version

* Bring in 8.2.3 changes

* Changelog: add #14714

* Changelog: add #14639

* Changelog: add #14678

* Changelog: add #14673

* Changelog: add #14687

* Changelog: add #14704

* Changelog: add #14702

* Changelog: add #14541

* Changelog: add #14657

* Changelog: add #14622

* Changelog: add #14582

* Changelog: add #14638

* Changelog: add #14633

* Changelog: add #14571

* Changelog: add #14592

* Changelog: add #14539

* Changelog: add #14514

* Changelog: add #14643

* Changelog: add #14494

* Changelog: add #13739

* Changelog: add #14707

* Changelog: add #14736

* Changelog: add #14706

* Changelog: add #14730

* Changelog: add #14685

* Changelog: add #14727

* Changelog: add #14711

* Changelog: add #14742

* Changelog: add #14746

* Changelog: add #14725

* Changelog: add #13999

* Changelog: add #14740

* Changelog: add #14759

* Changelog: add #14703

* Changelog: add #14753

* Changelog: add #14754

* Changelog: add #14645

* Cahngelog: add #14599
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@jeherve jeherve jeherve approved these changes

@Copons Copons Copons approved these changes

Assignees

@pablinos pablinos

Labels

[Block] OpenTable Touches WP.com Files

Projects

None yet

Milestone

8.3

Development

Successfully merging this pull request may close these issues.

6 participants

@pablinos @matticbot @jetpackbot @scruffian @Copons @jeherve