Add effects/box shadow tools to block inspector #57654
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
|
Size Change: +226 B (0%) Total Size: 1.7 MB
ℹ️ View Unchanged
|
|
This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress. If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged. If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack. Thank you! ❤️ View changed files❔ lib/block-supports/shadow.php |
vcanales
added
[Package] Block editor
There was a problem hiding this comment.
Thanks for the ping @vcanales! Nice work so far, the overall direction is looking good to me, and if I add a "shadow": true line to the Group block's supports array, I can get the panel showing 👍
Just left a question about whether we should store the shadow prop within the style object instead so that it's grouped together with other style-based block supports in the block attributes. It looks like some of the pre-existing code in gutenberg_apply_shadow_support expects the shape of style.shadow, as far as I can tell.
I know this is still in Draft mode, but It looks like the next step might be to get the classname output happening in the block editor?
Let me know if there's anything in particular you'd like me to test! 🙂
There was a problem hiding this comment.
This is a great start @vcanales! 👍
@andrewserong covered most of my thoughts but I've added a some extra comments in those threads.
FWIW my recommendation would be to solidify the handling of the shadow style values through the effects panel first. Then move on to making sure those style values are generating the correct CSS classes etc.
vcanales
force-pushed
the
add-effects-block-inspector-panel
branch
from
0b81b22
to
86e6be7
Compare
vcanales
requested review from
spacedmonkey,
ajitbohra,
ellatrix and
ajlende
as code owners
vcanales
changed the title
|
Finished implementing Block Support for shadows on the Button block; these changes can now be used as reference to implement shadows support on other blocks :) Kapture.2024-01-18.at.14.42.02.mp4 |
vcanales
commented
Jan 18, 2024
|
Flaky tests detected in 9dc33f5. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7611077070
|
|
We are aiming to bring this into GB 17.6. Could you please review. |
mikachan
reviewed
Jan 23, 2024
There was a problem hiding this comment.
This is testing really well for me 🎉 Here's my test report:
- Able to set the different shadow presets on a button block via the styles panel for the block in the editor ✅
- Able to set different shadow presets via global styles for the button block ✅
- Block settings override global styles ✅
- Added a custom preset to a theme.json file, the preset showed in the styles panel ✅
- Added a shadow string directly to the button template and could see the shadow on the front end and the editor ✅
it looks like the components changelog needs updating, probably to include an entry explaining how the effects panel has been added.
madhusudhand
force-pushed
the
add-effects-block-inspector-panel
branch
from
73e8508
to
1bc8d97
Compare
vcanales
force-pushed
the
add-effects-block-inspector-panel
branch
from
efe46a2
to
58a05ad
Compare
mikachan
approved these changes
Jan 23, 2024
There was a problem hiding this comment.
Approving as this is testing well for me 🎉
Edit: Looks like the mobile test failures are related to __experimentalGetShadowClassesAndStyles, so sounds like it's related to this PR?
|
Awesome! Now we hope for this: #57982 |
|
I'm a bit late to the review party, sorry. 🙂 It looks like there were a couple of minor tweaks that should be cleaned up.
I've created a quick PR to address these over in #58155 |
No worries! I've tested and approved the PR. Thanks for taking a look! |
Mamaduka
reviewed
Jan 24, 2024
|
I noticed this PR was merged after I raised the PHP Sync Tracking Issue for WP 6.5 and has changed PHP files that may need backporting to WP Core. Please forgive the ping, but I marked as |
Tracking Issue has been updated. |
youknowriad
added
Backported to WP Core
|
I love that box shadow is making it's way into the block editor! 👏 I think this is the same context thing as with colours and background colours right? For example, why not use the same approach as with style variations? Edit: To clarify I'm not voting against what is here, I'm just curious as to how the UX is decided and why :) |
|
Updated on PHP Sync Tracking Issue for WP 6.5 to denote complete. Thank you for working on this. |
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.
Introduces Shadow controls, within the Block Inspector's Effects panel, for blocks which have shadow support.
To-do
Screenshot
Testing Instructions
Scope
Changes in this PR includes shadow support only Button block. To test for more blocks, enable the support.
example:
packages/block-library/src/columns/block.jsonTest with presets
Test with custom preset
Add a custom preset to your
theme.jsonIt should appear in the UI and should work similar to presets.
Test with a direct shadow string.
Test by adding a shadow string directly to the button template as follows.