Media & Text: Add media width control #31002
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
Mamaduka
added
[Type] Enhancement
|
Size Change: +22 B (0%) Total Size: 1.31 MB
ℹ️ View Unchanged
|
|
Thank you George for creating the PR! I brought up the PR during a Design triage. I believe this new UI control could also replace the similar control in the Image block. |
|
I've come to enjoy your PRs a lot, thank you for all your work 👌 This is what I see:
That's impressive work, it also looks cool and works reasonably well: the media and text scales only in percentages, so there isn't need for any unit selector. There are a few things to consider, though; this is a new interface not seen anywhere else quite yet. It could potentially be leveraged for Image, which currently looks like this:
However, there's also a more consistent sidebar component design system outlined in #27331, and to summarize that up far more than it deserves to be, the goal is for sidebar controls to be far more generic across blocks — something you mostly toggle and it works, not something that you have to write software for, on a per-block basis. To put it even more simply, blocks should be able to say "I want dimension controls" (using a supports flag), and there they appear, looking the same across all blocks that opt in. #28356 goes into more detail on that. For that reason, I think the Media & Text block could ultimately a simpler control for dimensions, one that is not unique to it, but shares code and DNA with all other blocks that have sidebar scale controls (such as Spacer or Site Logo). At the same time, this PR works well, isn't a lot of code, and solves a problem. So we might want to move forward with this PR, even if we also need to revisit it again in the future for further improvements. However I don't think we should enable those scale-marks. I was honestly not even aware they were a part of the rangecontrol as it exists — but mostly because I haven't seen any blocks use that aspect yet, I think we should minimize the changes we do, and replicate what Spacer and Site Logo do: no scale marks. While less exciting, it makes it a smaller but still beneficial change, that doesn't preclude future iterations as part of #27331 and #28356. Make sense? Thanks again! |
Mamaduka
force-pushed
the
add/media-text-width-control
branch
from
3064bd9
to
2cbbff3
Compare
|
Thanks, @jasmussen, for the review and kind words ❤️ I've removed markers from the Range Control, and now the design should match Spacer and Site Logo size controls. I'm all for generic and reusable controls for blocks. This new system will make things easier to maintain and reuse. I've added issues you mentioned to my list and will go through them to have a future reference for similar changes. P.S. I've updated the screenshot in the PR description. |
|
Honestly this one looks good to me! It could use a code sanity check, but 👍 👍 nice work! |
|
I just tested the latest update. It looks nice and clean. I miss one thing though.
Should there be a percentage symbol next to the number?
Should one be able to switch to other measurements like pixels, em or whatever else? |
|
Thanks, @paaljoachim, for testing the changes. The |
Mamaduka
force-pushed
the
add/media-text-width-control
branch
from
2cbbff3
to
690b3f9
Compare
|
@gwwar Kerry perhaps you could take a look at this PR. |
gwwar
approved these changes
May 11, 2021
There was a problem hiding this comment.
Thanks @Mamaduka code looks reasonable here and tests well. @jasmussen did we need a new issue/comment, or are the two noted issues #27331 #28356 enough to remind us about follow up work?
|
Thank you, @gwwar. |
8 tasks
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
Adds new control for media width. Using
RangeControlwith three preset options as suggested snap points. Props to @sarahmonster for the original idea.Fixes #16853.
Fixes #17672.
Closes #14483.
How has this been tested?
Screenshots
Types of changes
New feature
Checklist:
*.native.jsfiles for terms that need renaming or removal).