Components: Enforce consistent usage of Button and ToolbarGroup components

.eslintrc.js

@@ -16,6 +16,17 @@ const { version } = require( './package' );
  */
 const majorMinorRegExp = escapeRegExp( version.replace( /\.\d+$/, '' ) ) + '(\\.\\d+)?';
 
+/**
+ * The list of patterns matching files used only for development purposes.
+ *
+ * @type {string[]}
+ */
+const developmentFiles = [
+	'**/benchmark/**/*.js',
+	'**/@(__mocks__|__tests__|test)/**/*.js',
+	'**/@(storybook|stories)/**/*.js',
+];
+
 module.exports = {
 	root: true,
 	extends: [
@@ -97,34 +108,42 @@ module.exports = {
 				message: 'Avoid truthy checks on length property rendering, as zero length is rendered verbatim.',
 			},
 		],
-		'react/forbid-elements': [ 'error', {
-			forbid: [
-				[ 'circle', 'Circle' ],
-				[ 'g', 'G' ],
-				[ 'path', 'Path' ],
-				[ 'polygon', 'Polygon' ],
-				[ 'rect', 'Rect' ],
-				[ 'svg', 'SVG' ],
-			].map( ( [ element, componentName ] ) => {
-				return {
-					element,
-					message: `use cross-platform <${ componentName }> component instead.`,
-				};
-			} ),
-		} ],
 	},
 	overrides: [
 		{
 			files: [ 'packages/**/*.js' ],
+			excludedFiles: [
+				'**/*.@(android|ios|native).js',
+				...developmentFiles,
+			],
 			rules: {
 				'import/no-extraneous-dependencies': 'error',
 			},
+		},
+		{
+			files: [ 'packages/**/*.js' ],
 			excludedFiles: [
-				'**/*.@(android|ios|native).js',
-				'**/benchmark/**/*.js',
-				'**/@(__mocks__|__tests__|test)/**/*.js',
-				'**/@(storybook|stories)/**/*.js',
+				'packages/block-library/src/*/save.js',
+				...developmentFiles,
 			],
+			rules: {
+				'react/forbid-elements': [ 'error', {
+					forbid: [
+						[ 'button', 'Button' ],
+						[ 'circle', 'Circle' ],
+						[ 'g', 'G' ],
+						[ 'path', 'Path' ],
+						[ 'polygon', 'Polygon' ],
+						[ 'rect', 'Rect' ],
+						[ 'svg', 'SVG' ],
+					].map( ( [ element, componentName ] ) => {
+						return {
+							element,
+							message: `use cross-platform <${ componentName } /> component instead.`,
+						};
+					} ),
+				} ],
+			},
 		},
 		{
 			files: [

packages/block-editor/src/components/inserter-list-item/index.js

@@ -3,6 +3,11 @@
  */
 import classnames from 'classnames';
 
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
@@ -23,7 +28,7 @@ function InserterListItem( {
 
 	return (
 		<li className="editor-block-types-list__list-item block-editor-block-types-list__list-item">
-			<button
+			<Button
 				className={
 					classnames(
 						'editor-block-types-list__item block-editor-block-types-list__item',
@@ -46,7 +51,7 @@ function InserterListItem( {
 				<span className="editor-block-types-list__item-title block-editor-block-types-list__item-title">
 					{ title }
 				</span>
-			</button>
+			</Button>
 		</li>
 	);
 }

packages/block-editor/src/components/inserter-list-item/style.scss

@@ -5,7 +5,7 @@
 	margin: 0 0 12px;
 }
 
-.block-editor-block-types-list__item {
+.components-button.block-editor-block-types-list__item {
 	display: flex;
 	flex-direction: column;
 	width: 100%;
@@ -54,6 +54,7 @@
 		&:focus {
 			position: relative;
 			@include block-style__focus();
+			background: transparent;
 
 			.block-editor-block-types-list__item-icon,
 			.block-editor-block-types-list__item-title {

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

@@ -13,14 +13,14 @@ import TextHighlight from './text-highlight';
  */
 import { safeDecodeURI } from '@wordpress/url';
 import { __ } from '@wordpress/i18n';
-
 import {
+	Button,
 	Icon,
 } from '@wordpress/components';
 
 export const LinkControlSearchItem = ( { itemProps, suggestion, isSelected = false, onClick, isURL = false, searchTerm = '' } ) => {
 	return (
-		<button
+		<Button
 			{ ...itemProps }
 			onClick={ onClick }
 			className={ classnames( 'block-editor-link-control__search-item', {
@@ -46,7 +46,7 @@ export const LinkControlSearchItem = ( { itemProps, suggestion, isSelected = fal
 			{ suggestion.type && (
 				<span className="block-editor-link-control__search-item-type">{ suggestion.type }</span>
 			) }
-		</button>
+		</Button>
 	);
 };
 

packages/block-editor/src/components/skip-to-selected-block/index.js

@@ -18,7 +18,7 @@ const SkipToSelectedBlock = ( { selectedBlockClientId } ) => {
 
 	return (
 		selectedBlockClientId &&
-		<Button isDefault type="button" className="editor-skip-to-selected-block block-editor-skip-to-selected-block" onClick={ onClick }>
+		<Button isDefault className="editor-skip-to-selected-block block-editor-skip-to-selected-block" onClick={ onClick }>
 			{ __( 'Skip to the selected block' ) }
 		</Button>
 	);

packages/block-editor/src/components/url-input/index.js

@@ -11,7 +11,7 @@ import scrollIntoView from 'dom-scroll-into-view';
 import { __, sprintf, _n } from '@wordpress/i18n';
 import { Component, createRef } from '@wordpress/element';
 import { UP, DOWN, ENTER, TAB } from '@wordpress/keycodes';
-import { BaseControl, Spinner, withSpokenMessages, Popover } from '@wordpress/components';
+import { BaseControl, Button, Spinner, withSpokenMessages, Popover } from '@wordpress/components';
 import { withInstanceId, withSafeTimeout, compose } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
 import { isURL } from '@wordpress/url';
@@ -348,7 +348,7 @@ class URLInput extends Component {
 							) }
 						>
 							{ suggestions.map( ( suggestion, index ) => (
-								<button
+								<Button
 									{ ...buildSuggestionItemProps( suggestion, index ) }
 									key={ suggestion.id }
 									className={ classnames( 'editor-url-input__suggestion block-editor-url-input__suggestion', {
@@ -357,7 +357,7 @@ class URLInput extends Component {
 									onClick={ () => this.handleOnClick( suggestion ) }
 								>
 									{ suggestion.title }
-								</button>
+								</Button>
 							) ) }
 						</div>
 					</Popover>

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

@@ -9,7 +9,7 @@ import {
 	PanelBody,
 	SelectControl,
 	ToggleControl,
-	Toolbar,
+	ToolbarGroup,
 	withNotices,
 } from '@wordpress/components';
 import {
@@ -154,14 +154,14 @@ class AudioEdit extends Component {
 		return (
 			<>
 				<BlockControls>
-					<Toolbar>
+					<ToolbarGroup>
 						<IconButton
 							className="components-icon-button components-toolbar__control"
 							label={ __( 'Edit audio' ) }
 							onClick={ switchToEditing }
 							icon="edit"
 						/>
-					</Toolbar>
+					</ToolbarGroup>
 				</BlockControls>
 				<InspectorControls>
 					<PanelBody title={ __( 'Audio Settings' ) }>

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

@@ -14,17 +14,17 @@ import {
 	useState,
 } from '@wordpress/element';
 import {
+	BaseControl,
+	Button,
 	FocalPointPicker,
 	IconButton,
 	PanelBody,
 	PanelRow,
 	RangeControl,
+	ResizableBox,
 	ToggleControl,
-	Toolbar,
+	ToolbarGroup,
 	withNotices,
-	ResizableBox,
-	BaseControl,
-	Button,
 } from '@wordpress/components';
 import { compose, withInstanceId } from '@wordpress/compose';
 import {
@@ -312,7 +312,7 @@ function CoverEdit( {
 				{ hasBackground && (
 					<>
 						<MediaUploadCheck>
-							<Toolbar>
+							<ToolbarGroup>
 								<MediaUpload
 									onSelect={ onSelectMedia }
 									allowedTypes={ ALLOWED_MEDIA_TYPES }
@@ -326,7 +326,7 @@ function CoverEdit( {
 										/>
 									) }
 								/>
-							</Toolbar>
+							</ToolbarGroup>
 						</MediaUploadCheck>
 					</>
 				) }

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

@@ -2,7 +2,12 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { IconButton, Toolbar, PanelBody, ToggleControl } from '@wordpress/components';
+import {
+	IconButton,
+	PanelBody,
+	ToggleControl,
+	ToolbarGroup,
+} from '@wordpress/components';
 import { BlockControls, InspectorControls } from '@wordpress/block-editor';
 
 const EmbedControls = ( props ) => {
@@ -18,7 +23,7 @@ const EmbedControls = ( props ) => {
 	return (
 		<>
 			<BlockControls>
-				<Toolbar>
+				<ToolbarGroup>
 					{ showEditButton && (
 						<IconButton
 							className="components-toolbar__control"
@@ -27,7 +32,7 @@ const EmbedControls = ( props ) => {
 							onClick={ switchBackToURLInput }
 						/>
 					) }
-				</Toolbar>
+				</ToolbarGroup>
 			</BlockControls>
 			{ themeSupportsResponsive && blockSupportsResponsive && (
 				<InspectorControls>

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

@@ -15,7 +15,7 @@ import {
 	Animate,
 	ClipboardButton,
 	IconButton,
-	Toolbar,
+	ToolbarGroup,
 	withNotices,
 } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
@@ -190,7 +190,7 @@ class FileEdit extends Component {
 				/>
 				<BlockControls>
 					<MediaUploadCheck>
-						<Toolbar>
+						<ToolbarGroup>
 							<MediaUpload
 								onSelect={ this.onSelectFile }
 								value={ id }
@@ -203,7 +203,7 @@ class FileEdit extends Component {
 									/>
 								) }
 							/>
-						</Toolbar>
+						</ToolbarGroup>
 					</MediaUploadCheck>
 				</BlockControls>
 				<Animate type={ isBlobURL( href ) ? 'loading' : null }>

packages/block-library/src/heading/heading-toolbar.js

@@ -8,7 +8,7 @@ import { range } from 'lodash';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { Toolbar } from '@wordpress/components';
+import { ToolbarGroup } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -31,7 +31,7 @@ class HeadingToolbar extends Component {
 		const { isCollapsed = true, minLevel, maxLevel, selectedLevel, onChange } = this.props;
 
 		return (
-			<Toolbar
+			<ToolbarGroup
 				isCollapsed={ isCollapsed }
 				icon={ <HeadingLevelIcon level={ selectedLevel } /> }
 				controls={ range( minLevel, maxLevel ).map(

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

@@ -8,7 +8,12 @@ import {
 	PlainText,
 	transformStyles,
 } from '@wordpress/block-editor';
-import { Disabled, SandBox } from '@wordpress/components';
+import {
+	Button,
+	Disabled,
+	SandBox,
+	ToolbarGroup,
+} from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 
 class HTMLEdit extends Component {
@@ -57,20 +62,20 @@ class HTMLEdit extends Component {
 		return (
 			<div className="wp-block-html">
 				<BlockControls>
-					<div className="components-toolbar">
-						<button
+					<ToolbarGroup>
+						<Button
 							className={ `components-tab-button ${ ! isPreview ? 'is-active' : '' }` }
 							onClick={ this.switchToHTML }
 						>
 							<span>HTML</span>
-						</button>
-						<button
+						</Button>
+						<Button
 							className={ `components-tab-button ${ isPreview ? 'is-active' : '' }` }
 							onClick={ this.switchToPreview }
 						>
 							<span>{ __( 'Preview' ) }</span>
-						</button>
-					</div>
+						</Button>
+					</ToolbarGroup>
 				</BlockControls>
 				<Disabled.Consumer>
 					{ ( isDisabled ) => (