Update `wordpress/scripts`

[sstruemph]

Changes proposed in this pull request

This PR updates @wordpress/scripts to version 26.

Details

• node bumped to >=20.10.0
• yarn bumped to >=4.4.1
• wordpress/scripts updated to 26.4.0. The accompanying packages have been updated using packages-update
• image-webpack-loader package and the custom webpack rules have been removed

Packages added with wordpress/scripts update

• There were a large number of warnings in our previous build messages. I believe that dependencies were expected that were no included.
• Dependencies added:
• 1. @playwright/test
• 2. eslint
• 3. react
• 4. react-dome
• 5. webpack

Resolutions were added for Yarn in the package.json file. The resolutions field allows you to specify exact versions of packages that you want to enforce across the entire dependency tree. This means that even if different packages request different versions of the same dependency, the version you specify in resolutions will be used instead.

In tailwind.config.cjs the content items are more specific to exclude node_modules and satisfies an error encountered during testing.

yarn.lock is updated.

References to a past project removed from .env.sample.

NOTE: During the build you might see the following messages. They can be ignored.

➤ YN0060: │ react is listed by your project with version 18.3.1 (p0346b), which doesn't satisfy what react-autosize-textarea (via @wordpress/block-editor) and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react-dom is listed by your project with version 18.3.1 (p1a471), which doesn't satisfy what react-autosize-textarea (via @wordpress/block-editor) and other dependencies request (but they have non-overlapping ranges!).

➤ YN0007: │ core-js@npm:2.6.12 must be built because it never has been before or the last one failed
➤ YN0007: │ core-js-pure@npm:3.38.1 must be built because it never has been before or the last one failed

Closes https://app.asana.com/0/1203895219649773/1208159906836440/f

Pre-submit checklist

As the author of this pull request, I verify that:

