Block development basics in Wordpress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this block's save function?

Consider this simple WordPress block save function:

export function save() {
  return (
    <p>Hello, Gutenberg!</p>
  );
}

What will this block render on the front end?

Wordpress

export function save() {
  return (
    <p>Hello, Gutenberg!</p>
  );
}

A Nothing will render because save returns JSX

B An empty div element

C A heading with the text 'Hello, Gutenberg!'

D A paragraph with the text 'Hello, Gutenberg!'

💡 Hint

The save function defines what HTML the block outputs on the page.

The save function returns JSX that WordPress converts to HTML. Here it returns a paragraph with the text 'Hello, Gutenberg!'.

📝 Syntax

intermediate

Which option correctly registers a block with a title and icon?

Which of the following code snippets correctly registers a WordPress block with a title and icon?

A registerBlockType('my-plugin/my-block', { title: 'My Block', icon: 'smiley-icon', edit: () => null, save: () => null });

B registerBlockType('my-plugin/my-block', { name: 'My Block', icon: 'smiley', edit: () => null, save: () => null });

C registerBlockType('my-plugin/my-block', { title: 'My Block', icon: 'smiley', edit: () => null, save: () => null });

D registerBlockType('my-plugin/my-block', { title: 'My Block', icon: 123, edit: () => null, save: () => null });

💡 Hint

The block registration requires a title string and an icon string matching Dashicons or SVG.

Option C uses the correct keys: title and a valid icon slug 'smiley'. Option C uses 'name' instead of 'title' which is invalid. Option C uses 'smiley-icon' which is not a valid icon slug. Option C uses a number for icon which is invalid.

❓ state_output

advanced

What will be displayed after typing in this block's input?

Given this edit function for a block:

import { useState } from '@wordpress/element';

export function Edit() {
  const [text, setText] = useState('');
  return (
    <input
      type="text"
      value={text}
      onChange={e => setText(e.target.value)}
      aria-label="Type something"
    />
  );
}

What will the user see as they type?

Wordpress

import { useState } from '@wordpress/element';

export function Edit() {
  const [text, setText] = useState('');
  return (
    <input
      type="text"
      value={text}
      onChange={e => setText(e.target.value)}
      aria-label="Type something"
    />
  );
}

A The input box stays empty no matter what is typed.

B The input box updates to show exactly what the user types.

C The input box shows the reversed text of what is typed.

D The input box throws an error and does not render.

💡 Hint

The useState hook stores the input value and updates it on change.

The input's value is controlled by the text state. When the user types, setText updates the state, causing the input to show the typed text.

🔧 Debug

advanced

Why does this block fail to save content?

Look at this block's save function:

export function save() {
  return (
    <div>
      <p>Saved content</p>
    </div>
  )
}

When used, the block does not save or display content on the front end. What is the problem?

Wordpress

export function save() {
  return (
    <div>
      <p>Saved content</p>
    </div>
  );
}

A Missing semicolon after return statement causes syntax error.

B The save function must return a single root element, but it returns multiple.

C The save function is missing a return statement keyword.

D The save function is missing a closing semicolon after the return parentheses.

💡 Hint

Check for syntax errors in the save function's return statement.

In JavaScript, a return statement followed by a newline without parentheses can cause automatic semicolon insertion, breaking the JSX return. Here, the return statement is followed by parentheses but missing a semicolon after the closing parenthesis can cause issues in some setups.

🧠 Conceptual

expert

Which statement best describes block attributes usage?

In WordPress block development, what is the main purpose of block attributes?

A To store and manage block data that can be edited and saved, enabling dynamic content.

B To define the block's CSS styles and layout only.

C To register the block's name and icon for the editor interface.

D To handle server-side rendering of the block content.

💡 Hint

Think about how blocks keep track of user input and settings.

Block attributes hold the data that users edit in the block. They are saved with the post and used to render the block's content dynamically.