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

Fix: Align Hook: Impossible to set no alignment when a default align exists #9634

Merged
merged 9 commits into from Oct 8, 2018

Conversation

Projects
None yet
5 participants
@jorgefilipecosta
Member

jorgefilipecosta commented Sep 5, 2018

When we have a default value for an attribute, during the load of a document/block if that attribute is undefined the attribute gets the default value.
If we had a block that supports align but contained a default align we had a problem. If no align was set the post correctly saved the markup of no alignment set but the alignment attribute was not saved watching by the value of the attribute it was impossible to differentiate the state of default alignment being used, and the state of no alignment is used. The alignment attribute was just not stored in both cases.
If alignment was set to none (undefined), When the block was loaded no attribute was set, so the default value of alignment was used, but the block had the markup of alignment none, so the block becomes invalid.

This PR solves this problem by setting alignment to none when setting no alignment on the align hook, this way none is saved on the attribute and Gutenberg correctly differentiates the state of the block has the default align and the state the block has no alignment.

How has this been tested?

I used the following test block: https://gist.github.com/jorgefilipecosta/b733f1745531dc9758c6eba0838ae3f5; I checked on the code editor that if setting no alignment for this block we set alignment comment attribute to 'none' and no align class is added. And I checked that after removing the alignment saving the post and loading it again everything works as expected.

Screenshots

Before:
sep-05-2018 16-28-13

After:
sep-05-2018 15-46-36

@jorgefilipecosta jorgefilipecosta self-assigned this Sep 5, 2018

jorgefilipecosta added a commit that referenced this pull request Sep 5, 2018

jorgefilipecosta added a commit that referenced this pull request Sep 5, 2018

@aduth

This comment has been minimized.

Show comment
Hide comment
@aduth

aduth Sep 5, 2018

Member

Will this invalidate existing blocks?

How does one unset an alignment if they really want to revert back to the default?

Member

aduth commented Sep 5, 2018

Will this invalidate existing blocks?

How does one unset an alignment if they really want to revert back to the default?

@ZebulanStanphill

This comment has been minimized.

Show comment
Hide comment
@ZebulanStanphill

ZebulanStanphill Sep 5, 2018

Contributor

@aduth You can unset alignment by clicking the already-enabled current alignment. Simple as that.

Contributor

ZebulanStanphill commented Sep 5, 2018

@aduth You can unset alignment by clicking the already-enabled current alignment. Simple as that.

@jorgefilipecosta

This comment has been minimized.

Show comment
Hide comment
@jorgefilipecosta

jorgefilipecosta Sep 6, 2018

Member

Will this invalidate existing blocks?

The existing blocks that this PR affects are blocks with a default align and whose alignment was removed, these blocks are already invalid without this PR that's the bug we are solving. So we are not going to invalid more blocks with this PR.

How does one unset an alignment if they really want to revert back to the default?

Exactly like what @ZebulanStanphill referred. For example, in the columns block after we enable wide or full alignment the way to remove alignment is pressing the currently enabled alignment.

Member

jorgefilipecosta commented Sep 6, 2018

Will this invalidate existing blocks?

The existing blocks that this PR affects are blocks with a default align and whose alignment was removed, these blocks are already invalid without this PR that's the bug we are solving. So we are not going to invalid more blocks with this PR.

How does one unset an alignment if they really want to revert back to the default?

Exactly like what @ZebulanStanphill referred. For example, in the columns block after we enable wide or full alignment the way to remove alignment is pressing the currently enabled alignment.

jorgefilipecosta added a commit that referenced this pull request Sep 7, 2018

Improved toolbar order (+6 squashed commits)
Squashed commits:
[f202072bf] #9634 cherry picked tempararly; This commit should be deleted as soon as the other PR is merged
[a09172386] Only use align wide & full
[1bf29ba83] Corrected media labels
[173a298a1] Revisions to align style; Show resizer only when media is set.
[6a94b169d] Change sizing mechanism to apply width directly to the media elements (video/img)
[12ede9625] Half image Block

jorgefilipecosta added a commit that referenced this pull request Sep 10, 2018

. (+1 squashed commit)
Squashed commits:
[3dbd4cee8] Squashed commits:
[c9daa7092] Improved toolbar order (+6 squashed commits)
Squashed commits:
[f202072bf] #9634 cherry picked tempararly; This commit should be deleted as soon as the other PR is merged
[a09172386] Only use align wide & full
[1bf29ba83] Corrected media labels
[173a298a1] Revisions to align style; Show resizer only when media is set.
[6a94b169d] Change sizing mechanism to apply width directly to the media elements (video/img)
[12ede9625] Half image Block

