Consider this simple WordPress block save function:
export function save() {
return (
<p>Hello, Gutenberg!</p>
);
}What will this block render on the front end?
export function save() {
return (
<p>Hello, Gutenberg!</p>
);
}The save function defines what HTML the block outputs on the page.
The save function returns JSX that WordPress converts to HTML. Here it returns a paragraph with the text 'Hello, Gutenberg!'.
Which of the following code snippets correctly registers a WordPress block with a title and icon?
The block registration requires a title string and an icon string matching Dashicons or SVG.
Option C uses the correct keys: title and a valid icon slug 'smiley'. Option C uses 'name' instead of 'title' which is invalid. Option C uses 'smiley-icon' which is not a valid icon slug. Option C uses a number for icon which is invalid.
Given this edit function for a block:
import { useState } from '@wordpress/element';
export function Edit() {
const [text, setText] = useState('');
return (
<input
type="text"
value={text}
onChange={e => setText(e.target.value)}
aria-label="Type something"
/>
);
}What will the user see as they type?
import { useState } from '@wordpress/element'; export function Edit() { const [text, setText] = useState(''); return ( <input type="text" value={text} onChange={e => setText(e.target.value)} aria-label="Type something" /> ); }
The useState hook stores the input value and updates it on change.
The input's value is controlled by the text state. When the user types, setText updates the state, causing the input to show the typed text.
Look at this block's save function:
export function save() {
return (
<div>
<p>Saved content</p>
</div>
)
}When used, the block does not save or display content on the front end. What is the problem?
export function save() {
return (
<div>
<p>Saved content</p>
</div>
);
}Check for syntax errors in the save function's return statement.
In JavaScript, a return statement followed by a newline without parentheses can cause automatic semicolon insertion, breaking the JSX return. Here, the return statement is followed by parentheses but missing a semicolon after the closing parenthesis can cause issues in some setups.
In WordPress block development, what is the main purpose of block attributes?
Think about how blocks keep track of user input and settings.
Block attributes hold the data that users edit in the block. They are saved with the post and used to render the block's content dynamically.