Block attributes and controls in Wordpress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a block attribute named 'content' of type string.

Wordpress

attributes: { content: { type: [1] } }

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

Anumber

Bstring

Cboolean

Darray

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'number' or 'boolean' for text content attributes.

Forgetting to specify the type.

The attribute 'content' should be of type string to hold text data.

2fill in blank

medium

Complete the code to add a TextControl inside the block's edit function to edit the 'content' attribute.

Wordpress

return (<TextControl value={attributes.content} onChange={value => setAttributes({ [1]: value })} />);

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

Acontent

Btext

Cvalue

Dinput

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'text' or 'value' instead of the attribute name.

Not wrapping the key in curly braces.

The attribute to update is named content, so it must be used as the key in setAttributes.

3fill in blank

hard

Fix the error in the block's save function to correctly output the 'content' attribute inside a paragraph.

Wordpress

return (<p>[1]</p>);

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

Acontent

Bprops.content

Cattributes.content

Dthis.content

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'props.content' or 'this.content' which are not available in save.

Using just 'content' without reference.

In the save function, the block's attributes are accessed via the attributes object.

4fill in blank

hard

Fill both blanks to define a block attribute 'alignment' with type string and default value 'left'.

Wordpress

attributes: { alignment: { type: [1], default: [2] } }

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

Astring

B'left'

Cboolean

D'center'

Attempts:

3 left

💡 Hint

Common Mistakes

Using boolean type for alignment.

Not quoting the default string value.

The 'alignment' attribute should be a string with a default value of 'left'.

5fill in blank

hard

Fill all three blanks to create a block control that updates the 'alignment' attribute using a SelectControl with options 'left', 'center', and 'right'.

Wordpress

return (<SelectControl label="Alignment" value={attributes.[1] options={[{ label: 'Left', value: 'left' }, { label: 'Center', value: 'center' }, { label: 'Right', value: 'right' }]} onChange={value => setAttributes({ [2]: value })} />);

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

Aalignment

Balign

DalignmentValue

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names like 'align' or 'alignmentValue' inconsistently.

Not matching the attribute name in value and onChange.

The attribute name is 'alignment' and must be used consistently for value and setAttributes keys.