jorgefilipecosta added a commit that referenced this pull request Sep 10, 2018

[45c1920ef] (+1 squashed commit)
Squashed commits:
[3dbd4cee8] Squashed commits:
[c9daa7092] Improved toolbar order (+6 squashed commits)
Squashed commits:
[f202072bf] #9634 cherry picked tempararly; This commit should be deleted as soon as the other PR is merged
[a09172386] Only use align wide & full
[1bf29ba83] Corrected media labels
[173a298a1] Revisions to align style; Show resizer only when media is set.
[6a94b169d] Change sizing mechanism to apply width directly to the media elements (video/img)
[12ede9625] Half image Block

jorgefilipecosta added a commit that referenced this pull request Sep 14, 2018

[45c1920ef] (+1 squashed commit)
Squashed commits:
[3dbd4cee8] Squashed commits:
[c9daa7092] Improved toolbar order (+6 squashed commits)
Squashed commits:
[f202072bf] #9634 cherry picked tempararly; This commit should be deleted as soon as the other PR is merged
[a09172386] Only use align wide & full
[1bf29ba83] Corrected media labels
[173a298a1] Revisions to align style; Show resizer only when media is set.
[6a94b169d] Change sizing mechanism to apply width directly to the media elements (video/img)
[12ede9625] Half image Block

@jorgefilipecosta jorgefilipecosta requested a review from WordPress/gutenberg-core Sep 14, 2018

@jorgefilipecosta jorgefilipecosta added this to the 4.0 milestone Sep 14, 2018

@jorgefilipecosta

This comment has been minimized.

Show comment
Hide comment
@jorgefilipecosta

jorgefilipecosta Sep 21, 2018

Member

A set of end 2 end tests to the align hook were added in #10105. These tests are able to catch the bug being fixed here.

Member

jorgefilipecosta commented Sep 21, 2018

A set of end 2 end tests to the align hook were added in #10105. These tests are able to catch the bug being fixed here.

jorgefilipecosta added a commit that referenced this pull request Sep 26, 2018

[45c1920ef] (+1 squashed commit)
Squashed commits:
[3dbd4cee8] Squashed commits:
[c9daa7092] Improved toolbar order (+6 squashed commits)
Squashed commits:
[f202072bf] #9634 cherry picked tempararly; This commit should be deleted as soon as the other PR is merged
[a09172386] Only use align wide & full
[1bf29ba83] Corrected media labels
[173a298a1] Revisions to align style; Show resizer only when media is set.
[6a94b169d] Change sizing mechanism to apply width directly to the media elements (video/img)
[12ede9625] Half image Block

jorgefilipecosta added a commit that referenced this pull request Sep 28, 2018

[45c1920ef] (+1 squashed commit)
Squashed commits:
[3dbd4cee8] Squashed commits:
[c9daa7092] Improved toolbar order (+6 squashed commits)
Squashed commits:
[f202072bf] #9634 cherry picked tempararly; This commit should be deleted as soon as the other PR is merged
[a09172386] Only use align wide & full
[1bf29ba83] Corrected media labels
[173a298a1] Revisions to align style; Show resizer only when media is set.
[6a94b169d] Change sizing mechanism to apply width directly to the media elements (video/img)
[12ede9625] Half image Block

jorgefilipecosta added a commit that referenced this pull request Oct 3, 2018

[45c1920ef] (+1 squashed commit)
Squashed commits:
[3dbd4cee8] Squashed commits:
[c9daa7092] Improved toolbar order (+6 squashed commits)
Squashed commits:
[f202072bf] #9634 cherry picked tempararly; This commit should be deleted as soon as the other PR is merged
[a09172386] Only use align wide & full
[1bf29ba83] Corrected media labels
[173a298a1] Revisions to align style; Show resizer only when media is set.
[6a94b169d] Change sizing mechanism to apply width directly to the media elements (video/img)
[12ede9625] Half image Block
@jorgefilipecosta

This comment has been minimized.

Show comment
Hide comment
@jorgefilipecosta

jorgefilipecosta Oct 4, 2018

Member

This PR was rebased, I think it is ready for a review. It is a blocker for #9416.

Member

jorgefilipecosta commented Oct 4, 2018

This PR was rebased, I think it is ready for a review. It is a blocker for #9416.

@aduth

This comment has been minimized.

Show comment
Hide comment
@aduth

aduth Oct 4, 2018

Member

