Update versions in package.json, use @wordpress/scripts for build process

.eslintrc

@@ -10,6 +10,22 @@
   },
   "rules": {
     "@wordpress/dependency-group": "error",
-    "@wordpress/react-no-unsafe-timeout": "error"
+    "@wordpress/react-no-unsafe-timeout": "error",
+    "comma-dangle": [
+      "error",
+      {
+        "arrays": "always-multiline",
+        "objects": "always-multiline",
+        "imports": "always-multiline",
+        "exports": "always-multiline",
+        "functions": "never"
+      }
+    ],
+    "no-unused-vars": [
+      "error",
+      {
+        "ignoreRestSiblings": true
+      }
+    ]
   }
 }

.gitignore

@@ -74,7 +74,6 @@ tmp/
 #######
 .npmignore
 node_modules
-package-lock.json
 
 # Always-ignore extensions #
 ########################
@@ -88,6 +87,7 @@ package-lock.json
 *.swp
 *.tmp
 *.bak
+*.map
 
 # Sass #
 #######
@@ -117,3 +117,4 @@ js/editor.blocks.js
 js/scripts.js
 css/blocks.editor.css
 package/
+*.asset.php

gulpfile.js

@@ -77,6 +77,8 @@ gulp.task( 'clean:bundle', function () {
 		'package/trunk/coverage',
 		'package/trunk/js/blocks',
 		'package/trunk/js/src',
+		'package/trunk/js/*.map',
+		'package/trunk/css/*.map',
 		'package/trunk/bin',
 		'package/trunk/node_modules',
 		'package/trunk/vendor',
@@ -103,4 +105,4 @@ gulp.task( 'default', gulp.series(
 	'wporg:trunk',
 	'version',
 	'clean:bundle'
-) );
+) );

js/blocks/components/block-lab-inspector.js

@@ -1,9 +1,9 @@
 /**
  * WordPress dependencies
  */
-const { PanelBody } = wp.components;
-const { InspectorControls } = wp.editor;
-const { applyFilters } = wp.hooks;
+import { PanelBody } from '@wordpress/components';
+import { InspectorControls } from '@wordpress/block-editor';
+import { applyFilters } from '@wordpress/hooks';
 
 /**
  * Internal dependencies

js/blocks/components/edit.js

@@ -1,13 +1,12 @@
 /**
  * WordPress dependencies
  */
-const { ServerSideRender } = wp.editor;
-const { Fragment } = wp.element;
+import ServerSideRender from '@wordpress/server-side-render';
 
 /**
  * Internal dependencies
  */
-import { AdvancedControls, BlockLabInspector, FormControls } from './';
+import { BlockLabInspector, FormControls } from './';
 import icons from '../../../assets/icons.json';
 
 /**
@@ -26,9 +25,8 @@ const Edit = ( { blockProps, block } ) => {
 	}
 
 	return (
-		<Fragment>
+		<>
 			<BlockLabInspector blockProps={ blockProps } block={ block } />
-			<AdvancedControls block={ block } />
 			<div className={ className } key={ `form-controls-${ block.name }` } >
 				{ isSelected ? (
 					<div className="block-form">
@@ -43,7 +41,7 @@ const Edit = ( { blockProps, block } ) => {
 					/>
 				) }
 			</div>
-		</Fragment>
+		</>
 	);
 };
 

js/blocks/components/fetch-input.js

@@ -12,14 +12,14 @@ import classNames from 'classnames';
 /**
  * WordPress dependencies
  */
-const { __, sprintf, _n } = wp.i18n;
-const { Component, createRef } = wp.element;
-const { decodeEntities } = wp.htmlEntities;
-const { UP, DOWN, ENTER } = wp.keycodes;
-const { BaseControl, Spinner, withSpokenMessages, Popover } = wp.components;
-const { withInstanceId } = wp.compose;
-const apiFetch = wp.apiFetch;
-const { addQueryArgs } = wp.url;
+import { __, sprintf, _n } from '@wordpress/i18n';
+import { Component, createRef } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
+import { UP, DOWN, ENTER } from '@wordpress/keycodes';
+import { BaseControl, Spinner, withSpokenMessages, Popover } from '@wordpress/components';
+import { withInstanceId } from '@wordpress/compose';
+import { addQueryArgs } from '@wordpress/url';
+const { apiFetch } = wp;
 
 // Since FetchInput is rendered in the context of other inputs, but should be
 // considered a separate modal node, prevent keyboard events from propagating

