Refactor Buttons block to use JustifyToolbar controls #28768
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Size Change: -329 B (0%) Total Size: 1.37 MB
ℹ️ View Unchanged
|
|
This is working well for me:
Also for vertical:
I suspect if #28485 lands, that these issues will go away for you. |
ntsekouras
reviewed
Feb 5, 2021
|
Thanks Joen, I rebased to pick up the changes in #28485 and confirmed it all works for me. |
mkaz
force-pushed
the
update/buttons-justify
branch
from
bc8e45e to
82b4b55
Compare
gwwar
approved these changes
Feb 8, 2021
There was a problem hiding this comment.
Nice, this tests pretty well to me and I verified serialized button output/and that the blocks load again without issues.
Center:
<!-- wp:buttons {"contentJustification":"center"} -->
<div class="wp-block-buttons is-content-justification-center"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">Hello World</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
Left
<!-- wp:buttons {"contentJustification":"left"} -->
<div class="wp-block-buttons is-content-justification-left"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">Hello World</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
Right
<!-- wp:buttons {"contentJustification":"right"} -->
<div class="wp-block-buttons is-content-justification-right"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">Hello World</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
One thing I did notice that could be left as a follow up, is that the justification controls can run away from you, to the left, when adjusting from justify-right. This is more noticeable when buttons is set to full width.
Feb-08-2021.14-42-40.mp4
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Updates the Buttons block to use the new Justify Toolbar controls introduced in #28439
How has this been tested?
Types of changes
Code refactoring to use same control, there should be no visible changes.
NOTE: This is not quite working right for horizontal for some difference in CSS that I'm missing.
@jasmussen can you try it out, the vertical variant works as expected. The horizontal does not seem to work for left and center, but does for right. There is something in CSS that I'm missing.
There is an additional file
content-justification-dropdown.jsthat is still used foredit.native.js- I could update but I'm not sure how to test mobile properly. We can also follow with a mobile refactor.