Skip to content

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

Merged
scruffian merged 5 commits intotrunkfrom
shadow-template-support
Jan 19, 2023
Merged

Add box shadow support to blocks (using code editor for now).#46896
scruffian merged 5 commits intotrunkfrom
shadow-template-support

Conversation

@madhusudhand
Copy link
Copy Markdown
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
Copy Markdown

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:

),
),
),
'shadow' => array(
Copy link
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
Contributor

Yes this should be backported.

@ramonjd
Copy link
Copy Markdown
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