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 for blocks via templates #43184

Closed

Conversation

madhusudhand
Copy link
Member

What?

This PR is an extension of #41972

It aims at two features

  1. Define a set of shadows in theme.json similar to that of fontSizes and generate preset variables that can be used across the theme.
"settings": {
    "shadows": [{
            "slug": "material",
            "x": "5px",
            "y": "5px",
            "spread": "10px",
            "color": "green"
    },{
            "slug": "billboard",
            "x": "5px",
            "y": "5px",
            "spread": "10px",
            "color": "red"
    }],
}

image

  1. Enable the use of slugs in templates
<!-- wp:post-title {"level":3,"isLink":true,"shadow":"material"} /-->
  1. Enable the custom shadow (user selected values from the editor)
<!-- wp:post-title {"level":3,"isLink":true,"style":{"shadow": "10px 10px 1px 1px black"}} /-->

Why?

Changes #41972 helps in defining a shadow by targeting a block and it applies to all the instances.
While this is good, it doesn't allow to give a shadow only to a specific block such as apply shadow only to outer group block or special type of button etc..

This PR fills the gap by adopting the similar approach of fontSize

How?

Testing Instructions

Screenshots or screencast

@github-actions
Copy link

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @madhusudhand! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Aug 12, 2022
@carolinan
Copy link
Contributor

To eventually create an UI for this, does it not need both a name -the visual label, and the slug?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants