[Solved] You want to create a block with a toggle control that updates a boolean attribute isActive. Which code snippet correctly defines the attribute and control to toggle this value? | Wordpress

Wordpress - Shortcodes and Blocks

You want to create a block with a toggle control that updates a boolean attribute isActive. Which code snippet correctly defines the attribute and control to toggle this value?

A

<pre>attributes: { isActive: { type: 'boolean' } }

<ToggleControl
  label="Active"
  checked={attributes.isActive}
  onChange={() => setAttributes({ isActive: !attributes.isActive })}
/></pre>

B

<pre>attributes: { isActive: { type: 'string', default: 'false' } }

<ToggleControl
  label="Active"
  value={attributes.isActive}
  onChange={(value) => setAttributes({ isActive: value })}
/></pre>

C

<pre>attributes: { isActive: { type: 'boolean', default: false } }

<ToggleControl
  label="Active"
  checked={attributes.isActive}
  onChange={(value) => setAttributes({ isActive: value })}
/></pre>

D

<pre>attributes: { isActive: { type: 'boolean', default: true } }

<ToggleControl
  label="Active"
  checked={attributes.isActive}
  onChange={(value) => setAttributes({ isActive: !value })}
/></pre>

Step-by-Step Solution

Solution:

Step 1: Define boolean attribute with default false
```
attributes: { isActive: { type: 'boolean', default: false } }

 setAttributes({ isActive: value })}
/>
```
correctly defines isActive as boolean with default false, which is standard for toggles. Use ToggleControl with checked and onChange: The checked prop uses the attribute value, and onChange updates the attribute with the new boolean value passed by the toggle.
Final Answer:
{ isActive: { type: 'boolean', default: false } }, ToggleControl checked={attributes.isActive} onChange={(value) => setAttributes({ isActive: value })} -> Option C
Quick Check:
Boolean attribute with checked and direct onChange update [OK]

Quick Trick: Use checked prop and boolean attribute with default false [OK]

Common Mistakes:

Using string type for boolean attribute
Using value instead of checked prop
Inverting value incorrectly in onChange

Master "Shortcodes and Blocks" in Wordpress

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep Visual Try Challenge Project Recall Perf

More Wordpress Quizzes

You want to create a block with a toggle control that updates a boolean attribute isActive. Which code snippet correctly defines the attribute and control to toggle this value?

Step 1: Define boolean attribute with default false

Final Answer:

Quick Check:

Want More Practice?