[jsnajdr]

Addresses one remaining big incompatibility between React 18 and 19: setting the inert attribute. React 18 requires strings, React 19 wants booleans (or something that correctly casts to a boolean). There's no way to satisfy them both with one value.

This PR introduces an inertValue helper, inspired by the same helper in Base UI that checks React.version and returns a good value. And uses it at all relevant call sites.

I'm adding it to @wordpress/ui, because I want it to be in a bundled package. A seemingly better location is @wordpress/element, but that's bad: inertValue is going to be used also by dataviews, a bundled package, and we don't want it to require the very latest version of the external wp-element script. That would make the package instantly incompatible with the current WordPress 7.1 and any older version.

This PR is a partial spinoff from #83784 which turns React 19 on by default. Fixing the inert attributes is required for e2e and unit tests to pass.

[retrofox]

Can we remove this and the others, TS exceptions, now?

[jsnajdr]

We can remove them only after the react and @types/react packages are upgraded to v19. Only then the inert attribute has a known type, and the type is boolean. The current React 18 doesn't know about the inert attribute at all, that's why there is a type error that we need to hide.

So, we cannot remove them "now", but we can remove them "soon", as one of the incremental steps in the upgrade.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org>
Co-authored-by: retrofox <retrofox@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

🤖 PR meta 🤖

📦 Bundle size

Size Change: +396 B (0%)

Total Size: 8.25 MB

📦 View Changed

Filename	Size	Change
build/modules/boot/index.min.js	57.9 kB	+62 B (+0.11%)
build/scripts/block-editor/index.min.js	516 kB	+98 B (+0.02%)
build/scripts/block-library/index.min.js	366 kB	+47 B (+0.01%)
build/scripts/components/index.min.js	333 kB	+55 B (+0.02%)
build/scripts/compose/index.min.js	11.7 kB	+2 B (+0.02%)
build/scripts/customize-widgets/index.min.js	59.2 kB	-1 B (0%)
build/scripts/edit-site/index.min.js	382 kB	+28 B (+0.01%)
build/scripts/editor/index.min.js	616 kB	+95 B (+0.02%)
build/scripts/media-utils/index.min.js	206 kB	+10 B (0%)

_{6ceabad Run}

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric	d348f60	trunk	% Change
timeToFirstByte	43.6 ms +6.31% -10.21%	40.35 ms +7.06% -1.61%	8.05%
largestContentfulPaint	74 ms +8.11% -8.11%	72 ms +5.56% -8.33%	2.78%
lcpMinusTtfb	29.15 ms +24.36% -6.52%	29.15 ms +17.32% -8.75%	0%
wpBeforeTemplate	20.7 ms +4.49% -7.49%	19.42 ms +7.26% -1.7%	6.59%
wpTemplate	18.22 ms +7.24% -5.87%	17.77 ms +3.21% -3.04%	2.53%
wpTotal	39.51 ms +5.39% -8.43%	37.01 ms +7.7% -1.41%	6.75%
wpMemoryUsage	7.62 MB +0% -0%	7.59 MB +0% -0%	0.46%
wpDbQueries	17 +0% -0%	17 +0% -0%	0%

front-end-classic-theme

Metric	d348f60	trunk	% Change
timeToFirstByte	34.25 ms +4.53% -3.07%	33.1 ms +11.93% -2.42%	3.47%
largestContentfulPaint	76 ms +5.26% -0%	74 ms +16.22% -2.7%	2.7%
lcpMinusTtfb	42.2 ms +3.44% -2.61%	40.75 ms +10.43% -2.58%	3.56%
wpBeforeTemplate	17.74 ms +7.16% -3.89%	17.33 ms +9.92% -2.89%	2.37%
wpTemplate	13.86 ms +1.8% -7.72%	12.85 ms +20.08% -1.17%	7.86%
wpTotal	31.48 ms +3.88% -3.27%	30.53 ms +11.86% -3.08%	3.11%
wpMemoryUsage	6.25 MB +0% -0%	6.20 MB +0% -0%	0.71%
wpDbQueries	14 +0% -0%	14 +0% -0%	0%

media-processing

Metric	d348f60	trunk	% Change
mediaProcessingJpeg	293.95 ms +5.62% -0.9%	294.51 ms +2.54% -0.36%	-0.19%
mediaProcessingAvif	4260.9 ms +3.96% -0.72%	4222.35 ms +1.21% -1.26%	0.91%
mediaProcessingJpegToAvif	2889.8 ms +3.29% -1.91%	2879.98 ms +0.46% -1.28%	0.34%

media-upload

Metric	d348f60	trunk	% Change
jpegUploadProcessing	1410.12 ms +0.52% -1.06%	1408.94 ms +0.88% -1.69%	0.08%
pngUploadProcessing	181.87 ms +4.44% -3.18%	174.58 ms +4.75% -6.15%	4.18%
largeJpegUploadProcessing	1395.78 ms +1.03% -0.28%	1407.29 ms +0.77% -0.61%	-0.82%
multipleImageUploadProcessing	1489.21 ms +0.9% -0.53%	1461.52 ms +2.95% -0.25%	1.89%

