eslint: Enable react/no-unknown-property rule (#39414)

For the most part the fixes needed here switch to corresponding React properties rather than properties that get passed-through without React validation, e.g. `class`→`className`, `stroke-width`→`strokeWidth`, and `itemprop`→`itemProp`. In one place we ignore the rule warning about `transform-origin`, which needs to be a pass-through until React 19 adds `transformOrigin`. And in one place we remove the IE8(!) `allowTransparency` property that React removed in 2017.
Automattic · Sep 17, 2024 · bf29c24 · bf29c24
1 parent 1a8f6a6
commit bf29c24
Show file tree

Hide file tree

Showing 20 changed files with 70 additions and 55 deletions.
diff --git a/projects/js-packages/components/changelog/add-eslint-react-no-unknown-property b/projects/js-packages/components/changelog/add-eslint-react-no-unknown-property
@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Ignore `react/no-unknown-property` in one place until React 19 adds the needed prop.
+
+
diff --git a/projects/js-packages/components/components/donut-meter/index.tsx b/projects/js-packages/components/components/donut-meter/index.tsx
@@ -134,7 +134,7 @@ const DonutMeter: React.FC< DonutMeterProps > = ( {
 					cy="20"
 					r="15.91549430918954"
 					fill="transparent"
-					transform-origin="center"
+					transform-origin="center" // eslint-disable-line react/no-unknown-property -- @todo Switch to transformOrigin when we use React 19.
 					strokeWidth={ thickness }
 					strokeDasharray={ `${ percentage } ${ 100 - percentage }` }
 					strokeDashoffset="-25" // this ensures the segment begins at the bottom of the donut instead of the top

diff --git a/projects/packages/jetpack-mu-wpcom/changelog/add-eslint-react-no-unknown-property b/projects/packages/jetpack-mu-wpcom/changelog/add-eslint-react-no-unknown-property
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Use React properties rather than pass-throughs (e.g. `className` rather than `class`).
diff --git a/...-mu-wpcom/src/features/verbum-comments/src/components/SimpleSubscribeModal/logged-out.tsx b/...-mu-wpcom/src/features/verbum-comments/src/components/SimpleSubscribeModal/logged-out.tsx
@@ -88,7 +88,6 @@ export const SimpleSubscribeModalLoggedOut = ( {
 						title={ translate( 'Never miss a beat!' ) }
 						className="verbum-simple-subscribe-modal__iframe"
 						frameBorder="0"
-						allowTransparency={ true }
 						src={ iframeUrl }
 						id="VERBUM_subscribe_iframe"
 					></iframe>

diff --git a/...s/jetpack-mu-wpcom/src/features/verbum-comments/src/components/custom-loading-spinner.tsx b/...s/jetpack-mu-wpcom/src/features/verbum-comments/src/components/custom-loading-spinner.tsx
@@ -1,3 +1,3 @@
 export const CustomLoadingSpinner = () => {
-	return <div class="custom-loading-spinner"></div>;
+	return <div className="custom-loading-spinner"></div>;
 };
diff --git a/...kages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/editor-placeholder.tsx b/...kages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/editor-placeholder.tsx
@@ -12,19 +12,19 @@ export const EditorPlaceholder = ( { onClick, loading } ) => {
 			onKeyDown={ onClick }
 		>
 			<div
-				class={ clsx( 'editor__main loading-placeholder', {
+				className={ clsx( 'editor__main loading-placeholder', {
 					loading,
 				} ) }
 			>
 				<div
-					class="block-list-appender block-editor-block-list__layout"
+					className="block-list-appender block-editor-block-list__layout"
 					style={ { padding: '10px 20px' } }
 				>
 					{ loading ? (
 						<CustomLoadingSpinner />
 					) : (
 						<p
-							class="block-editor-block-list__layout__content"
+							className="block-editor-block-list__layout__content"
 							style={ { margin: '18px 0', fontSize: '16px' } }
 						>
 							{ commentParent.value

diff --git a/...packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/settings-button.tsx b/...packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/settings-button.tsx
@@ -45,15 +45,15 @@ export const SettingsButton = ( { expanded, toggleSubscriptionTray }: SettingsBu
 					<g opacity={ expanded ? '.6' : '.3' } clipPath="url(#clip0_221_124)">
 						<path
 							stroke="var(--verbum-font-color)"
-							stroke-width="1.33333"
-							stroke-linecap="round"
-							stroke-linejoin="round"
+							strokeWidth="1.33333"
+							strokeLinecap="round"
+							strokeLinejoin="round"
 							d="M12.9334 10C12.8447 10.2011 12.8182 10.4241 12.8574 10.6404C12.8966 10.8567 12.9997 11.0562 13.1534 11.2134L13.1934 11.2534C13.3174 11.3772 13.4157 11.5242 13.4828 11.6861C13.5499 11.848 13.5845 12.0215 13.5845 12.1967C13.5845 12.3719 13.5499 12.5454 13.4828 12.7073C13.4157 12.8691 13.3174 13.0162 13.1934 13.14C13.0696 13.264 12.9225 13.3623 12.7607 13.4294C12.5988 13.4965 12.4253 13.5311 12.2501 13.5311C12.0749 13.5311 11.9014 13.4965 11.7395 13.4294C11.5776 13.3623 11.4306 13.264 11.3067 13.14L11.2667 13.1C11.1096 12.9463 10.9101 12.8432 10.6938 12.804C10.4775 12.7648 10.2545 12.7913 10.0534 12.88C9.85624 12.9645 9.68807 13.1049 9.56962 13.2837C9.45117 13.4626 9.3876 13.6722 9.38675 13.8867V14C9.38675 14.3536 9.24627 14.6928 8.99622 14.9428C8.74617 15.1929 8.40704 15.3334 8.05341 15.3334C7.69979 15.3334 7.36065 15.1929 7.11061 14.9428C6.86056 14.6928 6.72008 14.3536 6.72008 14V13.94C6.71492 13.7194 6.64349 13.5054 6.51509 13.3258C6.38668 13.1463 6.20724 13.0095 6.00008 12.9334C5.799 12.8446 5.57595 12.8181 5.35969 12.8574C5.14343 12.8966 4.94387 12.9997 4.78675 13.1534L4.74675 13.1934C4.62292 13.3173 4.47587 13.4157 4.314 13.4828C4.15214 13.5499 3.97864 13.5844 3.80341 13.5844C3.62819 13.5844 3.45469 13.5499 3.29283 13.4828C3.13096 13.4157 2.98391 13.3173 2.86008 13.1934C2.73611 13.0695 2.63777 12.9225 2.57067 12.7606C2.50357 12.5987 2.46903 12.4252 2.46903 12.25C2.46903 12.0748 2.50357 11.9013 2.57067 11.7394C2.63777 11.5776 2.73611 11.4305 2.86008 11.3067L2.90008 11.2667C3.05377 11.1096 3.15687 10.91 3.19608 10.6937C3.2353 10.4775 3.20882 10.2544 3.12008 10.0534C3.03557 9.85617 2.89525 9.68801 2.71639 9.56956C2.53753 9.45111 2.32794 9.38754 2.11341 9.38669H2.00008C1.64646 9.38669 1.30732 9.24621 1.05727 8.99616C0.807224 8.74611 0.666748 8.40698 0.666748 8.05335C0.666748 7.69973 0.807224 7.36059 1.05727 7.11055C1.30732 6.8605 1.64646 6.72002 2.00008 6.72002H2.06008C2.28074 6.71486 2.49475 6.64343 2.67428 6.51503C2.85381 6.38662 2.99056 6.20718 3.06675 6.00002C3.15549 5.79894 3.18196 5.57589 3.14275 5.35963C3.10354 5.14336 3.00044 4.94381 2.84675 4.78669L2.80675 4.74669C2.68278 4.62286 2.58443 4.4758 2.51734 4.31394C2.45024 4.15208 2.4157 3.97857 2.4157 3.80335C2.4157 3.62813 2.45024 3.45463 2.51734 3.29277C2.58443 3.1309 2.68278 2.98385 2.80675 2.86002C2.93058 2.73605 3.07763 2.63771 3.23949 2.57061C3.40136 2.50351 3.57486 2.46897 3.75008 2.46897C3.9253 2.46897 4.0988 2.50351 4.26067 2.57061C4.42253 2.63771 4.56958 2.73605 4.69341 2.86002L4.73341 2.90002C4.89053 3.05371 5.09009 3.15681 5.30636 3.19602C5.52262 3.23524 5.74567 3.20876 5.94675 3.12002H6.00008C6.19726 3.03551 6.36543 2.89519 6.48388 2.71633C6.60233 2.53747 6.66589 2.32788 6.66675 2.11335V2.00002C6.66675 1.6464 6.80722 1.30726 7.05727 1.05721C7.30732 0.807163 7.64646 0.666687 8.00008 0.666687C8.3537 0.666687 8.69284 0.807163 8.94289 1.05721C9.19294 1.30726 9.33342 1.6464 9.33342 2.00002V2.06002C9.33427 2.27454 9.39784 2.48414 9.51629 2.663C9.63474 2.84186 9.8029 2.98218 10.0001 3.06669C10.2012 3.15543 10.4242 3.1819 10.6405 3.14269C10.8567 3.10348 11.0563 3.00038 11.2134 2.84669L11.2534 2.80669C11.3772 2.68272 11.5243 2.58437 11.6862 2.51727C11.848 2.45018 12.0215 2.41564 12.1967 2.41564C12.372 2.41564 12.5455 2.45018 12.7073 2.51727C12.8692 2.58437 13.0163 2.68272 13.1401 2.80669C13.264 2.93052 13.3624 3.07757 13.4295 3.23943C13.4966 3.4013 13.5311 3.5748 13.5311 3.75002C13.5311 3.92524 13.4966 4.09874 13.4295 4.26061C13.3624 4.42247 13.264 4.56952 13.1401 4.69335L13.1001 4.73335C12.9464 4.89047 12.8433 5.09003 12.8041 5.30629C12.7649 5.52256 12.7913 5.74561 12.8801 5.94669V6.00002C12.9646 6.1972 13.1049 6.36537 13.2838 6.48382C13.4626 6.60227 13.6722 6.66583 13.8867 6.66669H14.0001C14.3537 6.66669 14.6928 6.80716 14.9429 7.05721C15.1929 7.30726 15.3334 7.6464 15.3334 8.00002C15.3334 8.35364 15.1929 8.69278 14.9429 8.94283C14.6928 9.19288 14.3537 9.33335 14.0001 9.33335H13.9401C13.7256 9.33421 13.516 9.39778 13.3371 9.51623C13.1582 9.63468 13.0179 9.80284 12.9334 10Z"
 						/>
 						<path
 							fill="var(--verbum-font-color)"
-							fill-rule="evenodd"
-							clip-rule="evenodd"
+							fillRule="evenodd"
+							clipRule="evenodd"
 							transform={ expanded ? 'rotate(180)' : 'rotate(0)' }
 							d="M8.40093 9.69949C8.16687 9.90014 7.82146 9.90014 7.5874 9.69949L5.69069 8.07359C5.43387 7.85344 5.40413 7.46679 5.62426 7.20995C5.84442 6.95308 6.23113 6.92333 6.48798 7.14351L7.7501 8.22543C7.89054 8.34582 8.09779 8.34582 8.23822 8.22543L9.50035 7.14351C9.75721 6.92333 10.1439 6.95307 10.3641 7.20995C10.5842 7.46679 10.5545 7.85344 10.2976 8.07359L8.40093 9.69949Z"
 						/>

diff --git a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/images/facebook.tsx b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/images/facebook.tsx
@@ -2,8 +2,8 @@ export const Facebook = () => {
 	return (
 		<svg width="20" height="20" viewBox="0 0 10 17" xmlns="http://www.w3.org/2000/svg">
 			<path
-				fill-rule="evenodd"
-				clip-rule="evenodd"
+				fillRule="evenodd"
+				clipRule="evenodd"
 				d="M2.84218 15.9999C3.44716 16.1778 4.08743 16.2733 4.75001 16.2733C5.20581 16.2733 5.65106 16.2281 6.08153 16.142V9.39181H8.78251L9.188 6.32584H6.08153V4.37153C6.08153 3.476 6.34613 2.87706 7.63476 2.87706H9.29682V0.134123C8.49275 0.0505405 7.68483 0.00986426 6.87647 0.0122656C6.33527 -0.0317257 5.791 0.042937 5.28141 0.231078C4.77182 0.419219 4.30909 0.716336 3.92531 1.10183C3.54153 1.48733 3.24588 1.95198 3.05885 2.46357C2.87182 2.97517 2.79789 3.52146 2.84218 4.06459V6.32469H0.133179V9.39066H2.84218V15.9999Z"
 				fill="white"
 			/>

diff --git a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/images/icons.tsx b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/images/icons.tsx
@@ -20,23 +20,23 @@ export const Website = () => {
 				<path
 					d="M12.7818 2H4.06208C3.37411 2 2.81641 2.59695 2.81641 3.33333V12.6667C2.81641 13.403 3.37411 14 4.06208 14H12.7818C13.4698 14 14.0275 13.403 14.0275 12.6667V3.33333C14.0275 2.59695 13.4698 2 12.7818 2Z"
 					stroke="var(--verbum-font-color)"
-					stroke-width="1.33333"
-					stroke-linecap="round"
-					stroke-linejoin="round"
+					strokeWidth="1.33333"
+					strokeLinecap="round"
+					strokeLinejoin="round"
 				/>
 				<path
 					d="M2.81641 6H14.0275"
 					stroke="var(--verbum-font-color)"
-					stroke-width="1.33333"
-					stroke-linecap="round"
-					stroke-linejoin="round"
+					strokeWidth="1.33333"
+					strokeLinecap="round"
+					strokeLinejoin="round"
 				/>
 				<path
 					d="M6.55347 14V6"
 					stroke="var(--verbum-font-color)"
-					stroke-width="1.33333"
-					stroke-linecap="round"
-					stroke-linejoin="round"
+					strokeWidth="1.33333"
+					strokeLinecap="round"
+					strokeLinejoin="round"
 				/>
 			</g>
 		</svg>
@@ -50,16 +50,16 @@ export const Name = () => {
 				<path
 					d="M13.4049 14V12.6667C13.4049 11.9594 13.1424 11.2811 12.6752 10.781C12.2079 10.281 11.5742 10 10.9135 10H5.9308C5.27006 10 4.63637 10.281 4.16915 10.781C3.70193 11.2811 3.43945 11.9594 3.43945 12.6667V14"
 					stroke="var(--verbum-font-color)"
-					stroke-width="1.33333"
-					stroke-linecap="round"
-					stroke-linejoin="round"
+					strokeWidth="1.33333"
+					strokeLinecap="round"
+					strokeLinejoin="round"
 				/>
 				<path
 					d="M8.42201 7.33333C9.79795 7.33333 10.9134 6.13943 10.9134 4.66667C10.9134 3.19391 9.79795 2 8.42201 2C7.04608 2 5.93066 3.19391 5.93066 4.66667C5.93066 6.13943 7.04608 7.33333 8.42201 7.33333Z"
 					stroke="var(--verbum-font-color)"
-					stroke-width="1.33333"
-					stroke-linecap="round"
-					stroke-linejoin="round"
+					strokeWidth="1.33333"
+					strokeLinecap="round"
+					strokeLinejoin="round"
 				/>
 			</g>
 		</svg>
@@ -73,16 +73,16 @@ export const Email = () => {
 				<path
 					d="M3.43928 2.66675H13.4047C14.0898 2.66675 14.6504 3.26675 14.6504 4.00008V12.0001C14.6504 12.7334 14.0898 13.3334 13.4047 13.3334H3.43928C2.75416 13.3334 2.1936 12.7334 2.1936 12.0001V4.00008C2.1936 3.26675 2.75416 2.66675 3.43928 2.66675Z"
 					stroke="var(--verbum-font-color)"
-					stroke-width="1.33333"
-					stroke-linecap="round"
-					stroke-linejoin="round"
+					strokeWidth="1.33333"
+					strokeLinecap="round"
+					strokeLinejoin="round"
 				/>
 				<path
 					d="M14.6504 4L8.42198 8.66667L2.1936 4"
 					stroke="var(--verbum-font-color)"
-					stroke-width="1.33333"
-					stroke-linecap="round"
-					stroke-linejoin="round"
+					strokeWidth="1.33333"
+					strokeLinecap="round"
+					strokeLinejoin="round"
 				/>
 			</g>
 			<defs>

diff --git a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/images/mail.tsx b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/images/mail.tsx
@@ -6,7 +6,7 @@ export const Mail = () => {
 			viewBox="0 0 18 18"
 			fill="none"
 			stroke="white"
-			stroke-width="1.25"
+			strokeWidth="1.25"
 			xmlns="http://www.w3.org/2000/svg"
 		>
 			<path d="M3 3H15C15.825 3 16.5 3.675 16.5 4.5V13.5C16.5 14.325 15.825 15 15 15H3C2.175 15 1.5 14.325 1.5 13.5V4.5C1.5 3.675 2.175 3 3 3Z" />

diff --git a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/images/wordpress.tsx b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/images/wordpress.tsx
@@ -2,8 +2,8 @@ export const WordPress = () => {
 	return (
 		<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
-				fill-rule="evenodd"
-				clip-rule="evenodd"
+				fillRule="evenodd"
+				clipRule="evenodd"
 				d="M19.2308 9.99981C19.2308 4.91366 15.0862 0.769043 10.0001 0.769043C4.90467 0.769043 0.769287 4.91366 0.769287 9.99981C0.769287 15.0952 4.90467 19.2306 10.0001 19.2306C15.0862 19.2306 19.2308 15.0952 19.2308 9.99981ZM7.95083 14.9567L4.80313 6.51058C5.31083 6.49212 5.88313 6.43674 5.88313 6.43674C6.34467 6.38135 6.28929 5.39366 5.82775 5.41212C5.82775 5.41212 4.48929 5.51366 3.64006 5.51366C3.4739 5.51366 3.29852 5.51366 3.10467 5.50443C4.57236 3.25212 7.11083 1.79366 10.0001 1.79366C12.1508 1.79366 14.1077 2.59674 15.5847 3.95366C14.957 3.85212 14.0616 4.31366 14.0616 5.41212C14.0616 6.01026 14.3801 6.52347 14.7382 7.10048C14.7891 7.18242 14.8407 7.26565 14.8924 7.35058C15.2154 7.91366 15.4001 8.60597 15.4001 9.62135C15.4001 10.9967 14.1077 14.2367 14.1077 14.2367L11.3108 6.51058C11.8093 6.49212 12.0677 6.35366 12.0677 6.35366C12.5293 6.3075 12.4739 5.19981 12.0124 5.2275C12.0124 5.2275 10.6831 5.33827 9.81544 5.33827C9.01236 5.33827 7.66467 5.2275 7.66467 5.2275C7.20313 5.19981 7.14775 6.3352 7.60929 6.35366L8.45852 6.4275L9.62159 9.5752L7.95083 14.9567ZM16.8602 9.94619L16.8401 9.99981C16.1713 11.7605 15.5075 13.5364 14.8451 15.3087L14.845 15.309L14.8448 15.3093C14.6113 15.9341 14.378 16.5583 14.1447 17.1814C16.6093 15.7598 18.2062 13.0367 18.2062 9.99981C18.2062 8.57827 17.8831 7.2675 17.237 6.07674C17.5147 8.20894 17.0881 9.34123 16.8602 9.94617L16.8602 9.94619ZM6.40006 17.4675C3.64929 16.1383 1.7939 13.2583 1.7939 9.99981C1.7939 8.79981 2.00621 7.71058 2.45852 6.68597L3.28801 8.95912C4.32263 11.7949 5.35847 14.6341 6.40006 17.4675ZM12.5016 17.7906L10.1201 11.3475C9.68129 12.6419 9.23927 13.9362 8.79593 15.2344C8.4931 16.1212 8.18965 17.0097 7.88621 17.9014C8.55083 18.1044 9.27083 18.206 10.0001 18.206C10.877 18.206 11.7077 18.0583 12.5016 17.7906Z"
 				fill="white"
 			/>

diff --git a/...pcom/src/features/wpcom-block-editor-nux/src/sharing-modal/inline-social-logos-sprite.tsx b/...pcom/src/features/wpcom-block-editor-nux/src/sharing-modal/inline-social-logos-sprite.tsx
@@ -46,8 +46,8 @@ const InlineSocialLogosSprite = () => {
 				<g>
 					<path
 						d="M18.041 3.931L5.959 3A2.96 2.96 0 003 5.959v12.083A2.96 2.96 0 005.959 21l12.083-.931C19.699 19.983 21 18.744 21 17.11V6.89c0-1.634-1.259-2.863-2.959-2.959zM16.933 8.17c-.082.215-.192.432-.378.551-.188.122-.489.132-.799.132-1.521 0-3.062-.048-4.607-.048-.152.708-.304 1.416-.451 2.128.932-.004 1.873.005 2.81.005.726 0 1.462-.069 1.586.525.04.189-.001.426-.052.615-.105.38-.258.676-.625.783-.185.054-.408.058-.646.058-1.145 0-2.345.017-3.493.02-.169.772-.328 1.553-.489 2.333 1.57-.005 3.067-.041 4.633-.058.627-.007 1.085.194 1.009.85a2.17 2.17 0 01-.211.725c-.102.208-.248.376-.488.452-.237.075-.541.064-.862.078-.304.014-.614.008-.924.016-.309.009-.619.022-.919.022-1.253 0-2.429.08-3.683.073-.603-.004-1.014-.249-1.124-.757-.059-.273-.018-.58.036-.841a3542.51 3542.51 0 011.629-7.763c.056-.265.114-.511.225-.714a1.24 1.24 0 01.79-.62c.368-.099.883-.047 1.344-.047.305 0 .612.008.914.016.925.026 1.817.03 2.747.053.304.007.615.016.915.016.621 0 1.17.073 1.245.614.039.288-.051.567-.132.783z"
-						fill-rule="evenodd"
-						clip-rule="evenodd"
+						fillRule="evenodd"
+						clipRule="evenodd"
 					/>
 				</g>
 			</symbol>
@@ -125,15 +125,15 @@ const InlineSocialLogosSprite = () => {
 				<g>
 					<path
 						d="M20.617 13.92c-.265 1.361-2.37 2.851-4.788 3.14-1.261.15-2.502.288-3.826.228-2.165-.1-3.873-.517-3.873-.517 0 .211.013.411.039.599.282 2.136 2.119 2.264 3.859 2.324 1.756.06 3.32-.433 3.32-.433l.072 1.588s-1.228.659-3.417.781c-1.207.066-2.705-.031-4.45-.493-3.785-1.001-4.436-5.036-4.536-9.13-.03-1.215-.011-2.361-.011-3.32 0-4.186 2.742-5.413 2.742-5.413 1.383-.635 3.756-.902 6.224-.923h.06c2.467.021 4.842.288 6.225.923 0 0 2.742 1.227 2.742 5.413 0 0 .035 3.089-.382 5.233zm-2.854-4.909v5.069h-2.008V9.16c0-1.037-.436-1.563-1.309-1.563-.965 0-1.448.624-1.448 1.859v2.693h-1.996V9.456c0-1.235-.484-1.859-1.449-1.859-.873 0-1.309.526-1.309 1.563v4.92H6.236V9.011c0-1.035.263-1.859.793-2.468.547-.609 1.262-.921 2.15-.921 1.028 0 1.806.395 2.32 1.185l.501.839.5-.839c.514-.79 1.292-1.185 2.32-1.185.888 0 1.604.312 2.15.921.53.609.793 1.433.793 2.468z"
-						fill-rule="evenodd"
+						fillRule="evenodd"
 					/>
 				</g>
 			</symbol>
 			<symbol viewBox="0 0 24 24" id="medium-alt">
 				<g>
 					<path
 						d="M7.423 6c3.27 0 5.922 2.686 5.922 6s-2.651 6-5.922 6S1.5 15.313 1.5 12s2.652-6 5.923-6zm9.458.351c1.635 0 2.961 2.53 2.961 5.65 0 3.118-1.325 5.648-2.96 5.648-1.636 0-2.962-2.53-2.962-5.649s1.325-5.649 2.96-5.649zm4.577.589c.576 0 1.042 2.265 1.042 5.06 0 2.794-.466 5.06-1.042 5.06-.575 0-1.04-2.265-1.04-5.06 0-2.794.465-5.06 1.04-5.06z"
-						fill-rule="nonzero"
+						fillRule="nonzero"
 					/>
 				</g>
 			</symbol>
@@ -145,8 +145,8 @@ const InlineSocialLogosSprite = () => {
 			<symbol viewBox="0 0 24 24" id="patreon">
 				<g>
 					<path
-						fill-rule="evenodd"
-						clip-rule="evenodd"
+						fillRule="evenodd"
+						clipRule="evenodd"
 						d="M13.975 5a5.05 5.05 0 00-5.041 5.046c0 2.774 2.261 5.03 5.04 5.03A5.034 5.034 0 0019 10.047C19 7.264 16.746 5 13.975 5zM5 18.44h2.461V5H5v13.44z"
 					/>
 				</g>
@@ -214,8 +214,8 @@ const InlineSocialLogosSprite = () => {
 			<symbol viewBox="0 0 24 24" id="tiktok-alt">
 				<g>
 					<path
-						fill-rule="evenodd"
-						clip-rule="evenodd"
+						fillRule="evenodd"
+						clipRule="evenodd"
 						d="M5 3a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2H5zm9.584 3h-2.052l.019 8.128a1.73 1.73 0 11-1.215-1.65v-2.084h-.533a3.804 3.804 0 103.803 3.803l-.022-4.207c1.268.968 2.85.869 2.85.869V8.82C14.47 8.636 14.584 6 14.584 6z"
 					/>
 				</g>

diff --git a/projects/packages/search/changelog/add-eslint-react-no-unknown-property b/projects/packages/search/changelog/add-eslint-react-no-unknown-property
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Use React properties rather than pass-throughs (e.g. `className` rather than `class`).
diff --git a/projects/packages/search/src/instant-search/components/search-filters.jsx b/projects/packages/search/src/instant-search/components/search-filters.jsx
@@ -82,7 +82,7 @@ class SearchFilters extends Component {
 				) }
 				{ this.props.showClearFiltersButton && this.hasActiveFilters() && (
 					<button
-						class="jetpack-instant-search__clear-filters-link"
+						className="jetpack-instant-search__clear-filters-link"
 						onClick={ this.onClearFilters }
 					>
 						{ __( 'Clear filters', 'jetpack-search-pkg' ) }

diff --git a/projects/plugins/jetpack/_inc/client/newsletter/email-settings.jsx b/projects/plugins/jetpack/_inc/client/newsletter/email-settings.jsx
@@ -399,7 +399,7 @@ const EmailSettings = props => {
 						</Button>
 					</Col>
 				</Container>
-				<p class="reply-to">
+				<p className="reply-to">
 					{ __(
 						'Choose who receives emails when subscribers reply to your newsletter.',
 						'jetpack'

diff --git a/projects/plugins/jetpack/changelog/add-eslint-react-no-unknown-property b/projects/plugins/jetpack/changelog/add-eslint-react-no-unknown-property
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Use React properties rather than pass-throughs (e.g. `className` rather than `class`).
diff --git a/projects/plugins/jetpack/extensions/blocks/recipe/details/save.js b/projects/plugins/jetpack/extensions/blocks/recipe/details/save.js
@@ -10,19 +10,19 @@ const RecipeSave = ( { attributes, className } ) => {
 		<div className={ className }>
 			<div className="wp-block-jetpack-recipe-details__detail">
 				<p>{ prepTimeLabel }</p>
-				<p itemprop="prepTime" content={ `PT${ prepTime.toUpperCase() }` }>
+				<p itemProp="prepTime" content={ `PT${ prepTime.toUpperCase() }` }>
 					{ prepTime }
 				</p>
 			</div>
 			<div className="wp-block-jetpack-recipe-details__detail">
 				<p>{ cookTimeLabel }</p>
-				<p itemprop="cookTime" content={ `PT${ cookTime.toUpperCase() }` }>
+				<p itemProp="cookTime" content={ `PT${ cookTime.toUpperCase() }` }>
 					{ cookTime }
 				</p>
 			</div>
 			<div className="wp-block-jetpack-recipe-details__detail">
 				<p>{ servingsLabel }</p>
-				<p itemprop="recipeYield">{ servings }</p>
+				<p itemProp="recipeYield">{ servings }</p>
 			</div>
 			<div className="wp-block-jetpack-recipe-details__detail wp-block-jetpack-recipe-details__detail--print">
 				<InnerBlocks.Content />

diff --git a/projects/plugins/jetpack/extensions/blocks/recipe/step/save.js b/projects/plugins/jetpack/extensions/blocks/recipe/step/save.js
@@ -5,7 +5,7 @@ import { InnerBlocks } from '@wordpress/block-editor';
 
 const RecipeStepSave = () => {
 	return (
-		<li itemprop="step" itemscope itemtype="https://schema.org/HowToStep">
+		<li itemProp="step" itemScope itemType="https://schema.org/HowToStep">
 			<InnerBlocks.Content />
 		</li>
 	);

diff --git a/projects/plugins/jetpack/extensions/blocks/recipe/steps/save.js b/projects/plugins/jetpack/extensions/blocks/recipe/steps/save.js
@@ -14,9 +14,9 @@ const RecipeStepsSave = ( { attributes } ) => {
 	return (
 		<ol
 			style={ styles }
-			itemscope=""
-			itemprop="recipeInstructions"
-			itemtype="https://schema.org/HowTo"
+			itemScope=""
+			itemProp="recipeInstructions"
+			itemType="https://schema.org/HowTo"
 		>
 			<InnerBlocks.Content />
 		</ol>

diff --git a/tools/js-tools/eslintrc/react.js b/tools/js-tools/eslintrc/react.js
@@ -28,6 +28,5 @@ module.exports = {
 		'react/no-direct-mutation-state': 'off',
 		'react/no-find-dom-node': 'off',
 		'react/no-unescaped-entities': 'off',
-		'react/no-unknown-property': 'off',
 	},
 };