Add eslint rule for curly brace presence in JSX (WordPress#62026)

* Add rule. * Run autofixes. * Disable react/no-unescaped-entities * Use useInstanceId * Disable entities rule inline. Co-authored-by: DaniGuardiola <[email protected]> Co-authored-by: tyxla <[email protected]> Co-authored-by: Mamaduka <[email protected]>
patil-vipul · Jun 17, 2024 · 6f42fab · 6f42fab
1 parent 612af93
commit 6f42fab
Show file tree

Hide file tree

Showing 112 changed files with 293 additions and 305 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -104,6 +104,10 @@ module.exports = {
 	rules: {
 		'jest/expect-expect': 'off',
 		'react/jsx-boolean-value': 'error',
+		'react/jsx-curly-brace-presence': [
+			'error',
+			{ props: 'never', children: 'never' },
+		],
 		'@wordpress/dependency-group': 'error',
 		'@wordpress/wp-global-usage': 'error',
 		'@wordpress/react-no-unsafe-timeout': 'error',

diff --git a/packages/block-editor/src/components/alignment-control/test/index.js b/packages/block-editor/src/components/alignment-control/test/index.js
@@ -133,7 +133,7 @@ describe( 'AlignmentUI', () => {
 		const { container } = render(
 			<AlignmentUI
 				isToolbar
-				value={ 'custom-right' }
+				value="custom-right"
 				onChange={ onChangeSpy }
 				isCollapsed={ false }
 				alignmentControls={ [

diff --git a/packages/block-editor/src/components/audio-player/index.native.js b/packages/block-editor/src/components/audio-player/index.native.js
@@ -183,7 +183,7 @@ function Player( {
 				{ ! isDisabled && (
 					<TouchableWithoutFeedback
 						accessibilityLabel={ __( 'Audio Player' ) }
-						accessibilityRole={ 'button' }
+						accessibilityRole="button"
 						accessibilityHint={ __(
 							'Double tap to listen the audio file'
 						) }
@@ -204,7 +204,7 @@ function Player( {
 							this.player = ref;
 						} }
 						controls={ false }
-						ignoreSilentSwitch={ 'ignore' }
+						ignoreSilentSwitch="ignore"
 						onFullscreenPlayerWillPresent={ () => {
 							setPaused( false );
 						} }

diff --git a/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js b/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js
@@ -9,7 +9,7 @@ export default function BlockBindingsToolbarIndicator() {
 	return (
 		<ToolbarGroup>
 			<ToolbarItem
-				as={ 'div' }
+				as="div"
 				aria-label={ _x( 'Connected', 'block toolbar button label' ) }
 				className="block-editor-block-bindings-toolbar-indicator"
 			>

diff --git a/packages/block-editor/src/components/block-list/block-invalid-warning.native.js b/packages/block-editor/src/components/block-list/block-invalid-warning.native.js
@@ -54,7 +54,7 @@ export default function BlockInvalidWarning( { clientId } ) {
 		<TouchableWithoutFeedback
 			onPress={ attemptBlockRecovery }
 			accessible
-			accessibilityRole={ 'button' }
+			accessibilityRole="button"
 		>
 			<Warning
 				title={ blockTitle }

diff --git a/packages/block-editor/src/components/border-radius-control/all-input-control.js b/packages/block-editor/src/components/border-radius-control/all-input-control.js
@@ -61,7 +61,7 @@ export default function AllInputControl( {
 			onChange={ handleOnChange }
 			onUnitChange={ handleOnUnitChange }
 			placeholder={ allPlaceholder }
-			size={ '__unstable-large' }
+			size="__unstable-large"
 		/>
 	);
 }
diff --git a/packages/block-editor/src/components/border-radius-control/input-controls.js b/packages/block-editor/src/components/border-radius-control/input-controls.js
@@ -80,7 +80,7 @@ export default function BoxInputControls( {
 								onUnitChange={ createHandleOnUnitChange(
 									corner
 								) }
-								size={ '__unstable-large' }
+								size="__unstable-large"
 							/>
 						</div>
 					</Tooltip>

diff --git a/packages/block-editor/src/components/child-layout-control/index.js b/packages/block-editor/src/components/child-layout-control/index.js
@@ -111,7 +111,7 @@ export default function ChildLayoutControl( {
 				>
 					<ToggleGroupControl
 						__nextHasNoMarginBottom
-						size={ '__unstable-large' }
+						size="__unstable-large"
 						label={ childLayoutOrientation( parentLayout ) }
 						value={ selfStretch || 'fit' }
 						help={ helpText( selfStretch, parentLayout ) }
@@ -126,24 +126,24 @@ export default function ChildLayoutControl( {
 						isBlock
 					>
 						<ToggleGroupControlOption
-							key={ 'fit' }
-							value={ 'fit' }
+							key="fit"
+							value="fit"
 							label={ __( 'Fit' ) }
 						/>
 						<ToggleGroupControlOption
-							key={ 'fill' }
-							value={ 'fill' }
+							key="fill"
+							value="fill"
 							label={ __( 'Fill' ) }
 						/>
 						<ToggleGroupControlOption
-							key={ 'fixed' }
-							value={ 'fixed' }
+							key="fixed"
+							value="fixed"
 							label={ __( 'Fixed' ) }
 						/>
 					</ToggleGroupControl>
 					{ selfStretch === 'fixed' && (
 						<UnitControl
-							size={ '__unstable-large' }
+							size="__unstable-large"
 							onChange={ ( value ) => {
 								onChange( {
 									selfStretch,
@@ -166,7 +166,7 @@ export default function ChildLayoutControl( {
 						panelId={ panelId }
 					>
 						<InputControl
-							size={ '__unstable-large' }
+							size="__unstable-large"
 							label={ __( 'Column span' ) }
 							type="number"
 							onChange={ ( value ) => {
@@ -181,7 +181,7 @@ export default function ChildLayoutControl( {
 							min={ 1 }
 						/>
 						<InputControl
-							size={ '__unstable-large' }
+							size="__unstable-large"
 							label={ __( 'Row span' ) }
 							type="number"
 							onChange={ ( value ) => {
@@ -210,7 +210,7 @@ export default function ChildLayoutControl( {
 						>
 							<FlexItem style={ { width: '50%' } }>
 								<InputControl
-									size={ '__unstable-large' }
+									size="__unstable-large"
 									label={ __( 'Column' ) }
 									type="number"
 									onChange={ ( value ) => {
@@ -234,7 +234,7 @@ export default function ChildLayoutControl( {
 							</FlexItem>
 							<FlexItem style={ { width: '50%' } }>
 								<InputControl
-									size={ '__unstable-large' }
+									size="__unstable-large"
 									label={ __( 'Row' ) }
 									type="number"
 									onChange={ ( value ) => {

diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
@@ -145,18 +145,14 @@ function ColorGradientControlInner( {
 								</Tabs.TabList>
 								<Tabs.TabPanel
 									tabId={ TAB_IDS.color }
-									className={
-										'block-editor-color-gradient-control__panel'
-									}
+									className="block-editor-color-gradient-control__panel"
 									focusable={ false }
 								>
 									{ tabPanels.color }
 								</Tabs.TabPanel>
 								<Tabs.TabPanel
 									tabId={ TAB_IDS.gradient }
-									className={
-										'block-editor-color-gradient-control__panel'
-									}
+									className="block-editor-color-gradient-control__panel"
 									focusable={ false }
 								>
 									{ tabPanels.gradient }

diff --git a/packages/block-editor/src/components/contrast-checker/test/index.js b/packages/block-editor/src/components/contrast-checker/test/index.js
@@ -375,7 +375,7 @@ describe( 'ContrastChecker', () => {
 		render(
 			<ContrastChecker
 				backgroundColor={ backgroundColor }
-				textColor={ 'rgba(0,0,0,0.9)' }
+				textColor="rgba(0,0,0,0.9)"
 				linkColor={ linkColor }
 				isLargeText={ isLargeText }
 				enableAlphaChecker
@@ -396,7 +396,7 @@ describe( 'ContrastChecker', () => {
 		render(
 			<ContrastChecker
 				backgroundColor={ backgroundColor }
-				linkColor={ 'rgba(0,0,0,0.9)' }
+				linkColor="rgba(0,0,0,0.9)"
 				textColor={ textColor }
 				isLargeText={ isLargeText }
 				enableAlphaChecker
@@ -416,7 +416,7 @@ describe( 'ContrastChecker', () => {
 	test( 'should render nothing when the colors meet AA WCAG guidelines but the background color only has alpha transparency with alpha checker enabled.', () => {
 		const { container } = render(
 			<ContrastChecker
-				backgroundColor={ 'rgba(255,255,255,0.7)' }
+				backgroundColor="rgba(255,255,255,0.7)"
 				textColor={ textColor }
 				linkColor={ linkColor }
 				isLargeText={ isLargeText }
@@ -450,7 +450,7 @@ describe( 'ContrastChecker', () => {
 			<ContrastChecker
 				backgroundColor={ colorWithTransparency }
 				textColor={ sameShade }
-				linkColor={ 'rgba(0,0,0,0.9)' }
+				linkColor="rgba(0,0,0,0.9)"
 				isLargeText={ isLargeText }
 				fallbackBackgroundColor={ fallbackBackgroundColor }
 				fallbackTextColor={ fallbackTextColor }
@@ -472,7 +472,7 @@ describe( 'ContrastChecker', () => {
 		render(
 			<ContrastChecker
 				backgroundColor={ sameShade }
-				textColor={ 'rgba(0,0,0,0.9)' }
+				textColor="rgba(0,0,0,0.9)"
 				linkColor={ sameShade }
 				isLargeText={ isLargeText }
 				fallbackBackgroundColor={ fallbackBackgroundColor }
@@ -494,9 +494,9 @@ describe( 'ContrastChecker', () => {
 	test( 'should render component when the colors meet AA WCAG guidelines but all colors have alpha transparency with alpha checker enabled.', () => {
 		render(
 			<ContrastChecker
-				backgroundColor={ 'rgba(255,255,255,0.7)' }
-				linkColor={ 'rgba(0,0,0,0.7)' }
-				textColor={ 'rgba(0,0,0,0.7)' }
+				backgroundColor="rgba(255,255,255,0.7)"
+				linkColor="rgba(0,0,0,0.7)"
+				textColor="rgba(0,0,0,0.7)"
 				isLargeText={ isLargeText }
 				enableAlphaChecker
 			/>

diff --git a/packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js b/packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js
@@ -92,7 +92,7 @@ export default function AspectRatioTool( {
 				value={ displayValue }
 				options={ options ?? aspectRatioOptions }
 				onChange={ onChange }
-				size={ '__unstable-large' }
+				size="__unstable-large"
 				__nextHasNoMarginBottom
 			/>
 		</ToolsPanelItem>

diff --git a/packages/block-editor/src/components/dimensions-tool/scale-tool.js b/packages/block-editor/src/components/dimensions-tool/scale-tool.js
@@ -110,7 +110,7 @@ export default function ScaleTool( {
 				help={ scaleHelp[ displayValue ] }
 				value={ displayValue }
 				onChange={ onChange }
-				size={ '__unstable-large' }
+				size="__unstable-large"
 			>
 				{ options.map( ( option ) => (
 					<ToggleGroupControlOption

diff --git a/packages/block-editor/src/components/dimensions-tool/width-height-tool.js b/packages/block-editor/src/components/dimensions-tool/width-height-tool.js
@@ -87,7 +87,7 @@ export default function WidthHeightTool( {
 					min={ 0 }
 					value={ width }
 					onChange={ onDimensionChange( 'width' ) }
-					size={ '__unstable-large' }
+					size="__unstable-large"
 				/>
 			</SingleColumnToolsPanelItem>
 			<SingleColumnToolsPanelItem
@@ -105,7 +105,7 @@ export default function WidthHeightTool( {
 					min={ 0 }
 					value={ height }
 					onChange={ onDimensionChange( 'height' ) }
-					size={ '__unstable-large' }
+					size="__unstable-large"
 				/>
 			</SingleColumnToolsPanelItem>
 		</>

diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -509,7 +509,7 @@ function BackgroundSizeToolsPanelItem( {
 				onChange={ updateBackgroundPosition }
 			/>
 			<ToggleGroupControl
-				size={ '__unstable-large' }
+				size="__unstable-large"
 				label={ __( 'Size' ) }
 				value={ currentValueForToggle }
 				onChange={ updateBackgroundSize }
@@ -519,18 +519,18 @@ function BackgroundSizeToolsPanelItem( {
 				) }
 			>
 				<ToggleGroupControlOption
-					key={ 'cover' }
-					value={ 'cover' }
+					key="cover"
+					value="cover"
 					label={ __( 'Cover' ) }
 				/>
 				<ToggleGroupControlOption
-					key={ 'contain' }
-					value={ 'contain' }
+					key="contain"
+					value="contain"
 					label={ __( 'Contain' ) }
 				/>
 				<ToggleGroupControlOption
-					key={ 'tile' }
-					value={ 'auto' }
+					key="tile"
+					value="auto"
 					label={ __( 'Tile' ) }
 				/>
 			</ToggleGroupControl>
@@ -542,7 +542,7 @@ function BackgroundSizeToolsPanelItem( {
 						aria-label={ __( 'Background image width' ) }
 						onChange={ updateBackgroundSize }
 						value={ sizeValue }
-						size={ '__unstable-large' }
+						size="__unstable-large"
 						__unstableInputWidth="100px"
 						min={ 0 }
 					/>

diff --git a/packages/block-editor/src/components/global-styles/border-panel.js b/packages/block-editor/src/components/global-styles/border-panel.js
@@ -261,7 +261,7 @@ export default function BorderPanel( {
 						popoverPlacement="left-start"
 						value={ border }
 						__experimentalIsRenderedInSidebar
-						size={ '__unstable-large' }
+						size="__unstable-large"
 						hideLabelFromVision={ ! hasShadowControl }
 						label={ __( 'Border' ) }
 					/>

diff --git a/packages/block-editor/src/components/height-control/index.js b/packages/block-editor/src/components/height-control/index.js
@@ -156,7 +156,7 @@ export default function HeightControl( {
 						onChange={ onChange }
 						onUnitChange={ handleUnitChange }
 						min={ 0 }
-						size={ '__unstable-large' }
+						size="__unstable-large"
 						label={ label }
 						hideLabelFromVision
 					/>

diff --git a/packages/block-editor/src/components/inner-blocks/warning-max-depth-exceeded.native.js b/packages/block-editor/src/components/inner-blocks/warning-max-depth-exceeded.native.js
@@ -89,7 +89,7 @@ const WarningMaxDepthExceeded = ( { clientId } ) => {
 		<TouchableWithoutFeedback
 			disabled={ ! isSelected }
 			accessibilityLabel={ __( 'Warning message' ) }
-			accessibilityRole={ 'button' }
+			accessibilityRole="button"
 			accessibilityHint={ __( 'Tap here to show more details.' ) }
 			onPress={ () => setShowDetails( true ) }
 		>

diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js
@@ -31,7 +31,7 @@ function PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) {
 	return (
 		<Heading
 			level={ 2 }
-			lineHeight={ '48px' }
+			lineHeight="48px"
 			className="block-editor-block-patterns-explorer__search-results-count"
 		>
 			{ sprintf(

diff --git a/packages/block-editor/src/components/inserter/category-tabs/index.js b/packages/block-editor/src/components/inserter/category-tabs/index.js
@@ -27,7 +27,7 @@ function CategoryTabs( {
 			className="block-editor-inserter__category-tabs"
 			selectOnMove={ false }
 			selectedTabId={ selectedCategory ? selectedCategory.name : null }
-			orientation={ 'vertical' }
+			orientation="vertical"
 			onSelect={ ( categoryId ) => {
 				// Pass the full category object
 				onSelectCategory(

diff --git a/packages/block-editor/src/components/inspector-controls/fill.native.js b/packages/block-editor/src/components/inspector-controls/fill.native.js
@@ -52,11 +52,9 @@ export default function InspectorControlsFill( {
 	return (
 		<>
 			<Fill { ...props }>
-				{
-					<BottomSheetConsumer>
-						{ () => <View>{ children }</View> }
-					</BottomSheetConsumer>
-				}
+				<BottomSheetConsumer>
+					{ () => <View>{ children }</View> }
+				</BottomSheetConsumer>
 			</Fill>
 			{ Children.count( children ) > 0 && <BlockSettingsButton /> }
 		</>

diff --git a/packages/block-editor/src/components/list-view/block-contents.js b/packages/block-editor/src/components/list-view/block-contents.js
@@ -77,7 +77,7 @@ const ListViewBlockContents = forwardRef(
 				<BlockDraggable
 					appendToOwnerDocument
 					clientIds={ draggableClientIds }
-					cloneClassname={ 'block-editor-list-view-draggable-chip' }
+					cloneClassname="block-editor-list-view-draggable-chip"
 				>
 					{ ( { draggable, onDragStart, onDragEnd } ) => (
 						<ListViewBlockSelectButton

diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
@@ -452,7 +452,7 @@ export function MediaPlaceholder( {
 				multiple={ multiple }
 				onSelect={ onSelect }
 				allowedTypes={ allowedTypes }
-				mode={ 'browse' }
+				mode="browse"
 				value={
 					Array.isArray( value )
 						? value.map( ( { id } ) => id )