[Mobile] - Full-width/wide alignment support for more blocks #25184
Conversation
geriux
added
[Status] In Progress
geriux
changed the title
|
Size Change: -2 B (0%) Total Size: 1.18 MB
ℹ️ View Unchanged
|
|
Hey @iamthomasbishop 👋 I'm working on adding full-width/wide support for more blocks, I think overall all of them look ok but I had to add some margins to Gallery block when it's in full-width to avoid some issues with the appender, I saw that the web editor does this as well but I'd like to know what you think about it or if you have any other ideas for it. This is how the Gallery block it's looking in full-width (you could also test the build I made here) iPhone
iPad
Web
What do you think? Would you expect the images to reach the actual border of the screen or having some margins as they have in the screenshots? Thanks! |
|
@geriux Tested out the build and it feels really solid overall. I was going to point out the Gallery issue, but you already mentioned it 😄
I think overall, I expected the gallery image cells to be flush against the edges, so if there's a way around it then great. But if there are good reasons for adding some margin then that's fine -- what types of issues are we talking about? 😄 Is this because the image cells have padding inside them (which would force us to use negative margins on the left/right)? One (small) thing that I noted was that I expected the And this isn't necessarily an expectation because it's not a thing on the web, but I wish the Separator block had these width controls (allowing you to force full-width separator, for example). Is that something we can force? or would it require getting something build on Core first? |
|
Hey, @iamthomasbishop thank you so much for testing and your feedback!
So the appender for Gallery block is within the MediaPlaceholder component, the first approach I took was to add margins to it depending on the width of the appender and the screen width, if they'd match I added some margins. That was working until I remembered about the Safe Area and that complicated things plus wide alignment since this component doesn't "know" if the block using it has any alignments set. But I can definitely give it another look now knowing that we'd prefer to reach the edges in full-width. Regarding to full-width, if we make it reach the edges, how should it look like in landscape with safe area?
By removing the margins, it overlaps the "selected blue border". Would this be an issue?
We could make all InnerBlocks from Media & Text reach the edges if it has full-width selected, were you think of something like this?:
I didn't remove them completely because then the Paragraph block's content would be cut off.
Well, I did a quick search to see if there were plans for this and there's an open PR already 🎉 Although looks like there's still some conversations about it here. If that PR gets merged the alignment options would be available for mobile as well since they share the same component. |
|
@geriux thanks for the context on the challenges wrt. I was just testing the gallery w/ a few themes and I see what you mean with the forced margins on left/right. I'm on the fence about what to do, because while the current state of this PR achieves parity with the web editor (not-quite full-width), the front-end does extend fully to the edges — so it's a matter of deciding, do we align with the web editor or the front-end output? At this point, for me it comes down to whether or not it'll add a lot of work. If yes, I think we can leave it as-is and align with the web (assuming the result on the front-end is edge-to-edge like web). But if it isn't a lot of work then I think it'd be nice to go edge-to-edge in order to align with the front-end result.
I think I'd expect it to look basically look the same as you showed in your landscape screenshot above, but with the border to be "above" the image in terms of z-index. I think we have that same bordering conflict on full-width image blocks, so perhaps we can resolve that separately. Here's an example of the image block with caption focused, where the border is inset but the z-index of the image itself covers the border (I'd like the border to be on top of the image, in these cases).
Ahh, on second thought we might want to leave the other blocks as-is. I think we may see some other side-effects so let's not make it any more complex than we have to right now. 😄
Awesome, let's just wait and see, then! 🤞 |
|
Hey @iamthomasbishop thanks for the feedback!
I was able to make it work reaching the edges and solving the issue I had with the appender 🎉. So no margins needed =)
I changed the border to be on top of everything fixing the issue I encountered in landscape (with a safe area) and also the one you mentioned with the Image block.
Good, no changes then! I made a new build for you to test whenever you have a chance. Thanks! |
|
@geriux Gave the latest build on iOS a quick test (will test on Android as well) and it's feeling really great.
Awesome 😄
Doubly awesome! // cc @lukewalczak Can we replicate the border behavior here, where on full-width, the border is basically inset (not cut off) and on the highest z-index? Beyond that, can we cross-check with @lukewalczak to make sure our approaches between this work and Luke's work on Columns are aligned? I'm guessing we're sharing some of the same logic between the two, but let's make sure we're not letting something fall through the cracks 😄 |
Sure! I'll check his PR. Thanks for the review! |
Thanks for reviewing and testing Luke! Hey @iamthomasbishop 👋 is there anything else you want to review before merging this? Let me know, Thanks! |
geriux
deleted the
rnmobile/feature/full-width-wide-align-support-more-blocks
branch
Gutenberg Mobile PR-> wordpress-mobile/gutenberg-mobile#2605WordPress iOS PR-> wordpress-mobile/WordPress-iOS#14865WordPress Android PR-> wordpress-mobile/WordPress-Android#12916Description
This PR is a continuation of #24598 it adds full-width/wide alignment for all blocks that support them except the Columns block which is being added in another PR.
Blocks that support full-width/wide alignments: Video, Latest-posts, Gallery, Media & text, Columns, Pullquote, Cover, Group, and Image. (Columns will be added soon as well)
How has this been tested?
Steps to test
---With metro running:
Video
Full widthwideLatest-posts
Full widthwideGallery
Full widthwideGallery within a Group block
Full widthFull widthwideScreenshots
Video, Latest-posts
Gallery, Pullquote
Media & Text
Types of changes
New feature
Checklist: