Convert examples to use import syntax (#17502)

* Convert examples to use import syntax

Updates the examples to use the syntax:

    import { ... } from '@wordpress/package';

instead of

    const { ... } = wp.package;

This is more consistent and better for webpack and build setup.

The gutenberg-examples repo was already switched to use import syntax
in: WordPress/gutenberg-examples#89

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

Co-Authored-By: Chris Van Patten <chris@vanpattenmedia.com>

* Update docs/designers-developers/developers/tutorials/block-tutorial/creating-dynamic-blocks.md

Co-Authored-By: Chris Van Patten <chris@vanpattenmedia.com>

docs/designers-developers/developers/internationalization.md

@@ -44,51 +44,51 @@ const el = wp.element.createElement;
 const { registerBlockType } = wp.blocks;
 
 registerBlockType( 'myguten/simple', {
-	title: __('Simple Block', 'myguten'),
+	title: __( 'Simple Block', 'myguten' ),
 	category: 'widgets',
 
 	edit: () => {
 		return el(
 			'p',
-			{ style: { color:'red'}, },
-			__('Hello World', 'myguten')
+			{ style: { color: 'red' } },
+			__( 'Hello World', 'myguten' )
 		);
 	},
 
 	save: () => {
 		return el(
 			'p',
-			{ style: { color:'red'}, },
-			__('Hello World', 'myguten')
+			{ style: { color: 'red' } },
+			__( 'Hello World', 'myguten' )
 		);
-	}
-});
+	},
+} );
 ```
 {% ESNext %}
 ```js
-const { __ } = wp.i18n;
-const { registerBlockType } = wp.blocks;
+import { __ } from '@wordpress/i18n';
+import { registerBlockType } from '@wordpress/blocks';
 
 registerBlockType( 'myguten/simple', {
-	title: __('Simple Block', 'myguten'),
+	title: __( 'Simple Block', 'myguten' ),
 	category: 'widgets',
 
 	edit: () => {
 		return (
 			<p style="color:red">
-				{ __('Hello World', 'myguten') }
+				{ __( 'Hello World', 'myguten' ) }
 			</p>
 		);
 	},
 
 	save: () => {
 		return (
 			<p style="color:red">
-				{ __('Hello World', 'myguten') }
+				{ __( 'Hello World', 'myguten' ) }
 			</p>
 		);
-	}
-});
+	},
+} );
 ```
 {% end %}
 
@@ -259,4 +259,3 @@ Using `make-json` automatically names the file with the md5 hash, so it is ready
 You will need to set your WordPress installation to Esperanto language. Go to Settings > General and change your site language to Esperanto.
 
 With the language set, create a new post, add the block, and you will see the translations used.
-

docs/designers-developers/developers/richtext.md

@@ -61,8 +61,8 @@ wp.blocks.registerBlockType( /* ... */, {
 ```
 {% ESNext %}
 ```js
-const { registerBlockType } = wp.blocks;
-const { RichText } = wp.editor;
+import { registerBlockType } from '@wordpress/blocks';
+import { RichText } from '@wordpress/block-editor';
 
 registerBlockType( /* ... */, {
 	// ...

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

@@ -37,7 +37,7 @@ The editor will automatically generate a class name for each block type to simpl
 ```
 {% ESNext %}
 ```js
-const { registerBlockType } = wp.blocks;
+import { registerBlockType } from '@wordpress/blocks';
 
 registerBlockType( 'gutenberg-examples/example-02-stylesheets', {
 	title: 'Example: Stylesheets',

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

@@ -95,13 +95,13 @@ You can also customize the toolbar to include controls specific to your block ty
 ```
 {% ESNext %}
 ```js
-const { registerBlockType } = wp.blocks;
+import { registerBlockType } from '@wordpress/blocks';
 
-const {
+import {
 	RichText,
 	AlignmentToolbar,
 	BlockControls,
-} = wp.editor;
+} from '@wordpress/block-editor';
 
 registerBlockType( 'gutenberg-examples/example-04-controls-esnext', {
 	title: 'Example: Controls (esnext)',

docs/designers-developers/developers/tutorials/block-tutorial/creating-dynamic-blocks.md

@@ -62,8 +62,8 @@ The following code example shows how to create a dynamic block that shows only t
 ```
 {% ESNext %}
 ```js
-const { registerBlockType } = wp.blocks;
-const { withSelect } = wp.data;
+import { registerBlockType } from '@wordpress/blocks';
+import { withSelect } from '@wordpress/data';
 
 registerBlockType( 'gutenberg-examples/example-05-dynamic', {
 	title: 'Example: last post',
@@ -77,11 +77,11 @@ registerBlockType( 'gutenberg-examples/example-05-dynamic', {
 	} )( ( { posts, className } ) => {
 
 		if ( ! posts ) {
-			return "Loading...";
+			return 'Loading...';
 		}
 
 		if ( posts && posts.length === 0 ) {
-			return "No posts";
+			return 'No posts';
 		}
 
 		let post = posts[ 0 ];
@@ -181,8 +181,8 @@ Gutenberg 2.8 added the [`<ServerSideRender>`](/packages/components/src/server-s
 ```
 {% ESNext %}
 ```js
-const { registerBlockType } = wp.blocks;
-const { ServerSideRender } = wp.components;
+import { registerBlockType } from '@wordpress/blocks';
+import { ServerSideRender } from '@wordpress/components';
 
 registerBlockType( 'gutenberg-examples/example-05-dynamic', {
 	title: 'Example: last post',
@@ -201,4 +201,4 @@ registerBlockType( 'gutenberg-examples/example-05-dynamic', {
 ```
 {% end %}
 
