Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cover block: Use supports flag for block alignment #10758

Merged
merged 1 commit into from
Jan 7, 2019
Merged

Cover block: Use supports flag for block alignment #10758

merged 1 commit into from
Jan 7, 2019

Conversation

ZebulanStanphill
Copy link
Member

@ZebulanStanphill ZebulanStanphill commented Oct 18, 2018

Description

This PR updates the Cover block to use supports: { align } to add block alignment support, rather than the more manual method currently used in master. This is essentially just code optimization. There should be no functional changes from master.

Fixes: #12333

Related PRs

@ZebulanStanphill ZebulanStanphill changed the title Cover block: use supports flag for block alignment Cover block: Use supports flag for block alignment Oct 18, 2018
@chrisvanpatten
Copy link
Member

Does removing "align" as an attribute break validation of older block shapes?

@ZebulanStanphill
Copy link
Member Author

@chrisvanpatten No, because an align attribute is still being added behind-the-scenes by the supports flag. I tested with a cover block set to the wide alignment just to be sure, though.

@earnjam earnjam added [Block] Cover Affects the Cover Block - used to display content laid over a background image [Type] Code Quality Issues or PRs that relate to code quality labels Nov 2, 2018
@@ -81,6 +75,10 @@ export const settings = {

attributes: blockAttributes,

supports: {
align: [ 'left', 'center', 'right', 'wide', 'full' ],
Copy link
Member

Choose a reason for hiding this comment

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

Can we use align: true?

Copy link
Member Author

Choose a reason for hiding this comment

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

I thought making it more explicit would be better in case any more alignments are added in the future, but I'm fine with it being either way.

Copy link
Contributor

Choose a reason for hiding this comment

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

I'd prefer if we were consistent between blocks (I think we're using true elsewhere). Also, if we add a new alignment (or remove one), it will update automatically.

Copy link
Member Author

Choose a reason for hiding this comment

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

Alright, I'll change it to true, then. 🙂

@@ -34,9 +31,6 @@ const blockAttributes = {
url: {
type: 'string',
},
align: {
Copy link
Member

@jorgefilipecosta jorgefilipecosta Dec 17, 2018

Choose a reason for hiding this comment

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

We are removing align from blockAttributes variable. The deprecations rely on this variable so we need to add the attribute to the existing deprecations relying upon blockAttributes.

Copy link
Member Author

Choose a reason for hiding this comment

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

The align hook actually adds the align attribute itself, so the deprecations should be unaffected as the resulting attribute set would be identical to the current one with align manually defined:

https://github.com/WordPress/gutenberg/blob/master/packages/editor/src/hooks/align.js#L85

Copy link
Member Author

Choose a reason for hiding this comment

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

Actually, I think I'll go test it at some point later today/tomorrow just to make sure it isn't actually necessary. If it turns out I was misremembering, I'll update this PR to fix the deprecations. Thanks for pointing this out.

Copy link
Member Author

Choose a reason for hiding this comment

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

@jorgefilipecosta Alright, I just tested to see if aligned Cover blocks from Gutenberg 4.7.0 are preserved when applying my changes. The Cover blocks are indeed preserved properly, so it looks like this PR is ready to be merged.

Copy link
Member

Choose a reason for hiding this comment

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

Hi @ZebulanStanphill thank you for your tests. Like you said blocks created in 4.7.0 are still valid, we are not causing an invalidation problem.
The problem we are causing with this changes is making very old deprecations with alignments not work correctly (these deprecations are not from 4.7 are from older versions like 2.0).
As a sample problem:
If on master we go to the code editor and paste:

<!-- wp:cover {"align":"center"} -->
<section class="wp-block-cover has-background-dim aligncenter"><h2></h2></section>
<!-- /wp:cover -->

The code gets migrated to:

<!-- wp:cover {"align":"center"} -->
<div class="wp-block-cover has-background-dim aligncenter"></div>
<!-- /wp:cover -->

Which is correct, we have an empty cover image block with center alignment.

On this branch, if we paste the same sample the code gets migrated to:

<!-- wp:cover {"className":"aligncenter"} -->
<div class="wp-block-cover has-background-dim aligncenter"></div>
<!-- /wp:cover -->

Which is not correct the aligment was not recognized and the block was treated as a block with a custom className.

Copy link
Member Author

Choose a reason for hiding this comment

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

Thanks for pointing that out. I have updated the PR to fix this problem. 🙂

@jorgefilipecosta jorgefilipecosta added this to the 4.9 milestone Jan 2, 2019
Copy link
Member

@jorgefilipecosta jorgefilipecosta left a comment

Choose a reason for hiding this comment

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

LGTM 👍 Thank you for iterating on this @ZebulanStanphill!

@ZebulanStanphill
Copy link
Member Author

@jorgefilipecosta @youknowriad I have updated the PR to use align: true.

@youknowriad
Copy link
Contributor

Thanks for the update :)

@youknowriad youknowriad merged commit f0ca6a6 into WordPress:master Jan 7, 2019
@ZebulanStanphill ZebulanStanphill deleted the update/cover-block-align branch January 7, 2019 16:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Cover Affects the Cover Block - used to display content laid over a background image [Type] Code Quality Issues or PRs that relate to code quality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants