Bird
0
0

You want to create a block with an attribute color that users can select from a palette. Which combination correctly defines the attribute and control?

hard📝 component behavior Q8 of 15
Wordpress - Shortcodes and Blocks
You want to create a block with an attribute color that users can select from a palette. Which combination correctly defines the attribute and control?
AAttribute: { color: { type: 'number' } }, Control: <RangeControl value={attributes.color} onChange={(color) => setAttributes({ color })} />
BAttribute: { color: { type: 'boolean' } }, Control: <ToggleControl checked={attributes.color} onChange={(color) => setAttributes({ color })} />
CAttribute: { color: { type: 'string', default: '#000000' } }, Control: <ColorPalette value={attributes.color} onChange={(color) => setAttributes({ color })} />
DAttribute: { color: { type: 'string' } }, Control: <TextControl value={attributes.color} onChange={(color) => setAttributes({ color })} />
Step-by-Step Solution
Solution:
  1. Step 1: Attribute type for color

    Color is a string representing a color code, default can be a hex string.
  2. Step 2: Control for color selection

    ColorPalette is the correct control for choosing colors from a palette.
  3. Final Answer:

    Attribute: { color: { type: 'string', default: '#000000' } }, Control: <ColorPalette value={attributes.color} onChange={(color) => setAttributes({ color })} /> -> Option C
  4. Quick Check:

    Color attribute uses string + ColorPalette control [OK]
Quick Trick: Use string type with ColorPalette for color attributes [OK]
Common Mistakes:
  • Using boolean or number type for color
  • Using ToggleControl or RangeControl for colors
  • Using TextControl instead of ColorPalette

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Wordpress Quizzes