[wp-trac] [WordPress Trac] #47692: Optgroup in Customizer Select Control

[WordPress Trac]

#47692: Optgroup in Customizer Select Control
-------------------------+-----------------------------
 Reporter:  chintan1896  |       Owner:  (none)
     Type:  enhancement  |      Status:  new
 Priority:  normal       |   Milestone:  Future Release
Component:  Customize    |     Version:  3.4
 Severity:  normal       |  Resolution:
 Keywords:  needs-patch  |     Focuses:
-------------------------+-----------------------------

Comment (by Lwangaman):

 Something else is missing. I have an InspectorControls panel for a
 plugin's Gutenberg block that I created. Here is some sample (simplified,
 exemplified) code with the **Select** component.

 First I build my **choices** or **options** as an array of objects:
 {{{#!javascript
 let favouriteFoodsSelectOptions = [
         { value: "peas",        label: "Green Peas" },
         { value: "apples",      label: "Red apples" },
         { value: "carrots",     label: "Carrots" },
         { value: "chocolate",   label: "Chocolate" },
         { value: "oranges",     label: "Oranges" },
         { value: "chicken",     label: "Grilled chicken breast" },
         { value: "turkey",      label: "Roasted turkey" },
         { value: "pudding",     label: "Tapioca pudding" },
 ];

 }}}

 Then inside of my **edit(props)** I have:
 {{{#!javascript
 return createElement('div', {}, [
         createElement(Fragment, {},
                 createElement(InspectorControls, {},
                         createElement(PanelBody, { title: __('Some
 options', 'plugin_namespace'), initialOpen: true, icon: 'download' },
                                 createElement(PanelRow, {},
                                         //Select one or more options
                                         createElement(SelectControl, {
                                                 value: attributes.foods,
                                                 label: __('Your favourite
 foods', 'plugin_namespace'),
                                                 onChange: changeFoods,
                                                 multiple: true,
                                                 options:
 favouriteFoodsSelectOptions,
                                                 help: __('You can select
 one or more of these options. In order to select more than one, hold down
 the CTRL key while clicking.', 'plugin_namespace')
                                         })
                                 ) //end PanelRow
                         ) //end PanelBody
                 ) //end InspectorControls
         ) //end Fragment
 ])

 }}}

 And this is currently working.
 However, I would like to be able to organize these options by food
 category. After implementing the PHP patch and the javascript patch I
 posted, I tried modifying my options array like this:
 {{{#!javascript
 let favouriteFoodsSelectOptions = [
         value: "Vegetables",    label: [
                                         { value: "peas",        label:
 "Green Peas" }
                                         { value: "carrots",     label:
 "Carrots" },
                                 ],
         value: "Meats",         label: [
                                         { value: "chicken",     label:
 "Grilled chicken breast" },
                                         { value: "turkey",      label:
 "Roasted turkey" },
                                 ],
         value: "Fruits",        label: [
                                         { value: "apples",      label:
 "Red apples" },
                                         { value: "oranges",     label:
 "Oranges" },
                                 ],
         value: "Desserts",      label: [
                                         { value: "chocolate",   label:
 "Chocolate" },
                                         { value: "pudding",     label:
 "Tapioca pudding" },
                                 ]
 ];

 }}}

 But this doesn't work, it generates an error:

 **''Objects are not valid as a React child (found: object with keys
 {value, label}). If you meant to render a collection of children, use an
 array instead.''**

 There must be another intermediate file somewhere that translates between
 react components and
 {{{\WP_Customize_Manager::render_control_templates()}}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/47692#comment:18>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform