Day 24: Styling Blocks with Custom CSS and Properties in Gutenberg

Introduction

Welcome to Day 24 of the Gutenberg development series! Today, we’ll focus on custom block styles and CSS custom properties, which allow you to add unique visual styles to your blocks. This can include custom classes, stylesheets, and even dynamic CSS variables that users can adjust through the editor.

In this guide, you’ll learn how to:

• Define custom styles for Gutenberg blocks.
• Use CSS custom properties for dynamic styling.
• Apply custom classes and stylesheets to blocks.

What are Custom Block Styles in Gutenberg?

Custom block styles allow you to provide alternative visual styles for a block, which users can select directly from the block’s settings. This is great for offering different layouts, color schemes, or design variations without needing to create entirely new blocks.

CSS custom properties (also known as CSS variables) enable you to define reusable values for colors, fonts, and other styles that can be adjusted dynamically, providing a more flexible approach to styling blocks.

Step 1: Adding Custom Block Styles

Let’s create custom styles for a Button Block that users can select from the block settings.

1. Register Custom Block Styles

In your block registration file (e.g., blocks/button-block.js), use the registerBlockStyle function to define the styles.

import { registerBlockType, registerBlockStyle } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';

registerBlockType('my-theme/button-block', {
    title: __('Button Block'),
    icon: 'button',
    category: 'my-custom-category',
    attributes: {
        label: {
            type: 'string',
            default: __('Click Me'),
        },
    },
    edit: ({ attributes, setAttributes }) => {
        const { label } = attributes;

        return (
            <button className="default-button">
                {label}
            </button>
        );
    },
    save: ({ attributes }) => {
        const { label } = attributes;

        return (
            <button className="default-button">
                {label}
            </button>
        );
    },
});

// Register custom styles for the Button Block
registerBlockStyle('my-theme/button-block', {
    name: 'outline',
    label: __('Outline'),
});

registerBlockStyle('my-theme/button-block', {
    name: 'rounded',
    label: __('Rounded'),
});

Explanation:

• registerBlockStyle: This function registers additional styles for the block, allowing users to choose between different styles like Outline and Rounded from the block settings.
• name: Unique identifier for the custom style.
• label: The name displayed in the block’s style options.

Step 2: Styling the Custom Block Styles with CSS

Now, let’s add custom CSS for the Outline and Rounded styles in your theme’s style.css file:

/* Default Button Style */
.default-button {
    background-color: #0073aa;
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    font-weight: bold;
}

/* Outline Style */
.is-style-outline {
    background-color: transparent;
    color: #0073aa;
    border: 2px solid #0073aa;
}

/* Rounded Style */
.is-style-rounded {
    border-radius: 20px;
}

Explanation:

• .is-style-outline: This class is automatically added when users select the Outline style in the editor, applying the transparent background and border.
• .is-style-rounded: This class is applied when the Rounded style is selected, giving the button a rounded shape.

Step 3: Using CSS Custom Properties for Dynamic Styling

To make your block styles more flexible, you can use CSS custom properties for colors, padding, and other styles.

1. Define CSS Variables in the Stylesheet

Add the following CSS custom properties to your style.css file:

:root {
    --button-bg-color: #0073aa;
    --button-text-color: #ffffff;
    --button-border-radius: 3px;
}

.default-button {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border-radius: var(--button-border-radius);
    padding: 10px 20px;
}

.is-style-outline {
    background-color: transparent;
    color: var(--button-bg-color);
    border: 2px solid var(--button-bg-color);
}

.is-style-rounded {
    border-radius: 20px;
}

Explanation:

• CSS Variables: The :root selector defines custom properties that can be reused throughout the stylesheet. This allows you to change values like --button-bg-color or --button-border-radius from a central location.
• Dynamic Colors: Use var(--property-name) to apply the value of a CSS variable, making it easy to update the design without changing multiple rules.

Step 4: Adding Color Controls to Modify CSS Variables

To give users control over the CSS variables, you can add color pickers in the block’s settings.

1. Add Color Pickers in InspectorControls

Update your Button Block to include color controls that adjust the custom properties:

import { InspectorControls, ColorPalette } from '@wordpress/block-editor';
import { PanelBody } from '@wordpress/components';

registerBlockType('my-theme/button-block', {
    title: __('Button Block'),
    icon: 'button',
    category: 'my-custom-category',
    attributes: {
        label: {
            type: 'string',
            default: __('Click Me'),
        },
        backgroundColor: {
            type: 'string',
            default: '#0073aa',
        },
        textColor: {
            type: 'string',
            default: '#ffffff',
        },
    },
    edit: ({ attributes, setAttributes }) => {
        const { label, backgroundColor, textColor } = attributes;

        const style = {
            '--button-bg-color': backgroundColor,
            '--button-text-color': textColor,
        };

        return (
            <>
                <InspectorControls>
                    <PanelBody title={__('Button Colors')}>
                        <p>{__('Background Color')}</p>
                        <ColorPalette
                            value={backgroundColor}
                            onChange={(color) => setAttributes({ backgroundColor: color })}
                        />
                        <p>{__('Text Color')}</p>
                        <ColorPalette
                            value={textColor}
                            onChange={(color) => setAttributes({ textColor: color })}
                        />
                    </PanelBody>
                </InspectorControls>
                <button className="default-button" style={style}>
                    {label}
                </button>
            </>
        );
    },
    save: ({ attributes }) => {
        const { label, backgroundColor, textColor } = attributes;

        const style = {
            '--button-bg-color': backgroundColor,
            '--button-text-color': textColor,
        };

        return (
            <button className="default-button" style={style}>
                {label}
            </button>
        );
    },
});

Explanation:

• Dynamic Styles: The style object dynamically sets CSS variables, allowing users to control the background and text colors of the button.
• ColorPalette: This component provides a color picker in the sidebar, enabling users to select custom colors for the button.

Step 5: Testing the Custom Styles and Controls

1. Rebuild the Block:
   • Run your build command to ensure the block and its custom styles are properly loaded.

npm run build

2. Test in the Block Editor:
   • Add the Button Block to a post or page.
   • Use the style options to switch between the Default, Outline, and Rounded styles.
   • Adjust the background and text colors using the sidebar controls.
3. Check the Front-End Display:
   • Preview the post or page on the front end to ensure that the custom styles and dynamic colors are applied correctly.

Best Practices for Custom Block Styles

1. Use Descriptive Style Names: Ensure that style names like Outline or Rounded clearly describe their visual effect, making it easier for users to choose the right style.
2. Leverage CSS Variables: Use custom properties to make your styles more maintainable and flexible, allowing users to customize colors and other styles through controls.
3. Test Across Devices: Ensure that your custom styles and CSS properties work consistently across different devices and screen sizes.

Conclusion: Styling Blocks with Custom CSS and Properties

Custom block styles and CSS properties give you the power to offer versatile design options within Gutenberg. By defining different styles and allowing users to adjust key properties, you can create blocks that adapt to any design requirement while maintaining a consistent look and feel. This flexibility helps you build more user-friendly and visually appealing blocks, making your WordPress site easier to customize for any user.

In this article, you’ve learned how to:

• Create custom styles for Gutenberg blocks using registerBlockStyle.
• Define and use CSS custom properties for dynamic styling.
• Allow users to modify styles through the InspectorControls.

In Day 25, we’ll explore building block patterns in Gutenberg, a feature that enables users to add pre-designed block layouts with a single click.