Image: Try different resting state for placeholder. #43143
Closed
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
|
Here's what it looks like selecting the placeholder — the buttons inside appear when you do:
I also faded out the diagonal dashed line for clarity. At the moment, this is a new reduced layout compared to other placeholders, but depending on feedback, we can adjust so the layout of content inside remains mostly the same as it is today, with regards to icon/title/descriptions. The main reason to revisit, however, is that those haven't added a great deal of value in identification, it quickly gets learned and redundant, and it scales poorly to constrained contexts such as images inside a column, and so on. Let me know your thoughts! |
This was referenced Aug 11, 2022
|
Size Change: +966 B (0%) Total Size: 1.27 MB
ℹ️ View Unchanged
|
|
Love this. Perhaps something to explore separately, but could we iconise the buttons? That way the placeholder can squeeze into smaller spaces. |
|
I love this too! This is such a crisp, clean change compared to the current placeholder and the diagonal bar fading out is a really nice touch. I tested this in a bunch of different configurations and haven't come across any bugs. One note is that we might want to consider using filled buttons instead of the outline style to make sure there's enough contrast on dark editor backgrounds. Or alternatively, could the button colors change to white (like the focus outline does) when a dark background is in use?
A cool follow up to this could be to add duotone indication like we use on the similar style placeholder for Post Featured Image blocks, etc: #40085 |
I think there's definitely a design revision opportunity here. Already now, we iconized the upload button from Featured image, mainly because you can resize that block to be really small: I'd love to land something for 6.1 so I've been looking at making more careful changes, see what we might be able to land. Of course it has to visually be good enough.
Yes, good test, let me try that.
Most definitely. Enabling width/height, inheriting border controls (a la #42847), and better illustrating an applied duotone, definitely something to fix. Speaking of inheritance, one question for the group has emerged from #42847 (comment). At the moment, the new placeholder style relies on a semi-transparent dashed border, like so: This works on any background because the dashed border is Two alternatives that would make it simpler. 1: don't use opacity, just allow the placeholder to be the same color as the text: Or, ditch the dashed style, and we can keep the opacity:
Personally I think the dashed style in full opacity is okay, but I'd love your thoughts or alternative ideas. |
|
Just following up on this one:
This works: But it doesn't look super elegant. To Jay's point, I think I'll move back to Figma and explore some design options, including to the opacity/dashed issue mentioned above. |
javierarce
added
the
Needs Figma Update
Agreed. One other thought, do we need different button styles here? I'm not sure why we emphasis uploading images rather than selecting from the Media library.
Something like this could fix the background issue. |
|
One of the challenges is the buttons have to scale to be REALLY small. We might even need to hide some. For example for featured image, the "Media Library" button is hidden, since it's also available as a tab in the "Upload" modal. (It really would be nice to have a new media library component so we could sync up the two.) That said, I created #43180 as an alternative to this one. Theoretically it could be easier to land. |
|
Closing in favor of #43180. |
javierarce
removed
the
Needs Figma Update
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?
Initial work to fix #41142. Makes the image block placeholder look more like a literal placeholder, while aiming to keep existing functionality intact.
Currently, the image block placeholder has a dark border and looks like a form field:
This PR takes the placeholder state in the direction of the Featured Image block, and makes the resting state appear like a classic, literal placeholder:
This PR is a work in progress, as it needs to also enable inheriting properties as set by the inspector (radius, border, style), and leave room for feedback.
Longer term, but probably beyond the scope of this PR, width and height options should be available, and reflected in the setup state.
Why?
From #41142:
Testing Instructions
Insert an image block, and test that it behaves as it does today, but with the leaner placeholder style.