Free: Upgrade WP babel-preset-default

[igorschoester]

Context

Important

Branched out (and pointing into) the branch of #22466 to have the latest WP package versions already.
Ensure that gets merged before this and GitHub should auto-adjust this to be merged into trunk instead.

Basically following these versions: https://make.wordpress.org/core/2024/06/06/jsx-in-wordpress-6-6/
In React 19 the JSX transform is required: https://react.dev/blog/2024/04/25/react-19-upgrade-guide#new-jsx-transform-is-now-required

Summary

This PR can be summarized in the following changelog entry:

• [@yoast/babel-preset 1.0.0 enhancement] Upgrades @wordpress/babel-preset-default to v8 from v6. Breaking due to Node 18 requirement and incompatibility with WP v6.5 and below.

Relevant technical choices:

What is affected? Search for where this preset is being used

What changed? Before the #22466 the React code was transpiled using createElement from react. Which changed to now jsx from react/jsx-runtime.
See https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
You can inspect an JS asset in js/dist, say editor-modules.js.
If you build on trunk you will see something like react__WEBPACK_IMPORTED_MODULE_0__.createElement and on this (and the parent branch already) you will instead see something like react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

• Switch Premium to the branch of this PR: https://github.com/Yoast/wordpress-seo-premium/pull/4724
• Symlink Free into the Premium vendor folder (picked up by Premium from there)
• Build all the things
• Smoke test all our React code
• Maybe create artifacts and smoke test in a fresh environment too

Relevant test scenarios

• Changes should be tested with the browser console open
• Changes should be tested on different posts/pages/taxonomies/custom post types/custom taxonomies
• Changes should be tested on different editors (Default Block/Gutenberg/Classic/Elementor/other)
• Changes should be tested on different browsers
• Changes should be tested on multisite

Test instructions for QA when the code is in the RC

• QA should use the same steps as above.

QA can test this PR by following these steps:

• Not more than normal smoke tests for RCs I reckon.

Impact check

This PR affects the following parts of the plugin, which may require extra testing:

• All our React code

UI changes

• This PR changes the UI in the plugin. I have added the 'UI change' label to this PR.

Other environments

• This PR also affects Shopify. I have added a changelog entry starting with [shopify-seo], added test instructions for Shopify and attached the Shopify label to this PR.

Documentation

• I have written documentation for this change. For example, comments in the Relevant technical choices, comments in the code, documentation on Confluence / shared Google Drive / Yoast developer portal, or other.

Quality assurance

• I have tested this code to the best of my abilities.
• During testing, I had activated all plugins that Yoast SEO provides integrations for.
• I have added unit tests to verify the code works as intended.
• If any part of the code is behind a feature flag, my test instructions also cover cases where the feature flag is switched off.
• I have written this PR in accordance with my team's definition of done.
• I have checked that the base branch is correctly set.

Innovation

• No innovation project is applicable for this PR.
• This PR falls under an innovation project. I have attached the innovation label.
• I have added my hours to the WBSO document.

Fixes https://github.com/Yoast/reserved-tasks/issues/253

[github-actions]

@igorschoester Please be aware that following packages have been abandoned and are not actively maintained anymore:

Package name	Path
@yoast/babel-preset	packages/babel-preset
@yoast/components	packages/components
@yoast/e2e-tests	packages/e2e-tests
@yoast/helpers	packages/helpers
@yoast/jest-preset	packages/jest-preset
@yoast/style-guide	packages/style-guide
eslint-config-yoast	packages/esling-config-yoast

Please consider using the other packages instead.

[github-actions]

A merge conflict has been detected for the proposed code changes in this PR. Please resolve the conflict by either rebasing the PR or merging in changes from the base branch.

[github-actions]

@thijsoo Please be aware that following packages have been abandoned and are not actively maintained anymore:

Package name	Path
@yoast/babel-preset	packages/babel-preset
@yoast/components	packages/components
@yoast/e2e-tests	packages/e2e-tests
@yoast/helpers	packages/helpers
@yoast/jest-preset	packages/jest-preset
@yoast/style-guide	packages/style-guide
eslint-config-yoast	packages/esling-config-yoast

Please consider using the other packages instead.

[coveralls]

Pull Request Test Coverage Report for Build 3c47d8ece53b36f5e8cf90440da6131a13f3b595

Details

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall first build on 253-upgrade-wordpressbabel-preset-default at 30.109%

---

Totals
Change from base Build ed41ad5dbaf816698bf747d566d76927bb467dc9:	30.1%
Covered Lines:	4862
Relevant Lines:	14873

---

💛 - Coveralls

[thijsoo]

CR + ACC 👍