js/blocks/components/fields.js

@@ -1,8 +1,8 @@
 /**
  * WordPress dependencies
  */
-const { applyFilters } = wp.hooks;
-const { select } = wp.data;
+import { applyFilters } from '@wordpress/hooks';
+import { select } from '@wordpress/data';
 
 /**
  * Internal dependencies

js/blocks/components/image.js

@@ -1,9 +1,12 @@
-const { BaseControl, Button, Placeholder, DropZone, FormFileUpload, Spinner } = wp.components;
-const { withState } = wp.compose;
-const { withSelect } = wp.data;
-const { mediaUpload, MediaUpload, MediaUploadCheck } = wp.editor;
-const { Fragment } = wp.element;
-const { __, sprintf } = wp.i18n;
+/**
+ * WordPress dependencies
+ */
+import { BaseControl, Button, Placeholder, DropZone, FormFileUpload, Spinner } from '@wordpress/components';
+import { withState } from '@wordpress/compose';
+import { withSelect } from '@wordpress/data';
+import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
+import { mediaUpload } from '@wordpress/editor';
+import { __, sprintf } from '@wordpress/i18n';
 
 const ALLOWED_TYPES = [ 'image' ];
 const DEFAULT_IMG_ID = 0;
@@ -96,7 +99,7 @@ const Image = withSelect( ( select, ownProps ) => {
 							<Spinner />
 						) }
 						{ ! isUploading && (
-							<Fragment>
+							<>
 								<FormFileUpload
 									isLarge
 									disabled={ !! isUploading }
@@ -129,7 +132,7 @@ const Image = withSelect( ( select, ownProps ) => {
 										</div>
 									) }
 								/>
-							</Fragment>
+							</>
 						) }
 					</MediaUploadCheck>
 				</Placeholder>

js/blocks/components/index.js

@@ -1,4 +1,3 @@
-export { default as AdvancedControls } from './advanced-controls';
 export { default as BlockLabInspector } from './block-lab-inspector';
 export { default as ContentControl } from './content-control';
 export { default as Edit } from './edit';

js/blocks/components/repeater-rows.js

@@ -1,9 +1,9 @@
 /**
  * WordPress dependencies
  */