post-editor

Metric	d348f60	trunk	% Change
serverResponse	513.86 ms +3.95% -5.82%	498.38 ms +6.89% -4.43%	3.11%
firstPaint	241.35 ms +43.85% -17.37%	201.73 ms +17.04% -8.37%	19.64%
domContentLoaded	1089.25 ms +1.4% -2.83%	1093.95 ms +0.88% -1.75%	-0.43%
loaded	1090.43 ms +1.41% -2.81%	1095.2 ms +0.87% -1.75%	-0.44%
firstContentfulPaint	452.63 ms +2.16% -1.98%	448.53 ms +2.18% -4.28%	0.91%
firstBlock	3274.8 ms +1.62% -0.58%	3274.11 ms +1.07% -1.42%	0.02%
type	17.62 ms +6.07% -2.1%	17.87 ms +0.9% -3.08%	-1.4%
typeWithoutInspector	17.89 ms +8.61% -4.81%	16.84 ms +6.35% -5.23%	6.24%
typeWithTopToolbar	22.86 ms +9.49% -6.26%	22.98 ms +12.14% -4.61%	-0.52%
typeContainer	1.26 ms +14.29% -41.27%	1.22 ms +15.57% -40.16%	3.28%
focus	13.02 ms +10.29% -7.45%	12.22 ms +24.14% -6.79%	6.55%
firstFocus	27.69 ms +0% -0%	44.14 ms +0% -0%	-37.27%
selectAll	1522.57 ms +2.56% -0.75%	1488.87 ms +0.55% -4.91%	2.26%
listViewOpen	60.1 ms +15.87% -4.11%	61.34 ms +12.83% -6.59%	-2.02%
inserterOpen	23.44 ms +10.07% -12.84%	22.33 ms +9.81% -4.79%	4.97%
inserterHover	1.98 ms +16.67% -10.61%	2.17 ms +17.05% -7.37%	-8.76%
inserterSearch	7.74 ms +3.75% -6.85%	7.72 ms +6.61% -5.7%	0.26%
loadPatterns	607.34 ms +1.05% -2.1%	640.8 ms +12.11% -2.44%	-5.22%
wpTotal	504.08 ms +3.85% -6.01%	488.07 ms +7.03% -4.42%	3.28%
wpMemoryUsage	13.16 MB +0% -0%	13.13 MB +0% -0%	0.28%
wpDbQueries	54 +0% -0%	54 +0% -1.85%	0%

site-editor

Metric	d348f60	trunk	% Change
serverResponse	320.88 ms +4.05% -9.01%	310.89 ms +4.22% -4.28%	3.21%
firstPaint	176.93 ms +9.3% -11.82%	217.07 ms +54.13% -18.81%	-18.49%
domContentLoaded	891.46 ms +0.43% -2.22%	872.86 ms +1.44% -2.47%	2.13%
loaded	892.46 ms +0.43% -2.21%	873.81 ms +1.47% -2.47%	2.13%
firstContentfulPaint	362.54 ms +1.6% -2.29%	347.9 ms +3.56% -2.93%	4.21%
firstBlock	3170.86 ms +1.1% -1.26%	3112.59 ms +1.75% -1.28%	1.87%
type	15.77 ms +3.55% -3.11%	14.99 ms +6.47% -1.53%	5.2%
navigate	97.24 ms +10.75% -21.34%	89.34 ms +9.83% -0.94%	8.84%
loadPatterns	1040.84 ms +4.86% -7.09%	1004.36 ms +2.4% -7.95%	3.63%
loadPages	1066.14 ms +2.06% -1.8%	1021.51 ms +3.48% -0.72%	4.37%
wpTotal	312.68 ms +4.16% -9.26%	302.52 ms +4.28% -4.39%	3.36%
wpMemoryUsage	12.14 MB +0% -0%	12.11 MB +0% -0%	0.3%
wpDbQueries	44 +0% -2.27%	44 +0% -2.27%	0%

_{6ceabad Run}

[retrofox]

Test in the experimental Dashboard implementation. It works as expected.

[ciampo]

I also expected the helped to live in @wordpress/element but the bundled package argument is correct; I just wish there was a better place, although it's not a blocker.

[aduth]

Could it warrant its own package, or some sort of "React compatibility" package? I'm not a big fan of this living in @wordpress/ui, it doesn't seem inherently related to the package.

[jsnajdr]

Could it warrant its own package, or some sort of "React compatibility" package?

We could add the helper to a dedicated @wordpress/react-inert-helper package, with just this one function. We did something similar with the kebab-case package recently, in #81294.

I'm very open to doing this if there is agreement that it's a good idea.

[ciampo]

Yeah, that sounds like a cleaner approach to me

[jsnajdr]

Moving to separate package in #83987.