ComboboxControl: Add lint rule for 40px size prop usage (#64560)

* Fix in Author block * Fix in Avatar block * Add lint rule Co-authored-by: mirka <[email protected]> Co-authored-by: ciampo <[email protected]> Co-authored-by: tyxla <[email protected]>
WordPress · Aug 16, 2024 · a095188 · a095188 · github-actions · Aug 16, 2024
1 parent 78722b9
commit a095188
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 58 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -313,6 +313,7 @@ module.exports = {
 					...[
 						'BorderBoxControl',
 						'BorderControl',
+						'ComboboxControl',
 						'CustomSelectControl',
 						'DimensionControl',
 						'FontSizePicker',

diff --git a/packages/block-library/src/avatar/user-control.js b/packages/block-library/src/avatar/user-control.js
@@ -33,6 +33,7 @@ function UserControl( { value, onChange } ) {
 
 	return (
 		<ComboboxControl
+			__next40pxDefaultSize
 			__nextHasNoMarginBottom
 			label={ __( 'User' ) }
 			help={ __(

diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
@@ -31,6 +31,7 @@
 @import "./nextpage/editor.scss";
 @import "./page-list/editor.scss";
 @import "./paragraph/editor.scss";
+@import "./post-author/editor.scss";
 @import "./post-excerpt/editor.scss";
 @import "./pullquote/editor.scss";
 @import "./rss/editor.scss";

diff --git a/packages/block-library/src/post-author/block.json b/packages/block-library/src/post-author/block.json
@@ -66,5 +66,6 @@
 			"clientNavigation": true
 		}
 	},
+	"editorStyle": "wp-block-post-author-editor",
 	"style": "wp-block-post-author"
 }
diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js
@@ -18,6 +18,7 @@ import {
 	PanelBody,
 	SelectControl,
 	ToggleControl,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
@@ -100,74 +101,82 @@ function PostAuthorEdit( {
 		<>
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
-					{ showAuthorControl &&
-						( ( showCombobox && (
-							<ComboboxControl
-								__nextHasNoMarginBottom
-								label={ __( 'Author' ) }
-								options={ authorOptions }
-								value={ authorId }
-								onChange={ handleSelect }
-								allowReset={ false }
-							/>
-						) ) || (
+					<VStack
+						spacing={ 4 }
+						className="wp-block-post-author__inspector-settings"
+					>
+						{ showAuthorControl &&
+							( ( showCombobox && (
+								<ComboboxControl
+									__next40pxDefaultSize
+									__nextHasNoMarginBottom
+									label={ __( 'Author' ) }
+									options={ authorOptions }
+									value={ authorId }
+									onChange={ handleSelect }
+									allowReset={ false }
+								/>
+							) ) || (
+								<SelectControl
+									__next40pxDefaultSize
+									__nextHasNoMarginBottom
+									label={ __( 'Author' ) }
+									value={ authorId }
+									options={ authorOptions }
+									onChange={ handleSelect }
+								/>
+							) ) }
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Show avatar' ) }
+							checked={ showAvatar }
+							onChange={ () =>
+								setAttributes( { showAvatar: ! showAvatar } )
+							}
+						/>
+						{ showAvatar && (
 							<SelectControl
 								__next40pxDefaultSize
 								__nextHasNoMarginBottom
-								label={ __( 'Author' ) }
-								value={ authorId }
-								options={ authorOptions }
-								onChange={ handleSelect }
+								label={ __( 'Avatar size' ) }
+								value={ attributes.avatarSize }
+								options={ avatarSizes }
+								onChange={ ( size ) => {
+									setAttributes( {
+										avatarSize: Number( size ),
+									} );
+								} }
 							/>
-						) ) }
-					<ToggleControl
-						__nextHasNoMarginBottom
-						label={ __( 'Show avatar' ) }
-						checked={ showAvatar }
-						onChange={ () =>
-							setAttributes( { showAvatar: ! showAvatar } )
-						}
-					/>
-					{ showAvatar && (
-						<SelectControl
-							__next40pxDefaultSize
+						) }
+						<ToggleControl
 							__nextHasNoMarginBottom
-							label={ __( 'Avatar size' ) }
-							value={ attributes.avatarSize }
-							options={ avatarSizes }
-							onChange={ ( size ) => {
-								setAttributes( {
-									avatarSize: Number( size ),
-								} );
-							} }
+							label={ __( 'Show bio' ) }
+							checked={ showBio }
+							onChange={ () =>
+								setAttributes( { showBio: ! showBio } )
+							}
 						/>
-					) }
-					<ToggleControl
-						__nextHasNoMarginBottom
-						label={ __( 'Show bio' ) }
-						checked={ showBio }
-						onChange={ () =>
-							setAttributes( { showBio: ! showBio } )
-						}
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
-						label={ __( 'Link author name to author page' ) }
-						checked={ isLink }
-						onChange={ () => setAttributes( { isLink: ! isLink } ) }
-					/>
-					{ isLink && (
 						<ToggleControl
 							__nextHasNoMarginBottom
-							label={ __( 'Open in new tab' ) }
-							onChange={ ( value ) =>
-								setAttributes( {
-									linkTarget: value ? '_blank' : '_self',
-								} )
+							label={ __( 'Link author name to author page' ) }
+							checked={ isLink }
+							onChange={ () =>
+								setAttributes( { isLink: ! isLink } )
 							}
-							checked={ linkTarget === '_blank' }
 						/>
-					) }
+						{ isLink && (
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Open in new tab' ) }
+								onChange={ ( value ) =>
+									setAttributes( {
+										linkTarget: value ? '_blank' : '_self',
+									} )
+								}
+								checked={ linkTarget === '_blank' }
+							/>
+						) }
+					</VStack>
 				</PanelBody>
 			</InspectorControls>
 

diff --git a/packages/block-library/src/post-author/editor.scss b/packages/block-library/src/post-author/editor.scss
@@ -0,0 +1,7 @@
+.wp-block-post-author__inspector-settings {
+	// Counteract the margin added by the block inspector.
+	.components-base-control,
+	.components-base-control:last-child {
+		margin-bottom: 0;
+	}
+}