Block attributes and controls in Wordpress - Mini Project: Build & Apply

WordPress Block Attributes and Controls

📖 Scenario: You are creating a custom WordPress block for a blog editor. This block will allow users to enter a title and a description. You want to store these inputs as block attributes and provide controls in the block editor to update them.

🎯 Goal: Build a simple WordPress block that has two attributes: title and description. Add controls in the block editor sidebar to edit these attributes. The block should display the title as a heading and the description as a paragraph.

📋 What You'll Learn

Create block attributes title and description with default empty strings

Add controls in the block editor sidebar to update title and description

Render the block output showing the title in an <h2> and the description in a <p>

Use functional components and hooks as per WordPress block editor standards

💡 Why This Matters

🌍 Real World

Custom WordPress blocks let content creators add specialized content easily with tailored controls and saved data.

💼 Career

Understanding block attributes and controls is essential for WordPress developers building custom blocks for clients or themes.

1

Set up block attributes

Create a block attributes object called attributes with two attributes: title and description. Both should have a type of string and default to an empty string ''.

Wordpress

const attributes = {
  // Your code here
};

Hint

Use an object named attributes with keys title and description. Each should have type: 'string' and default: ''.

2

Add block controls for title and description

Create a functional component called Edit that receives attributes and setAttributes as props. Add two TextControl components from @wordpress/components to edit title and description. Use attributes.title and attributes.description as their values, and update them using setAttributes on change.

Wordpress

const attributes = {
  title: {
    type: 'string',
    default: ''
  },
  description: {
    type: 'string',
    default: ''
  }
};

import { TextControl } from '@wordpress/components';

function Edit({ attributes, setAttributes }) {
  // Add two TextControl components for title and description
  // Your code here
}

Hint

Use two TextControl components with label, value, and onChange props. Update attributes using setAttributes.

3

Render the block output

Create a functional component called Save that receives attributes as a prop. Return JSX that renders an <h2> with attributes.title and a <p> with attributes.description.

Wordpress

const attributes = {
  title: {
    type: 'string',
    default: ''
  },
  description: {
    type: 'string',
    default: ''
  }
};

import { TextControl } from '@wordpress/components';

function Edit({ attributes, setAttributes }) {
  return (
    
       setAttributes({ title })}
      />
       setAttributes({ description })}
      />
    
  );
}

function Save({ attributes }) {
  return (
    // Render title and description
    // Your code here
  );
}

Hint

Return JSX with an <h2> showing attributes.title and a <p> showing attributes.description.

4

Register the block with attributes, edit, and save

Use registerBlockType from @wordpress/blocks to register a block with name 'myplugin/custom-block'. Pass the attributes object, and set the edit property to the Edit component and the save property to the Save component.

Wordpress

const attributes = {
  title: {
    type: 'string',
    default: ''
  },
  description: {
    type: 'string',
    default: ''
  }
};

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

function Edit({ attributes, setAttributes }) {
  return (
    
       setAttributes({ title })}
      />
       setAttributes({ description })}
      />
    
  );
}

function Save({ attributes }) {
  return (
    
      {attributes.title}
      {attributes.description}
    
  );
}

// Register the block here
// Your code here

Hint

Call registerBlockType with the block name, pass attributes, and assign Edit and Save components to edit and save respectively.

Practice

1. What is the main purpose of block attributes in WordPress block development?

easy

A. To store data or settings related to the block

B. To style the block with CSS

C. To add animations to the block

D. To create new blocks automatically

Solution

1. Step 1: Understand block attributes role

   Block attributes hold the data or settings that define how a block behaves or looks. Differentiate from styling or automation: Attributes are not for styling or creating blocks automatically but for storing block-specific data.

2. Final Answer:

   To store data or settings related to the block -> Option A

3. Quick Check:

   Block attributes = store data/settings [OK]

Hint: Attributes hold block data/settings, not styles or animations [OK]

Common Mistakes:

• Confusing attributes with CSS styling
• Thinking attributes create blocks automatically
• Assuming attributes control animations directly

2. Which of the following is the correct way to define a block attribute named title of type string in a block's attributes object?

easy

