Update video placeholder style. #44215
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
jasmussen
added
[Type] Enhancement
|
Size Change: +389 B (0%) Total Size: 1.26 MB
ℹ️ View Unchanged
|
paaljoachim
approved these changes
Sep 17, 2022
There was a problem hiding this comment.
Hey Joen @jasmussen
Testing the visual using a local site running Twenty Twenty Two.
Gutenberg plugin 14.1
Before:
After using PR Gutenberg build.
This very much improves the current lack of placeholder in the video block.
Thank you for working on this Joen!
As you say this is a good starting point for further explorations at another time.
|
Thanks for the review! I think I'll pause this one and pick it back up when #44190 is in a place where it can land, that will help better differentiate it from other similar placeholders. |
jasmussen
force-pushed
the
try/video-new-placeholder
branch
from
3d47dd8
to
ac9afa7
Compare
|
Rebased this one to see it in the new style (see also #44460), and I'm seeing some glitchiness:
1st block is an image block. I don't know why it has that gray background, when the other two don't. Second is this video block, third is featured image. @jameskoster do you have any insights as to why the layers are wrong in this version, and/or why the image block is light gray in this yellow scheme? Feel free to push to this branch if you find a fix. |
I'm not seeing that:
As for the grey overlay on the video block, it's caused by the pseudo element which needs to be hidden when the block is selected. Here's how I did it for the image block: afb0dcb |
I just pushed the same fix here. |
|
Thank you, that works well for me! About the weird gray backdrop, I've found a way to reproduce:
Gif:
The weird thing is: this is only an issue with the Image block, it doesn't appear to be an issue with this video block. Can you reproduce, and do you have any idea why this might be? |
I'm afraid not. It's fine both on trunk and this PR for me 🤔 this.pr.mp4trunk.mp4 |
|
😩 Chrome? Safari? Firefox? |
Working fine in all three for me. |
|
Alright, it seems clear that the backdrop filter is having some effects for me. #44497 (comment) — but since that's separate, I'll land this one when the checks pass. |
9 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.
What?
Followup to #43180. See also #44190. Updates the placeholder of the Video block to start out dashed. Instead of showing the resting state of the video block as the dark-bordered classic placeholder, it now shows a dashed outline until you select it.
Before:
After:
We'll likely want an icon to denote the difference between placeholders, but perhaps this one is good enough to land as a starting point?
Why?
For patterns and templates, including a video block can be a good way to suggest a particular use case. But the descriptions quickly become repetitive in patterns where you may have multiple video blocks. By showing these on select, we better enable this use case.
Testing Instructions
Insert a video block and observe its resting and selected states.