Block attributes and controls in Wordpress

Introduction

Block attributes store the settings or data of a block. Controls let users change these settings easily in the editor.

When you want users to customize text, colors, or images inside a block.

When you need to save user choices like font size or alignment.

When you want to add buttons or sliders to change block content.

When you want to keep block data consistent and editable.

When building reusable blocks that need flexible options.

Syntax

Wordpress

registerBlockType('namespace/block-name', {
  attributes: {
    attributeName: {
      type: 'string',
      default: 'default value'
    }
  },
  edit: (props) => {
    const { attributes, setAttributes } = props;
    return (
      <TextControl
        label="Label"
        value={attributes.attributeName}
        onChange={(value) => setAttributes({ attributeName: value })}
      />
    );
  },
  save: (props) => {
    return <p>{props.attributes.attributeName}</p>;
  },
});

Attributes define what data the block holds and how it is saved.

Controls like TextControl let users change attributes in the editor.

Examples

This defines a text attribute named content with a default value.

Wordpress

attributes: {
  content: { type: 'string', default: 'Hello!' }
}

This control lets the user edit the content attribute with a text input.

Wordpress

<TextControl
  label="Content"
  value={attributes.content}
  onChange={(value) => setAttributes({ content: value })}
/>

A boolean attribute to store true/false state.

Wordpress

attributes: {
  isActive: { type: 'boolean', default: false }
}

A toggle switch control to change the boolean attribute.

Wordpress

<ToggleControl
  label="Active"
  checked={attributes.isActive}
  onChange={(value) => setAttributes({ isActive: value })}
/>

Sample Program

This block lets users type a message and choose to show or hide it. The message and toggle are saved as attributes.

Wordpress

import { registerBlockType } from '@wordpress/blocks';
import { TextControl, ToggleControl } from '@wordpress/components';

registerBlockType('myplugin/simple-block', {
  title: 'Simple Block',
  icon: 'smiley',
  category: 'common',
  attributes: {
    message: { type: 'string', default: 'Hello, world!' },
    showMessage: { type: 'boolean', default: true }
  },
  edit: ({ attributes, setAttributes }) => {
    return (
      <div>
        <TextControl
          label="Message"
          value={attributes.message}
          onChange={(value) => setAttributes({ message: value })}
        />
        <ToggleControl
          label="Show Message"
          checked={attributes.showMessage}
          onChange={(value) => setAttributes({ showMessage: value })}
        />
        {attributes.showMessage && <p>{attributes.message}</p>}
      </div>
    );
  },
  save: ({ attributes }) => {
    return attributes.showMessage ? <p>{attributes.message}</p> : null;
  }
});

Important Notes

Always provide default values for attributes to avoid errors.

Use controls that match the attribute type for better user experience.

Remember to update attributes with setAttributes inside controls.

Summary

Block attributes hold the data or settings of a block.

Controls let users change these attributes in the editor.

Use attributes and controls together to make blocks interactive and customizable.