Block development basics in Wordpress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a block in WordPress block development?

A block is a reusable piece of content or functionality that users can add, edit, and arrange in the WordPress editor to build posts and pages visually.

beginner

Which file typically contains the block's JavaScript code in a WordPress block plugin?

The block's JavaScript code is usually in a file named block.js or index.js, which registers the block and defines its behavior.

beginner

What function is used to register a new block in WordPress?

The registerBlockType() function is used to register a new block, defining its name, title, icon, category, and edit/save behavior.

beginner

What are the two main parts of a block's code in WordPress?

The two main parts are the edit function, which controls how the block looks and behaves in the editor, and the save function, which defines the HTML saved in the post content.

beginner

Why is it important to use semantic HTML in block development?

Using semantic HTML helps with accessibility, SEO, and ensures the content is meaningful and easy to understand for all users and devices.

Which function registers a new block in WordPress?

A initBlock()

B createBlock()

C addBlock()

D registerBlockType()

The correct function to register a block is registerBlockType().

What does the edit function in a block do?

A Defines how the block looks on the live site

B Registers the block's name and icon

C Controls the block's appearance and behavior in the editor

D Saves the block's data to the database

The edit function controls how the block looks and behaves inside the editor.

Where is the block's saved HTML output defined?

A In the save function

B In the PHP render callback

C In the block.json file

D In the edit function

The save function defines the HTML saved in the post content.

Which file usually contains the block's JavaScript code?

A block.js or index.js

B functions.php

C style.css

D template.php

The block's JavaScript code is typically in block.js or index.js.

Why should you use semantic HTML in blocks?

A To make the block load faster

B To improve accessibility and SEO

C To reduce file size

D To make the block editable

Semantic HTML improves accessibility and SEO by making content meaningful.

Explain the roles of the edit and save functions in WordPress block development.

Think about how the block looks while editing versus what is saved.

Describe the steps to register a new block in WordPress using JavaScript.

Focus on the function and key properties needed.