Automate updating JS packages #2621

adamziel · 2022-04-22T12:26:38Z

What problem does this PR solve?

Trac ticket: https://core.trac.wordpress.org/ticket/55642

Updating @wordpress packages is currently a manual process that takes some reading and trial&error to figure out:

Update browserslist database
Update @wordpress packages
Install any new @wordpress required by the existing dependencies
Update React and other non-@wordpress dependencies to the versions required by the @wordpress packages
Run npm build:dev

(see #2564)

This PR adds a single task called sync-gutenberg-packages that automates this entire process.

Ideally, the next step will be a GitHub action that runs it for you.

Test plan

Run the following commands:

; git checkout bab610091d59f6dd21c7db84ba3e1ca0bab6a211~1
# ^ This repo right before the first round of backports for WP 6.0 Beta1

Then merge this branch into your local copy:

git merge adamziel:try/automate-backports

Then run the command:

; npm install
; npx grunt sync-gutenberg-packages --dist-tag=wp-6.0

Then run git status and confirm it reports the following:

      modified:   package-lock.json
        modified:   package.json
        modified:   src/wp-includes/blocks/archives.php
        modified:   src/wp-includes/blocks/archives/block.json
        modified:   src/wp-includes/blocks/audio/block.json
        modified:   src/wp-includes/blocks/block.php
        modified:   src/wp-includes/blocks/block/block.json
        modified:   src/wp-includes/blocks/button/block.json
        modified:   src/wp-includes/blocks/buttons/block.json
        modified:   src/wp-includes/blocks/calendar.php
        modified:   src/wp-includes/blocks/calendar/block.json
        modified:   src/wp-includes/blocks/categories.php
        modified:   src/wp-includes/blocks/categories/block.json
        modified:   src/wp-includes/blocks/code/block.json
        modified:   src/wp-includes/blocks/column/block.json
        modified:   src/wp-includes/blocks/columns/block.json
        modified:   src/wp-includes/blocks/cover/block.json
        modified:   src/wp-includes/blocks/embed/block.json
        modified:   src/wp-includes/blocks/file.php
        modified:   src/wp-includes/blocks/file/block.json
        modified:   src/wp-includes/blocks/freeform/block.json
        modified:   src/wp-includes/blocks/gallery.php
        modified:   src/wp-includes/blocks/gallery/block.json
        modified:   src/wp-includes/blocks/group/block.json
        modified:   src/wp-includes/blocks/heading/block.json
        modified:   src/wp-includes/blocks/html/block.json
        modified:   src/wp-includes/blocks/image.php
        modified:   src/wp-includes/blocks/image/block.json
        modified:   src/wp-includes/blocks/latest-comments.php
        modified:   src/wp-includes/blocks/latest-comments/block.json
        modified:   src/wp-includes/blocks/latest-posts.php
        modified:   src/wp-includes/blocks/latest-posts/block.json
        modified:   src/wp-includes/blocks/legacy-widget.php
        modified:   src/wp-includes/blocks/list/block.json
        modified:   src/wp-includes/blocks/loginout/block.json
        modified:   src/wp-includes/blocks/media-text/block.json
        modified:   src/wp-includes/blocks/missing/block.json
        modified:   src/wp-includes/blocks/more/block.json
        modified:   src/wp-includes/blocks/navigation-link.php
        modified:   src/wp-includes/blocks/navigation-link/block.json
        modified:   src/wp-includes/blocks/navigation-submenu.php
        modified:   src/wp-includes/blocks/navigation-submenu/block.json
        modified:   src/wp-includes/blocks/navigation.php
        modified:   src/wp-includes/blocks/navigation/block.json
        modified:   src/wp-includes/blocks/nextpage/block.json
        modified:   src/wp-includes/blocks/page-list.php
        modified:   src/wp-includes/blocks/page-list/block.json
        modified:   src/wp-includes/blocks/paragraph/block.json
        modified:   src/wp-includes/blocks/pattern/block.json
        modified:   src/wp-includes/blocks/post-author.php
        modified:   src/wp-includes/blocks/post-author/block.json
        modified:   src/wp-includes/blocks/post-comments/block.json
        modified:   src/wp-includes/blocks/post-content.php
        modified:   src/wp-includes/blocks/post-content/block.json
        modified:   src/wp-includes/blocks/post-date.php
        modified:   src/wp-includes/blocks/post-date/block.json
        modified:   src/wp-includes/blocks/post-excerpt.php
        modified:   src/wp-includes/blocks/post-excerpt/block.json
        modified:   src/wp-includes/blocks/post-featured-image.php
        modified:   src/wp-includes/blocks/post-featured-image/block.json
        modified:   src/wp-includes/blocks/post-navigation-link.php
        modified:   src/wp-includes/blocks/post-navigation-link/block.json
        modified:   src/wp-includes/blocks/post-template.php
        modified:   src/wp-includes/blocks/post-template/block.json
        modified:   src/wp-includes/blocks/post-terms.php
        modified:   src/wp-includes/blocks/post-terms/block.json
        modified:   src/wp-includes/blocks/post-title.php
        modified:   src/wp-includes/blocks/post-title/block.json
        modified:   src/wp-includes/blocks/preformatted/block.json
        modified:   src/wp-includes/blocks/pullquote/block.json
        modified:   src/wp-includes/blocks/query-pagination-next.php
        modified:   src/wp-includes/blocks/query-pagination-next/block.json
        modified:   src/wp-includes/blocks/query-pagination-numbers/block.json
        modified:   src/wp-includes/blocks/query-pagination-previous.php
        modified:   src/wp-includes/blocks/query-pagination-previous/block.json
        modified:   src/wp-includes/blocks/query-pagination.php
        modified:   src/wp-includes/blocks/query-pagination/block.json
        modified:   src/wp-includes/blocks/query-title/block.json
        modified:   src/wp-includes/blocks/query/block.json
        modified:   src/wp-includes/blocks/quote/block.json
        modified:   src/wp-includes/blocks/rss.php
        modified:   src/wp-includes/blocks/rss/block.json
        modified:   src/wp-includes/blocks/search.php
        modified:   src/wp-includes/blocks/search/block.json
        modified:   src/wp-includes/blocks/separator/block.json
        modified:   src/wp-includes/blocks/shortcode/block.json
        modified:   src/wp-includes/blocks/site-logo.php
        modified:   src/wp-includes/blocks/site-logo/block.json
        modified:   src/wp-includes/blocks/site-tagline/block.json
        modified:   src/wp-includes/blocks/site-title.php
        modified:   src/wp-includes/blocks/site-title/block.json
        modified:   src/wp-includes/blocks/social-link.php
        modified:   src/wp-includes/blocks/social-link/block.json
        modified:   src/wp-includes/blocks/social-links/block.json
        modified:   src/wp-includes/blocks/spacer/block.json
        modified:   src/wp-includes/blocks/table/block.json
        modified:   src/wp-includes/blocks/tag-cloud.php
        modified:   src/wp-includes/blocks/tag-cloud/block.json
        modified:   src/wp-includes/blocks/template-part.php
        modified:   src/wp-includes/blocks/template-part/block.json
        modified:   src/wp-includes/blocks/term-description/block.json
        modified:   src/wp-includes/blocks/text-columns/block.json
        modified:   src/wp-includes/blocks/verse/block.json
        modified:   src/wp-includes/blocks/video/block.json

cc @gziolo

gziolo · 2022-04-22T13:03:49Z

I'm looking forward to give it a spin on Monday/Tuesday 🎉

package.json

ocean90 · 2022-04-26T10:26:25Z

It's right that "backporting" here means updating the packages to the same packages used by Gutenberg? I think this can be misleading as backporting in WordPress is more about cherry-picking a commit from trunk into a branch which the command is clearly not doing.

gziolo · 2022-04-26T11:04:42Z

It's right that "backporting" here means updating the packages to the same packages used by Gutenberg? I think this can be misleading as backporting in WordPress is more about cherry-picking a commit from trunk into a branch which the command is clearly not doing.

Good perspective. It should be reworded so it's all clear it's about bringing changes from Gutenberg to WP core 👍🏻

package.json

tools/release/refresh-packages.js

adamziel · 2022-04-27T09:28:32Z

Good notes! I renamed backport-js-packages to sync-gutenberg-packages to make the purpose clearer.

…kages to their required versions and runs the build process

adamziel · 2022-04-27T09:47:38Z

Gruntfile.js

@@ -13,7 +13,7 @@ module.exports = function(grunt) {
 		SOURCE_DIR = 'src/',
 		BUILD_DIR = 'build/',
 		WORKING_DIR = grunt.option( 'dev' ) ? SOURCE_DIR : BUILD_DIR,
- 		BANNER_TEXT = '/*! This file is auto-generated */',
+		BANNER_TEXT = '/*! This file is auto-generated */',


My linting tool caught this. Seems fine to merge.

tools/release/sync-gutenberg-packages.js

Gruntfile.js

gziolo · 2022-04-27T14:02:25Z

Gruntfile.js

+		} );
+	} );
+
+	grunt.registerTask( 'browserslist:update', 'Update WordPress packages', function() {


@desrosj, how do you feel about running this command every time we refresh WordPress packages from Gutenberg?

I know you open tickets to document the changes for supported browsers.

@gziolo this just downloads the latest browserlist database, it doesn't affect the browsers supported by WordPress in any way.

I know it’s expected to run this command regularly (browserslist/browserslist#492). It's perfectly fine for trunk, but it might not be expected for older major WordPress releases when you want only to update packages to fix security vulnerabilities.

See also https://core.trac.wordpress.org/ticket/52331 as a reference. I know from experience that overall the goal is to minimize JS and CSS changes in minor releases so it doesn’t prime all caches for WordPress. Those changes to the list of browsers might impact the generated content of files in both CSS and JS when Babel polyfills or vendor prefixes get removed.

@desrosj opened https://core.trac.wordpress.org/ticket/55559 to document supported browsers in the 6.0 cycle with a note that the list shouldn’t change after RC1.

Hm that's a fair point. Let's make this opt-out then, and I'll add a CLI flag to enable it on demand.

gziolo

We need still to clarify the final strategy for browserslist, but it can be revised later. Everything looks good and we successfully tested it with WordPress 6.0 Beta 3 🎉

Let’s land this useful utility tool to make the backporting from Gutenberg easier. We also have plans how to improve keeping blocks in sync between Gutenberg and WordPress core.

adamziel · 2022-04-29T09:32:42Z

@gziolo I've made the browserlist command opt-in in 0801f0c. This PR is now up to you to merge as I'm not a core committer.

gziolo · 2022-04-29T11:44:06Z

I've made the browserlist command opt-in in 0801f0c. This PR is now up to you to merge as I'm not a core committer.

Excellent, I will commit while we work on backports today 👍🏻

gziolo · 2022-04-29T14:01:02Z

Committed with https://core.trac.wordpress.org/changeset/53311.

adamziel force-pushed the try/automate-backports branch from 58aaa15 to 9974030 Compare April 22, 2022 13:01

gziolo mentioned this pull request Apr 22, 2022

Automate backporting JS changes to wordpress-develop WordPress/gutenberg#40523

Closed

gziolo reviewed Apr 22, 2022

View reviewed changes

package.json Outdated Show resolved Hide resolved

adamziel force-pushed the try/automate-backports branch from 9974030 to 7403279 Compare April 22, 2022 13:29

adamziel marked this pull request as ready for review April 22, 2022 13:40

adamziel force-pushed the try/automate-backports branch 2 times, most recently from 9d9518e to a3d7ef4 Compare April 22, 2022 13:49

adamziel changed the title ~~Automate backporting JS packages~~ Automate updating JS packages Apr 26, 2022

adamziel mentioned this pull request Apr 26, 2022

Update @wordpress packages for WordPress 6.0 Beta 3 #2629

Closed

gziolo reviewed Apr 27, 2022

View reviewed changes

package.json Outdated Show resolved Hide resolved

gziolo reviewed Apr 27, 2022

View reviewed changes

tools/release/refresh-packages.js Outdated Show resolved Hide resolved

gziolo reviewed Apr 27, 2022

View reviewed changes

tools/release/refresh-packages.js Outdated Show resolved Hide resolved

adamziel force-pushed the try/automate-backports branch from b10c503 to a452b08 Compare April 27, 2022 09:45

adamziel added 8 commits April 27, 2022 11:46

Add the backport-js-packages task that updates all the JavaScript pac…

3b8b371

…kages to their required versions and runs the build process

Reword backporting to syncing gutenberg packages

f3e04c1

Remove ${ rootDir } – currentCwd should account for that

f8a809d

Add JSDoc

a799496

Move refreshDependencies call to the end of the file

99fcf90

Spawn sync-gutenberg-packages.js directly from Gruntfile

16fdd0a

Revert the actual package update

fb82b43

Rollback the actual package update

38eceed

adamziel force-pushed the try/automate-backports branch from 04ebbe8 to 38eceed Compare April 27, 2022 09:46

adamziel commented Apr 27, 2022

View reviewed changes

Revert unintended indent

b4fb64a

gziolo reviewed Apr 27, 2022

View reviewed changes

tools/release/sync-gutenberg-packages.js Outdated Show resolved Hide resolved

gziolo reviewed Apr 27, 2022

View reviewed changes

Gruntfile.js Outdated Show resolved Hide resolved

gziolo reviewed Apr 27, 2022

View reviewed changes

adamziel added 3 commits April 28, 2022 16:44

Rename refreshDependencies to main

76f566d

Add wp- prefix before tasks

a3e03c8

Document the browserlist:update task

9036fe7

gziolo approved these changes Apr 29, 2022

View reviewed changes

adamziel force-pushed the try/automate-backports branch from d3f20ad to d112751 Compare April 29, 2022 09:26

Make browserlist:update opt-in

0801f0c

adamziel force-pushed the try/automate-backports branch from d112751 to 0801f0c Compare April 29, 2022 09:31

adamziel mentioned this pull request Apr 29, 2022

Automatically sync stable blocks from Gutenberg to wordpress-develop on release #2647

Closed

gziolo closed this Apr 29, 2022

adamziel mentioned this pull request May 5, 2022

Regenerate PHP packages in the sync-gutenberg-packages task #2679

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Automate updating JS packages #2621

Automate updating JS packages #2621

adamziel commented Apr 22, 2022 •

edited by gziolo

Loading

gziolo commented Apr 22, 2022

ocean90 commented Apr 26, 2022

gziolo commented Apr 26, 2022

adamziel commented Apr 27, 2022

adamziel Apr 27, 2022

gziolo Apr 27, 2022

adamziel Apr 28, 2022 •

edited

Loading

gziolo Apr 29, 2022 •

edited

Loading

adamziel Apr 29, 2022

gziolo left a comment

adamziel commented Apr 29, 2022

gziolo commented Apr 29, 2022

gziolo commented Apr 29, 2022

Automate updating JS packages #2621

Automate updating JS packages #2621

Conversation

adamziel commented Apr 22, 2022 • edited by gziolo Loading

What problem does this PR solve?

Test plan

gziolo commented Apr 22, 2022

ocean90 commented Apr 26, 2022

gziolo commented Apr 26, 2022

adamziel commented Apr 27, 2022

adamziel Apr 27, 2022

Choose a reason for hiding this comment

gziolo Apr 27, 2022

Choose a reason for hiding this comment

adamziel Apr 28, 2022 • edited Loading

Choose a reason for hiding this comment

gziolo Apr 29, 2022 • edited Loading

Choose a reason for hiding this comment

adamziel Apr 29, 2022

Choose a reason for hiding this comment

gziolo left a comment

Choose a reason for hiding this comment

adamziel commented Apr 29, 2022

gziolo commented Apr 29, 2022

gziolo commented Apr 29, 2022

adamziel commented Apr 22, 2022 •

edited by gziolo

Loading

adamziel Apr 28, 2022 •

edited

Loading

gziolo Apr 29, 2022 •

edited

Loading