• [x] I have set the target branch to master.
• [x] I have detailed the purpose of this Pull Request in a non-technical way.
• [x] I have detailed how to test the changes in the Pull Request.
• [x] I have detailed the functional tests required for approval.
• [x] I have performed a self-review of my code to ensure it is DRY and follows the team's coding standards.
• [ ] I have commented my code, particularly in hard-to-understand areas.
• [ ] I have made corresponding changes to the documentation.
• [ ] I have verified that my code does not introduce a debug warning in my local environment.
• [ ] I have verified that the functional tests work in my local environment.
• [ ] I have verified that all automated tests pass or have provided a detailed comment about why I am submitting with a failed pipeline.
• [ ] I have verified that any dependent changes have been merged and published in downstream commits.
• [ ] I have added a link to this Pull Request in the Asana task.
• [ ] I have moved the Asana task to "Ready for Functional Review".
• [ ] I have left a comment in Asana and GitHub tagging a team member with a request for `review.

Testing

How to test the changes in this pull request

Follow the steps below to test the changes in this PR.

1. Branch has been deployed to demo site: https://kindlingprd.wpengine.com
2. I've not seen any issues on the demo site.

Code review

As the code reviewer for this pull request, I verify that:

• [ ] All automated tests have passed.
• [ ] The code is written (or documented) in a way that is easy to understand.
• [ ] The code is free of obvious errors.
• [ ] The code is free of obvious duplication.
• [ ] The code follows our coding standards.
• [ ] The code is sanitized or escaped appropriately for any SQL or XSS injection possibilities.

Once testing is complete, notify the author of any failed tests and move the task to "Kick back" in Asana or continue with the "merging" steps below.

Merging

As the individual merging this pull request, I verify that:

• [ ] All automated tests have passed.
• [ ] All functional tests have passed.
• [ ] All code review tests have passed.
• [ ] I have moved the task to "Ready to Deploy" in Asana and notified the pull request author.

[sstruemph]

Re: tailwind config updates -

[unscripted]

@sstruemph This worked for me, but I had to change the configuration of my machine. Below is an overview of what I discovered and the steps I needed to take before this update worked.

I'd like to have @EugeneKyale and @stonetim test in their locals to see if they experience a similar issue. Adding some dev notes in the readme may be worth it.

After updating locally, I attempted to run the yarn command but was met with an error that my version of yarn didn't meet the minimum requirement. This was accurate, but took me a bit to figure out the issue. I had installed node and yarn using homebrew, but the highest version of yarn homebrew supports is 1.22.22.

This led me to review the official Yarn docs and discover the following.

You may notice by reading our installation guide that we don't tell you to run npm install -g yarn to install Yarn - we even recommend against it. source

I attempted to install using their recommended method, only to discover that the homebrew package of node doesn't include corepack.

To fix this, I had to remove yarn and node from Homebrew using brew uninstall --force yarn and brew uninstall --force node. Then reinstall using the following steps.

1. Install nvm.
2. VERY IMPORTANT! Close and reopen the terminal window.
3. Install node using nvm install 22.
4. Enable corepack using corepack enable. I may have had to use sudo corepack enable this.
   1. I was prompted to install yarn v1.22.22 and selected yes.
   2. Ran yarn -v to confirm that v1.22.22 was installed.
5. Upgrade yarn to 4.4.1 using yarn set version stable.
   1. Ran yarn -v to confirm that v4.4.1 was installed.

This is working as expected now. Did you run into anything like this during your testing?

[EugeneKyale]

@sstruemph This worked for me, but I had to change the configuration of my machine. Below is an overview of what I discovered and the steps I needed to take before this update worked.

I'd like to have @EugeneKyale and @stonetim test in their locals to see if they experience a similar issue. Adding some dev notes in the readme may be worth it.

After updating locally, I attempted to run the yarn command but was met with an error that my version of yarn didn't meet the minimum requirement. This was accurate, but took me a bit to figure out the issue. I had installed node and yarn using homebrew, but the highest version of yarn homebrew supports is 1.22.22.

This led me to review the official Yarn docs and discover the following.

You may notice by reading our installation guide that we don't tell you to run npm install -g yarn to install Yarn - we even recommend against it. source

I attempted to install using their recommended method, only to discover that the homebrew package of node doesn't include corepack.

To fix this, I had to remove yarn and node from Homebrew using brew uninstall --force yarn and brew uninstall --force node. Then reinstall using the following steps.

1. Install nvm.
2. VERY IMPORTANT! Close and reopen the terminal window.
3. Install node using nvm install 22.

4. Enable corepack using corepack enable. I may have had to use sudo corepack enable this.

   1. I was prompted to install yarn v1.22.22 and selected yes.
   2. Ran yarn -v to confirm that v1.22.22 was installed.

5. Upgrade yarn to 4.4.1 using yarn set version stable.

   1. Ran yarn -v to confirm that v4.4.1 was installed.

This is working as expected now. Did you run into anything like this during your testing?

@unscripted @sstruemph I encountered some issues when trying to build the project locally, but I was eventually able to resolve them. Initially, when I attempted to run the build, I encountered the following errors:

error kindling@2.0.0: The engine "node" is incompatible with this module. Expected version ">=18.12.0". Got "16.6.1"
error kindling@2.0.0: The engine "yarn" is incompatible with this module. Expected version ">=4.22.22". Got "1.22.17"
error Commands cannot run with an incompatible environment.

These errors indicated that my local environment was not aligned with the required Node.js and Yarn versions specified by the project.

To fix the issue, here are the steps I followed:

1. Switch Node.js to the required version: I used nvm to switch to Node.js 20.0.0, which aligns with the project's requirements. I also removed the globally installed version of Yarn to avoid any conflicts. nvm use 20.0.0 && npm uninstall -g yarn
2. Enable and prepare Corepack: I enabled Corepack and then activated the latest stable version of Yarn, ensuring that it meets the project's expectations.

   corepack enable
   corepack prepare yarn@stable --activate

3. Verify the Yarn installation: I confirmed that the correct version of Yarn was installed. yarn --version
4. Clean up and reinstall dependencies: After deleting the old node_modules directory to prevent issues related to outdated packages, I reinstalled the dependencies with the correct versions of Node.js and Yarn. nvm use 20.0.0 && yarn install
5. Build the project: Finally, I ran the build command using the appropriate Node.js version. nvm use 20.0.0 && yarn build

After following these steps, the build process completed successfully.

[sstruemph]

@EugeneKyale @unscripted I started a slack thread but maybe we should discuss it here instead?

Thank you both for testing this! It seems that Yarn is adding a few additional steps versus what we would have with NPM. In the past I have always used NPM on dev projects and that would be my preference.