If this includes a fix, I might also expect there should be some test?

Member

aduth commented Oct 4, 2018

If this includes a fix, I might also expect there should be some test?

@aduth

Correct me if I'm wrong, but does this introduce a second "empty" value for default, so that now both undefined and 'none' mean "no alignment", the latter used in cases where an undefined would cause the default to take place? I guess I see this could be okay, in a same way undefined and null are different values in JavaScript, differentiated on explicitness (which makes me also wonder if null is a better value to avoid 'none' as a magic constant). To my last point, it still appears then that there is no way for a user to reset to the undefined value for a block which assigns a default value (also probably okay). It's also a bit confusing that regardless if a block specifies only a few alignments supported, this magic 'none' value will be added regardless.

Show outdated Hide outdated packages/editor/src/hooks/align.js Outdated
@aduth

This comment has been minimized.

Show comment
Hide comment
@aduth

aduth Oct 4, 2018

Member

On the point of the magic constant, this would have the effect of adding and 'alignnone' class. I don't think we need to add this (if we store value as null), though given its existence in WordPress history, it is a thing which has some precedent. I'm not sure what purpose it serves, and personally I'd rather it not be there, fixing the original issue by storing the value as null.

Member

aduth commented Oct 4, 2018

On the point of the magic constant, this would have the effect of adding and 'alignnone' class. I don't think we need to add this (if we store value as null), though given its existence in WordPress history, it is a thing which has some precedent. I'm not sure what purpose it serves, and personally I'd rather it not be there, fixing the original issue by storing the value as null.

@jorgefilipecosta

This comment has been minimized.

Show comment
Hide comment
@jorgefilipecosta

jorgefilipecosta Oct 4, 2018

Member

It looks like in this version of the code the null value is being saved, and we can differentiate from undefined ( I'm sorry @gziolo I probably did something wrong when you suggested).
Thank you for the reviews @gziolo and @aduth, the suggestions were applied and the test cases were moved to this PR.

Member

jorgefilipecosta commented Oct 4, 2018

It looks like in this version of the code the null value is being saved, and we can differentiate from undefined ( I'm sorry @gziolo I probably did something wrong when you suggested).
Thank you for the reviews @gziolo and @aduth, the suggestions were applied and the test cases were moved to this PR.

Show outdated Hide outdated test/e2e/test-plugins/align-hook/index.js Outdated
Show outdated Hide outdated test/e2e/test-plugins/align-hook.php Outdated
Show outdated Hide outdated test/e2e/test-plugins/align-hook.php Outdated
Show outdated Hide outdated test/e2e/support/utils.js Outdated
Show outdated Hide outdated test/e2e/specs/align-hook.test.js Outdated
Show outdated Hide outdated test/e2e/specs/align-hook.test.js Outdated
Show outdated Hide outdated test/e2e/specs/align-hook.test.js Outdated

@mcsf mcsf modified the milestones: 4.0, 4.1 Oct 6, 2018

@jorgefilipecosta

This comment has been minimized.

Show comment
Hide comment
@jorgefilipecosta

jorgefilipecosta Oct 8, 2018

Member

This PR was rebased, everything was addressed it should be ready to merge :)

Member

jorgefilipecosta commented Oct 8, 2018

This PR was rebased, everything was addressed it should be ready to merge :)

@gziolo

This comment has been minimized.

Show comment
Hide comment
@gziolo

gziolo Oct 8, 2018

Member

There is still one issue popping up:

screen shot 2018-10-08 at 16 28 54

Steps to reproduce:

  1. Insert the test block shared in the description.
  2. Unset alignment (null).
  3. Save the post.
  4. Refresh the page.
  5. You will see this warning popup.
Member

gziolo commented Oct 8, 2018

There is still one issue popping up:

screen shot 2018-10-08 at 16 28 54

Steps to reproduce:

  1. Insert the test block shared in the description.
  2. Unset alignment (null).
  3. Save the post.
  4. Refresh the page.
  5. You will see this warning popup.
@gziolo

This comment has been minimized.

Show comment
Hide comment
@gziolo

gziolo Oct 8, 2018

Member

It saves properly:

<!-- wp:test/no-align-default-align {"align":null} -->
<div style="outline:1px solid gray;padding:5px" class="wp-block-test-no-align-default-align">Test No Align and Default Align Block</div>
<!-- /wp:test/no-align-default-align -->

When I reload the page {"align":null} is no longer there, cc @mcsf @dmsnell - is that expected?

Member

gziolo commented Oct 8, 2018

