patch SelectControl with optgroups

[JohnRDOrazio]

Description

Added a conditional check whether the array of objects passed into options contain simple options or contain grouped options, so as to allow for optgroups in the generated SelectControl.

How has this been tested?

I have forked a copy of the Gutenberg repo, applied this patch, and then built the gutenberg plugin zip. I installed the zipped gutenberg plugin into a running WordPress instance, then created a SelectControl component in the InspectorTools for an example block in the Block editor. Here is how I created this SelectControl:

EXAMPLE 1: GROUPED OPTIONS

createElement(SelectControl, {
	value: attributes.FOODPLATTER,
	label: 'Food platter',
	onChange: changeVersion,
	multiple: true,
	options: [ 
		{
			label: 'Fruits',
			value: [
				{ label: 'Apples', value: 'apple' },
				{ label: 'Pears', value: 'pear' },
				{ label: 'Bananas', value: 'banana' }
			]
		},
		{
			label: 'Vegetables',
			value: [
				{ label: 'Celery', value: 'celery' },
				{ label: 'Cucumber', value: 'cucumber' },
				{ label: 'Carrots', value: 'carrots' }
			]
		}
	],
})

I also created a second example, combining top-level options with grouped options, and it is working correctly. Top-level options appear just fine alongside grouped options.

EXAMPLE 2: GROUPED OPTIONS with TOP-LEVEL OPTIONS

createElement(SelectControl, {
	value: attributes.FOODPLATTER,
	label: 'Food platter',
	onChange: changeVersion,
	multiple: true,
	options: [ 
		{
			label: 'Fruits',
			value: [
				{ label: 'Apples', value: 'apple' },
				{ label: 'Pears', value: 'pear' },
				{ label: 'Bananas', value: 'banana' }
			]
		},
		{
			label: 'Cold cuts',
			value: 'coldcuts'
		},
		{
			label: 'Vegetables',
			value: [
				{ label: 'Celery', value: 'celery' },
				{ label: 'Cucumber', value: 'cucumber' },
				{ label: 'Carrots', value: 'carrots' }
			]
		}
	],
})

Screenshots

EXAMPLE 1

EXAMPLE 2

Types of changes

New feature : this patch enhances the SelectControl component so as to be more compliant with the html select input, allowing for optgroups.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR. (I don't believe this is applicable in this case?)

Fixes #26505

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @JohnRDOrazio!. In case you missed it, we'd love to have you join us in our Slack community,where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[stokesman]

@JohnRDOrazio, congrats on figuring out the build and everything you need to get this far! As I understand it the SelectControl component is soon to be succeeded by one that already has support for option groups. So I'm guessing❓ that there may be little interest in adding features to the current one.

[skorasaurus]

Thanks for your initial Pull request; I believe this has been implemented through #29540 (ref https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/select-control#development-guidelines)

Please reopen if I am mistaken.