Adding Box Shadows to WordPress Blocks and Elements

Add box shadows in WordPress 6.1 Theme JSON file

Recently, Ana Segota asked on Twitter how to add a CSS box shadow to the button's hover state in the theme.json file of a WordPress theme. This is because WordPress wants us to start using theme.json in block themes to set basic styles. Traditionally, we use style.css in the "Class" theme for all styles. But with the recent release of the default Twenty Twenty-Three (TT3) theme with WordPress 6.1 migrating all its styling to theme.json, we are getting closer and closer to being able to do the same in our own themes.

However, theme.json still does not support many CSS properties and selectors. For example, it is currently impossible to use perspective-origin and other properties in theme.json to style.

Luckily, starting with WordPress 6.1, theme.json supports the box-shadow attribute. Here is how to apply box shadowing in theme.json for a specific block (such as featured image block):

{
  "version": 2,
  "settings": {},
  // ...其他设置
  "styles": {
    "blocks": {
      "core/post-featured-image": {
        "shadow": "10px 10px 5px 0px rgba(0, 0, 0, 0.66)"
      }
    }
  }
}

New color syntax rgb(0 0 0 / 0.66) does not seem to be supported yet.

Similarly, we can apply box shadows to a single "element" (such as buttons). A button itself is a block, but it can also be nested in another block. To apply globally to box shadows for all buttons, you can do the following in theme.json:

{
  "version": 2,
  "settings": {},
  // ...其他设置
  "styles": {
    "elements": {
      "button": {
        "shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
      }
    }
  }
}

Ana Want to add shadow to the :hover status of the button. Thankfully, WordPress 6.1 also supports styles for the interactive state of certain elements such as buttons and links using pseudo-classes (including :hover, :focus, :active, and :visited).

{
  "version": 2,
  "settings": {},
  // ...其他设置
  "styles": {
    "elements": {
      "button": {
        ":hover": {
          "shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
        }
      }
    }
  }
}

If you use a parent theme, you can override the theme style in the child theme. The following code completely covers the button style of TT3:

View the full code

{
  "version": 2,
  "settings": {},
  // ...其他设置
  "styles": {
    "elements": {
      "button": {
        "border": {
          "radius": "0"
        },
        "color": {
          "background": "var(--wp--preset--color--tertiary)",
          "text": "var(--wp--preset--color--contrast)"
        },
        "outline": {
          "offset": "3px",
          "width": "3px",
          "style": "dashed",
          "color": "red"
        },
        "typography": {
          "fontSize": "var(--wp--preset--font-size--medium)"
        },
        "shadow": "5px 5px 5px 0px rgba(9, 30, 66, 0.25), 5px 5px 5px 1px rgba(9, 30, 66, 0.08)",
        ":hover": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          },
          "outline": {
            "offset": "3px",
            "width": "3px",
            "style": "solid",
            "color": "blue"
          }
        },
        ":focus": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":active": {
          "color": {
            "background": "var(--wp--preset--color--secondary)",
            "text": "var(--wp--preset--color--base)"
          }
        }
      }
    }
  }
}

Another way is to use custom styles, such as the .settings.custom.shadow attribute defined in a Pixl theme.

In addition, the outline attribute also supports theme.json and can be applied to buttons and their interaction states.

All in all, there are many ways to set the box shadow for block themes in WordPress 6.1, including officially supported settings, custom style methods, and methods to overwrite styles in sub-themes. For more information, please refer to the links listed in the article.

The above is the detailed content of Adding Box Shadows to WordPress Blocks and Elements. For more information, please follow other related articles on the PHP Chinese website!