Skip to content

Commit c0ba214

Browse files
gziologziolo
authored
Components: Enforce consistent usage of Button and ToolbarGroup components (WordPress#18817)
* Components: Enforce consisten usage of Button component * Convert Toolbar components into ToolbarGroup * Fix the two issues. * Increase specificity.
1 parent 1d685f4 commit c0ba214

File tree

42 files changed

+242
-151
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+242
-151
lines changed

‎.eslintrc.js

+38-19
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,17 @@ const { version } = require( './package' );
1616
*/
1717
const majorMinorRegExp = escapeRegExp( version.replace( /\.\d+$/, '' ) ) + '(\\.\\d+)?';
1818

19+
/**
20+
* The list of patterns matching files used only for development purposes.
21+
*
22+
* @type {string[]}
23+
*/
24+
const developmentFiles = [
25+
'**/benchmark/**/*.js',
26+
'**/@(__mocks__|__tests__|test)/**/*.js',
27+
'**/@(storybook|stories)/**/*.js',
28+
];
29+
1930
module.exports = {
2031
root: true,
2132
extends: [
@@ -97,34 +108,42 @@ module.exports = {
97108
message: 'Avoid truthy checks on length property rendering, as zero length is rendered verbatim.',
98109
},
99110
],
100-
'react/forbid-elements': [ 'error', {
101-
forbid: [
102-
[ 'circle', 'Circle' ],
103-
[ 'g', 'G' ],
104-
[ 'path', 'Path' ],
105-
[ 'polygon', 'Polygon' ],
106-
[ 'rect', 'Rect' ],
107-
[ 'svg', 'SVG' ],
108-
].map( ( [ element, componentName ] ) => {
109-
return {
110-
element,
111-
message: `use cross-platform <${ componentName }> component instead.`,
112-
};
113-
} ),
114-
} ],
115111
},
116112
overrides: [
117113
{
118114
files: [ 'packages/**/*.js' ],
115+
excludedFiles: [
116+
'**/*.@(android|ios|native).js',
117+
...developmentFiles,
118+
],
119119
rules: {
120120
'import/no-extraneous-dependencies': 'error',
121121
},
122+
},
123+
{
124+
files: [ 'packages/**/*.js' ],
122125
excludedFiles: [
123-
'**/*.@(android|ios|native).js',
124-
'**/benchmark/**/*.js',
125-
'**/@(__mocks__|__tests__|test)/**/*.js',
126-
'**/@(storybook|stories)/**/*.js',
126+
'packages/block-library/src/*/save.js',
127+
...developmentFiles,
127128
],
129+
rules: {
130+
'react/forbid-elements': [ 'error', {
131+
forbid: [
132+
[ 'button', 'Button' ],
133+
[ 'circle', 'Circle' ],
134+
[ 'g', 'G' ],
135+
[ 'path', 'Path' ],
136+
[ 'polygon', 'Polygon' ],
137+
[ 'rect', 'Rect' ],
138+
[ 'svg', 'SVG' ],
139+
].map( ( [ element, componentName ] ) => {
140+
return {
141+
element,
142+
message: `use cross-platform <${ componentName } /> component instead.`,
143+
};
144+
} ),
145+
} ],
146+
},
128147
},
129148
{
130149
files: [

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

+7-2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@
33
*/
44
import classnames from 'classnames';
55

6+
/**
7+
* WordPress dependencies
8+
*/
9+
import { Button } from '@wordpress/components';
10+
611
/**
712
* Internal dependencies
813
*/
@@ -23,7 +28,7 @@ function InserterListItem( {
2328

2429
return (
2530
<li className="editor-block-types-list__list-item block-editor-block-types-list__list-item">
26-
<button
31+
<Button
2732
className={
2833
classnames(
2934
'editor-block-types-list__item block-editor-block-types-list__item',
@@ -46,7 +51,7 @@ function InserterListItem( {
4651
<span className="editor-block-types-list__item-title block-editor-block-types-list__item-title">
4752
{ title }
4853
</span>
49-
</button>
54+
</Button>
5055
</li>
5156
);
5257
}

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
margin: 0 0 12px;
66
}
77

8-
.block-editor-block-types-list__item {
8+
.components-button.block-editor-block-types-list__item {
99
display: flex;
1010
flex-direction: column;
1111
width: 100%;
@@ -54,6 +54,7 @@
5454
&:focus {
5555
position: relative;
5656
@include block-style__focus();
57+
background: transparent;
5758

5859
.block-editor-block-types-list__item-icon,
5960
.block-editor-block-types-list__item-title {

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,14 @@ import TextHighlight from './text-highlight';
1313
*/
1414
import { safeDecodeURI } from '@wordpress/url';
1515
import { __ } from '@wordpress/i18n';
16-
1716
import {
17+
Button,
1818
Icon,
1919
} from '@wordpress/components';
2020

2121
export const LinkControlSearchItem = ( { itemProps, suggestion, isSelected = false, onClick, isURL = false, searchTerm = '' } ) => {
2222
return (
23-
<button
23+
<Button
2424
{ ...itemProps }
2525
onClick={ onClick }
2626
className={ classnames( 'block-editor-link-control__search-item', {
@@ -46,7 +46,7 @@ export const LinkControlSearchItem = ( { itemProps, suggestion, isSelected = fal
4646
{ suggestion.type && (
4747
<span className="block-editor-link-control__search-item-type">{ suggestion.type }</span>
4848
) }
49-
</button>
49+
</Button>
5050
);
5151
};
5252

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const SkipToSelectedBlock = ( { selectedBlockClientId } ) => {
1818

1919
return (
2020
selectedBlockClientId &&
21-
<Button isDefault type="button" className="editor-skip-to-selected-block block-editor-skip-to-selected-block" onClick={ onClick }>
21+
<Button isDefault className="editor-skip-to-selected-block block-editor-skip-to-selected-block" onClick={ onClick }>
2222
{ __( 'Skip to the selected block' ) }
2323
</Button>
2424
);

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import scrollIntoView from 'dom-scroll-into-view';
1111
import { __, sprintf, _n } from '@wordpress/i18n';
1212
import { Component, createRef } from '@wordpress/element';
1313
import { UP, DOWN, ENTER, TAB } from '@wordpress/keycodes';
14-
import { BaseControl, Spinner, withSpokenMessages, Popover } from '@wordpress/components';
14+
import { BaseControl, Button, Spinner, withSpokenMessages, Popover } from '@wordpress/components';
1515
import { withInstanceId, withSafeTimeout, compose } from '@wordpress/compose';
1616
import { withSelect } from '@wordpress/data';
1717
import { isURL } from '@wordpress/url';
@@ -348,7 +348,7 @@ class URLInput extends Component {
348348
) }
349349
>
350350
{ suggestions.map( ( suggestion, index ) => (
351-
<button
351+
<Button
352352
{ ...buildSuggestionItemProps( suggestion, index ) }
353353
key={ suggestion.id }
354354
className={ classnames( 'editor-url-input__suggestion block-editor-url-input__suggestion', {
@@ -357,7 +357,7 @@ class URLInput extends Component {
357357
onClick={ () => this.handleOnClick( suggestion ) }
358358
>
359359
{ suggestion.title }
360-
</button>
360+
</Button>
361361
) ) }
362362
</div>
363363
</Popover>

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
PanelBody,
1010
SelectControl,
1111
ToggleControl,
12-
Toolbar,
12+
ToolbarGroup,
1313
withNotices,
1414
} from '@wordpress/components';
1515
import {
@@ -154,14 +154,14 @@ class AudioEdit extends Component {
154154
return (
155155
<>
156156
<BlockControls>
157-
<Toolbar>
157+
<ToolbarGroup>
158158
<IconButton
159159
className="components-icon-button components-toolbar__control"
160160
label={ __( 'Edit audio' ) }
161161
onClick={ switchToEditing }
162162
icon="edit"
163163
/>
164-
</Toolbar>
164+
</ToolbarGroup>
165165
</BlockControls>
166166
<InspectorControls>
167167
<PanelBody title={ __( 'Audio Settings' ) }>

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,17 @@ import {
1414
useState,
1515
} from '@wordpress/element';
1616
import {
17+
BaseControl,
18+
Button,
1719
FocalPointPicker,
1820
IconButton,
1921
PanelBody,
2022
PanelRow,
2123
RangeControl,
24+
ResizableBox,
2225
ToggleControl,
23-
Toolbar,
26+
ToolbarGroup,
2427
withNotices,
25-
ResizableBox,
26-
BaseControl,
27-
Button,
2828
} from '@wordpress/components';
2929
import { compose, withInstanceId } from '@wordpress/compose';
3030
import {
@@ -312,7 +312,7 @@ function CoverEdit( {
312312
{ hasBackground && (
313313
<>
314314
<MediaUploadCheck>
315-
<Toolbar>
315+
<ToolbarGroup>
316316
<MediaUpload
317317
onSelect={ onSelectMedia }
318318
allowedTypes={ ALLOWED_MEDIA_TYPES }
@@ -326,7 +326,7 @@ function CoverEdit( {
326326
/>
327327
) }
328328
/>
329-
</Toolbar>
329+
</ToolbarGroup>
330330
</MediaUploadCheck>
331331
</>
332332
) }

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

+8-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,12 @@
22
* WordPress dependencies
33
*/
44
import { __ } from '@wordpress/i18n';
5-
import { IconButton, Toolbar, PanelBody, ToggleControl } from '@wordpress/components';
5+
import {
6+
IconButton,
7+
PanelBody,
8+
ToggleControl,
9+
ToolbarGroup,
10+
} from '@wordpress/components';
611
import { BlockControls, InspectorControls } from '@wordpress/block-editor';
712

813
const EmbedControls = ( props ) => {
@@ -18,7 +23,7 @@ const EmbedControls = ( props ) => {
1823
return (
1924
<>
2025
<BlockControls>
21-
<Toolbar>
26+
<ToolbarGroup>
2227
{ showEditButton && (
2328
<IconButton
2429
className="components-toolbar__control"
@@ -27,7 +32,7 @@ const EmbedControls = ( props ) => {
2732
onClick={ switchBackToURLInput }
2833
/>
2934
) }
30-
</Toolbar>
35+
</ToolbarGroup>
3136
</BlockControls>
3237
{ themeSupportsResponsive && blockSupportsResponsive && (
3338
<InspectorControls>

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
Animate,
1616
ClipboardButton,
1717
IconButton,
18-
Toolbar,
18+
ToolbarGroup,
1919
withNotices,
2020
} from '@wordpress/components';
2121
import { compose } from '@wordpress/compose';
@@ -190,7 +190,7 @@ class FileEdit extends Component {
190190
/>
191191
<BlockControls>
192192
<MediaUploadCheck>
193-
<Toolbar>
193+
<ToolbarGroup>
194194
<MediaUpload
195195
onSelect={ this.onSelectFile }
196196
value={ id }
@@ -203,7 +203,7 @@ class FileEdit extends Component {
203203
/>
204204
) }
205205
/>
206-
</Toolbar>
206+
</ToolbarGroup>
207207
</MediaUploadCheck>
208208
</BlockControls>
209209
<Animate type={ isBlobURL( href ) ? 'loading' : null }>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { range } from 'lodash';
88
*/
99
import { __, sprintf } from '@wordpress/i18n';
1010
import { Component } from '@wordpress/element';
11-
import { Toolbar } from '@wordpress/components';
11+
import { ToolbarGroup } from '@wordpress/components';
1212

1313
/**
1414
* Internal dependencies
@@ -31,7 +31,7 @@ class HeadingToolbar extends Component {
3131
const { isCollapsed = true, minLevel, maxLevel, selectedLevel, onChange } = this.props;
3232

3333
return (
34-
<Toolbar
34+
<ToolbarGroup
3535
isCollapsed={ isCollapsed }
3636
icon={ <HeadingLevelIcon level={ selectedLevel } /> }
3737
controls={ range( minLevel, maxLevel ).map(

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

+12-7
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,12 @@ import {
88
PlainText,
99
transformStyles,
1010
} from '@wordpress/block-editor';
11-
import { Disabled, SandBox } from '@wordpress/components';
11+
import {
12+
Button,
13+
Disabled,
14+
SandBox,
15+
ToolbarGroup,
16+
} from '@wordpress/components';
1217
import { withSelect } from '@wordpress/data';
1318

1419
class HTMLEdit extends Component {
@@ -57,20 +62,20 @@ class HTMLEdit extends Component {
5762
return (
5863
<div className="wp-block-html">
5964
<BlockControls>
60-
<div className="components-toolbar">
61-
<button
65+
<ToolbarGroup>
66+
<Button
6267
className={ `components-tab-button ${ ! isPreview ? 'is-active' : '' }` }
6368
onClick={ this.switchToHTML }
6469
>
6570
<span>HTML</span>
66-
</button>
67-
<button
71+
</Button>
72+
<Button
6873
className={ `components-tab-button ${ isPreview ? 'is-active' : '' }` }
6974
onClick={ this.switchToPreview }
7075
>
7176
<span>{ __( 'Preview' ) }</span>
72-
</button>
73-
</div>
77+
</Button>
78+
</ToolbarGroup>
7479
</BlockControls>
7580
<Disabled.Consumer>
7681
{ ( isDisabled ) => (

0 commit comments

Comments
 (0)