Gutenberg block editor basics in Wordpress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you add a paragraph block in Gutenberg?

You add a paragraph block in the Gutenberg editor and start typing. What is the expected behavior?

A The block does not allow typing until you save the post first.

B The block automatically converts text into a heading without user input.

C The block only accepts HTML code and shows raw tags instead of formatted text.

D The block accepts text input and displays it immediately inside the editor.

💡 Hint

Think about how a paragraph block works in a normal text editor.

The paragraph block is designed to accept and display text input immediately as you type, just like a simple text box.

📝 Syntax

intermediate

Which code snippet correctly registers a custom block in Gutenberg?

You want to register a custom block using JavaScript in Gutenberg. Which snippet is correct?

A wp.blocks.newBlock('my-plugin/my-block', { title: 'My Block', save: () => 'Save' });

B wp.blocks.registerBlockType('my-plugin/my-block', { title: 'My Block', edit: () => 'Edit', save: () => 'Save' });

C wp.blocks.addBlockType('my-plugin/my-block', { title: 'My Block', edit: () => 'Edit' });

D wp.blocks.createBlock('my-plugin/my-block', { title: 'My Block' });

💡 Hint

Look for the official function to register blocks in the Gutenberg API.

The correct function to register a block is registerBlockType. Other functions do not exist or are incorrect.

❓ state_output

advanced

What is the output when a block's save function returns null?

In a custom Gutenberg block, the save function returns null. What will be the result in the post content?

A The block will not save any content and will not appear on the front end.

B The block will save an empty paragraph tag <p></p> in the post content.

C The block will cause a syntax error and prevent saving the post.

D The block will save the edit function's output instead.

💡 Hint

Think about what returning null means for saved content in Gutenberg.

Returning null in the save function means the block does not save any HTML output, so nothing appears on the front end.

🔧 Debug

advanced

Why does this block fail to appear in the editor?

You registered a block but it does not show up in the Gutenberg editor. The code is: wp.blocks.registerBlockType('my-plugin/sample-block', { title: 'Sample Block', edit() { return wp.element.createElement('p', null, 'Hello'); } }); What is the likely cause?

Wordpress

wp.blocks.registerBlockType('my-plugin/sample-block', {
  title: 'Sample Block',
  edit() {
    return wp.element.createElement('p', null, 'Hello');
  }
});

A The block name 'my-plugin/sample-block' is invalid because it lacks a namespace.

B The block is missing a save function, so it won't appear in the editor.

C The block is missing the save function, which is required for registration.

D The edit function uses createElement incorrectly and causes a runtime error.

💡 Hint

Check if all required properties are present in the block registration.

Gutenberg requires both edit and save functions when registering a block. Missing save causes the block not to appear.

🧠 Conceptual

expert

How does the Gutenberg editor handle block serialization?

Which statement best describes how Gutenberg saves block content in the post?

A Gutenberg saves blocks as HTML comments wrapping the block's saved HTML output in the post content.

B Gutenberg saves blocks as JSON objects inside the post content for easy parsing.

C Gutenberg saves blocks as separate files linked from the post content.

D Gutenberg saves blocks only in the database metadata, not in the post content.

💡 Hint

Think about how Gutenberg keeps block boundaries in the post content.

Gutenberg wraps each block's saved HTML with special HTML comments to mark block boundaries inside the post content.