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.

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

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

Merged
merged 5 commits into from
Jan 19, 2023

Conversation

madhusudhand
Copy link
Member

@madhusudhand madhusudhand commented Jan 5, 2023

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 force-pushed the shadow-template-support branch from 97d2369 to acacb73 Compare January 17, 2023 06:48
@github-actions
Copy link

github-actions bot commented Jan 17, 2023

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:

@@ -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.

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
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
@juanmaguitar juanmaguitar added [Type] Enhancement A suggestion for improvement. [Feature] Blocks Overall functionality of blocks labels Feb 1, 2023
@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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Blocks Overall functionality of blocks [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants