Styling Buttons in WordPress Block Themes

New features introduced in WordPress 6.1 provide control for applying shadows directly in the Block Editor and Site Editor UI, and this article will dive into ways to style buttons in WordPress block themes, especially with theme.json files.

Why select the button? This is a good question, let's start here.

Different types of buttons

In the context of the WordPress block editor, we have to distinguish between two different types of buttons:

1. Subblocks in button block.
2. Buttons nested within other blocks (for example, the Article Comment Form block).

If we add these two blocks to the template, they have the same appearance by default.

But its marks are very different:

<div>
  <a>Button 1</a>
</div>
<p>
  </p>

We can see that the HTML tag names are different. It is the common class names - .wp-block-button and .wp-element-button - that ensure the consistent style of the two buttons.

If we write CSS, we will target these two classes. But as we all know, WordPress block themes have different style management methods, that is, through theme.json files.

So, how do you define button styles in theme.json without writing actual CSS? Let's do it together.

Create basic style

theme.json is a structured set of patterns written in the form of attribute:value pairs. The top-level attribute is called "sections", and we will use the styles section. This is where all style directives are located.

We will pay special attention to styles in elements. This selector locates HTML elements shared between blocks. Here is the basic framework we are using:

// theme.json
{
  "version": 2,
  "styles": {
    "elements": {
      // etc.
    }
  }
}

What we need to do is define a button element.

{
  "version": 2,
  "styles": {
    "elements": {
      "button": {
        // etc.
      }
    }
  }
}

This button corresponds to the HTML element used to mark the button element on the front end. These buttons contain HTML tags that may be one of our two button types: standalone components (i.e. button blocks) or components nested in another block (e.g., article comment blocks).

Instead of having to style each individual block, create a shared style. Let's go ahead and change the default background color and text color for the two button types in the theme. There is a color object in it, which in turn supports background and text properties, where we set the desired value:

{
  "version": 2,
  "styles": {
    "elements": {
      "button": {
        "color": {
          "background": "#17a2b8",
          "text": "#ffffff"
        }
      }
    }
  }
}

This changes the colors of both buttons.

If you open DevTools and view the CSS generated by WordPress for the button, we will see that the .wp-element-button class adds the style we defined in theme.json:

.wp-element-button {
  background-color: #17a2b8;
  color: #ffffff;
}

These are our default colors! Next, we want to provide visual feedback to users as they interact with buttons.

Implement interactive button style

Since this is a site about CSS, I bet many of you are already familiar with the interaction status of links and buttons. We can hover the mouse cursor over them (:hover), tab them to focus (:focus), and click them to keep them active (:active). There is even a :visited status that visually shows the user that they have clicked on this before.

These are CSS pseudo-classes, which we use to locate the interaction of links or buttons.

In CSS, we may style the :hover state like this:

<div>
  <a>Button 1</a>
</div>
<p>
  </p>

In theme.json, we will use these pseudo-classes to extend existing button declarations.

// theme.json
{
  "version": 2,
  "styles": {
    "elements": {
      // etc.
    }
  }
}

Please note its "structured" properties. We basically follow a summary:

• Element
  • Element
    • Object
      • Properties
        • Value

We have now completed the complete definition of the default and interactive styles of the button. But what if we want to style some buttons nested in other blocks?

Set the style of buttons nested in each block

Let's assume we want all buttons to have our basic style, with one exception. We want the Submit button in the Article Comment Form block to be blue. How should we achieve it?

This block is more complex than a button block because it contains more active parts: forms, inputs, descriptive text, and buttons. In order to locate the buttons in this block, we must follow the same JSON structure as the button element, but apply to the "Article Comment Form" block mapped to the core/post-comments-form element:

{
  "version": 2,
  "styles": {
    "elements": {
      "button": {
        // etc.
      }
    }
  }
}

Please note that we no longer work in elements. Instead, we work within blocks, which is used to configure the actual blocks. By contrast, buttons are considered a global element because they can be nested in blocks, even if they can be used as standalone blocks.

JSON structure supports elements within elements. So if there is a button element in the Article Comment Form block, we can locate it in the core/post-comments-form block:

{
  "version": 2,
  "styles": {
    "elements": {
      "button": {
        "color": {
          "background": "#17a2b8",
          "text": "#ffffff"
        }
      }
    }
  }
}

This selector means that we are not only locating a specific block—we are also locating a specific element contained in that block. Now we have a set of default button styles that apply to all buttons in the topic, and a set of styles that apply to specific buttons contained in the Article Comment Form block.

WordPress generated CSS therefore has a more accurate selector:

.wp-element-button {
  background-color: #17a2b8;
  color: #ffffff;
}

What if we want to define different interactive styles for the "Article Comment Form" button? This is the same way we did for the default styles, except that these styles are defined within the core/post-comments-form block:

<div>
  <a>Button 1</a>
</div>
<p>
  </p>

What should I do if the buttons in non-blocks?

WordPress automatically generates and applies the correct classes to output these button styles. But what if you use a "hybrid" WordPress theme that supports block and site-wide editing but also contains "classic" PHP templates? Or, what if you created a custom block, even an old version of the shortcode with a button? These are not handled by WordPress style engines!

Don't worry. In all these cases, you will add the .wp-element-button class to the template, block, or shortcode tag. The styles generated by WordPress will then be applied.

In some cases, you may not be able to control the marking. For example, some block plugins may be too arbitrary and apply their own styles at will. At this point, you can usually go to the Advanced option in the Block Settings panel and apply the class there:

Summary

While it might feel awkward to write "CSS" in theme.json at first, I found it to be second nature. Like CSS, you can apply a limited number of properties extensively or very precisely using the correct selector.

and don't forget to use theme.json three main advantages:

1. styles apply to buttons in front-end view and block editor.
2. Your CSS will be compatible with future WordPress updates.
3. The generated styles are compatible with block themes and classic themes—no need to copy anything in a separate style sheet.

If you use the theme.json style in your project, please share your experiences and ideas. I look forward to reading any comments and feedback!

The above is the detailed content of Styling Buttons in WordPress Block Themes. For more information, please follow other related articles on the PHP Chinese website!