-const { BaseControl, IconButton } = wp.components;
-const { Component, Fragment, createRef } = wp.element;
-const { __ } = wp.i18n;
+import { BaseControl, IconButton } from '@wordpress/components';
+import { Component, createRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 const { getScrollContainer } = wp.dom;
 
 /**
@@ -166,7 +166,7 @@ class RepeaterRows extends Component {
 		const { rows, field, subFields, parentBlockProps, parentBlock } = this.props;
 
 		return (
-			<Fragment>
+			<>
 				<div className="block-lab-repeater__rows" ref={ this.repeaterRows }>
 					{
 						rows.map( ( row, rowIndex ) => {
@@ -214,7 +214,7 @@ class RepeaterRows extends Component {
 						} )
 					}
 				</div>
-			</Fragment>
+			</>
 		);
 	}
 }

js/blocks/components/tiny-mce.js

@@ -1,9 +1,9 @@
 /**
  * WordPress dependencies
  */
-const { Component } = wp.element;
-const { __ } = wp.i18n;
-const { F10 } = wp.keycodes;
+import { Component } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { F10 } from '@wordpress/keycodes';
 
 /**
  * Forked from the Core Classic Editor's Edit component.

js/blocks/controls/checkbox.js

@@ -1,4 +1,7 @@
-const { CheckboxControl } = wp.components;
+/**
+ * WordPress dependencies
+ */
+import { CheckboxControl } from '@wordpress/components';
 
 const BlockLabCheckboxControl = ( props ) => {
 	const { field, getValue, onChange } = props;

js/blocks/controls/classic-text.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-const { BaseControl } = wp.components;
+import { BaseControl } from '@wordpress/components';
 
 /**
  * Internal dependencies

js/blocks/controls/color.js

@@ -1,5 +1,8 @@
-const { BaseControl, TextControl, Popover, ColorIndicator, ColorPicker } = wp.components;
-const { withState } = wp.compose;
+/**
+ * WordPress dependencies
+ */
+import { BaseControl, TextControl, Popover, ColorIndicator, ColorPicker } from '@wordpress/components';
+import { withState } from '@wordpress/compose';
 
 const BlockLabColorPopover = withState( {
 } )( ( { isVisible, color, onUpdate, setState } ) => {

js/blocks/controls/email.js

@@ -3,7 +3,10 @@
  */
 import classNames from 'classnames';
 
-const { TextControl } = wp.components;
+/**
+ * WordPress dependencies
+ */
+import { TextControl } from '@wordpress/components';
 
 const BlockLabEmailControl = ( props ) => {
 	const { field, getValue, onChange } = props;

js/blocks/controls/multiselect.js

@@ -1,4 +1,7 @@
-const { SelectControl } = wp.components;
+/**
+ * WordPress dependencies
+ */
+import { SelectControl } from '@wordpress/components';
 
 const BlockLabMultiselectControl = ( props ) => {
 	const { field, getValue, onChange } = props;

js/blocks/controls/number.js

@@ -3,7 +3,10 @@
  */
 import classNames from 'classnames';
 
-const { TextControl } = wp.components;
+/**
+ * WordPress dependencies
+ */
+import { TextControl } from '@wordpress/components';
 
 const BlockLabNumberControl = ( props ) => {
 	const { field, getValue, onChange } = props;

js/blocks/controls/radio.js

@@ -1,4 +1,7 @@
-const { RadioControl } = wp.components;
+/**
+ * WordPress dependencies
+ */
+import { RadioControl } from '@wordpress/components';
 
 const BlockLabRadioControl = ( props ) => {
 	const { field, getValue, onChange } = props;

js/blocks/controls/range.js

@@ -1,4 +1,7 @@
-const { RangeControl } = wp.components;
+/**
+ * WordPress dependencies
+ */
+import { RangeControl } from '@wordpress/components';
 
 const BlockLabRangeControl = ( props ) => {
 	const { field, getValue, onChange } = props;

js/blocks/controls/repeater.js

@@ -1,9 +1,8 @@
 /**
- * WordPress dependendies
+ * WordPress dependencies
  */
-const { __ } = wp.i18n;
-const { BaseControl, IconButton } = wp.components;
-
+import { __ } from '@wordpress/i18n';
+import { BaseControl, IconButton } from '@wordpress/components';
 /**
  * Internal dependencies
  */

js/blocks/controls/rich-text.js

@@ -1,8 +1,8 @@
 /**
  * WordPress dependencies
  */
-const { BaseControl } = wp.components;
-const { RichText } = wp.blockEditor;
+import { BaseControl } from '@wordpress/components';
+import { RichText } from '@wordpress/block-editor';
 
 const BlockLabRichTextControl = ( props ) => {
 	const { field, getValue, instanceId, onChange } = props;

js/blocks/controls/select.js

@@ -1,4 +1,7 @@
-const { SelectControl } = wp.components;
+/**
+ * WordPress dependencies
+ */
+import { SelectControl } from '@wordpress/components';
 
 const BlockLabSelectControl = ( props ) => {
 	const { field, getValue, onChange } = props;

js/blocks/controls/text.js

@@ -1,4 +1,7 @@
-const { TextControl } = wp.components;
+/**
+ * WordPress dependencies
+ */
+import { TextControl } from '@wordpress/components';
 
 const BlockLabTextControl = ( props ) => {
 	const { field, getValue, onChange } = props;

js/blocks/controls/textarea.js

@@ -1,4 +1,7 @@
-const { TextareaControl } = wp.components;
+/**
+ * WordPress dependencies
+ */
+import { TextareaControl } from '@wordpress/components';
 
 const BlockLabTextareaControl = ( props ) => {
 	const { getValue, field, onChange } = props;