-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
[RNMobile] Allow shrink toolbar #22132
Conversation
Hello @iamthomasbishop, I'm wondering how disabled buttons should look on Android, could you please specify that? Also on the initial mock for Android, there was a separator between |
@lukewalczak Ideally, we should hide the button altogether if it's not actionable (at least on Android — that doesn't seem possible on iOS from what I can tell?). If we can't hide it altogether, then it can use a very dim color (very light in light mode and very dark in dark mode). We should probably re-use existing styles if possible, but I'm not 100% sure how disabled buttons/icons are styled in code. Based on a quick analysis by pulling screenshots into Figma, it looks like disabled inline toolbar buttons are something like ~30% opacity of our default icon color (or maybe that's a solid color? not sure). My suggestion would be to match the icon color with the disabled state of the up/down movers on the inline toolbar. If that is indeed 30% opacity, then maybe we should simply dim the entire cell row to 30% alpha and roll with that. That would look something like this (ignore the icons in this mock):
That would be ideal because I think some separation between the primary actions and a destructive action would be nice. If we're going to add a separator, I would add 8px of space above and below the separator. This is how it would look all together: Let me know if you have any questions or if that doesn't make sense. 😄 |
@lukewalczak Also, one question I have regarding the scope of this feature: Are we making the With that example in mind, is this ticket aiming to: A) Collapse into a I think the end goal is to have something like B, but I’m not 100% sure if that menu should house all block actions, or only the “overflow” ones when the toolbar is collapsed. I would like to at least always have the |
0e2d868
to
c6bfec9
Compare
@lukewalczak I had a chance to review earlier today, this is feeling great already! I jotted down some notes — most of it very minor — some of which is relevant to this ticket, but also another that I will create a ticket for tomorrow.
Not relevant to this ticket:
Great work! This is going to be really great to have in the editor — it feels very intuitive and should also solve this issue. // cc @mchowning |
Hello Thomas! Thanks for the feedback:
Done! I've added
Sure!
I've changed the order.
Done!
Nope, there is no option for that. This is native ios ActionSheet and it's not supporting that.
Generally, it's fixed, but I released a testing build from the branch without that change. |
packages/block-editor/src/components/block-mobile-toolbar/index.native.js
Outdated
Show resolved
Hide resolved
packages/block-editor/src/components/block-mover/index.native.js
Outdated
Show resolved
Hide resolved
437032b
to
6479435
Compare
6479435
to
3edf716
Compare
Thanks for the update, @lukewalczak ! Your notes make sense and most everything is working perfectly. Here are some notes based on the new build.
Relevant, but not a blocker:
Not specific to this ticket:
|
Size Change: 0 B Total Size: 1.12 MB ℹ️ View Unchanged
|
9c32272
to
5e5a39b
Compare
5e5a39b
to
2b84538
Compare
@iamthomasbishop Currently we have block name near to the action such as |
@lukewalczak I think we probably could, yea. I'm starting to wonder how blocks with long names will look w/ these labels, esp with long translations. But as long as we're handling them well, it should be okay. Would you mind testing out what a very long block name would do in this scenario — maybe by forcing a long name? |
Awesome! Then we're good 😄 |
packages/block-editor/src/components/block-list/block.native.js
Outdated
Show resolved
Hide resolved
packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js
Outdated
Show resolved
Hide resolved
packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js
Outdated
Show resolved
Hide resolved
packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js
Outdated
Show resolved
Hide resolved
packages/block-editor/src/components/block-mobile-toolbar/index.native.js
Outdated
Show resolved
Hide resolved
packages/block-editor/src/components/block-mobile-toolbar/index.native.js
Show resolved
Hide resolved
packages/block-editor/src/components/block-mobile-toolbar/index.native.js
Show resolved
Hide resolved
6893862
to
1f34cee
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good job @lukewalczak !
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey @lukewalczak 👋 So I left a couple of comments but overall is looking good!
One question, is this expected?:
I no longer see the trash icon but the "three dots" instead.
packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js
Outdated
Show resolved
Hide resolved
packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM! Nice work Luke! Tested it again after the changes. 👏
e87622c
to
2c420d8
Compare
Description
Fixes: wordpress-mobile/gutenberg-mobile#2180
Ref to:
gutenberg-mobile: wordpress-mobile/gutenberg-mobile#2220
That PR introduces the possibility to stack options in into one toolbar button which will open an ActionSheet (ios) / BottomSheet (Android).
How has this been tested?
Move Left
for the first buttonMove Right
for the last buttonScreenshots
Types of changes
The new type of mobile toolbar named
ShrinkBlockMobileToolbar
along with new propallowShrinkToolbar
.Add option to disable buttons within Android Picker.
Two new options to iOS Picker called:
disabledButtonIndices
anddestructiveButtonIndex
Checklist: