Block attributes and controls in Wordpress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does the attribute default value affect block rendering?

Consider a WordPress block with an attribute defined as color: { type: 'string', default: 'blue' }. What will be the rendered color if the user does not change this attribute?

A The block will render with no color because default values are ignored until explicitly set.

B The block will render with the color 'blue' because the default is used when no user input is given.

C The block will throw an error because the attribute is not initialized by the user.

D The block will render with a random color since no user input is provided.

💡 Hint

Think about what 'default' means for block attributes in WordPress.

The default value in block attributes is used when the user has not set a value. This ensures the block has a predictable initial state.

📝 Syntax

intermediate

Identify the correct attribute declaration syntax

Which of the following is the correct way to declare a block attribute for a string named 'title' with no default value?

A title: 'string'

B title = 'string'

C title: { type: 'string' }

D title: { default: 'string' }

💡 Hint

Attributes are objects with type and optionally default properties.

The correct syntax uses an object with a type property. Option C correctly declares the attribute.

❓ state_output

advanced

What is the output when a block control updates an attribute?

Given a block with an attribute count: { type: 'number', default: 0 } and a control that increments count on button click, what will be the value of count after clicking the button three times starting from initial render?

Wordpress

const { useState } = wp.element;
function MyBlock({ attributes, setAttributes }) {
  const { count } = attributes;
  return (
    <button onClick={() => setAttributes({ count: count + 1 })}>
      Count: {count}
    </button>
  );
}

A 1

B undefined

C 0

D 3

💡 Hint

Each click increases the count by 1 starting from the default.

The attribute count starts at 0. Each button click adds 1, so after 3 clicks, count is 3.

🔧 Debug

advanced

Why does this block attribute not update correctly?

A block attribute text: { type: 'string', default: '' } is controlled by a text input. The input's onChange handler calls setAttributes({ text: event.target.value }). However, the block does not update when typing. What is the likely cause?

Wordpress

function MyBlock({ attributes, setAttributes }) {
  const { text } = attributes;
  return (
    <input
      type="text"
      value={text}
      onChange={(event) => setAttributes({ text: event.target.value })}
    />
  );
}

A The attribute 'text' is not declared in the block's attributes object.

B The input should use defaultValue instead of value.

C The onChange handler is missing parentheses around event.target.value.

D The setAttributes function is asynchronous and needs await.

💡 Hint

Check if the attribute is properly declared in the block registration.

If the attribute is not declared in the block's attributes object, setAttributes will not update it, so the input stays unchanged.

🧠 Conceptual

expert

How do block controls and attributes interact to maintain state?

In WordPress block development, which statement best describes the relationship between block attributes and controls?

A Controls provide the user interface to update attributes, which store the block's state and affect rendering.

B Attributes automatically update controls without any code needed.

C Controls store the block's state and attributes only define default values.

D Attributes and controls are unrelated; controls only affect editor UI.

💡 Hint

Think about how user input changes block data and how that data affects the block.

Controls are UI elements that let users change attribute values. Attributes hold the block's data and determine how it renders.