Fixes #11270. Adds support for marking options within a `SelectContro…

…l` as 'disabled', which translates to the `disabled` attribute being added to the HTML `option` element.

packages/block-library/src/tag-cloud/edit.js

@@ -34,6 +34,7 @@ class TagCloudEdit extends Component {
 		const selectOption = {
 			label: __( '- Select -' ),
 			value: '',
+			disabled: true,
 		};
 		const taxonomyOptions = map( taxonomies, ( taxonomy ) => {
 			return {

packages/components/src/select-control/README.md

@@ -107,6 +107,7 @@ Render a user interface to select multiple users from a list.
             value={ this.state.users } // e.g: value = [ 'a', 'c' ]
             onChange={ ( users ) => { this.setState( { users } ) } }
             options={ [
+                { value: null, label: 'Select a User', disabled: true },
                 { value: 'a', label: 'User A' },
                 { value: 'b', label: 'User B' },
                 { value: 'c', label: 'User c' },
@@ -115,7 +116,6 @@ Render a user interface to select multiple users from a list.
 
 ### Props
 
-
 - The set of props accepted by the component will be specified below.
 - Props not included in this set will be applied to the select element.
 - One important prop to refer is `value`. If `multiple` is `true`, `value` should be an array with the values of the selected options.
@@ -150,6 +150,7 @@ If this property is added, multiple values can be selected. The value passed sho
 An array of objects containing the following properties:
 - `label`: (string) The label to be shown to the user.
 - `value`: (Object) The internal value used to choose the selected value. This is also the value passed to onChange when the option is selected.
+- `disabled`: (boolean) Whether or not the option should have the disabled attribute.
 - Type: `Array`
 - Required: No
 

packages/components/src/select-control/index.js

@@ -52,6 +52,7 @@ function SelectControl( {
 					<option
 						key={ `${ option.label }-${ option.value }-${ index }` }
 						value={ option.value }
+						disabled={ option.disabled }
 					>
 						{ option.label }
 					</option>