Update to Node.js 20.x (#56331)

* Update to Node.js 18.x, but also test 20.x.

* Remove upper limit.

* update node v18 usage and active LTS alignment in docs

* Update to Node.js 20.x.

* Also update the pull request automation workflow.

* Updating lock file.

* Check for the latest version of Node.

* Simplifying some matrices.

* Add `check-latest` to prevent failures on outdated images.

* Try testing Node.js 21.x.

* Correct `continue-on-error` syntax.

* Job name improvements.

* Remove allowed failures.

---------

Co-authored-by: Markus Dobmann <m.do@posteo.net>

.github/setup-node/action.yml

@@ -14,6 +14,7 @@ runs:
           with:
               node-version-file: '.nvmrc'
               node-version: ${{ inputs.node-version }}
+              check-latest: true
               cache: npm
 
         - name: Get Node.js and npm version

.github/workflows/build-plugin-zip.yml

@@ -174,6 +174,7 @@ jobs:
               uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4.0.0
               with:
                   node-version-file: '.nvmrc'
+                  check-latest: true
                   cache: npm
 
             - name: Build Gutenberg plugin ZIP file
@@ -336,6 +337,7 @@ jobs:
               with:
                   node-version-file: 'main/.nvmrc'
                   registry-url: 'https://registry.npmjs.org'
+                  check-latest: true
 
             - name: Publish packages to npm ("latest" dist-tag)
               run: |

.github/workflows/bundle-size.yml

@@ -46,6 +46,7 @@ jobs:
               uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4.0.0
               with:
                   node-version-file: '.nvmrc'
+                  check-latest: true
                   cache: npm
 
             - uses: preactjs/compressed-size-action@8119d3d31b6e57b167e09c81dfa877eada3bcb35 # v2.5.0

.github/workflows/create-block.yml

@@ -14,14 +14,14 @@ concurrency:
 
 jobs:
     checks:
-        name: Checks
+        name: Checks w/Node.js ${{ matrix.node }} on ${{ matrix.os }}
         runs-on: ${{ matrix.os }}
         if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
         strategy:
             fail-fast: false
             matrix:
-                node: ['16']
-                os: [macos-latest, ubuntu-latest, windows-latest]
+                node: ['20', '21']
+                os: ['macos-latest', 'ubuntu-latest', 'windows-latest']
 
         steps:
             - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1

.github/workflows/end2end-test.yml

@@ -20,8 +20,6 @@ jobs:
         name: Puppeteer
         runs-on: ubuntu-latest
         if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
-        strategy:
-            fail-fast: false
 
         steps:
             - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1

.github/workflows/publish-npm-packages.yml

@@ -71,13 +71,15 @@ jobs:
               with:
                   node-version-file: 'cli/.nvmrc'
                   registry-url: 'https://registry.npmjs.org'
+                  check-latest: true
 
             - name: Setup Node.js (for WP major version)
               if: ${{ github.event.inputs.release_type == 'wp' && github.event.inputs.wp_version }}
               uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4.0.0
               with:
                   node-version-file: 'publish/.nvmrc'
                   registry-url: 'https://registry.npmjs.org'
+                  check-latest: true
 
             - name: Publish development packages to npm ("next" dist-tag)
               if: ${{ github.event.inputs.release_type == 'development' }}

.github/workflows/pull-request-automation.yml

@@ -8,9 +8,6 @@ jobs:
     pull-request-automation:
         runs-on: ubuntu-latest
         if: ${{ github.repository == 'WordPress/gutenberg' }}
-        strategy:
-            matrix:
-                node: ['16']
 
         steps:
             # Checkout defaults to using the branch which triggered the event, which
@@ -23,7 +20,8 @@ jobs:
             - name: Use desired version of Node.js
               uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4.0.0
               with:
-                  node-version: ${{ matrix.node }}
+                  node-version-file: '.nvmrc'
+                  check-latest: true
 
             - name: Cache NPM packages
               uses: actions/cache@704facf57e6136b1bc63b828d79edcd491f0ee84 # v3.3.2

.github/workflows/static-checks.yml

@@ -30,6 +30,7 @@ jobs:
               uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4.0.0
               with:
                   node-version-file: '.nvmrc'
+                  check-latest: true
                   cache: npm
 
             - name: Npm install

.github/workflows/unit-test.yml

@@ -21,14 +21,13 @@ concurrency:
 
 jobs:
     unit-js:
-        name: JavaScript
+        name: JavaScript (Node.js ${{ matrix.node }})
         runs-on: ubuntu-latest
         if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
-
         strategy:
             fail-fast: false
             matrix:
-                node: ['16']
+                node: ['20', '21']
 
         steps:
             - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
@@ -40,7 +39,7 @@ jobs:
               with:
                   node-version: ${{ matrix.node }}
 
-            - name: Npm build
+            - name: npm build
               # It's not necessary to run the full build, since Jest can interpret
               # source files with `babel-jest`. Some packages have their own custom
               # build tasks, however. These must be run.

.nvmrc

@@ -1 +1 @@
-16
+20

docs/contributors/code/getting-started-with-code-contribution.md

@@ -5,7 +5,7 @@ The following guide is for setting up your local environment to contribute to th
 ## Prerequisites
 
 -   Node.js
-    Gutenberg is a JavaScript project and requires [Node.js](https://nodejs.org/). The project is built using Node.js v16, and npm v8. See the [LTS release schedule](https://github.com/nodejs/Release#release-schedule) for details.
+    Gutenberg is a JavaScript project that requires [Node.js](https://nodejs.org/). The project is currently built using Node.js v20 and npm v10. Though best efforts are made to always use the Active LTS version of Node.js, this will not always be the case. For more details, please refer to the [Node.js release schedule](https://github.com/nodejs/Release#release-schedule).
 
 We recommend using the [Node Version Manager](https://github.com/nvm-sh/nvm) (nvm) since it is the easiest way to install and manage node for macOS, Linux, and Windows 10 using WSL2. See [our Development Tools guide](/docs/getting-started/devenv/README.md#development-tools) or the Nodejs site for additional installation instructions.
 

package.json

@@ -15,8 +15,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=16.0.0",
-		"npm": ">=8 <9"
+		"node": ">=20.10.0",
+		"npm": ">=10.2.3"
 	},
 	"config": {
 		"IS_GUTENBERG_PLUGIN": true

platform-docs/docs/intro.md

@@ -9,7 +9,7 @@ Let's discover how to use the **Gutenberg Block Editor** to build your own block
 
 ## What you'll need
 
-- [Node.js](https://nodejs.org/en/download/) version 16.14 or above.
+- [Node.js](https://nodejs.org/en/download/) version 20.10 or above.
 - We're going to be using "vite" to setup our single page application (SPA) that contains a block editor. You can use your own setup, and your own application for this.
 
 ## Preparing the SPA powered by Vite.
@@ -59,7 +59,7 @@ registerCoreBlocks();
 function Editor() {
   const [blocks, setBlocks] = useState([]);
   return (
-    {/* 
+    {/*
         The BlockEditorProvider is the wrapper of the block editor's state.
         All the UI elements of the block editor need to be rendered within this provider.
       */}
@@ -82,4 +82,4 @@ const root = createRoot(document.getElementById("app"));
 root.render(<Editor />);
 ```
 
-That's it! You now have a very basic block editor with several block types included by default: paragraphs, headings, lists, quotes, images...
+That's it! You now have a very basic block editor with several block types included by default: paragraphs, headings, lists, quotes, images...