Update @wordpress and React packages [MAILPOET-5102] #4786

costasovo · 2023-03-10T14:33:02Z

Description

This PR updates @wordpres/* and React packages. React update is included because some of the wordpress packages have already updated to React 18 and use the new functionality.

Note: After the update, there is the dev console for dev builds.

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

This is expected for now and will be addressed in a follow-up ticket. Switching to the new render API will turn on the automatic batching feature, and it may cause some issues.

Code review notes

N/A

QA notes

This changes a lot of JS libraries we build on, so potentially, this could cause issues in the whole plugin.
Five parts of the plugin are influenced the most because they heavily use these packages:

Automation - some visual changes are expected
Form Editor - some visual changes are expected
Plugin settings
Dynamic segments editor (the form for creating segments)
Settings panel of the coupon block - some small visual changes are expected

Linked PRs

https://github.com/mailpoet/mailpoet-premium/pull/692 - related changes in the premium plugin
mailpoet/wordpress-images#43 - update of the image for CI builds

Linked tickets

MAILPOET-5102

After-merge notes

This also updates the node version in the dev environment so ping devs to update the local node and rebuild the WordPress image in their dev env.

github-actions · 2023-03-10T14:33:25Z

Pull reviewers stats

Stats of the last 90 days for mailpoet:

User	Total reviews	Time to review	Total comments
MailPoet-Staff 🥇	1	57m	0
xknown 🥈	1	1h 36m	1
samnajian 🥉	16 ▀	6h 1m	26 ▀
brezocordero	8	7h 7m	7
johnolek	9	10h 29m	23 ▀
costasovo	17 ▀	14h 23m	36 ▀▀
NeosinneR	2	16h 7m	1
websupporter	14 ▀	16h 48m ▀	2
lysyjan	22 ▀	17h 18m ▀	9 ▀
triple0t	22 ▀	18h 19m ▀	31 ▀▀
alex-mailpoet	4	20h 5m ▀	0
JanJakes	21 ▀	1d 8m ▀	33 ▀▀
rodrigoprimo	10	1d 3h 43m ▀	11 ▀
veljkho	7	2d 1h 41m ▀▀	0
Aschepikov	102 ▀▀▀▀	3d 20h 54m ▀▀▀	0

JanJakes

Great job! 👏

I added a few small notes. I can verify these myself, given that you'll be AFK, @costasovo.
Thanks!

JanJakes · 2023-03-10T17:00:14Z

mailpoet/assets/js/src/automation/components/option-button/index.tsx

@@ -38,7 +38,7 @@ export function OptionButton({
      </Button>
      {slots.length > 0 &&
        slots.map(({ key, slot }) => (
-          <Fragment key={`slot-${key}`}>{slot}</Fragment>
+          <Fragment key={`slot-${key}`}>{slot()}</Fragment>


Oh, did this work before? I also wonder if there's a difference between {slot()} and <Slot>...

JanJakes · 2023-03-10T17:06:38Z

mailpoet/assets/js/src/automation/editor/components/header/document_actions.tsx

            }}
-            position="bottom center"


More of a note to self to check if the dropdown positioning in the UI somehow changed.

JanJakes · 2023-03-10T17:11:15Z

mailpoet/.babelrc

    ["@babel/preset-react", { "runtime": "automatic" }],
-    "@babel/preset-env"
+    "@babel/preset-env",
+    ["@babel/preset-typescript", { "allowDeclareFields": true }]


I wonder whether we should review the preset order in any other config (for any reason)...

JanJakes · 2023-03-10T17:12:53Z

mailpoet/assets/js/src/form_editor/components/sidebar/sidebar.tsx

 import { DefaultSidebar } from './default_sidebar';
 import { PlacementSettingsSidebar } from './placement_settings_sidebar';
 import { store } from '../../store';

+// workaround for block editor store useSelect


Was this later removed (moved to types/... as per 5638e31)? Need to check.

JanJakes · 2023-03-10T17:13:21Z

mailpoet/assets/js/src/form_editor/components/sidebar/default_sidebar.tsx

@@ -8,6 +12,14 @@ import { BlockSettings } from './block_settings.jsx';
 import { SidebarHeader } from './sidebar_header';
 import { store } from '../../store';

+// workaround for block editor store useSelect


Was this later removed (moved to types/... as per 5638e31)? Need to check.

Aschepikov · 2023-03-15T13:26:55Z

Console error when I am pressing on add a condition

and some tiny issues

In the automations incorrect tags list

On prod
Automations background is not blurred when an element is deleting

On prod
On the prod all lists in the trigger, add/remove tags and lists are open when you are adding those actions, on this branch they are closed, I am not sure how it is better

On prod
Text in some field names is in capslock

On prod
Name of the automation is blue on this branch

On prod
Issue with the + button in the form editor

On prod
No space in the size heading

On prod
Font family is bold on prod

On prod
Lists in the colors and message colors are different from the prod, and should be disabled when there is no chosen color
Different UI of buttons in the color settings

On prod
Different UI in the template settings

JanJakes · 2023-03-15T14:29:34Z

Thanks, @Aschepikov! Great catches 👏

Console error when I am pressing on add a condition

This is strange, I can't replicate it. Tried both with the premium plugin enabled and disabled. Did you have the correct premium plugin JS (caches and stuff) when you were testing that? I don't know how to reproduce it. On your screenshot, I don't see the "all of", "any of" switch, so I'd guess the premium plugin is not active, or the JS is not working. Should I check it on your website ❓

Issues:

In the automations incorrect tags list

Trying to play with the tags, but can't reproduce this. Do you have any steps to reproduce? Or should I check it on your website❓

Automations background is not blurred when an element is deleting

Indeed, it seems that Gutenberg doesn't create the blur anymore. That's fine, we'll follow whatever they do ✅

On the prod all lists in the trigger, add/remove tags and lists are open when you are adding those actions, on this branch they are closed, I am not sure how it is better

That was a bug in Gutenberg components, now it's fixed, which is desired (enabled left image, disabled right image) ✅

Text in some field names is in capslock

That seems to be the Gutenberg style for labels in the sidebar. We can see it in the post editor itself, as well as in the individual components, such as InputControl ✅

Name of the automation is blue on this branch

Good catch, this seems to differ from Gutenberg. I need to investigate 🐞

Issue with the + button in the form editor

That looks like a bug 🐞

No space in the size heading

Also a bug 🐞

Font family is bold on prod

That seems to be a style of the underlying Gutenberg component ✅

Lists in the colors and message colors are different from the prod, and should be disabled when there is no chosen color

This seems to work exactly as in the WP post editor for me, so I'd say it's OK ✅

Different UI of buttons in the color settings

Same here, looks like WP post editor, so I think OK ✅

Different UI in the template settings

We could fix this, but isn't the new UI actually better? It's probably more translation-friendly as well (more space). I'd keep it on two lines ✅

Aschepikov · 2023-03-15T14:56:06Z

@JanJakes For the first error you can check it here https://alex.qawp.net/wp-admin/admin.php?page=mailpoet-segments#/new-segment
I reinstalled plugins and cleaned all cache, I mentioned in slack that it is reproducible just on this site, maybe some problem with site

Aschepikov · 2023-03-15T15:03:20Z

With tags, I can't reproduce it after reinstalling too, maybe there was a lag with installing or a cache problem.
I agree with all your comments.

Just the 4 with capslock, there are some headings without capslock and I remember that there was a ticket with fixing some capslock headings in forms editors. Looks a lit bit strange for me this capslock, but yes I checked it in wp posts and they have it too.

JanJakes · 2023-03-15T15:32:53Z

@Aschepikov I fixed 5, 6, 7, and also 11, and another small issue.

Just the 4 with capslock, there are some headings without capslock and I remember that there was a ticket with fixing some capslock headings in forms editors. Looks a lit bit strange for me this capslock, but yes I checked it in wp posts and they have it too.

Headers in the panels are not uppercased. It's only labels that are uppercased.

Just need to check the first issue and all else should be fine.

JanJakes · 2023-03-15T16:03:46Z

@Aschepikov I also likely fixed number 1 — improved the code to avoid any race conditions or duplicates. I also found a new issue (that the first time the "add tag" select was focused, it showed no autocomplete) and fixed it too.

Most of the WordPress packages already upgraded to react 18 and use new hooks so we need to upgrade also the react libs. [MAILPOET-5102]

[MAILPOET-5102]

This commit fixes CSS which was preventing clicking the custom font select component and suppresses a deprecation warning by adding __nextUnconstrainedWidth property. [MAILPOET-5102]

[MAILPOET-5102]

After the updates some packages that we use in zip build don't work with node17. This commit updates dev env to the most recent node version. [MAILPOET-5102]

[MAILPOET-5102]

Both store name and store descriptor typings should work in all cases. [MAILPOET-5102]

[MAILPOET-5102]

…types [MAILPOET-5102]

[MAILPOET-5102]

This fixes the "fontSizeValue.startsWith is not a function" error. It seems that the font size picker now always expects strings, while the values from SETTINGS_DEFAULTS could be numbers, and we've been using numbers throughout our codebase as well. This also enables the usage of any font size units, such as em and rem. This may be related to: WordPress/gutenberg#44857 [MAILPOET-5102]

[MAILPOET-5102]

Aschepikov

Great job!

costasovo requested a review from JanJakes March 10, 2023 14:38

costasovo assigned JanJakes Mar 10, 2023

JanJakes reviewed Mar 10, 2023

View reviewed changes

JanJakes force-pushed the update-wordpress-deps-v3 branch 2 times, most recently from 050571d to a533f18 Compare March 14, 2023 08:37

JanJakes previously approved these changes Mar 14, 2023

View reviewed changes

JanJakes assigned veljkho and Aschepikov and unassigned JanJakes Mar 14, 2023

samnajian mentioned this pull request Mar 14, 2023

Use wordpress i 18 n in all of our codebase [MAILPOET-4908] #4627

Merged

JanJakes dismissed their stale review via 0e9218a March 15, 2023 15:30

costasovo and others added 12 commits March 15, 2023 17:13

Update WordPress JS dependencies and React

4a2a446

Most of the WordPress packages already upgraded to react 18 and use new hooks so we need to upgrade also the react libs. [MAILPOET-5102]

Fix Can't resolve 'process/browser'

9858263

[MAILPOET-5102]

Update Custom font selector toolbar in form editor

1ba1f4a

This commit fixes CSS which was preventing clicking the custom font select component and suppresses a deprecation warning by adding __nextUnconstrainedWidth property. [MAILPOET-5102]

Unify form editor styles panels labels with post editor labels

6ada8c4

[MAILPOET-5102]

Fix radio buttons groups to display inline in form editor

82a9134

[MAILPOET-5102]

Update classnames in automations editor

e589daf

[MAILPOET-5102]

Update dev env node version to 19

31f33d6

After the updates some packages that we use in zip build don't work with node17. This commit updates dev env to the most recent node version. [MAILPOET-5102]

Make @wordpress/data type definitions compatible with current version

25ac71f

[MAILPOET-5102]

Use new @wordpress/data types in automations

3b8f4b4

[MAILPOET-5102]

Use new @wordpress/data types in form editor

a742af4

[MAILPOET-5102]

Use new @wordpress/data types in homepage

db3569b

[MAILPOET-5102]

Use new @wordpress/data types in dynamic segments

b2e525e

[MAILPOET-5102]

JanJakes and others added 24 commits March 15, 2023 17:15

Add typings for all @wordpress/data store selection variants

683d07a

Both store name and store descriptor typings should work in all cases. [MAILPOET-5102]

Reintroduce store name as identifier in automation listing store

aac411d

[MAILPOET-5102]

Reintroduce store name as identifier in settings store

b537250

[MAILPOET-5102]

Reintroduce store name as identifier in form editor and templates stores

7b2a3ac

[MAILPOET-5102]

Reintroduce store name as identifier in dynamic segments store

0adfc06

[MAILPOET-5102]

Reintroduce store name as identifier in dynamic segments store

00fc4f2

[MAILPOET-5102]

Reintroduce store name as identifier in automation editor store

2130133

[MAILPOET-5102]

Add store types for @WordPress packages

feb3159

[MAILPOET-5102]

Fix types for @wordpress/notices

5fadec4

[MAILPOET-5102]

Fix type issues in dynamic segments

77353fb

[MAILPOET-5102]

Fix unknown properties type issues

3f46aab

[MAILPOET-5102]

Fix rest of Typescript issues

0e00a56

[MAILPOET-5102]

Alter export of modules from dynamic segments for premium and extend …

00b69fc

…types [MAILPOET-5102]

Remove unused OmitFirstArgs and OmitFirstArg type helpers

1386c22

[MAILPOET-5102]

Add extensible interface for automation editor store

e6357e6

[MAILPOET-5102]

Use relative imports that are resolvable for types in premium

ad85625

[MAILPOET-5102]

Render automation name dropdown centered

82c47f3

[MAILPOET-5102]

Remove forgotten workarounds

8c9e404

[MAILPOET-5102]

Simplify slot rendering in automations

e3b666c

[MAILPOET-5102]

Fix form editor block inserter styles after Gutenberg upgrade

9311d25

[MAILPOET-5102]

Fix form editor style settings styles after Gutenberg upgrade

eb3b475

[MAILPOET-5102]

Fix automation name button style

b78bbde

[MAILPOET-5102]

Fix form editor global styles font size picker

c2702e9

[MAILPOET-5102]

JanJakes force-pushed the update-wordpress-deps-v3 branch from 0e9218a to c2702e9 Compare March 15, 2023 16:16

Fix radio control option alignment

979bab3

[MAILPOET-5102]

Aschepikov approved these changes Mar 15, 2023

View reviewed changes

Aschepikov merged commit eb74b55 into trunk Mar 15, 2023
2 checks passed

Aschepikov deleted the update-wordpress-deps-v3 branch March 15, 2023 20:03

johnolek mentioned this pull request Mar 21, 2023

Add purchase date dynamic filter [MAILPOET-4986] #4760

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update @wordpress and React packages [MAILPOET-5102] #4786

Update @wordpress and React packages [MAILPOET-5102] #4786

costasovo commented Mar 10, 2023 •

edited

github-actions bot commented Mar 10, 2023

JanJakes left a comment

JanJakes Mar 10, 2023

JanJakes Mar 10, 2023

JanJakes Mar 10, 2023

JanJakes Mar 10, 2023

JanJakes Mar 10, 2023

Aschepikov commented Mar 15, 2023

JanJakes commented Mar 15, 2023

Aschepikov commented Mar 15, 2023 •

edited

Aschepikov commented Mar 15, 2023 •

edited

JanJakes commented Mar 15, 2023

JanJakes commented Mar 15, 2023

Aschepikov left a comment

Update @wordpress and React packages [MAILPOET-5102] #4786

Update @wordpress and React packages [MAILPOET-5102] #4786

Conversation

costasovo commented Mar 10, 2023 • edited

Description

Code review notes

QA notes

Linked PRs

Linked tickets

After-merge notes

github-actions bot commented Mar 10, 2023

Pull reviewers stats

JanJakes left a comment

Choose a reason for hiding this comment

JanJakes Mar 10, 2023

Choose a reason for hiding this comment

JanJakes Mar 10, 2023

Choose a reason for hiding this comment

JanJakes Mar 10, 2023

Choose a reason for hiding this comment

JanJakes Mar 10, 2023

Choose a reason for hiding this comment

JanJakes Mar 10, 2023

Choose a reason for hiding this comment

Aschepikov commented Mar 15, 2023

JanJakes commented Mar 15, 2023

Aschepikov commented Mar 15, 2023 • edited

Aschepikov commented Mar 15, 2023 • edited

JanJakes commented Mar 15, 2023

JanJakes commented Mar 15, 2023

Aschepikov left a comment

Choose a reason for hiding this comment

costasovo commented Mar 10, 2023 •

edited

Aschepikov commented Mar 15, 2023 •

edited

Aschepikov commented Mar 15, 2023 •

edited