The “Custom HTML” block slows down page editing

[VadymPogorelov]

Description

The traverseCSS() function is called to process editor styles when the page is loaded into the editor.
I’ve added some console output for demonstration: https://prnt.sc/I79b2TpavAyo and https://prnt.sc/ejkHSM4_0RMF
This usually happens once when the editor is loaded: https://prnt.sc/hNhP4_Zg1FBv

But if you add the “Custom HTML” block to the page: https://prnt.sc/jOiThPb8V4X1 then editing becomes very slow – any action on the page (moving the mouse, selecting a block, pressing any keys) occurs permanent recalculation of styles:
– right after adding the block https://prnt.sc/thSEYckbEpbE
– just moved the mouse over the page https://prnt.sc/CaSpzqu_5qyP

The test was conducted on the theme “2021” without activated plugins!

And now imagine a more designed theme with styles for 4-5 plugins and at least a couple of dozen blocks! Theme styles grow up to 400-500K, they take 1-1.2s to process and editing becomes hell!

Note the duration of the ‘focusin’ and ‘keydown’ events and the execution time of the transform_styles_transformStyles() function: https://prnt.sc/FW_o5k2cwvc1

Step-by-step reproduction instructions

1. WordPress 6.0 is installed
2. Theme "Twentytwenty one" is activated
3. No plugins are activated
4. Create a new page or post
5. Insert any number of blocks
6. Now insert the "Custom HTML" block
7. After that, any actions on the page (moving the mouse, pressing keys) are accompanied by a constant recalculation of all styles connected to the editor! Sometimes several times.

Screenshots, screen recording, code snippet

No response

Environment info

WordPress 6.0
Browsers Mozilla FireFox and Google Chrome
Desktop with Windows 10

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes