Editor Stats - track core global styles updates & saves

[Addison-Stavlo]

Changes proposed in this Pull Request

Adds tracking for global styles update and save events (wpcom_block_editor_global_styles_update and wpcom_block_editor_global_styles_save). Unfortunately, core Global Styles seems to update through useEntityProp (which in turn uses updateEntityRecord), which requires passing the entire content object of Global Styles and not only the items that have changed. This means if we want to track individual changes we need to compare the updated content object to the original content object.

Here we attempt to dissect the changes made to wp_global_styles and map them into events with the following properties:

• block_type - the block name if the change is to an individual block style or setting.
• section - the type of style being updated (color, typography, etc.)
• field - the property being changed (text, background, fontSize, fontFamily, etc.)
• field_value - the value of the property being changed. This is currently populated as reset if the field is removed. (is this better than just not having a field value in this case?)
• element_type - The element type the setting corresponds to. Currently I only see this as link, but given the structure of the content object I think its important we leave this property as case other items are added in this way (span, etc?).
• palette_slug - Slug of the color palette value that was updated.

Some examples of how these event properties populate in GS update events (note any global properties such as blog_id, editor_type, etc. are also included):

• Changing text color: { section: "color", field: "text", field_value: "var:preset|color|green" }
• Changing background color: { section: "color", field: "background", field_value: "var:preset|color|green" }
• Changing a typography setting: { section: "typography", field: "fontSize", field_value: "20px" }
• Returning to 'default' on a setting: { section: "typography", field: "fontSize", field_value: "reset" }
• Changing link text color: { element_type: "link", section: "color", field: "text", field_value: "var:preset|color|green" }
• Changing a color palette setting: { section: "color", field: "palette", field_value: "#3ec71a", palette_slug: "green"}

Performing any of these actions at the individual block level will also add the block_type property (ex block_type: "core/buttons")

Testing instructions

• Follow steps to enable tracking debugging at PCYsg-nrf-p2
• Open the site editor, change various global styles options and verify the wpcom_block_editor_global_styles_update tracks events follow the format noted above.
• Save the global styles changes and verify the wpcom_block_editor_global_styles_save tracks events follow the format above.

Related to #53410

[matticbot]

This PR modifies the release build for editing-toolkit

To test your changes on WordPress.com, run install-plugin.sh editing-toolkit add/track-site-editor-global-styles-updates on your sandbox.

To deploy your changes after merging, see the documentation: PCYsg-mMA-p2

[matticbot]

Link to Calypso live: https://calypso.live?image=registry.a8c.com/calypso/app:build-9030
Link to Jetpack Cloud live: https://calypso.live?image=registry.a8c.com/calypso/app:build-9030&env=jetpack

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[matticbot]

This PR modifies the release build for wpcom-block-editor

To test your changes on WordPress.com, run install-plugin.sh wpcom-block-editor add/track-site-editor-global-styles-updates on your sandbox.

To deploy your changes after merging, see the documentation: PCYsg-l4k-p2

[david-szabo97]

So far looking good! I was happy to see you moved on to a deep diff algorithm rather than typing out all the cases 😄

I think we should hook this up to saveEntityRecord instead of editEntityRecord. So we only track actually saved changes.

[Addison-Stavlo]

Updated, this should be working for both update and save events for global styles. 😅

[matticbot]

This PR modifies the release build for notifications

To test your changes on WordPress.com, run install-plugin.sh notifications add/track-site-editor-global-styles-updates on your sandbox.

To deploy your changes after merging, see the documentation: PCYsg-elI-p2

[Addison-Stavlo]

Tests for both update and save events are now in place.

[WunderBart]

Looks good from the E2E perspective! 🚀

[david-szabo97]

This is a huge PR 😄 E2E test files' lines are growing fast.

Works as expected ✅ Thanks for working on this!