-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
[Mobile] Update media placeholders and block outline #52702
[Mobile] Update media placeholders and block outline #52702
Conversation
Size Change: +46 B (0%) Total Size: 1.44 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.
@geriux, LGTM! All test cases worked as expected in my testing. :) I only added a couple of questions to the CSS files, but those spawn from curiosity and aren't anything blocking.
Thanks for the work on this! 🎉 👏
packages/block-editor/src/components/media-placeholder/styles.native.scss
Show resolved
Hide resolved
Hey @SiobhyB 👋 thanks for reviewing and testing! I've added a couple of commits after your initial review:
|
Flaky tests detected in ad16a7a. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5597559323
|
@geriux, perfect, thank you for following up! I reviewed and tested the most recent changes 🚀 |
Related PRs:
What?
This PR brings back the BlockOutline that was removed in #51222 and also updates the MediaPlaceholder with new styles.
Why?
To prevent confusion of selected states of blocks and also to improve our current editor UI.
How?
It restores the
BlockOutline
component and updates its logic so the outline will be shown when the component is selected and meets one of the following conditions: it is atext
block with inner blocks, it is a block other thantext
with inner blocks and is at root list level, or it is a block other thantext
with inner blocks and is not at root list level.New colors were added
$blue-60
,$blue-40
and$dark-dim
.MediaPlaceholder
Updates the component so it can be selected before the whole container had a touch action so it wouldn't be possible to be in a selected state.
Now a button will be shown in the middle to allow users to upload media, it also updates the styles and cleans up the code a bit.
Embed Placeholder
It brings the same style modifications from the MediaPlaceholder component to this one.
Tests
General snapshot updates and integration tests were updated after these changes.
Testing Instructions
Test case 1
Test case 2
Test case 3
Testing Instructions for Keyboard
N/A
Screenshots or screencast
iOSChanges.mov
AndroidChanges.mov