A. "title": { type: String }

B. "title": "string"

C. "title": { value: "string" }

D. "title": { type: "string" }

Solution

1. Step 1: Recall attribute syntax in block.json or registerBlockType

   Attributes are defined as objects with a type property as a lowercase string. Compare options: \"title\": { type: \"string\" } uses { type: \"string\" } which is correct. \"title\": { type: String } uses String (capitalized) which is invalid.

2. Final Answer:

   \"title\": { type: \"string\" } -> Option D

3. Quick Check:

   Attribute type uses lowercase string \"string\" [OK]

Hint: Use { type: \"string\" } with lowercase type name [OK]

Common Mistakes:

• Using capitalized String instead of \"string\"
• Assigning attribute directly to a string
• Using incorrect property like value instead of type

3. Given this block attribute and control code snippet:

const [content, setContent] = useState('Hello');

return (
   setContent(value)}
  />
);

What will happen when the user types "World" into the TextControl?

medium

A. An error occurs because useState is not allowed in blocks

B. The content state updates to "World" and the TextControl shows "World"

C. The content state remains "Hello" and TextControl does not change

D. The TextControl clears and shows an empty string

Solution

1. Step 1: Understand useState and TextControl interaction

   The useState hook holds the current content. The TextControl shows this content and updates it on user input. Follow the onChange handler: When user types \"World\", onChange calls setContent(\"World\"), updating the state and re-rendering the control with new value.

2. Final Answer:

   The content state updates to "World" and the TextControl shows "World" -> Option B

3. Quick Check:

   Typing updates state and control value [OK]

Hint: State updates on change, control reflects new value [OK]

Common Mistakes:

• Thinking state won't update without explicit save
• Believing useState is disallowed in block edit
• Assuming control clears on input

4. Consider this block attribute definition:

attributes: {
  count: { type: 'number', default: 0 }
}

And this control code:

 setAttributes({ count: value })}
/>

What is the likely cause if the control does not update the count attribute correctly when typing?

medium

A. The value prop should be a number, but onChange passes a string

B. The attribute type should be "string" instead of "number"

C. The default value must be set inside setAttributes

D. The control component NumberControl does not exist in WordPress

Solution

1. Step 1: Check data types between attribute and control

   The attribute expects a number, but onChange often passes a string from input controls. Identify mismatch causing update failure: Passing a string instead of a number causes the attribute not to update properly because types differ.

2. Final Answer:

   The value prop should be a number, but onChange passes a string -> Option A

3. Quick Check:

   Type mismatch: onChange passes string to number attribute [OK]

Hint: Ensure onChange passes correct type matching attribute [OK]

Common Mistakes:

• Ignoring type conversion from string to number
• Changing attribute type unnecessarily
• Assuming default value fixes runtime type issues

5. You want to create a block with a toggle control that updates a boolean attribute isActive. Which code snippet correctly defines the attribute and control to toggle this value?

hard

A. attributes: { isActive: { type: 'boolean' } }

setAttributes({ isActive: !attributes.isActive })}
/>

B. attributes: { isActive: { type: 'string', default: 'false' } }

setAttributes({ isActive: value })}
/>

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

setAttributes({ isActive: value })}
/>

D. attributes: { isActive: { type: 'boolean', default: true } }

setAttributes({ isActive: !value })}
/>

Solution

1. Step 1: Define boolean attribute with default false

   attributes: { isActive: { type: 'boolean', default: false } }
   
    setAttributes({ isActive: value })}
   />

   correctly defines isActive as boolean with default false, which is standard for toggles. Use ToggleControl with checked and onChange: The checked prop uses the attribute value, and onChange updates the attribute with the new boolean value passed by the toggle.

2. Final Answer:

   { isActive: { type: 'boolean', default: false } }, ToggleControl checked={attributes.isActive} onChange={(value) => setAttributes({ isActive: value })} -> Option C

3. Quick Check:

   Boolean attribute with checked and direct onChange update [OK]

Hint: Use checked prop and boolean attribute with default false [OK]

Common Mistakes:

• Using string type for boolean attribute
• Using value instead of checked prop
• Inverting value incorrectly in onChange