WordPress Block Editor: Block Attributes and Controls

As WordPress developers, these two concepts are core to how we build rich, interactive, and dynamic content editing experiences in the Block Editor.

In this blog post, we’ll explore what block attributes and controls are, how they work, and how we can use them effectively in our custom blocks.

What Are Block Attributes?

In simple terms, block attributes are the data fields that define the content or behavior of a block. Think of them as the settings or properties that make our block unique and functional.

For example, a “Heading” block might have the following attributes:

content: The text of the heading.
level: The heading level (e.g., h2, h3).
align: Text alignment.

Defining Attributes in a Block

When we register a block using registerBlockType, we define the attributes in the configuration:

registerBlockType('myplugin/alert-box', {
  title: 'Alert Box',
  icon: 'warning',
  category: 'widgets',

  attributes: {
    message: {
      type: 'string',
      default: 'This is an alert box!',
    },
    backgroundColor: {
      type: 'string',
      default: '#ffcc00',
    },
  },

  edit({ attributes, setAttributes }) {
    const { message, backgroundColor } = attributes;

    return (
      <div style={{ backgroundColor }}>
        <RichText
          tagName="p"
          value={message}
          onChange={(value) => setAttributes({ message: value })}
        />
      </div>
    );
  },

  save({ attributes }) {
    return (
      <div style={{ backgroundColor: attributes.backgroundColor }}>
        <RichText.Content tagName="p" value={attributes.message} />
      </div>
    );
  },
});

What Are Controls in the Block Editor?

Controls are the UI elements we use to let users change a block’s attributes. These can include:

Text inputs
Color pickers
Toggle switches
Dropdowns

Adding Inspector Controls

To let users modify attributes, we add UI controls using components from @wordpress/components inside the block’s edit function.

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

edit({ attributes, setAttributes }) {
  const { backgroundColor } = attributes;

  const colors = [
    { name: 'Yellow', color: '#ffcc00' },
    { name: 'Red', color: '#ff4444' },
    { name: 'Green', color: '#44ff44' },
  ];

  return (
    <>
      <InspectorControls>
        <PanelBody title="Background Color" initialOpen={true}>
          <ColorPalette
            colors={colors}
            value={backgroundColor}
            onChange={(color) => setAttributes({ backgroundColor: color })}
          />
        </PanelBody>
      </InspectorControls>

      <div style={{ backgroundColor }}>
        <RichText
          tagName="p"
          value={attributes.message}
          onChange={(value) => setAttributes({ message: value })}
        />
      </div>
    </>
  );
}

How Attributes and Controls Work Together

The relationship is simple but powerful:

Attributes hold the data.
Controls let users change that data.
The block reflects those changes live in the editor and in the saved content.

This structure allows us to build dynamic blocks that are reusable and fully customizable from the editor.

Summary

In Gutenberg block development, attributes are the data model, and controls are the interface. When we define them thoughtfully and use them properly, we can create flexible and intuitive content editing experiences that our users love.

By understanding how these parts work together, we’re able to build blocks that are both user-friendly and developer-friendly.

Lakshyajeet.