Shadow: Add shadow presets and UI tools in global styles #46502
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
madhusudhand
requested review from
spacedmonkey,
ajitbohra,
ajlende,
ryanwelcher,
juanmaguitar and
fabiankaegy
as code owners
madhusudhand
commented
Dec 13, 2022
|
Size Change: +1.63 kB (0%) Total Size: 1.31 MB
ℹ️ View Unchanged
|
|
Thanks for this PR, and thanks for addressing that design so accurately! Despite your theme.json example, I was unable to get these presets to show up under Blocks > Button > Border & Shadow. If you have a moment, can you share a full theme.json, or have a look at this one I tinkered with, and let me know what's up? theme.jsonBut from the visuals you shared, this looks spot on. I'll get you some shadow values as soon as I am able to test the PR. One thing, almost certainly unrelated to this PR, can we center the preview?
I know it just uses demo content, but probably we can use flex to position it, like so:
The above changes the style preview styles a little:
|
madhusudhand
force-pushed
the
shadow-presets
branch
from
6c00097
to
14087ab
Compare
scruffian
reviewed
Dec 22, 2022
lib/compat/wordpress-6.2/class-gutenberg-rest-global-styles-controller-6-2.php
Outdated
Show resolved
Hide resolved
|
This is looking good. Something else to think about is that we should also expose these settings on a per-block basis at some point. Not in this PR though! |
The given theme.json seem to work. Can you verify with latest PR changes and adding the shadow presets to active theme?
This is addressed in a different PR here #46727 |
|
Nice, took it for a spin, now I see the presets:
However I see that with or without modifying my theme.json, and weirdly I'm seeing both theme and default presets. Also as you can see in the GIF, some of the presets are active at the same time. So I'm not sure where the theme presets are coming from. Speaking of preset values, I'd love for us to start with just two default presets, "Natural" and "Sharp". But can you take the values from "Soft" and apply them to "Natural"? And can you apply the "Sharp" values from the theme presets to the default presets instead?
Wonderful! Thank you. |
madhusudhand
force-pushed
the
shadow-presets
branch
from
306e085
to
70fa14b
Compare
They must be coming from current active theme's theme.json. Let me validate again if it is an issue.
By design, selection happens by matching the values. When the shadow values match for both of them, they both are highlighted. It is also same for colors. We might need to take it to a different issue if this needs to behave differently.
Following are the default shadows. Can you confirm if these look okay? |
|
This could be an inspiration for shadows. |
Yep seems a separate issue. But I mentioned it because I'm fairly sure I had no shadow presets in any theme.jsons (unless I had leftovers from testing this branch before), so I was just confused to see both theme and default presets. I think we should use pure black with RGBA to ensure they work on any background color. How about these values instead? I used RGBA, made a top-down natural stacked shadow, and used rem units for flexibility. You can tinker in https://codepen.io/joen/pen/ExpjEMO?editors=1100. |
madhusudhand
force-pushed
the
shadow-presets
branch
from
70fa14b
to
61adfcc
Compare
oandregal
reviewed
Dec 27, 2022
|
Hey, I've done the following testing:
Other than the This is great work, thanks. This area has grown so much and has so many flows that adding a new feature requires a wide test plan. I'd only have a couple or recomendations:
|
|
@oandregal Thanks for the detailed testing and feedback. I have split the |
|
@madhusudhand Thanks for splitting your work in smaller steps! It improves the velocity of the review, so your work ship faster :) Both #46810 and #46813 are now merged. This can be rebased and focused on adding support for the user (UI in global styles sidebar). |
madhusudhand
force-pushed
the
shadow-presets
branch
2 times, most recently
from
d78aef2
to
e25741c
Compare
|
@jasmussen With this change, |
madhusudhand
force-pushed
the
shadow-presets
branch
from
e1543ac
to
31c6070
Compare
|
While more ideas on the UI are being discussed in the main issue, It is best to bring these changes in and iterate further. |
scruffian
approved these changes
Jan 31, 2023
|
Merging this in now would mean that it would likely be included in WordPress 6.2. Is this the intention or should this feature get a little more testing in the Plugin first? |
|
The discussion in the original issue lead to some new designs for the control (#44651 (comment)). If there's time then it might be nice to implement those and avoid changing things so soon after implementation? |
|
I agree with @scruffian; let's get a v1 of this and iterate on the UX. It's not uncommon to change the UX of a feature soon after its first launch in the plugin. |
|
Thank you all for the wonderful feedback. Merging this change and will create followups to iterate on the discussed ideas. |
fabiankaegy
added
the
Needs Dev Note
47 tasks
This was referenced Feb 22, 2023
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Feb 22, 2023
Adds Deep, Outlined, and Crisp default shadow presets to Core's `theme.json` file. Updates the Natural and Sharp `'shadow'` styles. These shadow presets are used to populate the Shadow tools in the Site Editor's Global Styles UI. References: * [WordPress/gutenberg#46502 Gutenberg PR 46502] Follow-up to [55176]. Props franz00, madhudollu, ajlende, beafialho, costdev, dhrupo, fabiankaegy, hellofromTonya, jameskoster, joen, kellychoffman, mamaduka, mtias, oandregal, priethor, richtabor, scruffian. Fixes #57708. See #57559. git-svn-id: https://develop.svn.wordpress.org/trunk@55405 602fd350-edb4-49c9-b593-d223f7449a82
github-actions bot
pushed a commit
to platformsh/wordpress-performance
that referenced
this pull request
Feb 22, 2023
Adds Deep, Outlined, and Crisp default shadow presets to Core's `theme.json` file. Updates the Natural and Sharp `'shadow'` styles. These shadow presets are used to populate the Shadow tools in the Site Editor's Global Styles UI. References: * [WordPress/gutenberg#46502 Gutenberg PR 46502] Follow-up to [55176]. Props franz00, madhudollu, ajlende, beafialho, costdev, dhrupo, fabiankaegy, hellofromTonya, jameskoster, joen, kellychoffman, mamaduka, mtias, oandregal, priethor, richtabor, scruffian. Fixes #57708. See #57559. Built from https://develop.svn.wordpress.org/trunk@55405 git-svn-id: https://core.svn.wordpress.org/trunk@54938 1a063a9b-81f0-0310-95a4-ce76da25c4cd
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Feb 22, 2023
Adds Deep, Outlined, and Crisp default shadow presets to Core's `theme.json` file. Updates the Natural and Sharp `'shadow'` styles. These shadow presets are used to populate the Shadow tools in the Site Editor's Global Styles UI. References: * [WordPress/gutenberg#46502 Gutenberg PR 46502] Follow-up to [55176]. Props franz00, madhudollu, ajlende, beafialho, costdev, dhrupo, fabiankaegy, hellofromTonya, jameskoster, joen, kellychoffman, mamaduka, mtias, oandregal, priethor, richtabor, scruffian. Fixes #57708. See #57559. Built from https://develop.svn.wordpress.org/trunk@55405 git-svn-id: http://core.svn.wordpress.org/trunk@54938 1a063a9b-81f0-0310-95a4-ce76da25c4cd
VenusPR
added a commit
to VenusPR/Wordpress_Richard
that referenced
this pull request
Mar 9, 2023
Adds Deep, Outlined, and Crisp default shadow presets to Core's `theme.json` file. Updates the Natural and Sharp `'shadow'` styles. These shadow presets are used to populate the Shadow tools in the Site Editor's Global Styles UI. References: * [WordPress/gutenberg#46502 Gutenberg PR 46502] Follow-up to [55176]. Props franz00, madhudollu, ajlende, beafialho, costdev, dhrupo, fabiankaegy, hellofromTonya, jameskoster, joen, kellychoffman, mamaduka, mtias, oandregal, priethor, richtabor, scruffian. Fixes #57708. See #57559. Built from https://develop.svn.wordpress.org/trunk@55405 git-svn-id: http://core.svn.wordpress.org/trunk@54938 1a063a9b-81f0-0310-95a4-ce76da25c4cd
34 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?
This adds support for shadow presets both default and theme presets.
Default presets: (needs design inputs for the shadow values)
And UI tools in global styles.
Testing Instructions
theme.json. (Following is the example)Testing Instructions for Keyboard
Screenshots or screencast
Partially fixes: #44651