Block development basics in Wordpress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to register a new block in WordPress.

Wordpress

registerBlockType('my-plugin/my-block', { title: 'My Block', [1]: () => <p>Hello World</p> });

Drag options to blanks, or click blank then click option'

Arender

Bedit

Cinit

Dsave

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'edit' instead of 'save' causes the block not to render on the front end.

Forgetting to include the save function results in an empty block output.

The save function defines how the block content is saved and rendered on the front end.

2fill in blank

medium

Complete the code to import the necessary function to register a block.

Wordpress

import { [1] } from '@wordpress/blocks';

Drag options to blanks, or click blank then click option'

AcreateBlock

BuseBlockProps

CregisterBlockType

DregisterPlugin

Attempts:

3 left

💡 Hint

Common Mistakes

Importing the wrong function leads to errors when registering blocks.

Confusing registerPlugin with block registration.

registerBlockType is the function used to register a new block type in WordPress.

3fill in blank

hard

Fix the error in the block's edit function to correctly apply block props.

Wordpress

export function Edit() { const blockProps = [1](); return <p {...blockProps}>Editable content</p>; }

Drag options to blanks, or click blank then click option'

AgetBlockProps

BuseBlockProps

CblockProps

DuseProps

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-existent function causes runtime errors.

Not applying block props breaks editor styling and behavior.

useBlockProps is the correct hook to get block properties for the editor.

4fill in blank

hard

Fill both blanks to create a block attribute and use it in the save function.

Wordpress

attributes: { content: { type: [1] } }, save: (props) => { return <p>{ [2] }</p>; }

Drag options to blanks, or click blank then click option'

Astring

Bprops.attributes.content

Cnumber

Dprops.content

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'props.content' instead of 'props.attributes.content' causes undefined output.

Setting attribute type incorrectly breaks block data handling.

The attribute type should be 'string'. The save function uses props.attributes.content to output the content.

5fill in blank

hard

Fill all three blanks to register a block with a title, category, and icon.

Wordpress

registerBlockType('my-plugin/my-block', { title: [1], category: [2], icon: [3] });

Drag options to blanks, or click blank then click option'

A'My Custom Block'

B'widgets'

C'smiley'

D'content'

Attempts:

3 left

💡 Hint

Common Mistakes

Using category names that don't exist causes the block not to appear.

Forgetting quotes around strings causes syntax errors.

The title is a string naming the block. The category groups the block in the editor. The icon is a dashicon or icon slug.