Gutenberg block editor basics in Wordpress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to register a new block in Gutenberg.

Wordpress

registerBlockType('myplugin/my-block', { title: 'My Block', category: [1] });

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

A'common'

B'widgets'

C'formatting'

D'layout'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a category that does not exist or is misspelled.

The category property defines where the block appears in the block inserter. 'common' is a standard category for general blocks.

2fill in blank

medium

Complete the code to create a block edit function that returns a paragraph block.

Wordpress

const Edit = () => { return <p>[1]</p>; };

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

A'Sample text'

B'Edit your content here'

C'This is a block'

D'Hello World!'

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving the paragraph empty or using invalid JSX.

The edit function returns JSX that renders the block content in the editor. 'Hello World!' is a common placeholder text.

3fill in blank

hard

Fix the error in the block save function to correctly save a heading block.

Wordpress

const save = () => { return <h2>[1]</h2>; };

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

A{'Saved Heading'}

BSaved Heading

C'Saved Heading'

D<strong>Saved Heading</strong>

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting quotes causing syntax errors.

The save function must return JSX with text inside quotes for string literals. Using quotes correctly ensures valid JSX.

4fill in blank

hard

Fill both blanks to correctly import and use the RichText component in a block edit function.

Wordpress

import { [1] } from '@wordpress/block-editor';

const Edit = () => {
  return <[2] tagName="p" value="Editable text" />;
};

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

ARichText

BTextControl

CRichText.Content

DPlainText

Attempts:

3 left

💡 Hint

Common Mistakes

Importing one component but using another in JSX.

The RichText component is imported and used to create editable rich text in blocks. Both import and usage must match.

5fill in blank

hard

Fill all three blanks to correctly register a block with attributes and save function using RichText.

Wordpress

registerBlockType('myplugin/my-richtext-block', {
  attributes: {
    content: { type: [1] }
  },
  edit: ({ attributes, setAttributes }) => {
    return <RichText tagName="p" value={attributes.content} onChange={content => setAttributes({ content })} />;
  },
  save: ({ attributes }) => {
    return <RichText.Content tagName="p" value={attributes.[2] />;
  }
});

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

Astring

Bcontent

Ctext

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong attribute names or types causing block save errors.

The attribute type for text content is 'string'. The save function uses the attribute name 'content'. The value prop in RichText.Content should be the attribute value.