-Note that this code uses the `wp.components` utility but not `wp.data`. Make sure to update the `wp-data` dependency to `wp-components` in the PHP code.
+Note that this code uses the `wp-components` package but not `wp-data`. Make sure to update the dependencies in the PHP code. You can use wp-scripts and ESNext setup for auto dependencies (see the [gutenberg-examples repo](https://github.com/WordPress/gutenberg-examples/tree/master/01-basic-esnext) for PHP code setup).

docs/designers-developers/developers/tutorials/block-tutorial/introducing-attributes-and-editable-fields.md

@@ -108,8 +108,8 @@ Here is the complete block definition for Example 03.
 ```
 {% ESNext %}
 ```js
-const { registerBlockType } = wp.blocks;
-const { RichText } = wp.editor;
+import { registerBlockType } from '@wordpress/blocks';
+import { RichText } from '@wordpress/block-editor';
 
 registerBlockType( 'gutenberg-examples/example-03-editable-esnext', {
 	title: 'Example: Editable (esnext)',

docs/designers-developers/developers/tutorials/block-tutorial/writing-your-first-block-type.md

@@ -78,7 +78,7 @@ With the script enqueued, let's look at the implementation of the block itself:
 ```
 {% ESNext %}
 ```js
-const { registerBlockType } = wp.blocks;
+import { registerBlockType } from '@wordpress/blocks';
 
 const blockStyle = {
 	backgroundColor: '#900',

docs/designers-developers/developers/tutorials/format-api/1-register-format.md

@@ -42,7 +42,7 @@ Then add a new file named `my-custom-format.js` with the following contents:
 ```
 {% ESNext %}
 ```js
-const { registerFormatType } = wp.richText;
+import { registerFormatType } from '@wordpress/rich-text';
 
 registerFormatType(
 	'my-custom-format/sample-output', {

docs/designers-developers/developers/tutorials/format-api/2-toolbar-button.md

@@ -31,8 +31,8 @@ Paste this code in `my-custom-format.js`:
 ```
 {% ESNext %}
 ```js
-const { registerFormatType } = wp.richText;
-const { RichTextToolbarButton } = wp.blockEditor;
+import { registerFormatType } from '@wordpress/rich-text';
+import { RichTextToolbarButton } from '@wordpress/block-editor';
 
 const MyCustomButton = props => {
 	return <RichTextToolbarButton
@@ -113,10 +113,10 @@ The following sample code renders the previously shown button only on Paragraph
 ```
 {% ESNext %}
 ```js
-const { compose, ifCondition } = wp.compose;
-const { registerFormatType } = wp.richText;
-const { RichTextToolbarButton } = wp.blockEditor;
-const { withSelect } = wp.data;
+import { compose, ifCondition } from '@wordpress/compose';
+import { registerFormatType } from '@wordpress/rich-text';
+import { RichTextToolbarButton } from '@wordpress/block-editor';
+import { withSelect } from '@wordpress/data';
 
 const MyCustomButton = props => {
 	return <RichTextToolbarButton

docs/designers-developers/developers/tutorials/format-api/3-apply-format.md

@@ -37,10 +37,10 @@ Update `my-custom-format.js` with this new code:
 ```
 {% ESNext %}
 ```js
-const { registerFormatType, toggleFormat } = wp.richText
-const { RichTextToolbarButton } = wp.blockEditor;
+import { registerFormatType, toggleFormat } from '@wordpress/rich-text';
+import { RichTextToolbarButton } from '@wordpress/block-editor';
 
-const MyCustomButton = props => {
+const MyCustomButton = ( props ) => {
 	return <RichTextToolbarButton
 		icon='editor-code'
 		title='Sample output'
@@ -51,7 +51,7 @@ const MyCustomButton = props => {
 			) );
 		} }
 		isActive={ props.isActive }
-	/>
+	/>;
 };
 
 registerFormatType(

docs/designers-developers/developers/tutorials/javascript/js-build-setup.md

@@ -98,7 +98,7 @@ The `@wordpress/scripts` package handles the dependencies and default configurat
 With that in mind, let's set up a basic block. Create a file at `src/index.js` with the following content:
 
 ```js
-const { registerBlockType } = wp.blocks;
+import { registerBlockType } from '@wordpress/blocks';
 
 registerBlockType( 'myguten/test-block', {
 	title: 'Basic Example',

docs/designers-developers/developers/tutorials/metabox/meta-block-3-add.md

@@ -59,9 +59,9 @@ Add this code to your JavaScript file (this tutorial will call the file `myguten
 } )( window.wp );
 ```
 {% ESNext %}
-```jsx
-const { registerBlockType } = wp.blocks;
-const { TextControl } = wp.components;
+```js
+import { registerBlockType } from '@wordpress/blocks';
+import { TextControl } from '@wordpress/components';
 
 registerBlockType( 'myguten/meta-block', {
 	title: 'Meta Block',