Layout: Re-instate alignwide and alignfull in flow layout get alignments #43502
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
andrewserong
added
[Type] Bug
|
Size Change: -13 B (0%) Total Size: 1.24 MB
ℹ️ View Unchanged
|
|
On second thoughts, this PR is probably not the right fix for this issue as it really just hones in on the Post Template block's peculiarities and the direct children's alignwide / alignfull behaviour. We also need to factor in what to do about unmigrated blocks like the individual Column block and its children, and the conditional display of contentSize and wideSize controls in the UI, particularly for blocks that already content sizes set. I'll leave this PR open for the moment, but I imagine we'll likely close it out in favour of an approach that works across other blocks. Test block markup for column block (replace the image after inserting and note that the Image block can't be set to wide width): <!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>jlkhjklhkjlh</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"layout":{"inherit":true}} -->
<div class="wp-block-column"><!-- wp:heading -->
<h2>jhghkjgjh</h2>
<!-- /wp:heading -->
<!-- wp:image {"id":155,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="http://localhost:8888/wp-content/uploads/2022/08/flowers01-1024x768.jpg" alt="" class="wp-image-155"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --> |
tellthemachines
approved these changes
Aug 24, 2022
There was a problem hiding this comment.
Thanks for fixing this @andrewserong!
The issue with Column is its edit function neglects to pass its layout info to useInnerBlocksProps. If we change that, this fix will work for Column too. Testing with version 13.9.0 of the plugin shows Column children don't get wide/full align options, so it's a preexisting issue.
Let's get this fix in and then we can look at Column separately!
andrewserong
force-pushed
the
fix/reinstate-alignwide-and-alignfull-in-flow-layout-get-alignments
branch
from
724f661
to
8399921
Compare
|
Thanks for reviewing! Yes, let's look at the Column block separately, then 👍 I've just given this a rebase to see if that helps any with getting the e2es passing (looks like it was just one of the recent flaky tests that was failing, but 🤞 we can get them passing). |
andrewserong
deleted the
fix/reinstate-alignwide-and-alignfull-in-flow-layout-get-alignments
branch
andrewserong
added
the
[Feature] Layout
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.
What?
Try re-instating wide and full alignments in
getAlignmentsin theflowlayout if contentSize or wideSize is present in the layout object.Existing blocks that already have
contentSizeorwideSizeset in the layout object appear to still need to have this logic in place in order to be able to correctly render out thealignwideoralignfullclassname within the site editor.Why?
This resolves an issue with the Post Template block not rendering the wide width in existing templates in the site editor, where that block is rendering correctly on the site's frontend.
How?
Re-instate a few of the lines removed in #42763. This should hopefully fix the issue without unintentionally exposing wide / full controls where we don't expect them.
Testing Instructions
Use the following block markup at the root level in the site editor:
Test markup
With this markup applied, observe how prior to this PR, the contents of the Query loop are rendered in the limited width of
contentSizeas opposed to wide width. However, on the site's frontend, thealignwideclassname is applied to the post template'sulelement.With this PR applied, it should be rendered in wide width. If you inspect the markup in the site editor, the
ulelement should now have thealignwideclassname.Screenshots or screencast