Docs: Add InspectorControls example

docs/designers-developers/developers/tutorials/block-tutorial/block-controls-toolbars-and-inspector.md

@@ -176,3 +176,393 @@ If you have settings that affects only selected content inside a block (example:
 The inspector region is shown in place of the post settings sidebar when a block is selected.
 
 Similar to rendering a toolbar, if you include an `InspectorControls` element in the return value of your block type's `edit` function, those controls will be shown in the inspector region.
+
+{% codetabs %}
+{% ES5 %}
+```js
+var el = wp.element.createElement,
+	Fragment = wp.element.Fragment
+	registerBlockType = wp.blocks.registerBlockType,
+	RichText = wp.editor.RichText,
+	InspectorControls = wp.editor.InspectorControls,
+	CheckboxControl = wp.components.CheckboxControl,
+	RadioControl = wp.components.RadioControl,
+	TextControl = wp.components.TextControl,
+	ToggleControl = wp.components.ToggleControl,
+	SelectControl = wp.components.SelectControl;
+
+registerBlockType( 'gutenberg-boilerplate-es5/hello-world-step-04', {
+	title: 'Hello World (Step 4)',
+
+	icon: 'universal-access-alt',
+
+	category: 'layout',
+
+	attributes: {
+		content: {
+			type: 'string',
+			source: 'html',
+			selector: 'p',
+		},
+		checkboxField: {
+			type: 'boolean',
+			default: true,
+		},
+		radioField: {
+			type: 'string',
+			default: 'yes',
+		},
+		textField: {
+			type: 'string',
+		},
+		toggleField: {
+			type: 'boolean',
+		},
+		selectField: {
+			type: 'string',
+		},
+	},
+
+	edit: function( props ) {
+		var content = props.attributes.content,
+			props.attributes.checkboxField,
+			props.attributes.radioField,
+			props.attributes.textField,
+			props.attributes.toggleField,
+			props.attributes.selectField;
+
+		function onChangeContent( newContent ) {
+			props.setAttributes( { content: newContent } );
+		}
+
+		function onChangeCheckboxField( newValue ) {
+			props.setAttributes( { checkboxField: newValue } );
+		}
+
+		function onChangeRadioField( newValue ) {
+			props.setAttributes( { radioField: newValue } );
+		}
+
+		function onChangeTextField( newValue ) {
+			props.setAttributes( { textField: newValue } );
+		}
+
+		function onChangeToggleField( newValue ) {
+			props.setAttributes( { toggleField: newValue } );
+		}
+
+		function onChangeSelectField( newValue ) {
+			props.setAttributes( { selectField: newValue } );
+		}
+
+
+		return (
+				el(
+					Fragment, 
+					null, 
+					el(
+						InspectorControls, 
+						null, 
+						el(
+							CheckboxControl, 
+							{
+								heading: "Checkbox Field",
+								label: "Tick Me",
+								help: "Additional help text",
+								checked: checkboxField,
+								onChange: onChangeCheckboxField
+							}
+						), 
+						el(
+							RadioControl, 
+							{
+								label: "Radio Field",
+								selected: radioField,
+								options: [
+									{
+										label: "Yes",
+										value: "yes"
+									}, 
+									{
+										label: "No",
+										value: "no"
+									}
+								],
+								onChange: onChangeRadioControl
+							}
+						), 
+						el(
+							TextControl, 
+							{
+								label: "Text Field",
+								help: "Additional help text",
+								value: textField,
+								onChange: onChangeTextField
+							}
+						), 
+						el(
+							ToggleControl, 
+							{
+								label: "Toggle Field",
+								checked: toggleField,
+								onChange: onToggleField
+							}
+						), 
+						el(
+							SelectControl, 
+							{
+								label: "Select Control",
+								value: selectControl,
+								options: [
+									{
+										value: "a",
+										label: "Option A"
+									}, 
+									{
+										value: "b",
+										label: "Option B"
+									}, 
+									{
+										value: "c",
+										label: "Option C"
+									}
+								],
+								onChange: onChangeSelectControl
+							}
+						)
+					), 
+					el(
+						RichText, 
+						{
+							key: "editable",
+							tagName: "p",
+							onChange: onChangeContent,
+							value: content
+						}
+					)
+				)
+		);
+	},
+
+	save: function( props ) {
+		var content = props.attributes.content,
+			props.attributes.checkboxField,
+			props.attributes.radioField,
+			props.attributes.textField,
+			props.attributes.toggleField,
+			props.attributes.selectField;
+
+		return el(
+					"div", 
+					null, 
+					el(
+						RichText.Content, 
+						{
+							value: content,
+							tagName: "p"
+						}
+					), 
+					el(
+						"h2", 
+						null, 
+						"Inspector Control Fields"
+					), 
+					el(
+						"ul", 
+						null, 
+						el(
+							"li", 
+							null, 
+							"Checkbox Field: ", 
+							checkboxField
+						), 
+						el(
+							"li", 
+							null, 
+							"Radio Field: ", 
+							radioField
+						), 
+						el(
+							"li", 
+							null, 
+							"Text Field: ", 
+							textField
+						), 
+						el(
+							"li", 
+							null, 
+							"Toggle Field: ", 
+							toggleField
+						), 
+						el(
+							"li", 
+							null, 
+							"Select Field: ", 
+							selectField
+						)
+					)
+				);
+	},
+} );
+```
+{% ESNext %}
+```js
+const { registerBlockType } = wp.blocks;
+const { Fragment } = wp.element;
+const {
+  CheckboxControl,
+  RadioControl,
+  TextControl,
+  ToggleControl,
+  SelectControl
+} = wp.components;
+const {
+	RichText
+	InspectorControls,
+} = wp.editor;
+
+registerBlockType( 'gutenberg-boilerplate-esnext/hello-world-step-04', {
+	title: 'Hello World (Step 4)',
+
+	icon: 'universal-access-alt',
+
+	category: 'layout',
+
+	attributes: {
+		content: {
+			type: 'string',
+			source: 'html',
+			selector: 'p',
+		},
+		checkboxField: {
+			type: 'boolean',
+			default: true,
+		},
+		radioField: {
+			type: 'string',
+			default: 'yes',
+		},
+		textField: {
+			type: 'string',
+		},
+		toggleField: {
+			type: 'boolean',
+		},
+		selectField: {
+			type: 'string',
+		},
+	},
+
+	edit( { attributes, setAttributes } ) {
+		const { content, checkboxField, radioField, textField, toggleField, selectField } = attributes;
+
+		function onChangeContent( newContent ) {
+			setAttributes( { content: newContent } );
+		}
+
+		function onChangeCheckboxField( newValue ) {
+			setAttributes( { checkboxField: newValue } );
+		}
+
+		function onChangeRadioField( newValue ) {
+			setAttributes( { radioField: newValue } );
+		}
+
+		function onChangeTextField( newValue ) {
+			setAttributes( { textField: newValue } );
+		}
+
+		function onChangeToggleField( newValue ) {
+			setAttributes( { toggleField: newValue } );
+		}
+
+		function onChangeSelectField( newValue ) {
+			setAttributes( { selectField: newValue } );
+		}
+
+		return (
+			<Fragment>
+				<InspectorControls>
+
+					<CheckboxControl
+						heading="Checkbox Field"
+						label="Tick Me"
+						help="Additional help text"
+						checked={ checkboxField }
+						onChange={ onChangeCheckboxField }
+					/>
+
+					<RadioControl
+						label="Radio Field"
+						selected={ radioField }
+						options={ 
+							[
+								{ label: "Yes", value: "yes" },
+								{ label: "No", value: "no" }
+							] 
+						}
+						onChange={ onChangeRadioControl }
+					/>
+
+					<TextControl
+						label="Text Field"
+						help="Additional help text"
+						value={ textField }
+						onChange={ onChangeTextField }
+					/>
+
+					<ToggleControl
+						label="Toggle Field"
+						checked={ toggleField }
+						onChange={ onToggleField }
+					/>
+
+					<SelectControl
+						label="Select Control"
+						value={ selectControl }
+						options={
+							[
+								{ value: "a", label: "Option A" },
+								{ value: "b", label: "Option B" },
+								{ value: "c", label: "Option C" }
+							]
+						}
+						onChange={ onChangeSelectControl }
+					/>
+
+				</InspectorControls>
+
+				<RichText
+					key="editable"
+					tagName="p"
+					onChange={ onChangeContent }
+					value={ content }
+				/>
+			</Fragment>
+		);
+	},
+
+	save( { attributes } ) {
+		const { content, checkboxField, radioField, textField, toggleField, selectField } = attributes;
+
+		return (
+			<div>
+				<RichText.Content
+					value={ content }
+					tagName="p"
+				/>
+
+				<h2>Inspector Control Fields</h2>
+				<ul>
+					<li>Checkbox Field: {checkboxField}</li>
+					<li>Radio Field: {radioField}</li>
+					<li>Text Field: {textField}</li>
+					<li>Toggle Field: {toggleField}</li>
+					<li>Select Field: {selectField}</li>
+				</ul>
+			</div>
+		);
+	},
+} );
+```
+{% end %}