Update placeholder style #44190
Merged
Update placeholder style #44190
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
jameskoster
added
Needs Design Feedback
|
Size Change: +2.24 kB (0%) Total Size: 1.26 MB
ℹ️ View Unchanged
|
|
Nice! I tinkered with something similar, and was able to move a lot of the stuff from the Placeholder component into the mixin, like so: I'm not sure that's a good idea. The solid line seems like a good idea, and using currentColor for the background helps anchor the visuals. Perhaps we should see if we could include an icon delineating the block type after all, at least in Image, Featured Image and Video if we expand the style to that block. This might also give duotone a wider spectrum to style, as the removed border makes the duotone effect less pronounced now. |
|
Took it for another spin. Looks good! Though we should probably not remove the overlay on select, as in some resized cases that makes it basically transparent and lose boundaries:
Perhaps something for a separate PR, but as these placeholders start to become increasingly minimalist, it might be worth having some subtle differentiation between them:
Here area two quick options. What do you think?
|
|
Just to put it out there, we could go all the way to this:
|
|
For me personally, this one works best since it's more readable as a placeholder:
I also like the "classic" look similar to these ones:
|
I like this one as well. Could maybe use a bit more breathing room from the icon/line - but it’ll work. |
|
There are some really nice explorations here!
As it gives a good signal that it is a placeholder and also the type of placeholder. |
|
I'm not a big fan of the icons personally, but we can discuss that separately as it would expand this PR quite a bit and would be better suited to a follow-up.
This should be fixed. |
|
Still looks good to me.
Regarding the icons, with more of these, Video as noted, coming into this style we do need some way to differentiate more. Icons seems the simplest way to do so. What do you think? |
|
Re icons, I'm not a big fan for two reasons:
Other options we might consider: display the block name, or a more explicit per-block graphical treatment.
It's no a super-strong opinion, but I think it's worth exploring separately to this particular PR. |
|
Those are good arguments, and I tend to agree. Plus those mockups look great (even if we should probably lean towards as simple outline shapes as possible to keep with the low-noise placeholder look). One thing to consider is that any graphic representation inside either of these needs to be scalable down to at least 100x100px (just to pick an arbitrary minimum size), perhaps even smaller, as one of the main motivators for the placeholder refreshes of especially site logo and featured image is the realization that the existing wizard-like cards don't scale to narrow contexts, and look poor in complex patterns. SVG affords us a ton of options for scaling here, so I don't envision it to be a big problem. But I do like how generic the block-icon (and text label) options are, as they would require little more dev work. @mtias do you have any opinions here? |
|
How do y'all feel about merging these changes and figuring out how to better indicate the block type (be it icons or labels or something else) in another PR? I feel like there's some more exploration to do there. The changes in this PR address the short-comings of the dashed-line visuals, so it would be nice to merge :) |
jasmussen
approved these changes
Sep 26, 2022
|
Sounds good. I'll merge, and open an issue to add further context. |
This was referenced Sep 26, 2022
This was referenced Mar 1, 2023
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?
Updates the block placeholder style
Why?
The current implementation with the dashed border(s) is a little noisy. This iteration replaced the outline with a semi-opaque scrim, and updated the diagonal stroke to be solid rather than dashed.
How?
To create the scrim, a pseudo element is added to the placeholder mixin. It uses
currentColorfor the background and hasopacity: 1.Testing Instructions
Insert blocks that exhibit the placeholder state (Site Logo, Image, Featured Image) and observe the new style.
Screenshots or screencast
More examples