Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add box shadow support to blocks (using code editor for now). #46896

Merged
merged 5 commits into from
Jan 19, 2023
Merged

Add box shadow support to blocks (using code editor for now). #46896

merged 5 commits into from
Jan 19, 2023

Conversation

madhusudhand
Copy link
Member

@madhusudhand madhusudhand commented Jan 5, 2023 •
edited by scruffian
Loading

What?

Adds support for shadow via templates.

  • Allows to set a preset shadow using the shadow block prop.
<!-- wp:post-title {"shadow":"natural"} /-->
  • Allows to set a custom shadow using the style prop.
<!-- wp:post-title {"style":{"shadow": "10px 10px 10px 10px #000"}} /-->

Testing Instructions

  1. Active a block theme.
  2. Give shadow definitions to blocks such as page-title using shadow or style props in the templates.
  3. Validate that shadow is applied to the block in editor and frontend.

Screenshots or screencast

image

@madhusudhand madhusudhand mentioned this pull request Jan 5, 2023
Draft
@github-actions
Copy link

github-actions bot commented Jan 17, 2023 •
edited
Loading

Flaky tests detected in 70a2e72.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/3956915668
📝 Reported issues:

scruffian
scruffian reviewed Jan 19, 2023
View reviewed changes
packages/style-engine/class-wp-style-engine.php Outdated
@@ -136,6 +136,17 @@ final class WP_Style_Engine {
),
),
),
'shadow' => array(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's make this boxShadow, so we can also have textShadow later.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can do this in a different PR

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeh, we should do this in a follow up as shadow is used in a number of places that are merged already

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually thinking about it a bit more, the same shadow presets can work for both text and box shadows, so I'm not sure we should rename it...

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like they don't work.
Text shadow doesn't have spread prop and supplying a box-shadow value to text-shadow doesn't work.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok let's keep shadow here and if we add text shadow in the future they will live under typography.

scruffian
scruffian reviewed Jan 19, 2023
View reviewed changes
lib/block-supports/shadow.php Outdated
return array();
}

$has_shadow_support = _wp_array_get( $block_type->supports, array( 'shadow' ), false );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we use block_has_support here too?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, missed that, done.

@scruffian scruffian changed the title DRAFT: Add box shadow support via templates Add box shadow support via templates Jan 19, 2023
@scruffian scruffian marked this pull request as ready for review January 19, 2023 09:34
scruffian
scruffian approved these changes Jan 19, 2023
View reviewed changes
Copy link
Contributor

@scruffian scruffian left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@scruffian scruffian enabled auto-merge (squash) January 19, 2023 09:37
@scruffian scruffian changed the title Add box shadow support via templates Add box shadow support to blocks (using code editor for now). Jan 19, 2023
@scruffian scruffian merged commit 758372a into trunk Jan 19, 2023
@scruffian scruffian deleted the shadow-template-support branch January 19, 2023 09:40
@github-actions github-actions bot added this to the Gutenberg 15.1 milestone Jan 19, 2023
@bgardner bgardner mentioned this pull request Jan 19, 2023
Closed
@juanmaguitar juanmaguitar added [Type] Enhancement A suggestion for improvement. [Feature] Blocks Overall functionality of blocks labels Feb 1, 2023
@ramonjd ramonjd mentioned this pull request Jun 5, 2023
Closed
@ramonjd ramonjd added the Needs PHP backport Needs PHP backport to Core label Jun 5, 2023
@ramonjd
Copy link
Member

ramonjd commented Jun 5, 2023

Could folks confirm if this needs a backport for 6.3? I couldn't find the relevant change in WordPress core. Should it be in kses.php?

@scruffian
Copy link
Contributor

Yes this should be backported.

@ramonjd
Copy link
Member

ramonjd commented Jun 15, 2023

@madhusudhand or @glendaviesnz are you able to backport this change?

@madhusudhand madhusudhand mentioned this pull request Jun 21, 2023
Closed
@ramonjd ramonjd mentioned this pull request Jun 26, 2023
Closed
@ramonjd ramonjd removed the Needs PHP backport Needs PHP backport to Core label Jun 27, 2023
@madhusudhand madhusudhand mentioned this pull request Dec 15, 2023
Closed
7 tasks
@madhusudhand madhusudhand mentioned this pull request Jan 12, 2024
Merged
2 tasks
@bgardner bgardner mentioned this pull request Jan 21, 2024
Closed
@aaronrobertshaw aaronrobertshaw mentioned this pull request Jul 21, 2024
Closed
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@glendaviesnz glendaviesnz glendaviesnz left review comments

@scruffian scruffian scruffian approved these changes

@spacedmonkey spacedmonkey Awaiting requested review from spacedmonkey spacedmonkey is a code owner

Assignees
No one assigned
Labels
[Feature] Blocks Overall functionality of blocks [Type] Enhancement A suggestion for improvement.
Projects
None yet
Milestone
Gutenberg 15.1
Development

Successfully merging this pull request may close these issues.
5 participants
@madhusudhand @ramonjd @scruffian @glendaviesnz @juanmaguitar