Sticky Position: Try adding a notice if sticky is set at a non-root level (e.g. has no parents) #47207
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
andrewserong
added
[Type] Experimental
This was referenced Jan 17, 2023
|
Size Change: +286 B (0%) Total Size: 1.33 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in e63b656. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/3936596406
|
|
I'm not sure this is necessary. Perhaps instead we could add help text to the select component that is indicative of how the "stickyness" is applied. Something contextual like "Sticks to the top of the page." if it's at the root level, or "Sticks to the parent {Blockname} block." if not. |
|
Agreed. It's always helpful to think about these controls agnostically rather than focussing on very specific use cases. |
|
Thanks for the feedback, folks, this is super helpful! With each of these experiments, I'm mostly interested in unearthing these sorts of nuances and ideas to see what we can hone in on.
Oh, I really like the idea of making the text contextually aware like that — I'll give that a try. |
I've given that a try over in #47230, so I'll close out this PR now. Thanks, all! |
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?
Part of: #47043
Explore adding a warning notice if Sticky is set on a block that is non-root level. This is an experimental idea to see if it could be a way to help improve the UX of the sticky position settings.
🚧 🚧 🚧 Note: the language in the warning is just what I put there from the top of my head. If this approach looks viable, we'll likely want to do some design finessing so that we can come up with some good and helpful wording 🚧 🚧 🚧
Why?
There has been feedback that setting a Group block to Sticky feels broken when it happens at a non-root level. This is because of how sticky works, which is that it locks to the immediate parent container. For particular uses, this can be really handy (e.g. sticky headings in a glossary that do scroll past once you scroll past different sections). However, for sticky headers/footers it's very confusing.
The idea here, is can we improve the UX by adding a warning notice when the block is non-root?
An alternative might be to hide the controls altogether if it's non-root, but that would then mean folks can't use sticky positioning for other creative use cases.
How?
In the Position block support, add a component and some logic to check whether or not the selected block has any parents. If not, then display a notice.
Testing Instructions
Screenshots or screencast