It saves properly:

<!-- wp:test/no-align-default-align {"align":null} -->
<div style="outline:1px solid gray;padding:5px" class="wp-block-test-no-align-default-align">Test No Align and Default Align Block</div>
<!-- /wp:test/no-align-default-align -->

When I reload the page {"align":null} is no longer there, cc @mcsf @dmsnell - is that expected?

const getAlignmentToolbarLabels = async () => {
const buttonLabels = await page.evaluate( () => {
return Array.from(

This comment has been minimized.

@gziolo

gziolo Oct 8, 2018

Member

This is cool in combination with map 👍

@gziolo

gziolo Oct 8, 2018

Member

This is cool in combination with map 👍

Show outdated Hide outdated test/e2e/specs/align-hook.test.js Outdated
@mcsf

This comment has been minimized.

Show comment
Hide comment
@mcsf

mcsf Oct 8, 2018

Contributor

When I reload the page {"align":null} is no longer there — is that expected?

As discussed, there should be no surprises at the level of the block parser:

wp.blockSerializationDefaultParser.parse(
  `<!-- wp:test/no-align-default-align {"align":null} -->
  <div style="outline:1px solid gray;padding:5px" class="wp-block-test-no-align-default-align">Test No Align and Default Align Block</div>
  <!-- /wp:test/no-align-default-align -->`
)[ 0 ].attrs
// { align: null }

The discrepancy you see should be happening at the block API level (@wordpress/blocks//api).

Contributor

mcsf commented Oct 8, 2018

When I reload the page {"align":null} is no longer there — is that expected?

As discussed, there should be no surprises at the level of the block parser:

wp.blockSerializationDefaultParser.parse(
  `<!-- wp:test/no-align-default-align {"align":null} -->
  <div style="outline:1px solid gray;padding:5px" class="wp-block-test-no-align-default-align">Test No Align and Default Align Block</div>
  <!-- /wp:test/no-align-default-align -->`
)[ 0 ].attrs
// { align: null }

The discrepancy you see should be happening at the block API level (@wordpress/blocks//api).

@jorgefilipecosta

This comment has been minimized.

Show comment
Hide comment
@jorgefilipecosta

jorgefilipecosta Oct 8, 2018

Member

The PR was updated with some docs added. I updated the PR with to use an empty string for no alignment as suggested by @gziolo this avoids the need for blocks to specify the null type making #10338 unnecessary for this case. I still think the changes made in #10338 are important and support for multiple type attributes makes us closer to JSON schema and may be useful for other cases.

Member

jorgefilipecosta commented Oct 8, 2018

The PR was updated with some docs added. I updated the PR with to use an empty string for no alignment as suggested by @gziolo this avoids the need for blocks to specify the null type making #10338 unnecessary for this case. I still think the changes made in #10338 are important and support for multiple type attributes makes us closer to JSON schema and may be useful for other cases.

jorgefilipecosta and others added some commits Oct 8, 2018

@gziolo

gziolo approved these changes Oct 8, 2018

It works great after the latest changes applied. Thanks for working on that. With the set of e2e tests introduced it should be much easier to ensure this doesn't regress in the future. Great work 💯

@gziolo gziolo modified the milestones: 4.1, 4.0 Oct 8, 2018

@gziolo

This comment has been minimized.

Show comment
Hide comment
@gziolo

gziolo Oct 8, 2018

Member

We can land in 4.0 and unblock one of the PRs which depends on it.

Member

gziolo commented Oct 8, 2018

We can land in 4.0 and unblock one of the PRs which depends on it.

@jorgefilipecosta jorgefilipecosta merged commit 9d419fa into master Oct 8, 2018

2 checks passed

codecov/project 49.29% (-0.03%) compared to 69ced17
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@jorgefilipecosta jorgefilipecosta deleted the fix/align-hook-default-align-no-align-bug branch Oct 8, 2018

jorgefilipecosta added a commit that referenced this pull request Oct 8, 2018

[45c1920ef] (+1 squashed commit)
Squashed commits:
[3dbd4cee8] Squashed commits:
[c9daa7092] Improved toolbar order (+6 squashed commits)
Squashed commits:
[f202072bf] #9634 cherry picked tempararly; This commit should be deleted as soon as the other PR is merged
[a09172386] Only use align wide & full
[1bf29ba83] Corrected media labels
[173a298a1] Revisions to align style; Show resizer only when media is set.
[6a94b169d] Change sizing mechanism to apply width directly to the media elements (video/img)
[12ede9625] Half image Block
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment