Block registration in Wordpress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this block registration code?

Consider this WordPress block registration snippet. What will the block display in the editor?

Wordpress

wp.blocks.registerBlockType('myplugin/simple-block', {
  title: 'Simple Block',
  category: 'widgets',
  edit: () => wp.element.createElement('p', null, 'Hello Editor'),
  save: () => wp.element.createElement('p', null, 'Hello Frontend')
});

A Both editor and frontend show 'Hello Frontend'.

B The editor shows a paragraph with text 'Hello Editor', and the frontend shows 'Hello Frontend'.

C Both editor and frontend show 'Hello Editor'.

D The editor shows 'Hello Frontend', and the frontend shows 'Hello Editor'.

💡 Hint

Remember the difference between edit and save functions in block registration.

The edit function defines what appears in the editor. The save function defines the saved content for the frontend. So editor shows 'Hello Editor' and frontend shows 'Hello Frontend'.

📝 Syntax

intermediate

Which option correctly registers a block with attributes?

Which code snippet correctly registers a block with an attribute content of type string?

A

wp.blocks.registerBlockType('myplugin/attr-block', {
  attributes: { content: { type: 'string' } },
  edit: (props) => wp.element.createElement('p', null, props.attributes.content),
  save: (props) => wp.element.createElement('p', null, props.attributes.content)
});

B

wp.blocks.registerBlockType('myplugin/attr-block', {
  attributes: { content: 'string' },
  edit: (props) => wp.element.createElement('p', null, props.content),
  save: (props) => wp.element.createElement('p', null, props.content)
});

C

wp.blocks.registerBlockType('myplugin/attr-block', {
  attributes: { content: { type: String } },
  edit: (props) => wp.element.createElement('p', null, props.attributes.content),
  save: (props) => wp.element.createElement('p', null, props.attributes.content)
});

D

wp.blocks.registerBlockType('myplugin/attr-block', {
  attributes: { content: { type: 'text' } },
  edit: (props) => wp.element.createElement('p', null, props.attributes.content),
  save: (props) => wp.element.createElement('p', null, props.attributes.content)
});

💡 Hint

Attributes must be defined with a type property as a string.

Attributes in block registration require an object with a type string. Option A correctly uses { type: 'string' }. Option A uses a string directly, which is invalid. Option A uses String (capitalized), which is incorrect. Option A uses 'text' which is not a valid type.

🔧 Debug

advanced

Why does this block fail to register?

Given this code, why does the block fail to register?

Wordpress

wp.blocks.registerBlockType('myplugin/fail-block', {
  title: 'Fail Block',
  category: 'common',
  edit: () => wp.element.createElement('div', null, 'Fail'),
  save: () => wp.element.createElement('div', null, 'Fail')
});

A The category 'common' is invalid and causes registration failure.

B The edit function must return a string, not a React element.

C Missing comma after the title property causes a syntax error.

D The save function is missing a required attribute property.

💡 Hint

Check the commas between object properties carefully.

JavaScript objects require commas between properties. Missing the comma after title: 'Fail Block' causes a syntax error, so the block fails to register.

❓ state_output

advanced

What is the value of the attribute after typing in this block?

In this block, the user types text in a textarea. What will be the value of content attribute after typing 'Hi'?

Wordpress

wp.blocks.registerBlockType('myplugin/text-block', {
  attributes: { content: { type: 'string' } },
  edit: (props) => {
    const onChange = (event) => props.setAttributes({ content: event.target.value });
    return wp.element.createElement('textarea', { value: props.attributes.content || '', onChange });
  },
  save: (props) => wp.element.createElement('p', null, props.attributes.content)
});

A An empty string

B undefined

C null

D 'Hi'

💡 Hint

Typing triggers onChange which updates the attribute.

The onChange handler updates the content attribute with the textarea's value. Typing 'Hi' sets content to 'Hi'.

🧠 Conceptual

expert

Which option best explains why server-side rendering blocks use render_callback in PHP?

Why do server-side rendering blocks in WordPress require a render_callback function in PHP?

A Because the block output depends on dynamic data that must be generated on the server each time the page loads.

B Because JavaScript cannot render blocks in the editor without PHP functions.

C Because <code>render_callback</code> caches the block output to improve performance.

D Because <code>render_callback</code> is required to register block scripts and styles.

💡 Hint

Think about why some blocks need fresh data every time the page is viewed.

Server-side rendering blocks use render_callback to generate block HTML dynamically on the server. This allows the block to show up-to-date or dynamic content each time the page loads.