How to Set a Default Overlay Color for the WordPress Cover Block

• The theme.json file is a configuration file that lets you define the global settings and styles for your WordPress theme, such as color palettes, gradients, typography, and more.
• You can set a default overlay color for the Cover block by adding a color property with an overlay property inside the core/cover property in the blocks section of the theme.json file. You can use any valid CSS color value or a preset color from your theme.json file as the overlay value.
• You can check the result of setting a default overlay color for the Cover block by adding a Cover block to your post or page and seeing the overlay color in the block settings. You can also change the overlay color for each Cover block individually if you want.

The WordPress Cover block is a versatile block that allows you to add an image or video with a text overlay. You can use it to create stunning headers, banners, or call-to-actions on your website. However, you may want to customize the overlay color of the Cover block to match your theme or design. By default, the Cover block adds a gray transparent overlay to darken the background image, but you can choose any color you like, or even a gradient if you prefer.

In this article, we will show you how to set a default overlay color for the WordPress Cover block using the theme.json file. This file is a configuration file that lets you define the global settings and styles for your theme. You can use it to enable or disable features, configure color palettes, gradients, typography, and more. By setting a default overlay color for the Cover block in theme.json, you can ensure that all your Cover blocks have a consistent look and feel across your website.

What is theme.json?

Theme.json is a JSON file that you can add to the root folder of your theme. It was introduced in WordPress version 5.8 and does not work with older versions of WordPress unless you activate the Gutenberg plugin. The file has several top-level sections, such as settings, styles, customTemplates, templateParts, and patterns. Each section has different properties that you can use to customize various aspects of your theme.

One of the sections that we will focus on in this article is the settings section. This section lets you define your block controls and color palettes, font sizes, and more. You can target both the website and blocks with settings. For example, you can place global settings at the root level of the section, or place block-specific settings inside “blocks”, followed by the block name.

How to create a theme.json file

To create a theme.json file, you need to follow these steps:

1. Open your WordPress theme folder using an FTP client or a file manager.
2. Create a new file called theme.json inside the root folder of your theme.
3. Add a pair of curly brackets {} and inside them, include the version number: {“version”: 2}. It is important to include the version attribute; otherwise, the data will be parsed as “version 0”, which differs greatly from the expected behavior.
4. Add the section name “settings” and place your settings between the curly brackets: {“version”: 2, “settings”: {…}}. Separate objects with commas.
5. Save and upload your theme.json file to your theme folder.

How to set a default overlay color for the Cover block

Now that you have created your theme.json file, you can use it to set a default overlay color for the Cover block. To do that, you need to follow these steps:

1. Open your theme.json file using a code editor.
2. Inside the settings section, add a blocks property and inside it, add a core/cover property. This will target the Cover block specifically: {“version”: 2, “settings”: {“blocks”: {“core/cover”: {…}}}}.
3. Inside the core/cover property, add a color property and inside it, add an overlay property. This will let you define the overlay color for the Cover block: {“version”: 2, “settings”: {“blocks”: {“core/cover”: {“color”: {“overlay”: …}}}}}.
4. Inside the overlay property, you can specify any valid CSS color value as a string. For example, you can use a named color like “red”, a hexadecimal value like “#ff0000”, an RGB value like “rgb(255,0,0)”, or an HSL value like “hsl(0,100%,50%)”. Alternatively, you can use one of the preset colors that you have defined in your theme.json file by using its slug as a string. For example, if you have defined a preset color with the slug “primary”, you can use it as “overlay”: “primary”.
5. Save and upload your theme.json file to your theme folder.

Here is an example of how your theme.json file might look like after setting a default overlay color for the Cover block:

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        {
          "slug": "primary",
          "color": "#0073aa"
        },
        {
          "slug": "secondary",
          "color": "#229fd8"
        },
        {
          "slug": "tertiary",
          "color": "#eee"
        }
      ]
    },
    "blocks": {
      "core/cover": {
        "color": {
          "overlay": "#229fd8"
        }
      }
    }
  }
}

In this example, we have defined a color palette with three colors: primary, secondary, and tertiary. We have used the secondary color as the default overlay color for the Cover block. You can change the colors and slugs according to your preference.

How to check the result

To check the result of setting a default overlay color for the Cover block, you need to follow these steps:

1. Go to your WordPress dashboard and create a new post or page.
2. Add a Cover block and choose an image or video as the background.
3. You should see that the Cover block has the overlay color that you have set in your theme.json file. You can also check the overlay color in the block settings on the right panel.
4. If you want to change the overlay color for a specific Cover block, you can do so by choosing a different color from the overlay section in the block settings. This will override the default overlay color that you have set in your theme.json file.

Frequently Asked Questions (FAQs)

Question: What is the difference between setting a default overlay color and setting a custom overlay color for the Cover block?

Answer: Setting a default overlay color for the Cover block means that all your Cover blocks will have the same overlay color unless you change it manually for each block. Setting a custom overlay color for the Cover block means that you can choose a different overlay color for each block individually.

Question: How can I set a default gradient or duotone overlay for the Cover block?

Answer: To set a default gradient or duotone overlay for the Cover block, you need to use the same steps as setting a default solid color overlay, but instead of using a color value, you need to use a gradient or duotone value. For example, to set a default gradient overlay, you can use something like this: {“color”: {“overlay”: “linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)”}}. To set a default duotone overlay, you can use something like this: {“color”: {“overlay”: {“type”: “duotone”, “values”: [“#000”, “#B9FB9C”]}}}.

Question: How can I disable the overlay feature for the Cover block?

Answer: To disable the overlay feature for the Cover block, you need to set the overlay property to false in your theme.json file. For example: {“color”: {“overlay”: false}}. This will remove the overlay option from the block settings and prevent any overlay from being applied to the Cover block.

Summary

In this article, we have shown you how to set a default overlay color for the WordPress Cover block using the theme.json file. This is a useful way to customize the appearance of your Cover blocks and make them consistent with your theme or design. You can also change the overlay color for each Cover block individually if you want to create some variation. We hope this article has helped you learn how to use theme.json to enhance your WordPress website.

Disclaimer: This article is intended for informational purposes only and does not constitute professional advice. We are not responsible for any errors or omissions in this article or for any damages arising from its use. We recommend that you consult with a qualified WordPress developer before making any changes to your theme.json file or your website.