Skip to content

Conversation

@gziolo
Copy link
Member

@gziolo gziolo commented Jan 18, 2021

Description

Related: ItsJonQ/g2#233.

This PR tries to update dependencies shared with G2 components to their latest versions.

{
	"@emotion/core": "10.1.1",
	"downshift": "6.0.15",
	"react-resize-aware": "3.1.0",
	"react-use-gesture": "9.0.0",
	"rtlcss": "2.6.2",
	"tinycolor2": "1.4.2",
}

The idea is that we use the same versions in @wp-g2/* packages so we don't use 2 copies of the same packages in Gutenberg.

How has this been tested?

I'm waiting for CI to verify if there are any breaking changes. I hope there none :)

Types of changes

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@gziolo gziolo added [Package] Components /packages/components [Feature] Component System WordPress component system labels Jan 18, 2021
@gziolo gziolo requested a review from ItsJonQ January 18, 2021 12:07
@gziolo gziolo self-assigned this Jan 18, 2021
@gziolo gziolo requested a review from sarayourfriend January 18, 2021 12:08
@gziolo
Copy link
Member Author

gziolo commented Jan 18, 2021

It looks liek @emotion/core has quite fundamental changes, I will downgrade to the previous version.

@gziolo
Copy link
Member Author

gziolo commented Jan 18, 2021

rtlcss v3 has too many breaking changes, it requires PostCSS 8. Downgrading to the previous major version.

@github-actions
Copy link

github-actions bot commented Jan 18, 2021

Size Change: -17 kB (-1%)

Total Size: 1.39 MB

Filename Size Change
build/annotations/index.js 3.77 kB +1 B (0%)
build/api-fetch/index.js 3.4 kB +1 B (0%)
build/autop/index.js 2.84 kB +13 B (0%)
build/block-directory/index.js 9.08 kB +5 B (0%)
build/block-editor/index.js 122 kB -9 B (0%)
build/block-library/index.js 143 kB +105 B (0%)
build/block-serialization-default-parser/index.js 1.88 kB -1 B (0%)
build/blocks/index.js 48.3 kB +64 B (0%)
build/components/index.js 274 kB -17.4 kB (-6%)
build/compose/index.js 11.2 kB +3 B (0%)
build/core-data/index.js 15.2 kB +57 B (0%)
build/data-controls/index.js 830 B +3 B (0%)
build/data/index.js 8.97 kB -1 B (0%)
build/dom/index.js 4.93 kB -5 B (0%)
build/edit-navigation/index.js 11.1 kB +14 B (0%)
build/edit-post/index.js 306 kB +41 B (0%)
build/edit-site/index.js 24 kB +36 B (0%)
build/edit-widgets/index.js 23.6 kB +36 B (0%)
build/editor/index.js 41.8 kB +34 B (0%)
build/element/index.js 4.62 kB +9 B (0%)
build/format-library/index.js 6.77 kB +19 B (0%)
build/hooks/index.js 2.27 kB -2 B (0%)
build/html-entities/index.js 623 B +1 B (0%)
build/keyboard-shortcuts/index.js 2.53 kB +2 B (0%)
build/keycodes/index.js 1.93 kB -5 B (0%)
build/list-reusable-blocks/index.js 3.14 kB -1 B (0%)
build/media-utils/index.js 5.32 kB +11 B (0%)
build/notices/index.js 1.85 kB -4 B (0%)
build/nux/index.js 3.41 kB +4 B (0%)
build/plugins/index.js 2.54 kB -3 B (0%)
build/priority-queue/index.js 789 B -2 B (0%)
build/redux-routine/index.js 2.84 kB +5 B (0%)
build/reusable-blocks/index.js 2.92 kB +1 B (0%)
build/rich-text/index.js 13.4 kB +49 B (0%)
build/server-side-render/index.js 2.76 kB -7 B (0%)
build/shortcode/index.js 1.7 kB -1 B (0%)
build/url/index.js 3.02 kB -2 B (0%)
build/viewport/index.js 1.86 kB -2 B (0%)
build/wordcount/index.js 1.22 kB -1 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/blob/index.js 665 B 0 B
build/block-directory/style-rtl.css 1.01 kB 0 B
build/block-directory/style.css 1.01 kB 0 B
build/block-editor/style-rtl.css 11.9 kB 0 B
build/block-editor/style.css 11.9 kB 0 B
build/block-library/blocks/archives/editor-rtl.css 196 B 0 B
build/block-library/blocks/archives/editor.css 196 B 0 B
build/block-library/blocks/audio/editor-rtl.css 194 B 0 B
build/block-library/blocks/audio/editor.css 194 B 0 B
build/block-library/blocks/audio/style-rtl.css 225 B 0 B
build/block-library/blocks/audio/style.css 225 B 0 B
build/block-library/blocks/block/editor-rtl.css 283 B 0 B
build/block-library/blocks/block/editor.css 283 B 0 B
build/block-library/blocks/button/editor-rtl.css 576 B 0 B
build/block-library/blocks/button/editor.css 577 B 0 B
build/block-library/blocks/button/style-rtl.css 552 B 0 B
build/block-library/blocks/button/style.css 552 B 0 B
build/block-library/blocks/buttons/editor-rtl.css 345 B 0 B
build/block-library/blocks/buttons/editor.css 346 B 0 B
build/block-library/blocks/buttons/style-rtl.css 419 B 0 B
build/block-library/blocks/buttons/style.css 419 B 0 B
build/block-library/blocks/calendar/style-rtl.css 319 B 0 B
build/block-library/blocks/calendar/style.css 319 B 0 B
build/block-library/blocks/categories/editor-rtl.css 210 B 0 B
build/block-library/blocks/categories/editor.css 209 B 0 B
build/block-library/blocks/categories/style-rtl.css 208 B 0 B
build/block-library/blocks/categories/style.css 208 B 0 B
build/block-library/blocks/code/style-rtl.css 216 B 0 B
build/block-library/blocks/code/style.css 216 B 0 B
build/block-library/blocks/columns/editor-rtl.css 300 B 0 B
build/block-library/blocks/columns/editor.css 299 B 0 B
build/block-library/blocks/columns/style-rtl.css 529 B 0 B
build/block-library/blocks/columns/style.css 528 B 0 B
build/block-library/blocks/cover/editor-rtl.css 524 B 0 B
build/block-library/blocks/cover/editor.css 522 B 0 B
build/block-library/blocks/cover/style-rtl.css 1.3 kB 0 B
build/block-library/blocks/cover/style.css 1.3 kB 0 B
build/block-library/blocks/embed/editor-rtl.css 594 B 0 B
build/block-library/blocks/embed/editor.css 595 B 0 B
build/block-library/blocks/embed/style-rtl.css 489 B 0 B
build/block-library/blocks/embed/style.css 489 B 0 B
build/block-library/blocks/file/editor-rtl.css 314 B 0 B
build/block-library/blocks/file/editor.css 313 B 0 B
build/block-library/blocks/file/style-rtl.css 352 B 0 B
build/block-library/blocks/file/style.css 352 B 0 B
build/block-library/blocks/freeform/editor-rtl.css 2.55 kB 0 B
build/block-library/blocks/freeform/editor.css 2.55 kB 0 B
build/block-library/blocks/gallery/editor-rtl.css 783 B 0 B
build/block-library/blocks/gallery/editor.css 783 B 0 B
build/block-library/blocks/gallery/style-rtl.css 1.17 kB 0 B
build/block-library/blocks/gallery/style.css 1.17 kB 0 B
build/block-library/blocks/group/editor-rtl.css 433 B 0 B
build/block-library/blocks/group/editor.css 432 B 0 B
build/block-library/blocks/group/style-rtl.css 190 B 0 B
build/block-library/blocks/group/style.css 190 B 0 B
build/block-library/blocks/heading/editor-rtl.css 248 B 0 B
build/block-library/blocks/heading/editor.css 248 B 0 B
build/block-library/blocks/heading/style-rtl.css 212 B 0 B
build/block-library/blocks/heading/style.css 212 B 0 B
build/block-library/blocks/html/editor-rtl.css 384 B 0 B
build/block-library/blocks/html/editor.css 385 B 0 B
build/block-library/blocks/image/editor-rtl.css 801 B 0 B
build/block-library/blocks/image/editor.css 800 B 0 B
build/block-library/blocks/image/style-rtl.css 569 B 0 B
build/block-library/blocks/image/style.css 570 B 0 B
build/block-library/blocks/latest-comments/editor-rtl.css 277 B 0 B
build/block-library/blocks/latest-comments/editor.css 275 B 0 B
build/block-library/blocks/latest-comments/style-rtl.css 382 B 0 B
build/block-library/blocks/latest-comments/style.css 382 B 0 B
build/block-library/blocks/latest-posts/editor-rtl.css 254 B 0 B
build/block-library/blocks/latest-posts/editor.css 254 B 0 B
build/block-library/blocks/latest-posts/style-rtl.css 634 B 0 B
build/block-library/blocks/latest-posts/style.css 634 B 0 B
build/block-library/blocks/list/editor-rtl.css 203 B 0 B
build/block-library/blocks/list/editor.css 203 B 0 B
build/block-library/blocks/list/style-rtl.css 201 B 0 B
build/block-library/blocks/list/style.css 201 B 0 B
build/block-library/blocks/media-text/editor-rtl.css 311 B 0 B
build/block-library/blocks/media-text/editor.css 311 B 0 B
build/block-library/blocks/media-text/style-rtl.css 642 B 0 B
build/block-library/blocks/media-text/style.css 640 B 0 B
build/block-library/blocks/more/editor-rtl.css 545 B 0 B
build/block-library/blocks/more/editor.css 545 B 0 B
build/block-library/blocks/navigation-link/editor-rtl.css 503 B 0 B
build/block-library/blocks/navigation-link/editor.css 504 B 0 B
build/block-library/blocks/navigation-link/style-rtl.css 805 B 0 B
build/block-library/blocks/navigation-link/style.css 803 B 0 B
build/block-library/blocks/navigation/editor-rtl.css 1.49 kB 0 B
build/block-library/blocks/navigation/editor.css 1.48 kB 0 B
build/block-library/blocks/navigation/style-rtl.css 289 B 0 B
build/block-library/blocks/navigation/style.css 289 B 0 B
build/block-library/blocks/nextpage/editor-rtl.css 507 B 0 B
build/block-library/blocks/nextpage/editor.css 507 B 0 B
build/block-library/blocks/paragraph/editor-rtl.css 236 B 0 B
build/block-library/blocks/paragraph/editor.css 236 B 0 B
build/block-library/blocks/paragraph/style-rtl.css 392 B 0 B
build/block-library/blocks/paragraph/style.css 392 B 0 B
build/block-library/blocks/post-author/editor-rtl.css 329 B 0 B
build/block-library/blocks/post-author/editor.css 329 B 0 B
build/block-library/blocks/post-author/style-rtl.css 303 B 0 B
build/block-library/blocks/post-author/style.css 303 B 0 B
build/block-library/blocks/post-comments-form/style-rtl.css 358 B 0 B
build/block-library/blocks/post-comments-form/style.css 358 B 0 B
build/block-library/blocks/post-content/editor-rtl.css 262 B 0 B
build/block-library/blocks/post-content/editor.css 262 B 0 B
build/block-library/blocks/post-excerpt/editor-rtl.css 206 B 0 B
build/block-library/blocks/post-excerpt/editor.css 206 B 0 B
build/block-library/blocks/post-featured-image/editor-rtl.css 453 B 0 B
build/block-library/blocks/post-featured-image/editor.css 453 B 0 B
build/block-library/blocks/post-featured-image/style-rtl.css 223 B 0 B
build/block-library/blocks/post-featured-image/style.css 223 B 0 B
build/block-library/blocks/preformatted/style-rtl.css 193 B 0 B
build/block-library/blocks/preformatted/style.css 193 B 0 B
build/block-library/blocks/pullquote/editor-rtl.css 304 B 0 B
build/block-library/blocks/pullquote/editor.css 304 B 0 B
build/block-library/blocks/pullquote/style-rtl.css 428 B 0 B
build/block-library/blocks/pullquote/style.css 428 B 0 B
build/block-library/blocks/query-loop/editor-rtl.css 217 B 0 B
build/block-library/blocks/query-loop/editor.css 216 B 0 B
build/block-library/blocks/query-loop/style-rtl.css 427 B 0 B
build/block-library/blocks/query-loop/style.css 429 B 0 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 243 B 0 B
build/block-library/blocks/query-pagination-numbers/editor.css 240 B 0 B
build/block-library/blocks/query-pagination/editor-rtl.css 390 B 0 B
build/block-library/blocks/query-pagination/editor.css 379 B 0 B
build/block-library/blocks/query-pagination/style-rtl.css 288 B 0 B
build/block-library/blocks/query-pagination/style.css 288 B 0 B
build/block-library/blocks/query/editor-rtl.css 279 B 0 B
build/block-library/blocks/query/editor.css 279 B 0 B
build/block-library/blocks/quote/editor-rtl.css 195 B 0 B
build/block-library/blocks/quote/editor.css 195 B 0 B
build/block-library/blocks/quote/style-rtl.css 284 B 0 B
build/block-library/blocks/quote/style.css 285 B 0 B
build/block-library/blocks/rss/editor-rtl.css 307 B 0 B
build/block-library/blocks/rss/editor.css 309 B 0 B
build/block-library/blocks/rss/style-rtl.css 394 B 0 B
build/block-library/blocks/rss/style.css 393 B 0 B
build/block-library/blocks/search/editor-rtl.css 285 B 0 B
build/block-library/blocks/search/editor.css 285 B 0 B
build/block-library/blocks/search/style-rtl.css 454 B 0 B
build/block-library/blocks/search/style.css 456 B 0 B
build/block-library/blocks/separator/editor-rtl.css 229 B 0 B
build/block-library/blocks/separator/editor.css 229 B 0 B
build/block-library/blocks/separator/style-rtl.css 352 B 0 B
build/block-library/blocks/separator/style.css 352 B 0 B
build/block-library/blocks/shortcode/editor-rtl.css 603 B 0 B
build/block-library/blocks/shortcode/editor.css 603 B 0 B
build/block-library/blocks/site-logo/editor-rtl.css 321 B 0 B
build/block-library/blocks/site-logo/editor.css 321 B 0 B
build/block-library/blocks/site-logo/style-rtl.css 238 B 0 B
build/block-library/blocks/site-logo/style.css 238 B 0 B
build/block-library/blocks/social-link/editor-rtl.css 283 B 0 B
build/block-library/blocks/social-link/editor.css 283 B 0 B
build/block-library/blocks/social-links/editor-rtl.css 811 B 0 B
build/block-library/blocks/social-links/editor.css 810 B 0 B
build/block-library/blocks/social-links/style-rtl.css 1.48 kB 0 B
build/block-library/blocks/social-links/style.css 1.48 kB 0 B
build/block-library/blocks/spacer/editor-rtl.css 416 B 0 B
build/block-library/blocks/spacer/editor.css 416 B 0 B
build/block-library/blocks/spacer/style-rtl.css 184 B 0 B
build/block-library/blocks/spacer/style.css 184 B 0 B
build/block-library/blocks/subhead/editor-rtl.css 223 B 0 B
build/block-library/blocks/subhead/editor.css 223 B 0 B
build/block-library/blocks/subhead/style-rtl.css 210 B 0 B
build/block-library/blocks/subhead/style.css 210 B 0 B
build/block-library/blocks/table/editor-rtl.css 593 B 0 B
build/block-library/blocks/table/editor.css 593 B 0 B
build/block-library/blocks/table/style-rtl.css 501 B 0 B
build/block-library/blocks/table/style.css 501 B 0 B
build/block-library/blocks/tag-cloud/editor-rtl.css 237 B 0 B
build/block-library/blocks/tag-cloud/editor.css 235 B 0 B
build/block-library/blocks/tag-cloud/style-rtl.css 221 B 0 B
build/block-library/blocks/tag-cloud/style.css 221 B 0 B
build/block-library/blocks/template-part/editor-rtl.css 794 B 0 B
build/block-library/blocks/template-part/editor.css 794 B 0 B
build/block-library/blocks/text-columns/editor-rtl.css 220 B 0 B
build/block-library/blocks/text-columns/editor.css 220 B 0 B
build/block-library/blocks/text-columns/style-rtl.css 283 B 0 B
build/block-library/blocks/text-columns/style.css 283 B 0 B
build/block-library/blocks/verse/editor-rtl.css 194 B 0 B
build/block-library/blocks/verse/editor.css 194 B 0 B
build/block-library/blocks/verse/style-rtl.css 215 B 0 B
build/block-library/blocks/verse/style.css 215 B 0 B
build/block-library/blocks/video/editor-rtl.css 617 B 0 B
build/block-library/blocks/video/editor.css 617 B 0 B
build/block-library/blocks/video/style-rtl.css 303 B 0 B
build/block-library/blocks/video/style.css 304 B 0 B
build/block-library/common-rtl.css 1.01 kB 0 B
build/block-library/common.css 1.01 kB 0 B
build/block-library/editor-rtl.css 9.2 kB 0 B
build/block-library/editor.css 9.18 kB 0 B
build/block-library/style-rtl.css 8.64 kB 0 B
build/block-library/style.css 8.65 kB 0 B
build/block-library/theme-rtl.css 860 B 0 B
build/block-library/theme.css 860 B 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/components/style-rtl.css 15.5 kB 0 B
build/components/style.css 15.5 kB 0 B
build/date/index.js 31.8 kB 0 B
build/deprecated/index.js 769 B 0 B
build/dom-ready/index.js 571 B 0 B
build/edit-navigation/style-rtl.css 938 B 0 B
build/edit-navigation/style.css 944 B 0 B
build/edit-post/style-rtl.css 6.51 kB 0 B
build/edit-post/style.css 6.5 kB 0 B
build/edit-site/style-rtl.css 4.01 kB 0 B
build/edit-site/style.css 4.01 kB 0 B
build/edit-widgets/style-rtl.css 3.17 kB 0 B
build/edit-widgets/style.css 3.18 kB 0 B
build/editor/editor-styles-rtl.css 543 B 0 B
build/editor/editor-styles.css 545 B 0 B
build/editor/style-rtl.css 3.89 kB 0 B
build/editor/style.css 3.89 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/style-rtl.css 637 B 0 B
build/format-library/style.css 639 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 699 B 0 B
build/list-reusable-blocks/style-rtl.css 629 B 0 B
build/list-reusable-blocks/style.css 628 B 0 B
build/nux/style-rtl.css 731 B 0 B
build/nux/style.css 727 B 0 B
build/primitives/index.js 1.42 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/warning/index.js 1.14 kB 0 B

compressed-size-action

@gziolo
Copy link
Member Author

gziolo commented Jan 18, 2021

I still some unit tests failing:

  ● PanelBody › toggling › should toggle when clicking header
9155

9156
    TypeError: Cannot add property current, object is not extensible
9157

9158
      115 | 
9159
      116 | 		it( 'should toggle when clicking header', () => {
9160
    > 117 | 			const { container } = render(
9161
          | 			                      ^
9162
      118 | 				<PanelBody title="Panel" initialOpen={ false }>
9163
      119 | 					<div>Content</div>
9164
      120 | 				</PanelBody>
9165

9166
      at forEach (node_modules/react-merge-refs/src/index.tsx:11:10)
9167
          at Array.forEach (<anonymous>)
9168
      at node_modules/react-merge-refs/src/index.tsx:7:10
9169
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:188:14)

It looks like an issue with react-merge-refs or tests need to be updated.

@ItsJonQ
Copy link

ItsJonQ commented Jan 18, 2021

@gziolo Haii! Just a heads up, I merged in your G2 Component dependency update and made a release:
https://github.com/ItsJonQ/g2/releases/tag/v0.0.136

@gziolo gziolo changed the title Components: Update dependncies shared with G2 components Components: Update dependencies shared with G2 components Jan 18, 2021
@gziolo gziolo force-pushed the update/upgrade-dependencies-g2-components branch from 7df9ec3 to 9cfdbb1 Compare January 19, 2021 07:07
@gziolo gziolo marked this pull request as ready for review January 19, 2021 07:07
@gziolo
Copy link
Member Author

gziolo commented Jan 19, 2021

I also downgraded react-merge-refs as it was failing with unit tests for <PanelBody /> component. I couldn't figure out while it suddenly started to throw errors. I found out also that @ellatrix is working on a useMergeRefs hook (#27768) that is eventually going to replace this tiny library so it doesn't make sense to waste time on debugging.

@gziolo gziolo mentioned this pull request Jan 19, 2021
6 tasks
@gziolo
Copy link
Member Author

gziolo commented Jan 19, 2021

@ItsJonQ, I'm afraid that drag gestures no longer work on InputField.

It works differently at:
https://wordpress.github.io/gutenberg/?path=/story/components-numbercontrol--default

and in the local instance. They had two major version bumps:

Let me know if you have an idea how to fix it. Otherwise, this PR is good to go.

@ItsJonQ
Copy link

ItsJonQ commented Jan 20, 2021

@gziolo Thanks for the heads up!

I'll take a look at the drag gestures.

@ItsJonQ
Copy link

ItsJonQ commented Jan 20, 2021

@gziolo I just made an update for the drag gestures 🤞

@gziolo gziolo force-pushed the update/upgrade-dependencies-g2-components branch from 70558fa to bf9f9e5 Compare January 21, 2021 09:55
@gziolo gziolo merged commit aaeae66 into master Jan 21, 2021
@gziolo gziolo deleted the update/upgrade-dependencies-g2-components branch January 21, 2021 12:31
@github-actions github-actions bot added this to the Gutenberg 9.9 milestone Jan 21, 2021
@gziolo
Copy link
Member Author

gziolo commented Jan 21, 2021

This PR removed 17kB from the bundle size

Screen Shot 2021-01-21 at 13 31 57

It looks like we are using two copies of Reakit. I opened ItsJonQ/g2#237 to address it on the @wp-g2 side first.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Feature] Component System WordPress component system [Package] Components /packages/components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants