Move ESNext to default code example shown

docs/designers-developers/developers/tutorials/block-tutorial/applying-styles-with-stylesheets.md

@@ -5,6 +5,28 @@ In the previous step, the block had applied its own styles by an inline `style`
 The editor will automatically generate a class name for each block type to simplify styling. It can be accessed from the object argument passed to the edit and save functions. In step 2, we will create a stylesheet to use that class name.
 
 {% codetabs %}
+{% ESNext %}
+```jsx
+import { registerBlockType } from '@wordpress/blocks';
+
+registerBlockType( 'gutenberg-examples/example-02-stylesheets', {
+	title: 'Example: Stylesheets',
+
+	icon: 'universal-access-alt',
+
+	category: 'layout',
+
+	example: {},
+
+	edit( { className } ) {
+		return <p className={ className }>Hello World, step 2 (from the editor, in green).</p>;
+	},
+
+	save() {
+		return <p>Hello World, step 2 (from the frontend, in red).</p>;
+	}
+} );
+```
 {% ES5 %}
 ```js
 ( function( blocks, element ) {
@@ -35,28 +57,6 @@ The editor will automatically generate a class name for each block type to simpl
 	window.wp.element
 ) );
 ```
-{% ESNext %}
-```js
-import { registerBlockType } from '@wordpress/blocks';
-
-registerBlockType( 'gutenberg-examples/example-02-stylesheets', {
-	title: 'Example: Stylesheets',
-
-	icon: 'universal-access-alt',
-
-	category: 'layout',
-
-	example: {},
-
-	edit( { className } ) {
-		return <p className={ className }>Hello World, step 2 (from the editor, in green).</p>;
-	},
-
-	save() {
-		return <p>Hello World, step 2 (from the frontend, in red).</p>;
-	}
-} );
-```
 {% end %}
 
 The class name is generated using the block's name prefixed with `wp-block-`, replacing the `/` namespace separator with a single `-`.

docs/designers-developers/developers/tutorials/block-tutorial/block-controls-toolbar-and-sidebar.md

@@ -11,6 +11,85 @@ When the user selects a block, a number of control buttons may be shown in a too
 You can also customize the toolbar to include controls specific to your block type. If the return value of your block type's `edit` function includes a `BlockControls` element, those controls will be shown in the selected block's toolbar.
 
 {% codetabs %}
+{% ESNext %}
+```jsx
+import { registerBlockType } from '@wordpress/blocks';
+
+import {
+	RichText,
+	AlignmentToolbar,
+	BlockControls,
+} from '@wordpress/block-editor';
+
+registerBlockType( 'gutenberg-examples/example-04-controls-esnext', {
+	title: 'Example: Controls (esnext)',
+	icon: 'universal-access-alt',
+	category: 'layout',
+	attributes: {
+		content: {
+			type: 'array',
+			source: 'children',
+			selector: 'p',
+		},
+		alignment: {
+			type: 'string',
+			default: 'none',
+		},
+	},
+	example: {
+		attributes: {
+			content: 'Hello World',
+			alignment: 'right',
+		},
+	},
+	edit: ( props ) => {
+		const {
+			attributes: {
+				content,
+				alignment,
+			},
+			className,
+		} = props;
+
+		const onChangeContent = ( newContent ) => {
+			props.setAttributes( { content: newContent } );
+		};
+
+		const onChangeAlignment = ( newAlignment ) => {
+			props.setAttributes( { alignment: newAlignment === undefined ? 'none' : newAlignment } );
+		};
+
+		return (
+			<div>
+				{
+					<BlockControls>
+						<AlignmentToolbar
+							value={ alignment }
+							onChange={ onChangeAlignment }
+						/>
+					</BlockControls>
+				}
+				<RichText
+					className={ className }
+					style={ { textAlign: alignment } }
+					tagName="p"
+					onChange={ onChangeContent }
+					value={ content }
+				/>
+			</div>
+		);
+	},
+	save: ( props ) => {
+		return (
+			<RichText.Content
+				className={ `gutenberg-examples-align-${ props.attributes.alignment }` }
+				tagName="p"
+				value={ props.attributes.content }
+			/>
+		);
+	},
+} );
+```
 {% ES5 %}
 ```js
 ( function( blocks, editor, element ) {
@@ -93,85 +172,6 @@ You can also customize the toolbar to include controls specific to your block ty
 	window.wp.element
 ) );
 ```
-{% ESNext %}
-```js
-import { registerBlockType } from '@wordpress/blocks';
-
-import {
-	RichText,
-	AlignmentToolbar,
-	BlockControls,
-} from '@wordpress/block-editor';
-
-registerBlockType( 'gutenberg-examples/example-04-controls-esnext', {
-	title: 'Example: Controls (esnext)',
-	icon: 'universal-access-alt',
-	category: 'layout',
-	attributes: {
-		content: {
-			type: 'array',
-			source: 'children',
-			selector: 'p',
-		},
-		alignment: {
-			type: 'string',
-			default: 'none',
-		},
-	},
-	example: {
-		attributes: {
-			content: 'Hello World',
-			alignment: 'right',
-		},
-	},
-	edit: ( props ) => {
-		const {
-			attributes: {
-				content,
-				alignment,
-			},
-			className,
-		} = props;
-
-		const onChangeContent = ( newContent ) => {
-			props.setAttributes( { content: newContent } );
-		};
-
-		const onChangeAlignment = ( newAlignment ) => {
-			props.setAttributes( { alignment: newAlignment === undefined ? 'none' : newAlignment } );
-		};
-
-		return (
-			<div>
-				{
-					<BlockControls>
-						<AlignmentToolbar
-							value={ alignment }
-							onChange={ onChangeAlignment }
-						/>
-					</BlockControls>
-				}
-				<RichText
-					className={ className }
-					style={ { textAlign: alignment } }
-					tagName="p"
-					onChange={ onChangeContent }
-					value={ content }
-				/>
-			</div>
-		);
-	},
-	save: ( props ) => {
-		return (
-			<RichText.Content
-				className={ `gutenberg-examples-align-${ props.attributes.alignment }` }
-				tagName="p"
-				value={ props.attributes.content }
-			/>
-		);
-	},
-} );
-```
 {% end %}
 
 Note that `BlockControls` is only visible when the block is currently selected and in visual editing mode. `BlockControls` are not shown when editing a block in HTML editing mode.