Gutenberg block editor basics in Wordpress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the Gutenberg block editor in WordPress?

The Gutenberg block editor is a tool in WordPress that lets you build content by adding and arranging blocks, like paragraphs, images, and buttons, making editing visual and easy.

beginner

How do you add a new block in the Gutenberg editor?

You click the plus (+) button, then choose the type of block you want, such as text, image, or list, to add it to your content.

beginner

What is the purpose of block settings in Gutenberg?

Block settings let you change how a block looks or behaves, like adjusting text size, colors, or alignment, giving you control over each block's style.

beginner

Explain how to move blocks around in the Gutenberg editor.

You can drag and drop blocks to reorder them or use the up and down arrows on the block toolbar to move blocks up or down in your content.

intermediate

What is a reusable block in Gutenberg?

A reusable block is a block you save to use again later in other posts or pages, so you don’t have to recreate the same content multiple times.

What does the plus (+) button do in the Gutenberg editor?

A Changes the theme

B Adds a new block

C Saves the post

D Deletes a block

The plus (+) button is used to add new blocks to your content.

Which of these is NOT a block type in Gutenberg?

A Button

B Image

C Paragraph

D Spreadsheet

Gutenberg does not have a spreadsheet block type by default.

How can you change the color of text in a block?

A Using block settings

B By dragging the block

C By clicking the plus (+) button

D By saving the post

Block settings allow you to change styles like text color.

What is the main benefit of reusable blocks?

A They load faster

B They automatically translate content

C You can use the same content multiple times

D They delete old blocks

Reusable blocks let you save content to use again without recreating it.

How do you move a block up or down in the editor?

A Use the up and down arrows on the block toolbar

B Click the plus (+) button

C Change the block settings

D Use the preview button

The block toolbar has arrows to move blocks up or down.

Describe how you would create a simple page using the Gutenberg block editor.

Think about adding, arranging, and styling blocks.

Explain the advantages of using reusable blocks in WordPress.

Consider how reusable blocks help with efficiency and consistency.

Practice

1. What is the main purpose of Gutenberg blocks in WordPress?

easy

A. To build content visually by stacking pieces called blocks

B. To write PHP code for themes

C. To manage user roles and permissions

D. To create database tables

Solution

1. Step 1: Understand Gutenberg blocks concept

   Gutenberg blocks allow users to build content visually by stacking blocks instead of writing code.

2. Step 2: Compare options with this concept

   Options A, B, and D relate to other WordPress functions, not content building with blocks.

3. Final Answer:

   To build content visually by stacking pieces called blocks -> Option A

4. Quick Check:

   Gutenberg blocks = Visual content building [OK]

Hint: Blocks stack visually to build content, not code or settings [OK]

Common Mistakes:

• Confusing blocks with coding PHP
• Thinking blocks manage users or database
• Mixing blocks with theme development

2. Which of the following is the correct way to define the edit function in a custom Gutenberg block?

easy

A. function edit() { Hello Block; }

B. def edit(): return 'Hello Block'

C. edit = function() { echo 'Hello Block'; }

D. const edit = () => { return Hello Block; };

Solution

1. Step 1: Identify JavaScript syntax for Gutenberg blocks

   Gutenberg blocks use modern JavaScript with arrow functions for edit.

2. Step 2: Check each option's syntax

   const edit = () => { return <p>Hello Block</p>; }; uses arrow function returning JSX, which is correct. function edit() { <p>Hello Block</p>; } does not return the JSX element. edit = function() { echo 'Hello Block'; } uses PHP syntax, and B uses Python syntax, both invalid here.

3. Final Answer:

   const edit = () => { return <p>Hello Block</p>; }; -> Option D

4. Quick Check:

   Gutenberg edit uses JS arrow functions [OK]

Hint: Gutenberg edit uses JavaScript arrow functions returning JSX [OK]

Common Mistakes:

• Using PHP or Python syntax instead of JavaScript
• Not returning JSX properly
• Using old function syntax without React import

3. Given this simple block edit function, what will be rendered in the editor?

const edit = () => {
  return <p>Welcome to Gutenberg!</p>;
};

medium

A. A paragraph with text 'Welcome to Gutenberg!'

B. An empty block with no content

C. A syntax error preventing rendering

D. A button labeled 'Welcome to Gutenberg!'

Solution

1. Step 1: Analyze the edit function return value

   The function returns a paragraph element with the text 'Welcome to Gutenberg!'.

2. Step 2: Understand editor rendering behavior

   The editor shows the returned JSX content, so a paragraph with that text appears.

3. Final Answer:

   A paragraph with text 'Welcome to Gutenberg!' -> Option A

4. Quick Check:

   JSX return = paragraph text shown [OK]

Hint: JSX returned in edit shows as block content in editor [OK]

Common Mistakes:

• Thinking it renders a button
• Assuming syntax error without checking code
• Expecting empty content when JSX is returned

4. What is wrong with this Gutenberg block save function?

const save = () => {
  <div>Saved content</div>;
};

medium

A. save function should be async

B. Using <div> instead of <p> tag

C. Missing return statement in the save function

D. save function cannot use JSX

Solution

1. Step 1: Check function syntax for returning JSX

   The save function has JSX but no return statement, so it returns undefined.

2. Step 2: Understand save function requirements

   Save must return JSX to render saved content; missing return causes no output.

3. Final Answer:

   Missing return statement in the save function -> Option C

4. Quick Check:

   JSX must be returned in save function [OK]

Hint: Always return JSX in save function to render content [OK]

Common Mistakes:

• Forgetting return keyword
• Thinking tag choice causes error
• Assuming save must be async

5. You want to create a custom Gutenberg block that shows a user-editable heading and paragraph. Which two functions must you define to make this block work properly?

hard

A. registerBlockType and enqueueScripts only

B. edit and save functions to handle editing and saving content

C. PHP render callback and CSS styles only

D. enqueueScripts and enqueueStyles only

Solution

1. Step 1: Identify core Gutenberg block functions

   Every block needs an edit function to show editing UI and a save function to define saved content.

2. Step 2: Compare options with required functions

   edit and save functions to handle editing and saving content correctly lists edit and save. Other options mention scripts or PHP but miss these core functions.

3. Final Answer:

   edit and save functions to handle editing and saving content -> Option B

4. Quick Check:

   Blocks need edit + save functions [OK]

Hint: Blocks always need edit and save functions [OK]

Common Mistakes:

• Thinking only scripts or PHP are enough
• Forgetting save function
• Confusing enqueueing scripts with block logic