Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SelectControl: Add lint rule for 40px size prop usage #64486

Merged
merged 7 commits into from
Aug 15, 2024
Merged

SelectControl: Add lint rule for 40px size prop usage #64486

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
14b4ff5
SelectControl: Add lint rule for 40px size prop usage
mirka Aug 13, 2024
75a7309
Add lint rule
mirka Aug 13, 2024
d3e8ce4
Fix in Author block
mirka Aug 14, 2024
ed4a396
Fix in File block
mirka Aug 14, 2024
7d23ed2
Fix in Audio block
mirka Aug 14, 2024
777aeba
Fix in Archives block
mirka Aug 14, 2024
892c9c1
Fix formatting
mirka Aug 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 9 additions & 7 deletions .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -323,13 +323,15 @@ module.exports = {
' should have the `__next40pxDefaultSize` prop to opt-in to the new default size.',
} ) ),
// Temporary rules until all existing components have the `__next40pxDefaultSize` prop.
...[ 'TextControl' ].map( ( componentName ) => ( {
// Not strict. Allows pre-existing __next40pxDefaultSize={ false } usage until they are all manually updated.
selector: `JSXOpeningElement[name.name="${ componentName }"]:not(:has(JSXAttribute[name.name="__next40pxDefaultSize"])):not(:has(JSXAttribute[name.name="size"]))`,
message:
componentName +
' should have the `__next40pxDefaultSize` prop to opt-in to the new default size.',
} ) ),
...[ 'SelectControl', 'TextControl' ].map(
( componentName ) => ( {
// Not strict. Allows pre-existing __next40pxDefaultSize={ false } usage until they are all manually updated.
selector: `JSXOpeningElement[name.name="${ componentName }"]:not(:has(JSXAttribute[name.name="__next40pxDefaultSize"])):not(:has(JSXAttribute[name.name="size"]))`,
message:
componentName +
' should have the `__next40pxDefaultSize` prop to opt-in to the new default size.',
} )
),
],
},
},
Expand Down
13 changes: 11 additions & 2 deletions packages/block-editor/src/components/font-family/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,9 +71,18 @@ The current font family value.

The rest of the props are passed down to the underlying `<SelectControl />` instance.

#### `__next40pxDefaultSize`
Copy link
Member Author

@mirka mirka Aug 13, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By the way this prop is not yet documented in any of the @wordpress/components READMEs at the moment, just in Storybook. I'll do a PR soon to add them all.


- Type: `boolean`
- Required: No
- Default: `false`

Start opting into the larger default height that will become the default size in a future version.

#### `__nextHasNoMarginBottom`

- **Type:** `boolean`
- **Default:** `false`
- Type: `boolean`
- Required: No
- Default: `false`

Start opting into the new margin-free styles that will become the default in a future version.
3 changes: 3 additions & 0 deletions packages/block-editor/src/components/font-family/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import { __ } from '@wordpress/i18n';
import { useSettings } from '../use-settings';

export default function FontFamilyControl( {
/** Start opting into the larger default height that will become the default size in a future version. */
__next40pxDefaultSize = false,
/** Start opting into the new margin-free styles that will become the default in a future version. */
__nextHasNoMarginBottom = false,
value = '',
Expand Down Expand Up @@ -50,6 +52,7 @@ export default function FontFamilyControl( {

return (
<SelectControl
__next40pxDefaultSize={ __next40pxDefaultSize }
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was already passed through via rest props, but making it explicit here.

__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
label={ __( 'Font' ) }
options={ options }
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/responsive-block-control/test/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ const renderTestDefaultControlComponent = ( labelComponent, device ) => {
return (
<>
<SelectControl
__next40pxDefaultSize
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Doesn't matter because this is a test.

label={ labelComponent }
options={ sizeOptions }
__nextHasNoMarginBottom
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/archives/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,8 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
}
/>
<SelectControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__nextHasNoMarginBottom
label={ __( 'Group by:' ) }
options={ [
Expand Down
10 changes: 6 additions & 4 deletions packages/block-library/src/audio/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,8 @@ function AudioEdit( {
checked={ loop }
/>
<SelectControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__nextHasNoMarginBottom
label={ _x( 'Preload', 'noun; Audio block parameter' ) }
value={ preload || '' }
Expand All @@ -197,10 +199,10 @@ function AudioEdit( {
</InspectorControls>
<figure { ...blockProps }>
{ /*
Disable the audio tag if the block is not selected
so the user clicking on it won't play the
file or change the position slider when the controls are enabled.
*/ }
Disable the audio tag if the block is not selected
so the user clicking on it won't play the
file or change the position slider when the controls are enabled.
*/ }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this mix of spaces and tabs in the file expected?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Weird, I reformatted it and it changed the spaces back to tabs, but it still doesn't match the original. Not sure why it isn't deterministic 🤷 892c9c1

<Disabled isDisabled={ ! isSingleSelected }>
<audio controls="controls" src={ src ?? temporaryURL } />
</Disabled>
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/file/inspector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,8 @@ export default function FileBlockInspector( {
) }
<PanelBody title={ __( 'Settings' ) }>
<SelectControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__nextHasNoMarginBottom
label={ __( 'Link to' ) }
value={ textLinkHref }
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/form/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,8 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
{ submissionMethod !== 'email' && (
<InspectorControls group="advanced">
<SelectControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(excuses if this has already been asked) Do we have a place where we track all the occurrences that need updating and are exception to the lint rule?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm assuming you're asking about discoverability. A few ways:

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense, thank you!

__nextHasNoMarginBottom
label={ __( 'Method' ) }
options={ [
Expand Down
4 changes: 4 additions & 0 deletions packages/block-library/src/post-author/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,8 @@ function PostAuthorEdit( {
/>
) ) || (
<SelectControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__nextHasNoMarginBottom
label={ __( 'Author' ) }
value={ authorId }
Expand All @@ -129,6 +131,8 @@ function PostAuthorEdit( {
/>
{ showAvatar && (
<SelectControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__nextHasNoMarginBottom
label={ __( 'Avatar size' ) }
value={ attributes.avatarSize }
Expand Down
4 changes: 4 additions & 0 deletions packages/block-library/src/post-featured-image/dimension-controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,8 @@ const DimensionControls = ( {
panelId={ clientId }
>
<SelectControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__nextHasNoMarginBottom
label={ __( 'Aspect ratio' ) }
value={ aspectRatio }
Expand Down Expand Up @@ -232,6 +234,8 @@ const DimensionControls = ( {
panelId={ clientId }
>
<SelectControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__nextHasNoMarginBottom
label={ __( 'Resolution' ) }
value={ sizeSlug || DEFAULT_SIZE }
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/template-part/edit/advanced-controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,8 @@ export function TemplatePartAdvancedControls( {
/>

<SelectControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__nextHasNoMarginBottom
label={ __( 'Area' ) }
labelPosition="top"
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/video/tracks-editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,8 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
</Grid>
<VStack spacing="8">
<SelectControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__nextHasNoMarginBottom
className="block-library-video-tracks-editor__single-track-editor-kind-select"
options={ KIND_OPTIONS }
Expand Down
2 changes: 2 additions & 0 deletions packages/widgets/src/blocks/legacy-widget/edit/widget-type-selector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ export default function WidgetTypeSelector( { selectedId, onSelect } ) {

return (
<SelectControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__nextHasNoMarginBottom
label={ __( 'Select a legacy widget to display:' ) }
value={ selectedId ?? '' }
Expand Down
Loading