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

TextControl: Fix remaining 40px size violations #64594

Merged
merged 22 commits into from
Aug 19, 2024
Merged

TextControl: Fix remaining 40px size violations #64594

Show file tree
Hide file tree
Changes from 21 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
29fd789
Fix in DateFormatPicker
mirka Aug 16, 2024
6257d8d
Fix in ImageURLInputUI
mirka Aug 17, 2024
2b0b2d6
Fix in Button block
mirka Aug 17, 2024
8324c68
Fix in Form block InputFieldBlock
mirka Aug 17, 2024
29012b0
Fix in Form block
mirka Aug 17, 2024
4f207fe
Fix in Image block content only mode
mirka Aug 17, 2024
72388c0
Fix in Navigation block
mirka Aug 17, 2024
eeb5420
Fix in Post Comment block (deprecated)
mirka Aug 17, 2024
fd4c152
Fix in Featured Image block
mirka Aug 17, 2024
8f2a453
Fix in Categories block
mirka Aug 17, 2024
c88015e
Fix in Title block
mirka Aug 17, 2024
c1af253
Fix in Social Icons block
mirka Aug 17, 2024
27ebd82
Fix in Template Part block
mirka Aug 17, 2024
c84c59f
Fix in Video block track editor
mirka Aug 17, 2024
16d6568
Fix in Dataviews Add new view modal
mirka Aug 17, 2024
545f025
Fix in Dataviews Rename view modal
mirka Aug 17, 2024
53e6ec3
Fix in PostPublishPanel
mirka Aug 17, 2024
7b208b5
Fix in PostSlug component (unused in app)
mirka Aug 17, 2024
1dcb2c5
Fix in HierarchicalTermSelector
mirka Aug 17, 2024
e42dd71
Fix in ReusableBlockConvertButton (unused in app)
mirka Aug 17, 2024
6cfbf62
Move to stricter lint rule
mirka Aug 17, 2024
bc7ee44
Update snapshot
mirka Aug 17, 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
17 changes: 8 additions & 9 deletions .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -319,6 +319,7 @@ module.exports = {
'FontSizePicker',
'NumberControl',
'RangeControl',
'TextControl',
Copy link
Member Author

Choose a reason for hiding this comment

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

Moved to the stricter rule that doesn't allow __next40pxDefaultSize={ false }, now that we're done migrating.

Copy link
Contributor

Choose a reason for hiding this comment

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

Neat!

'ToggleGroupControl',
].map( ( componentName ) => ( {
// Falsy `__next40pxDefaultSize` without a non-default `size` prop.
Expand All @@ -328,15 +329,13 @@ 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.
...[ '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.',
} )
),
...[ 'SelectControl' ].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
3 changes: 1 addition & 2 deletions packages/block-editor/src/components/date-format-picker/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,8 +150,7 @@ function NonDefaultControls( { format, onChange } ) {
/>
{ isCustom && (
<TextControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__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.

Before After
DateFormatPicker, before DateFormatPicker, after

__nextHasNoMarginBottom
label={ __( 'Custom format' ) }
hideLabelFromVision
Expand Down
6 changes: 2 additions & 4 deletions packages/block-editor/src/components/url-popover/image-url-input-ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,16 +227,14 @@ const ImageURLInputUI = ( {
checked={ linkTarget === '_blank' }
/>
<TextControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__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.

Image block ▸ "Link" in block toolbar ▸ Down caret ("Link settings") dropdown in the popover.

Before After
Image block URL popover, before Image block URL popover, after

__nextHasNoMarginBottom
label={ __( 'Link rel' ) }
value={ rel ?? '' }
onChange={ onSetLinkRel }
/>
<TextControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
__nextHasNoMarginBottom
label={ __( 'Link CSS class' ) }
value={ linkClass || '' }
Expand Down
3 changes: 1 addition & 2 deletions packages/block-library/src/button/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -380,8 +380,7 @@ function ButtonEdit( props ) {
<InspectorControls group="advanced">
{ isLinkTag && (
<TextControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__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.

Before After
Button, before Button, after

__nextHasNoMarginBottom
label={ __( 'Link rel' ) }
value={ rel || '' }
Expand Down
3 changes: 1 addition & 2 deletions packages/block-library/src/form-input/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
) }
<InspectorControls group="advanced">
<TextControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__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.

Enable "Form and input blocks" in Gutenberg Experimental settings. Insert Form block. Click on one of the input blocks.

Before After
FormInput, before FormInput, after

__nextHasNoMarginBottom
autoComplete="off"
label={ __( 'Name' ) }
Expand Down
6 changes: 2 additions & 4 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,8 +130,7 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
{ submissionMethod !== 'email' && (
<InspectorControls group="advanced">
<SelectControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__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.

Enable "Form and input blocks" in Gutenberg Experimental settings. Insert Form block. Choose a custom submission method.

Before After
Form block inspector, before Form block inspector, after

__nextHasNoMarginBottom
label={ __( 'Method' ) }
options={ [
Expand All @@ -147,8 +146,7 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
) }
/>
<TextControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
__nextHasNoMarginBottom
autoComplete="off"
label={ __( 'Form action' ) }
Expand Down
3 changes: 1 addition & 2 deletions packages/block-library/src/image/image.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -690,8 +690,7 @@ export default function Image( {
) }
renderContent={ () => (
<TextControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__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.

Kind of hard to get to this state. See testing instructions for #58998 if you're interested 😅

Before After
Image block, content only mode, before Image block, content only mode, after

className="wp-block-image__toolbar_content_textarea"
__nextHasNoMarginBottom
label={ __( 'Title attribute' ) }
Expand Down
3 changes: 1 addition & 2 deletions packages/block-library/src/navigation/edit/navigation-menu-name-control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,7 @@ export default function NavigationMenuNameControl() {

return (
<TextControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__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.

Before After
Navigation block inspector, before Navigation block inspector, after

__nextHasNoMarginBottom
label={ __( 'Menu name' ) }
value={ title }
Expand Down
4 changes: 2 additions & 2 deletions packages/block-library/src/post-comment/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,7 @@ export default function Edit( { attributes: { commentId }, setAttributes } ) {
) }
>
<TextControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__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 is a deprecated block so you need to modify the block.json to make it appear. (Delete the __experimental field, and change inserter to true.)

Before After
Post Comment block placeholder, before Post Comment block placeholder, after

__nextHasNoMarginBottom
value={ commentId }
onChange={ ( val ) =>
Expand All @@ -44,6 +43,7 @@ export default function Edit( { attributes: { commentId }, setAttributes } ) {
/>

<Button
__next40pxDefaultSize
variant="primary"
onClick={ () => {
setAttributes( { commentId: commentIdInput } );
Expand Down
3 changes: 1 addition & 2 deletions packages/block-library/src/post-featured-image/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,8 +230,7 @@ export default function PostFeaturedImageEdit( {
checked={ linkTarget === '_blank' }
/>
<TextControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__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.

Before After
Featured Image block inspector, before Featured Image block inspector, after

__nextHasNoMarginBottom
label={ __( 'Link rel' ) }
value={ rel }
Expand Down
3 changes: 1 addition & 2 deletions packages/block-library/src/post-terms/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,7 @@ export default function PostTermsEdit( {
</BlockControls>
<InspectorControls group="advanced">
<TextControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__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.

Can be seen in the Categories block.

Before After
Category block inspector, before Category block inspector, after

__nextHasNoMarginBottom
autoComplete="off"
label={ __( 'Separator' ) }
Expand Down
3 changes: 1 addition & 2 deletions packages/block-library/src/post-title/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,8 +162,7 @@ export default function PostTitleEdit( {
checked={ linkTarget === '_blank' }
/>
<TextControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__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.

Before After
Post Title block inspector, before Post Title block inspector, after

__nextHasNoMarginBottom
label={ __( 'Link rel' ) }
value={ rel }
Expand Down
6 changes: 2 additions & 4 deletions packages/block-library/src/social-link/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,8 +139,7 @@ const SocialLinkEdit = ( {
<PanelBody title={ __( 'Settings' ) }>
<PanelRow>
<TextControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__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.

Insert "Social Icons" block and add a social.

Before After
Social Icon block inspector, before Social Icon block inspector, after

__nextHasNoMarginBottom
label={ __( 'Text' ) }
help={ __(
Expand All @@ -157,8 +156,7 @@ const SocialLinkEdit = ( {
</InspectorControls>
<InspectorControls group="advanced">
<TextControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
__nextHasNoMarginBottom
label={ __( 'Link rel' ) }
value={ rel || '' }
Expand Down
6 changes: 2 additions & 4 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 @@ -73,8 +73,7 @@ export function TemplatePartAdvancedControls( {
{ isEntityAvailable && (
<>
<TextControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__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.

Can be seen when you select a template part block (like "Header") in the site editor.

Before After
Template Part block inspector, before Template Part block inspector, after

__nextHasNoMarginBottom
label={ __( 'Title' ) }
value={ title }
Expand All @@ -85,8 +84,7 @@ export function TemplatePartAdvancedControls( {
/>

<SelectControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
__nextHasNoMarginBottom
label={ __( 'Area' ) }
labelPosition="top"
Expand Down
9 changes: 3 additions & 6 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 @@ -99,8 +99,7 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
</span>
<Grid columns={ 2 } gap={ 4 }>
<TextControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__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.

Can be seen when you add a text track to a Video block. Here is a test file to upload, if you're interested (save with a .vtt extension):

WEBVTT

00:00:00.500 --> 00:00:02.000
The Web is always changing

00:00:02.500 --> 00:00:04.300
and the way we access it is changing
Before After
Video tracks editor, before Video tracks editor, after

__nextHasNoMarginBottom
/* eslint-disable jsx-a11y/no-autofocus */
autoFocus
Expand All @@ -116,8 +115,7 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
help={ __( 'Title of track' ) }
/>
<TextControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
__nextHasNoMarginBottom
onChange={ ( newSrcLang ) =>
onChange( {
Expand All @@ -132,8 +130,7 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
</Grid>
<VStack spacing="8">
<SelectControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
__nextHasNoMarginBottom
className="block-library-video-tracks-editor__single-track-editor-kind-select"
options={ KIND_OPTIONS }
Expand Down
3 changes: 1 addition & 2 deletions packages/edit-site/src/components/sidebar-dataviews/add-new-view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,8 +78,7 @@ function AddNewItemModalContent( { type, setIsAdding } ) {
>
<VStack spacing="5">
<TextControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__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.

Enable "Custom dataviews" in Gutenberg experiments. Go to Pages in the site editor and add a custom view.

Before After
Dataviews Custom view modal, before Dataviews Custom view modal, after

__nextHasNoMarginBottom
label={ __( 'Name' ) }
value={ title }
Expand Down
3 changes: 1 addition & 2 deletions packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,7 @@ function RenameItemModalContent( { dataviewId, currentTitle, setIsRenaming } ) {
>
<VStack spacing="5">
<TextControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__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.

Rename the custom view you just made.

Before After
Rename custom dataview, before Rename custom dataview, after

__nextHasNoMarginBottom
label={ __( 'Name' ) }
value={ title }
Expand Down
12 changes: 8 additions & 4 deletions packages/editor/src/components/post-publish-panel/postpublish.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const getFuturePostUrl = ( post ) => {
function CopyButton( { text, onCopy, children } ) {
const ref = useCopyToClipboard( text, onCopy );
return (
<Button variant="secondary" ref={ ref }>
<Button __next40pxDefaultSize variant="secondary" ref={ ref }>
Copy link
Member Author

Choose a reason for hiding this comment

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

The thing that appears after you just publish a post.

Before After
PostPublishPanel, before PostPublishPanel, after

{ children }
</Button>
);
Expand Down Expand Up @@ -122,8 +122,7 @@ class PostPublishPanelPostpublish extends Component {
</p>
<div className="post-publish-panel__postpublish-post-address-container">
<TextControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
__nextHasNoMarginBottom
className="post-publish-panel__postpublish-post-address"
readOnly
Expand All @@ -147,12 +146,17 @@ class PostPublishPanelPostpublish extends Component {

<div className="post-publish-panel__postpublish-buttons">
{ ! isScheduled && (
<Button variant="primary" href={ link }>
<Button
variant="primary"
href={ link }
__next40pxDefaultSize
>
{ viewPostLabel }
</Button>
) }
<Button
variant={ isScheduled ? 'primary' : 'secondary' }
__next40pxDefaultSize
href={ addLink }
>
{ addNewPostLabel }
Expand Down
3 changes: 1 addition & 2 deletions packages/editor/src/components/post-slug/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,7 @@ function PostSlugControl() {

return (
<TextControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__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 doesn't appear anywhere in the app anymore, but code-wise it looks safe to change.

__nextHasNoMarginBottom
label={ __( 'Slug' ) }
autoComplete="off"
Expand Down
3 changes: 1 addition & 2 deletions packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -407,8 +407,7 @@ export function HierarchicalTermSelector( { slug } ) {
<Flex direction="column" gap="4">
{ showFilter && (
<TextControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__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.

The category filter that appears in the post sidebar when there are many categories.

Before After
Search categories, before Search categories, after

May want to switch to a SearchControl (#64593).

__nextHasNoMarginBottom
label={ filterLabel }
value={ filterValue }
Expand Down
3 changes: 1 addition & 2 deletions ...eusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,8 +169,7 @@ export default function ReusableBlockConvertButton( {
>
<VStack spacing="5">
<TextControl
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__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 appear in the app anymore, but should be safe (same as #64213 (comment)).

__nextHasNoMarginBottom
label={ __( 'Name' ) }
value={ title }
Expand Down
Loading