-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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] Improve File block UI #59863
Conversation
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Size Change: 0 B Total Size: 1.71 MB ℹ️ View Unchanged
|
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.
Thanks for putting this together. The approach is straightforward and makes sense to me.
I did want to share one thought: My presumption is that the current block design is done in a manner to mimic the visuals found on the front end of the website — i.e., WYSIWYG.
The native mobile editor doesn't have the most robust/accurate WYSIWYG experience and we've discussed moving away from the approach in the past, but I wanted to discuss before we diverge here. WDYT about this change moving away from a WYSIWYG experience?
Web Editor | Web Site |
---|---|
I shared internal references privately, but what I intended to share is that we have discussed two possible paths for the native mobile editor moving:
If this proposal is merged, the difference between the web editor and mobile editor implementations would be small. As you pointed out, it is mostly a container background color and padding. As showcased below, the current web and mobile editors share the same approach for background color and padding.
I shared this overall thought originally as I perceived the proposed modifications to the File block to result in (admittedly small) divergence from what the front-end website render. So, the proposed modifications relate to the aforementioned second path — prioritizing device UI over WYSIWYG. I do not share that to say we cannot/should not go down this path, only that it is a change from the project's pursuit of the WYSIWYG approach and could warrant a higher-level consideration with a larger audience discussion. |
Thank you for sharing the references. I understand what you mean now about the divergence between WYSIWYG on web. I did note that the web implementation of the File block shares the same less-desirable UI where the block content is flush with the block border. I also noted that several native mobile block implementations diverge from the web WYSIWYG to focus on dynamic text and dark/light mode support, as you stated. I'll review the discussions further to help evaluate which approach we want to take. Initially when making these changes on native mobile, I thought that the flush content may have been an uncaught oversight when implementing the block outline changes in the native mobile Editor UX project. Since this behavior is also shared with the web implementation, it may be better to respect Chesterton's Fence and not implement these padding changes (unless we found a good reason to do so). |
Closing for now. Can re-open later if necessary. |
What?
Improves UI of the File block on mobile.
Fixes:
Why?
The appearance of the File block could be improved. When a file is uploaded, the filename and download button text are flush with the block border, and generally looks disorganised.
How?
Updates the mobile File block to add spacing between the block outline and content, and adds light/dark mode backgrounds to make the File block appear more inline with other media block styles.
Testing Instructions
Screenshots or screencast
Before
File block on the bottom, Audio block on top for comparison:After
File block on top, Audio block on bottom for comparison: