Tools: Update packages, use wp-scripts for build process #562
Conversation
ryelle
force-pushed
the
update/tools-packages-build
branch
from
51b8e39 to
9ca0663
Compare
bin/build.js
Outdated
| await maybeBuildBlock( path.resolve( path.join( basePath, 'src' ) ), outputDir ); | ||
|
|
||
| // `maybeBuildBlock` supports SCSS, but current blocks still have postCSS | ||
| // files. Until those are converted, we still need a separate PostCSS step. |
There was a problem hiding this comment.
So will we eventually phase out all PostCSS in favor of SCSS? I'm not sure if the discussion here is relevant because it seems to be discussing the opposite idea.
There was a problem hiding this comment.
Oh, thanks for pointing me to that conversation, it happened while I was away :)
Honestly I was remembering this recent bug where the CSS was not building properly because it was using Sass formatting. I didn't realize there had been a more recent discussion than the 2022 issue.
… turns out though, wp-scripts does support *.pcss, so we could remove this without forcing a Sass decision. I'll update the comment here and try that in a new PR.
| "@wordpress/browserslist-config": "5.33.0", | ||
| "@wordpress/env": "9.2.0", | ||
| "@wordpress/scripts": "27.1.0", | ||
| "chalk": "4.1.2", | ||
| "cross-spawn": "7.0.3", | ||
| "cssnano": "5.1.11", | ||
| "node-watch": "^0.7.3", | ||
| "postcss": "8.4.14", | ||
| "postcss-cli": "9.1.0", | ||
| "postcss-import": "14.1.0", | ||
| "postcss-preset-env": "7.7.1", | ||
| "cssnano": "6.0.3", | ||
| "node-watch": "0.7.4", | ||
| "postcss": "8.4.33", | ||
| "postcss-cli": "11.0.0", | ||
| "postcss-import": "16.0.0", | ||
| "postcss-preset-env": "9.3.0", | ||
| "resolve-bin": "1.0.1", | ||
| "rtlcss": "3.5.0", | ||
| "url-loader": "^3.0.0", | ||
| "webpack": "5.47.1", | ||
| "webpack-cli": "4.9.1" | ||
| "rtlcss": "4.1.1", | ||
| "url-loader": "4.1.1" |
There was a problem hiding this comment.
How did you arrive at this set of dependencies? The changes seem more extensive than expected.
There was a problem hiding this comment.
I used yarn outdated to update everything available. I wanted to make sure any peer dependencies were up to date with the new wordpress/ packages & supported the latest node version.
|
I'm going to merge this, since it doesn't require a deploy & isn't affected by a site's Gutenberg version. |
The Interactivity API is now only available as a JS module, not a plain script, so we need to build and register our
viewcode differently. As of v27,@wordpress/scriptssupports module builds, but that also breaks compat with Node <18. So this PR updates the node version to match core, and updates the rest of the JS packages.I've also changed the build process to call wp-scripts directly for each block, rather than using webpack + importing the wp-scripts webpack config. The block build step is now equivalent to running:
Unfortunately due to the folder structure, we still need the custom script (wp-scripts doesn't understand how to find
[block]/src/block.json, it only understandssrc/[block]/block.json).See WordPress/wporg-parent-2021#122, WordPress/gutenberg#56143, WordPress/gutenberg#57461
To test
nvm installto switch the node version (or however you manage node versions), it should be 20.yarnto install the package updatesyarn buildcat mu-plugins/blocks/navigation/build/index.jsyarn build:devcat mu-plugins/blocks/navigation/build/index.jsyarn build:dev query-filter