ESLint: Fix dependency-group rule to correctly enforce import grouping

bin/plugin/commands/packages.js

@@ -9,6 +9,7 @@ const { inc: semverInc } = require( 'semver' );
 const { rimraf } = require( 'rimraf' );
 const readline = require( 'readline' );
 const SimpleGit = require( 'simple-git' );
+const { join } = require( 'path' );
 
 /**
  * Internal dependencies
@@ -24,7 +25,6 @@ const {
 	calculateVersionBumpFromChangelog,
 	findPluginReleaseBranchName,
 } = require( './common' );
-const { join } = require( 'path' );
 const pluginConfig = require( '../config' );
 
 /**

packages/block-editor/src/components/global-styles/background-panel.js

@@ -6,13 +6,14 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { useCallback, Platform } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
 import BackgroundImageControl from '../background-image-control';
 import { useToolsPanelDropdownMenuProps } from './utils';
 import { setImmutably } from '../../utils/object';
-import { __ } from '@wordpress/i18n';
 
 const DEFAULT_CONTROLS = {
 	backgroundImage: true,

packages/block-editor/src/components/global-styles/color-panel.js

@@ -21,6 +21,7 @@ import {
 } from '@wordpress/components';
 import { useCallback, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { reset as resetIcon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -30,7 +31,6 @@ import { useColorsPerOrigin, useGradientsPerOrigin } from './hooks';
 import { getValueFromVariable, useToolsPanelDropdownMenuProps } from './utils';
 import { setImmutably } from '../../utils/object';
 import { unlock } from '../../lock-unlock';
-import { reset as resetIcon } from '@wordpress/icons';
 
 export function useHasColorPanel( settings ) {
 	const hasTextPanel = useHasTextPanel( settings );

packages/block-editor/src/components/link-control/index.js

@@ -22,6 +22,7 @@ import { isShallowEqualObjects } from '@wordpress/is-shallow-equal';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { keyboardReturn } from '@wordpress/icons';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -34,7 +35,6 @@ import useCreatePage from './use-create-page';
 import useInternalValue from './use-internal-value';
 import { ViewerFill } from './viewer-slot';
 import { DEFAULT_LINK_SETTINGS } from './constants';
-import deprecated from '@wordpress/deprecated';
 
 /**
  * Default properties associated with a link control value.

packages/block-editor/src/components/link-control/search-input.js

@@ -3,6 +3,7 @@
  */
 import { forwardRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -11,7 +12,6 @@ import { URLInput } from '../';
 import LinkControlSearchResults from './search-results';
 import { CREATE_TYPE } from './constants';
 import useSearchHandler from './use-search-handler';
-import deprecated from '@wordpress/deprecated';
 
 // Must be a function as otherwise URLInput will default
 // to the fetchLinkSuggestions passed in block editor settings

packages/block-editor/src/components/link-control/search-results.js

@@ -3,6 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { MenuGroup } from '@wordpress/components';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * External dependencies
@@ -15,7 +16,6 @@ import clsx from 'clsx';
 import LinkControlSearchCreate from './search-create-button';
 import LinkControlSearchItem from './search-item';
 import { CREATE_TYPE, LINK_ENTRY_TYPES } from './constants';
-import deprecated from '@wordpress/deprecated';
 
 function LinkControlSearchResults( {
 	withCreateSuggestion,

packages/block-editor/src/hooks/border.js

@@ -11,6 +11,7 @@ import { __experimentalHasSplitBorders as hasSplitBorders } from '@wordpress/com
 import { Platform, useCallback, useMemo } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -29,7 +30,6 @@ import {
 	BorderPanel as StylesBorderPanel,
 } from '../components/global-styles';
 import { store as blockEditorStore } from '../store';
-import { __ } from '@wordpress/i18n';
 
 export const BORDER_SUPPORT_KEY = '__experimentalBorder';
 export const SHADOW_SUPPORT_KEY = 'shadow';

packages/block-library/src/embed/edit.js

@@ -1,3 +1,19 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __, _x, sprintf } from '@wordpress/i18n';
+import { useState, useEffect } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useBlockProps } from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { View } from '@wordpress/primitives';
+import { getAuthority } from '@wordpress/url';
+
 /**
  * Internal dependencies
  */
@@ -14,22 +30,6 @@ import { embedContentIcon } from './icons';
 import EmbedLoading from './embed-loading';
 import EmbedPlaceholder from './embed-placeholder';
 import EmbedPreview from './embed-preview';
-
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { __, _x, sprintf } from '@wordpress/i18n';
-import { useState, useEffect } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { useBlockProps } from '@wordpress/block-editor';
-import { store as coreStore } from '@wordpress/core-data';
-import { View } from '@wordpress/primitives';
-import { getAuthority } from '@wordpress/url';
 import { Caption } from '../utils/caption';
 
 const EmbedEdit = ( props ) => {

packages/block-library/src/embed/embed-preview.js

@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import { getPhotoHtml } from './util';
-
 /**
  * External dependencies
  */
@@ -20,6 +15,7 @@ import { getAuthority } from '@wordpress/url';
 /**
  * Internal dependencies
  */
+import { getPhotoHtml } from './util';
 import WpEmbedPreview from './wp-embed-preview';
 
 export default function EmbedPreview( {

packages/block-library/src/embed/test/index.native.js

@@ -11,6 +11,7 @@ import {
 } from 'test/helpers';
 import { Platform } from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
+import { WebView } from 'react-native-webview';
 
 /**
  * WordPress dependencies
@@ -30,7 +31,6 @@ import { requestPreview } from '@wordpress/react-native-bridge';
  */
 import * as paragraph from '../../paragraph';
 import * as embed from '..';
-import { WebView } from 'react-native-webview';
 
 // Override modal mock to prevent unmounting it when is not visible.
 // This is required to be able to trigger onClose and onDismiss events when

packages/components/src/autocomplete/autocompleter-ui.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import clsx from 'clsx';
+import { createPortal } from 'react-dom';
 
 /**
  * WordPress dependencies
@@ -14,8 +15,8 @@ import {
 } from '@wordpress/element';
 import { useAnchor } from '@wordpress/rich-text';
 import { useDebounce, useMergeRefs, useRefEffect } from '@wordpress/compose';
-import { speak } from '@wordpress/a11y';
 import { __, _n, sprintf } from '@wordpress/i18n';
+import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
@@ -24,7 +25,6 @@ import getDefaultUseItems from './get-default-use-items';
 import Button from '../button';
 import Popover from '../popover';
 import { VisuallyHidden } from '../visually-hidden';
-import { createPortal } from 'react-dom';
 import type { AutocompleterUIProps, KeyedOption, WPCompleter } from './types';
 
 type ListBoxProps = {

packages/components/src/box-control/utils.ts

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -13,7 +14,6 @@ import type {
 	CustomValueUnits,
 	Preset,
 } from './types';
-import deprecated from '@wordpress/deprecated';
 
 export const CUSTOM_VALUE_SETTINGS: CustomValueUnits = {
 	px: { max: 300, step: 1 },

packages/components/src/button/test/index.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { render, screen } from '@testing-library/react';
+import { press } from '@ariakit/test';
 
 /**
  * WordPress dependencies
@@ -15,7 +16,6 @@ import { plusCircle } from '@wordpress/icons';
 import _Button from '..';
 import Tooltip from '../../tooltip';
 import cleanupTooltip from '../../tooltip/test/utils';
-import { press } from '@ariakit/test';
 
 jest.mock( '../../icon', () => () => <div data-testid="test-icon" /> );
 

packages/components/src/color-picker/test/index.tsx

@@ -3,6 +3,7 @@
  */
 import { fireEvent, screen, render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { click } from '@ariakit/test';
 
 /**
  * WordPress dependencies
@@ -13,7 +14,6 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { ColorPicker } from '..';
-import { click } from '@ariakit/test';
 
 const hslaMatcher = expect.objectContaining( {
 	h: expect.any( Number ),

packages/components/src/custom-gradient-picker/gradient-bar/index.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import clsx from 'clsx';
+import type { MouseEventHandler } from 'react';
 
 /**
  * WordPress dependencies
@@ -20,7 +21,6 @@ import type {
 	CustomGradientBarReducerAction,
 	CustomGradientBarIdleState,
 } from '../types';
-import type { MouseEventHandler } from 'react';
 
 const customGradientBarReducer = (
 	state: CustomGradientBarReducerState,

packages/components/src/dimension-control/index.tsx

@@ -7,6 +7,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -17,7 +18,6 @@ import sizesTable, { findSizeBySlug } from './sizes';
 import type { DimensionControlProps, Size } from './types';
 import type { SelectControlSingleSelectionProps } from '../select-control/types';
 import { ContextSystemProvider } from '../context';
-import deprecated from '@wordpress/deprecated';
 import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 const CONTEXT_VALUE = {

packages/components/src/disabled/test/index.tsx

@@ -2,12 +2,12 @@
  * External dependencies
  */
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
  */
 import Disabled from '../';
-import userEvent from '@testing-library/user-event';
 
 describe( 'Disabled', () => {
 	const Form = () => (

packages/components/src/duotone-picker/color-list-picker/index.tsx

@@ -4,6 +4,7 @@
 import { useState } from '@wordpress/element';
 import { swatch } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -13,7 +14,6 @@ import ColorPalette from '../../color-palette';
 import ColorIndicator from '../../color-indicator';
 import Icon from '../../icon';
 import type { ColorListPickerProps, ColorOptionProps } from './types';
-import { useInstanceId } from '@wordpress/compose';
 
 function ColorOption( {
 	label,

packages/components/src/focal-point-picker/index.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import clsx from 'clsx';
+import type { KeyboardEventHandler } from 'react';
 
 /**
  * WordPress dependencies
@@ -33,7 +34,6 @@ import type {
 	FocalPoint as FocalPointType,
 	FocalPointPickerProps,
 } from './types';
-import type { KeyboardEventHandler } from 'react';
 
 const GRID_OVERLAY_TIMEOUT = 600;
 

packages/components/src/menu/radio-item.tsx

@@ -8,6 +8,7 @@ import * as Ariakit from '@ariakit/react';
  */
 import { forwardRef, useContext } from '@wordpress/element';
 import { Icon } from '@wordpress/icons';
+import { SVG, Circle } from '@wordpress/primitives';
 
 /**
  * Internal dependencies
@@ -16,7 +17,6 @@ import type { WordPressComponentProps } from '../context';
 import { Context } from './context';
 import type { RadioItemProps } from './types';
 import * as Styled from './styles';
-import { SVG, Circle } from '@wordpress/primitives';
 
 const radioCheck = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">

packages/components/src/mobile/color-settings/palette.screen.native.js

@@ -2,14 +2,14 @@
  * External dependencies
  */
 import { View, Text, TouchableWithoutFeedback } from 'react-native';
+import { useRoute, useNavigation } from '@react-navigation/native';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { useState, useContext } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { useRoute, useNavigation } from '@react-navigation/native';
 
 /**
  * Internal dependencies
@@ -22,7 +22,6 @@ import { colorsUtils } from './utils';
 import PanelBody from '../../panel/body';
 import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-context';
 import ColorControl from '../../color-control';
-
 import styles from './style.scss';
 
 const HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 };

packages/components/src/modal/use-modal-exit-animation.ts

@@ -3,12 +3,12 @@
  */
 import { useReducedMotion } from '@wordpress/compose';
 import { useCallback, useRef, useState } from '@wordpress/element';
+import warning from '@wordpress/warning';
 
 /**
  * Internal dependencies
  */
 import { CONFIG } from '../utils';
-import warning from '@wordpress/warning';
 
 // Animation duration (ms) extracted to JS in order to be used on a setTimeout.
 const FRAME_ANIMATION_DURATION = CONFIG.transitionDuration;