Performance: Remove `is-typing` root class #32567

gwwar · 2021-06-09T22:08:40Z

When we start typing in a block, the is-typing class is added to the root element. Doing so triggers a re-render of all children, even if child props do not change. This is a PR to see what performance impact this has if we do not update the class on the root element.

I re-ran the performance job multiple times, each showing around a 100ms difference for maxType. (Click into the performance test, (eg https://github.com/WordPress/gutenberg/runs/2788795658 ) and look at "compare performance with trunk logs".

What `is-typing` is used for

Currently there's only one piece of functionality that uses this class. This is only used in the site-editor. We apply a hover outline to help find blocks, but remove this when folks begin typing.

before.mp4

There are two potential approaches so far.

What's current in this branch adds a remove-outline class on the active block that's being typed when isOutline mode is active. We shouldn't see any behavior changes in the site-editor.

Alternatively in b62f8b4 I use :focus-within to achieve a similar effect. One main difference is that the outline is removed on input focus, rather than typing. ~~An alternative would be to only apply the is-typing class when outlineMode is enabled to avoid re-renders in other block editors.~~ cc @jasmussen if you think the behavior here is okay.

Performance Runs

a005470

>> post-editor

┌──────────────────┬──────────────────────────────────────────┬──────────────┐
│     (index)      │ 9e8e45d775216b917fc62dfc56163c01cdf6cc89 │    trunk     │
├──────────────────┼──────────────────────────────────────────┼──────────────┤
│       load       │               '7580.4 ms'                │ '7577.4 ms'  │
│       type       │                '46.55 ms'                │  '45.7 ms'   │
│     minType      │                '39.28 ms'                │  '37.84 ms'  │
│     maxType      │               '343.91 ms'                │ '441.54 ms'  │
│      focus       │               '115.92 ms'                │ '113.08 ms'  │
│     minFocus     │                '66.86 ms'                │  '68.43 ms'  │
│     maxFocus     │               '336.85 ms'                │ '334.52 ms'  │
│   inserterOpen   │               '597.13 ms'                │ '612.08 ms'  │
│ minInserterOpen  │               '522.71 ms'                │ '518.33 ms'  │
│ maxInserterOpen  │               '1026.31 ms'               │ '1062.56 ms' │
│  inserterHover   │                '28.39 ms'                │  '27.47 ms'  │
│ minInserterHover │                '24.15 ms'                │  '21.84 ms'  │
│ maxInserterHover │                '35.65 ms'                │  '38.27 ms'  │
└──────────────────┴──────────────────────────────────────────┴──────────────┘

>> site-editor

┌─────────┬──────────────────────────────────────────┬─────────────┐
│ (index) │ 9e8e45d775216b917fc62dfc56163c01cdf6cc89 │    trunk    │
├─────────┼──────────────────────────────────────────┼─────────────┤
│  load   │               '6370.33 ms'               │  '6392 ms'  │
│  type   │                '50.76 ms'                │  '55.3 ms'  │
│ minType │                '42.23 ms'                │  '46.4 ms'  │
│ maxType │                '79.75 ms'                │ '176.73 ms' │
└─────────┴──────────────────────────────────────────┴─────────────┘

7069153

┌──────────────────┬──────────────────────────────────────────┬──────────────┐
│     (index)      │ e1067864ac01510fc827d1d471d8d935220a176d │    trunk     │
├──────────────────┼──────────────────────────────────────────┼──────────────┤
│       load       │               '7263.2 ms'                │  '7206 ms'   │
│       type       │                '39.33 ms'                │  '38.79 ms'  │
│     minType      │                '31.6 ms'                 │  '30.49 ms'  │
│     maxType      │               '309.43 ms'                │ '410.15 ms'  │
│      focus       │                '99.95 ms'                │  '95.42 ms'  │
│     minFocus     │                '61.28 ms'                │  '57.71 ms'  │
│     maxFocus     │               '318.49 ms'                │ '319.61 ms'  │
│   inserterOpen   │               '570.22 ms'                │ '577.28 ms'  │
│ minInserterOpen  │               '503.79 ms'                │ '503.34 ms'  │
│ maxInserterOpen  │                '990.9 ms'                │ '1011.72 ms' │
│  inserterHover   │                '24.5 ms'                 │  '23.48 ms'  │
│ minInserterHover │                '20.02 ms'                │  '19.78 ms'  │
│ maxInserterHover │                '36.23 ms'                │  '32.86 ms'  │
└──────────────────┴──────────────────────────────────────────┴──────────────┘

Run 2

┌──────────────────┬──────────────────────────────────────────┬─────────────┐
│     (index)      │ e1067864ac01510fc827d1d471d8d935220a176d │    trunk    │
├──────────────────┼──────────────────────────────────────────┼─────────────┤
│       load       │                '5583 ms'                 │ '5920.8 ms' │
│       type       │                '35.21 ms'                │ '35.59 ms'  │
│     minType      │                '30.07 ms'                │ '29.25 ms'  │
│     maxType      │                '239.2 ms'                │ '346.12 ms' │
│      focus       │                '86.52 ms'                │ '91.52 ms'  │
│     minFocus     │                '53.87 ms'                │ '57.07 ms'  │
│     maxFocus     │               '270.02 ms'                │ '267.54 ms' │
│   inserterOpen   │               '455.57 ms'                │ '482.83 ms' │
│ minInserterOpen  │               '392.18 ms'                │ '420.32 ms' │
│ maxInserterOpen  │                 '764 ms'                 │ '839.14 ms' │
│  inserterHover   │                '24.43 ms'                │ '21.66 ms'  │
│ minInserterHover │                '20.43 ms'                │ '17.93 ms'  │
│ maxInserterHover │                '33.14 ms'                │ '28.04 ms'  │
└──────────────────┴──────────────────────────────────────────┴─────────────┘

Run 3

┌──────────────────┬──────────────────────────────────────────┬──────────────┐
│     (index)      │ e1067864ac01510fc827d1d471d8d935220a176d │    trunk     │
├──────────────────┼──────────────────────────────────────────┼──────────────┤
│       load       │               '8437.4 ms'                │  '8439 ms'   │
│       type       │                '41.6 ms'                 │  '43.29 ms'  │
│     minType      │                '33.58 ms'                │  '33.47 ms'  │
│     maxType      │               '409.51 ms'                │ '553.71 ms'  │
│      focus       │               '116.96 ms'                │ '114.46 ms'  │
│     minFocus     │                '60.11 ms'                │  '62.07 ms'  │
│     maxFocus     │               '409.59 ms'                │ '435.73 ms'  │
│   inserterOpen   │               '725.56 ms'                │ '737.36 ms'  │
│ minInserterOpen  │               '635.77 ms'                │ '646.38 ms'  │
│ maxInserterOpen  │               '1236.41 ms'               │ '1280.89 ms' │
│  inserterHover   │                '23.06 ms'                │  '21.93 ms'  │
│ minInserterHover │                '17.23 ms'                │  '16.7 ms'   │
│ maxInserterHover │                '37.02 ms'                │  '36.99 ms'  │
└──────────────────┴──────────────────────────────────────────┴──────────────┘

b62f8b4 Run 4

┌──────────────────┬──────────────────────────────────────────┬─────────────┐
│     (index)      │ f34eddeddfa79e6541833756f684a8cf990239e1 │    trunk    │
├──────────────────┼──────────────────────────────────────────┼─────────────┤
│       load       │               '6465.2 ms'                │ '6094.6 ms' │
│       type       │                '38.37 ms'                │ '37.71 ms'  │
│     minType      │                '30.21 ms'                │ '27.29 ms'  │
│     maxType      │               '276.73 ms'                │ '374.8 ms'  │
│      focus       │                '93.88 ms'                │ '86.98 ms'  │
│     minFocus     │                '54.68 ms'                │ '56.57 ms'  │
│     maxFocus     │                '290.9 ms'                │ '273.71 ms' │
│   inserterOpen   │               '530.31 ms'                │ '523.58 ms' │
│ minInserterOpen  │                '447.1 ms'                │ '445.06 ms' │
│ maxInserterOpen  │               '921.96 ms'                │ '906.93 ms' │
│  inserterHover   │                '23.24 ms'                │  '22.6 ms'  │
│ minInserterHover │                '18.73 ms'                │ '18.64 ms'  │
│ maxInserterHover │                '31.7 ms'                 │ '30.88 ms'  │
└──────────────────┴──────────────────────────────────────────┴─────────────┘

Testing Instructions

In the site editor, try selecting and editing inputs. Do we see any regressions with selection/outline behavior?
In the post editor, verify that the is-typing class is not applied when we type. A block with a class of remove-outline should not appear either.
In the site editor verify that only one block has remove-outline when typing
In a post with many blocks (an easy one to try is adding a lot of buttons) try typing. Typing speed should feel less delayed than editing the same post in trunk.

github-actions · 2021-06-09T22:16:10Z

Size Change: +777 B (0%)

Total Size: 1.03 MB

Filename	Size	Change
`build/block-editor/style-rtl.css`	13.3 kB	+386 B (+3%)
`build/block-editor/style.css`	13.3 kB	+391 B (+3%)
`build/block-library/editor-rtl.css`	9.98 kB	+1 B (0%)
`build/block-library/editor.css`	9.97 kB	-1 B (0%)

ℹ️

View Unchanged

Filename	Size	Change
`build/a11y/index.min.js`	1.12 kB	0 B
`build/annotations/index.min.js`	2.93 kB	0 B
`build/api-fetch/index.min.js`	2.42 kB	0 B
`build/autop/index.min.js`	2.28 kB	0 B
`build/blob/index.min.js`	672 B	0 B
`build/block-directory/index.min.js`	6.61 kB	0 B
`build/block-directory/style-rtl.css`	989 B	0 B
`build/block-directory/style.css`	990 B	0 B
`build/block-editor/index.min.js`	118 kB	0 B
`build/block-library/blocks/archives/editor-rtl.css`	61 B	0 B
`build/block-library/blocks/archives/editor.css`	60 B	0 B
`build/block-library/blocks/archives/style-rtl.css`	65 B	0 B
`build/block-library/blocks/archives/style.css`	65 B	0 B
`build/block-library/blocks/audio/editor-rtl.css`	58 B	0 B
`build/block-library/blocks/audio/editor.css`	58 B	0 B
`build/block-library/blocks/audio/style-rtl.css`	112 B	0 B
`build/block-library/blocks/audio/style.css`	112 B	0 B
`build/block-library/blocks/block/editor-rtl.css`	161 B	0 B
`build/block-library/blocks/block/editor.css`	161 B	0 B
`build/block-library/blocks/button/editor-rtl.css`	475 B	0 B
`build/block-library/blocks/button/editor.css`	474 B	0 B
`build/block-library/blocks/button/style-rtl.css`	603 B	0 B
`build/block-library/blocks/button/style.css`	602 B	0 B
`build/block-library/blocks/buttons/editor-rtl.css`	315 B	0 B
`build/block-library/blocks/buttons/editor.css`	315 B	0 B
`build/block-library/blocks/buttons/style-rtl.css`	375 B	0 B
`build/block-library/blocks/buttons/style.css`	375 B	0 B
`build/block-library/blocks/calendar/style-rtl.css`	208 B	0 B
`build/block-library/blocks/calendar/style.css`	208 B	0 B
`build/block-library/blocks/categories/editor-rtl.css`	84 B	0 B
`build/block-library/blocks/categories/editor.css`	83 B	0 B
`build/block-library/blocks/categories/style-rtl.css`	79 B	0 B
`build/block-library/blocks/categories/style.css`	79 B	0 B
`build/block-library/blocks/code/style-rtl.css`	90 B	0 B
`build/block-library/blocks/code/style.css`	90 B	0 B
`build/block-library/blocks/columns/editor-rtl.css`	190 B	0 B
`build/block-library/blocks/columns/editor.css`	190 B	0 B
`build/block-library/blocks/columns/style-rtl.css`	422 B	0 B
`build/block-library/blocks/columns/style.css`	422 B	0 B
`build/block-library/blocks/cover/editor-rtl.css`	644 B	0 B
`build/block-library/blocks/cover/editor.css`	646 B	0 B
`build/block-library/blocks/cover/style-rtl.css`	1.22 kB	0 B
`build/block-library/blocks/cover/style.css`	1.23 kB	0 B
`build/block-library/blocks/embed/editor-rtl.css`	486 B	0 B
`build/block-library/blocks/embed/editor.css`	486 B	0 B
`build/block-library/blocks/embed/style-rtl.css`	401 B	0 B
`build/block-library/blocks/embed/style.css`	400 B	0 B
`build/block-library/blocks/file/editor-rtl.css`	301 B	0 B
`build/block-library/blocks/file/editor.css`	300 B	0 B
`build/block-library/blocks/file/frontend.min.js`	773 B	0 B
`build/block-library/blocks/file/style-rtl.css`	255 B	0 B
`build/block-library/blocks/file/style.css`	255 B	0 B
`build/block-library/blocks/freeform/editor-rtl.css`	2.44 kB	0 B
`build/block-library/blocks/freeform/editor.css`	2.44 kB	0 B
`build/block-library/blocks/gallery/editor-rtl.css`	704 B	0 B
`build/block-library/blocks/gallery/editor.css`	705 B	0 B
`build/block-library/blocks/gallery/style-rtl.css`	1.06 kB	0 B
`build/block-library/blocks/gallery/style.css`	1.06 kB	0 B
`build/block-library/blocks/group/editor-rtl.css`	160 B	0 B
`build/block-library/blocks/group/editor.css`	160 B	0 B
`build/block-library/blocks/group/style-rtl.css`	57 B	0 B
`build/block-library/blocks/group/style.css`	57 B	0 B
`build/block-library/blocks/heading/editor-rtl.css`	152 B	0 B
`build/block-library/blocks/heading/editor.css`	152 B	0 B
`build/block-library/blocks/heading/style-rtl.css`	76 B	0 B
`build/block-library/blocks/heading/style.css`	76 B	0 B
`build/block-library/blocks/home-link/style-rtl.css`	259 B	0 B
`build/block-library/blocks/home-link/style.css`	259 B	0 B
`build/block-library/blocks/html/editor-rtl.css`	281 B	0 B
`build/block-library/blocks/html/editor.css`	281 B	0 B
`build/block-library/blocks/image/editor-rtl.css`	729 B	0 B
`build/block-library/blocks/image/editor.css`	727 B	0 B
`build/block-library/blocks/image/style-rtl.css`	481 B	0 B
`build/block-library/blocks/image/style.css`	485 B	0 B
`build/block-library/blocks/latest-comments/style-rtl.css`	281 B	0 B
`build/block-library/blocks/latest-comments/style.css`	282 B	0 B
`build/block-library/blocks/latest-posts/editor-rtl.css`	137 B	0 B
`build/block-library/blocks/latest-posts/editor.css`	137 B	0 B
`build/block-library/blocks/latest-posts/style-rtl.css`	529 B	0 B
`build/block-library/blocks/latest-posts/style.css`	529 B	0 B
`build/block-library/blocks/legacy-widget/editor-rtl.css`	582 B	0 B
`build/block-library/blocks/legacy-widget/editor.css`	583 B	0 B
`build/block-library/blocks/list/style-rtl.css`	63 B	0 B
`build/block-library/blocks/list/style.css`	63 B	0 B
`build/block-library/blocks/media-text/editor-rtl.css`	176 B	0 B
`build/block-library/blocks/media-text/editor.css`	176 B	0 B
`build/block-library/blocks/media-text/style-rtl.css`	492 B	0 B
`build/block-library/blocks/media-text/style.css`	489 B	0 B
`build/block-library/blocks/more/editor-rtl.css`	434 B	0 B
`build/block-library/blocks/more/editor.css`	434 B	0 B
`build/block-library/blocks/navigation-link/editor-rtl.css`	633 B	0 B
`build/block-library/blocks/navigation-link/editor.css`	634 B	0 B
`build/block-library/blocks/navigation-link/style-rtl.css`	94 B	0 B
`build/block-library/blocks/navigation-link/style.css`	94 B	0 B
`build/block-library/blocks/navigation/editor-rtl.css`	1.55 kB	0 B
`build/block-library/blocks/navigation/editor.css`	1.55 kB	0 B
`build/block-library/blocks/navigation/frontend.min.js`	2.86 kB	0 B
`build/block-library/blocks/navigation/style-rtl.css`	1.63 kB	0 B
`build/block-library/blocks/navigation/style.css`	1.63 kB	0 B
`build/block-library/blocks/nextpage/editor-rtl.css`	395 B	0 B
`build/block-library/blocks/nextpage/editor.css`	395 B	0 B
`build/block-library/blocks/page-list/editor-rtl.css`	310 B	0 B
`build/block-library/blocks/page-list/editor.css`	311 B	0 B
`build/block-library/blocks/page-list/style-rtl.css`	240 B	0 B
`build/block-library/blocks/page-list/style.css`	240 B	0 B
`build/block-library/blocks/paragraph/editor-rtl.css`	157 B	0 B
`build/block-library/blocks/paragraph/editor.css`	157 B	0 B
`build/block-library/blocks/paragraph/style-rtl.css`	247 B	0 B
`build/block-library/blocks/paragraph/style.css`	248 B	0 B
`build/block-library/blocks/post-author/editor-rtl.css`	209 B	0 B
`build/block-library/blocks/post-author/editor.css`	209 B	0 B
`build/block-library/blocks/post-author/style-rtl.css`	183 B	0 B
`build/block-library/blocks/post-author/style.css`	184 B	0 B
`build/block-library/blocks/post-comments-form/style-rtl.css`	140 B	0 B
`build/block-library/blocks/post-comments-form/style.css`	140 B	0 B
`build/block-library/blocks/post-comments/style-rtl.css`	360 B	0 B
`build/block-library/blocks/post-comments/style.css`	359 B	0 B
`build/block-library/blocks/post-content/editor-rtl.css`	139 B	0 B
`build/block-library/blocks/post-content/editor.css`	139 B	0 B
`build/block-library/blocks/post-excerpt/editor-rtl.css`	73 B	0 B
`build/block-library/blocks/post-excerpt/editor.css`	73 B	0 B
`build/block-library/blocks/post-excerpt/style-rtl.css`	69 B	0 B
`build/block-library/blocks/post-excerpt/style.css`	69 B	0 B
`build/block-library/blocks/post-featured-image/editor-rtl.css`	338 B	0 B
`build/block-library/blocks/post-featured-image/editor.css`	338 B	0 B
`build/block-library/blocks/post-featured-image/style-rtl.css`	141 B	0 B
`build/block-library/blocks/post-featured-image/style.css`	141 B	0 B
`build/block-library/blocks/post-template/editor-rtl.css`	100 B	0 B
`build/block-library/blocks/post-template/editor.css`	99 B	0 B
`build/block-library/blocks/post-template/style-rtl.css`	379 B	0 B
`build/block-library/blocks/post-template/style.css`	380 B	0 B
`build/block-library/blocks/post-title/style-rtl.css`	60 B	0 B
`build/block-library/blocks/post-title/style.css`	60 B	0 B
`build/block-library/blocks/preformatted/style-rtl.css`	103 B	0 B
`build/block-library/blocks/preformatted/style.css`	103 B	0 B
`build/block-library/blocks/pullquote/editor-rtl.css`	183 B	0 B
`build/block-library/blocks/pullquote/editor.css`	183 B	0 B
`build/block-library/blocks/pullquote/style-rtl.css`	318 B	0 B
`build/block-library/blocks/pullquote/style.css`	318 B	0 B
`build/block-library/blocks/query-pagination-numbers/editor-rtl.css`	122 B	0 B
`build/block-library/blocks/query-pagination-numbers/editor.css`	121 B	0 B
`build/block-library/blocks/query-pagination/editor-rtl.css`	270 B	0 B
`build/block-library/blocks/query-pagination/editor.css`	262 B	0 B
`build/block-library/blocks/query-pagination/style-rtl.css`	168 B	0 B
`build/block-library/blocks/query-pagination/style.css`	168 B	0 B
`build/block-library/blocks/query-title/editor-rtl.css`	86 B	0 B
`build/block-library/blocks/query-title/editor.css`	86 B	0 B
`build/block-library/blocks/query/editor-rtl.css`	131 B	0 B
`build/block-library/blocks/query/editor.css`	132 B	0 B
`build/block-library/blocks/quote/style-rtl.css`	169 B	0 B
`build/block-library/blocks/quote/style.css`	169 B	0 B
`build/block-library/blocks/rss/editor-rtl.css`	201 B	0 B
`build/block-library/blocks/rss/editor.css`	202 B	0 B
`build/block-library/blocks/rss/style-rtl.css`	290 B	0 B
`build/block-library/blocks/rss/style.css`	290 B	0 B
`build/block-library/blocks/search/editor-rtl.css`	211 B	0 B
`build/block-library/blocks/search/editor.css`	211 B	0 B
`build/block-library/blocks/search/style-rtl.css`	359 B	0 B
`build/block-library/blocks/search/style.css`	362 B	0 B
`build/block-library/blocks/separator/editor-rtl.css`	99 B	0 B
`build/block-library/blocks/separator/editor.css`	99 B	0 B
`build/block-library/blocks/separator/style-rtl.css`	251 B	0 B
`build/block-library/blocks/separator/style.css`	251 B	0 B
`build/block-library/blocks/shortcode/editor-rtl.css`	512 B	0 B
`build/block-library/blocks/shortcode/editor.css`	512 B	0 B
`build/block-library/blocks/site-logo/editor-rtl.css`	440 B	0 B
`build/block-library/blocks/site-logo/editor.css`	441 B	0 B
`build/block-library/blocks/site-logo/style-rtl.css`	154 B	0 B
`build/block-library/blocks/site-logo/style.css`	154 B	0 B
`build/block-library/blocks/social-link/editor-rtl.css`	164 B	0 B
`build/block-library/blocks/social-link/editor.css`	165 B	0 B
`build/block-library/blocks/social-links/editor-rtl.css`	800 B	0 B
`build/block-library/blocks/social-links/editor.css`	799 B	0 B
`build/block-library/blocks/social-links/style-rtl.css`	1.32 kB	0 B
`build/block-library/blocks/social-links/style.css`	1.33 kB	0 B
`build/block-library/blocks/spacer/editor-rtl.css`	308 B	0 B
`build/block-library/blocks/spacer/editor.css`	308 B	0 B
`build/block-library/blocks/spacer/style-rtl.css`	48 B	0 B
`build/block-library/blocks/spacer/style.css`	48 B	0 B
`build/block-library/blocks/table/editor-rtl.css`	478 B	0 B
`build/block-library/blocks/table/editor.css`	478 B	0 B
`build/block-library/blocks/table/style-rtl.css`	480 B	0 B
`build/block-library/blocks/table/style.css`	480 B	0 B
`build/block-library/blocks/tag-cloud/editor-rtl.css`	118 B	0 B
`build/block-library/blocks/tag-cloud/editor.css`	118 B	0 B
`build/block-library/blocks/tag-cloud/style-rtl.css`	94 B	0 B
`build/block-library/blocks/tag-cloud/style.css`	94 B	0 B
`build/block-library/blocks/template-part/editor-rtl.css`	551 B	0 B
`build/block-library/blocks/template-part/editor.css`	550 B	0 B
`build/block-library/blocks/term-description/editor-rtl.css`	90 B	0 B
`build/block-library/blocks/term-description/editor.css`	90 B	0 B
`build/block-library/blocks/text-columns/editor-rtl.css`	95 B	0 B
`build/block-library/blocks/text-columns/editor.css`	95 B	0 B
`build/block-library/blocks/text-columns/style-rtl.css`	166 B	0 B
`build/block-library/blocks/text-columns/style.css`	166 B	0 B
`build/block-library/blocks/verse/style-rtl.css`	87 B	0 B
`build/block-library/blocks/verse/style.css`	87 B	0 B
`build/block-library/blocks/video/editor-rtl.css`	569 B	0 B
`build/block-library/blocks/video/editor.css`	570 B	0 B
`build/block-library/blocks/video/style-rtl.css`	173 B	0 B
`build/block-library/blocks/video/style.css`	173 B	0 B
`build/block-library/common-rtl.css`	1.26 kB	0 B
`build/block-library/common.css`	1.26 kB	0 B
`build/block-library/index.min.js`	148 kB	0 B
`build/block-library/reset-rtl.css`	506 B	0 B
`build/block-library/reset.css`	507 B	0 B
`build/block-library/style-rtl.css`	10.2 kB	0 B
`build/block-library/style.css`	10.2 kB	0 B
`build/block-library/theme-rtl.css`	692 B	0 B
`build/block-library/theme.css`	693 B	0 B
`build/block-serialization-default-parser/index.min.js`	1.3 kB	0 B
`build/block-serialization-spec-parser/index.min.js`	3.06 kB	0 B
`build/blocks/index.min.js`	47.2 kB	0 B
`build/components/index.min.js`	180 kB	0 B
`build/components/style-rtl.css`	16.2 kB	0 B
`build/components/style.css`	16.1 kB	0 B
`build/compose/index.min.js`	10.1 kB	0 B
`build/core-data/index.min.js`	12.1 kB	0 B
`build/customize-widgets/index.min.js`	9.96 kB	0 B
`build/customize-widgets/style-rtl.css`	1.45 kB	0 B
`build/customize-widgets/style.css`	1.44 kB	0 B
`build/data-controls/index.min.js`	828 B	0 B
`build/data/index.min.js`	7.22 kB	0 B
`build/date/index.min.js`	31.8 kB	0 B
`build/deprecated/index.min.js`	738 B	0 B
`build/dom-ready/index.min.js`	576 B	0 B
`build/dom/index.min.js`	4.62 kB	0 B
`build/edit-navigation/index.min.js`	14 kB	0 B
`build/edit-navigation/style-rtl.css`	3.08 kB	0 B
`build/edit-navigation/style.css`	3.08 kB	0 B
`build/edit-post/classic-rtl.css`	454 B	0 B
`build/edit-post/classic.css`	454 B	0 B
`build/edit-post/index.min.js`	58.5 kB	0 B
`build/edit-post/style-rtl.css`	6.92 kB	0 B
`build/edit-post/style.css`	6.91 kB	0 B
`build/edit-site/index.min.js`	25.9 kB	0 B
`build/edit-site/style-rtl.css`	4.75 kB	0 B
`build/edit-site/style.css`	4.75 kB	0 B
`build/edit-widgets/index.min.js`	15.7 kB	0 B
`build/edit-widgets/style-rtl.css`	3.42 kB	0 B
`build/edit-widgets/style.css`	3.42 kB	0 B
`build/editor/index.min.js`	38.2 kB	0 B
`build/editor/style-rtl.css`	3.91 kB	0 B
`build/editor/style.css`	3.9 kB	0 B
`build/element/index.min.js`	3.44 kB	0 B
`build/escape-html/index.min.js`	739 B	0 B
`build/format-library/index.min.js`	5.67 kB	0 B
`build/format-library/style-rtl.css`	637 B	0 B
`build/format-library/style.css`	639 B	0 B
`build/hooks/index.min.js`	1.76 kB	0 B
`build/html-entities/index.min.js`	628 B	0 B
`build/i18n/index.min.js`	3.73 kB	0 B
`build/is-shallow-equal/index.min.js`	709 B	0 B
`build/keyboard-shortcuts/index.min.js`	1.74 kB	0 B
`build/keycodes/index.min.js`	1.43 kB	0 B
`build/list-reusable-blocks/index.min.js`	2.07 kB	0 B
`build/list-reusable-blocks/style-rtl.css`	629 B	0 B
`build/list-reusable-blocks/style.css`	628 B	0 B
`build/media-utils/index.min.js`	3.08 kB	0 B
`build/notices/index.min.js`	1.07 kB	0 B
`build/nux/index.min.js`	2.31 kB	0 B
`build/nux/style-rtl.css`	718 B	0 B
`build/nux/style.css`	716 B	0 B
`build/plugins/index.min.js`	1.99 kB	0 B
`build/primitives/index.min.js`	1.03 kB	0 B
`build/priority-queue/index.min.js`	791 B	0 B
`build/react-i18n/index.min.js`	924 B	0 B
`build/redux-routine/index.min.js`	2.82 kB	0 B
`build/reusable-blocks/index.min.js`	2.56 kB	0 B
`build/reusable-blocks/style-rtl.css`	225 B	0 B
`build/reusable-blocks/style.css`	225 B	0 B
`build/rich-text/index.min.js`	10.6 kB	0 B
`build/server-side-render/index.min.js`	1.63 kB	0 B
`build/shortcode/index.min.js`	1.68 kB	0 B
`build/token-list/index.min.js`	847 B	0 B
`build/url/index.min.js`	1.95 kB	0 B
`build/viewport/index.min.js`	1.28 kB	0 B
`build/warning/index.min.js`	1.13 kB	0 B
`build/widgets/index.min.js`	1.67 kB	0 B
`build/wordcount/index.min.js`	1.24 kB	0 B

_{compressed-size-action}

gwwar · 2021-06-10T15:14:32Z

Re-opening due to interest, since the is-typing class is only used in one area.

skorasaurus · 2021-06-10T17:32:47Z

related #32101

youknowriad · 2021-06-10T19:36:18Z

The other alternative is to actually apply the class to the hovered block only (to avoid having to rerender all blocks but just one)

gwwar · 2021-06-10T19:43:25Z

The other alternative is to actually apply the class to the hovered block only (to avoid having to rerender all blocks but just one)

I avoided that since this was previously moved up in #30106. I can try it again if we changed our minds.

youknowriad · 2021-06-10T20:47:03Z

Oh interesting, it'd be good to get @ellatrix's perspective on this PR.

gwwar · 2021-06-10T21:13:48Z

To recap for folks reviewing:

(What's current in this branch) adds a remove-outline class on the active block that's being typed when isOutline mode is active.
b62f8b4 is an alternative that tries to use CSS :focus-within to approximate desired behavior. The main difference being that it removes the outline on focus rather than during typing.

I'm open to other approaches if folks think of it too. Overall, I personally do think the outline behavior in site editor is a bit confusing when working with nested blocks, so I wonder if there have been some other proposed interactions. I'm thinking list view can probably help a lot with navigation.

youknowriad · 2021-06-10T21:46:50Z

packages/block-editor/src/components/block-list/block.js

@@ -83,6 +88,15 @@ function BlockListBlock( {
 	const { removeBlock } = useDispatch( blockEditorStore );
 	const onRemove = useCallback( () => removeBlock( clientId ), [ clientId ] );

+	const removeBlockOutline = useSelect(


Do you think we should move this to useBlockProps instead of here (the leaf place where the classname is applied)

Oh good catch, useBlockClassNames felt like a better fit, so I moved that in 71d7488

🤔 the class could maybe use a better name, but I'd like to decouple it from is-typing so we can apply it only the situations we need it for.

jasmussen · 2021-06-11T06:31:57Z

Currently there's only one piece of functionality that uses this class. This is only used in the site-editor. We apply a hover outline to help find blocks, but remove this when folks begin typing.

That's interesting — this may be a historical memory, but I recall the is-typing class existing primarily to support removing the block toolbar when you're hiding. It's very possible that's been refactored since, all the more reason to revisit this:

Looking at what's left, I stand corrected, the class appears to be primarily there to not show the border when you're typing in the site editor while the "outline mode" is enabled.

As a single PR that improvese things, this makes sense to me. But I also think we can probably revisit this in the future. The outline mode is a bit experimental and might be absorbed entirely by "select mode", and if that's the case we can remove the extra check.

Hope that's helpful.

youknowriad

Looks good 👍 Thanks.

I'm fine if we want to change the behavior of outline mode to not need the class (I'll defer to others about this kind of change) but as written now, it just improves performance without impact on behavior so all good from me.

ellatrix · 2021-06-11T11:19:37Z

It's interesting that a simple class change on an element re-renders everything within that element. I guess that's just how React works, but I've always wondered why element attributes cannot be seen as things that are next to the tree/branch (like sibling components) rather than on the same tree/branch.

ellatrix · 2021-06-11T11:22:40Z

packages/block-editor/src/components/block-list/index.js

+			return {
+				isOutlineMode: outlineMode,
+				isFocusMode: focusMode,
+				isNavigationMode: _isNavigationMode(),


Similarly, it seems really annoying that all blocks have to re-render if we simply want to toggle any of these modes above and add a class. :)

💯 though hopefully these have less impact since the modes should be toggled less often 🤞

gwwar · 2021-06-11T15:06:04Z

Thanks for the reviews @youknowriad @ellatrix @jasmussen !

…ta 2. This includes: **Various** - Fix multi selection for nested blocks WordPress/gutenberg#32536 - Consistently show the drop indicator while dragging blocks WordPress/gutenberg#31896 - Fix horizontal drop indicator WordPress/gutenberg#32589 - Fix Safari flickering issue WordPress/gutenberg#32581 - Silence useSelect zombie bug errors WordPress/gutenberg#32088 **Template Editor** - Clarify the template creation modal WordPress/gutenberg#32427 - Only add skip links for block templates WordPress/gutenberg#32451 **Widgets Editor** - Add block breadcrumb WordPress/gutenberg#32498 WordPress/gutenberg#32528 WordPress/gutenberg#32569 - Saved deleted and restored widgets. WordPress/gutenberg#32534 - Fix unsaved changes detection WordPress/gutenberg#32573 - Fix button spacing in the header WordPress/gutenberg#32585 - Avoid extra undo levels WordPress/gutenberg#32572 - Move Legacy Widget block to the `@wordpress/widgets` package WordPress/gutenberg#32501 - Fix Social Links color inheritance WordPress/gutenberg#32625 - Use Button appender WordPress/gutenberg#32580 **Global Styles (theme.json)** - Separate the presets per origin in the block editor settings WordPress/gutenberg#32358 WordPress/gutenberg#32622 - Use CSS Custom Properties for the preset styles WordPress/gutenberg#32627 **Performance** - Remove is-typing classname to improve typing performance WordPress/gutenberg#32567 Props nosolosw, jorgefilipecosta, aristath, ntsekouras, peterwilsoncc, mcsf. See #53397. git-svn-id: https://develop.svn.wordpress.org/trunk@51149 602fd350-edb4-49c9-b593-d223f7449a82

…ta 2. This includes: **Various** - Fix multi selection for nested blocks WordPress/gutenberg#32536 - Consistently show the drop indicator while dragging blocks WordPress/gutenberg#31896 - Fix horizontal drop indicator WordPress/gutenberg#32589 - Fix Safari flickering issue WordPress/gutenberg#32581 - Silence useSelect zombie bug errors WordPress/gutenberg#32088 **Template Editor** - Clarify the template creation modal WordPress/gutenberg#32427 - Only add skip links for block templates WordPress/gutenberg#32451 **Widgets Editor** - Add block breadcrumb WordPress/gutenberg#32498 WordPress/gutenberg#32528 WordPress/gutenberg#32569 - Saved deleted and restored widgets. WordPress/gutenberg#32534 - Fix unsaved changes detection WordPress/gutenberg#32573 - Fix button spacing in the header WordPress/gutenberg#32585 - Avoid extra undo levels WordPress/gutenberg#32572 - Move Legacy Widget block to the `@wordpress/widgets` package WordPress/gutenberg#32501 - Fix Social Links color inheritance WordPress/gutenberg#32625 - Use Button appender WordPress/gutenberg#32580 **Global Styles (theme.json)** - Separate the presets per origin in the block editor settings WordPress/gutenberg#32358 WordPress/gutenberg#32622 - Use CSS Custom Properties for the preset styles WordPress/gutenberg#32627 **Performance** - Remove is-typing classname to improve typing performance WordPress/gutenberg#32567 Props nosolosw, jorgefilipecosta, aristath, ntsekouras, peterwilsoncc, mcsf. See #53397. Built from https://develop.svn.wordpress.org/trunk@51149 git-svn-id: http://core.svn.wordpress.org/trunk@50758 1a063a9b-81f0-0310-95a4-ce76da25c4cd

…ta 2. This includes: **Various** - Fix multi selection for nested blocks WordPress/gutenberg#32536 - Consistently show the drop indicator while dragging blocks WordPress/gutenberg#31896 - Fix horizontal drop indicator WordPress/gutenberg#32589 - Fix Safari flickering issue WordPress/gutenberg#32581 - Silence useSelect zombie bug errors WordPress/gutenberg#32088 **Template Editor** - Clarify the template creation modal WordPress/gutenberg#32427 - Only add skip links for block templates WordPress/gutenberg#32451 **Widgets Editor** - Add block breadcrumb WordPress/gutenberg#32498 WordPress/gutenberg#32528 WordPress/gutenberg#32569 - Saved deleted and restored widgets. WordPress/gutenberg#32534 - Fix unsaved changes detection WordPress/gutenberg#32573 - Fix button spacing in the header WordPress/gutenberg#32585 - Avoid extra undo levels WordPress/gutenberg#32572 - Move Legacy Widget block to the `@wordpress/widgets` package WordPress/gutenberg#32501 - Fix Social Links color inheritance WordPress/gutenberg#32625 - Use Button appender WordPress/gutenberg#32580 **Global Styles (theme.json)** - Separate the presets per origin in the block editor settings WordPress/gutenberg#32358 WordPress/gutenberg#32622 - Use CSS Custom Properties for the preset styles WordPress/gutenberg#32627 **Performance** - Remove is-typing classname to improve typing performance WordPress/gutenberg#32567 Props nosolosw, jorgefilipecosta, aristath, ntsekouras, peterwilsoncc, mcsf. See #53397. Built from https://develop.svn.wordpress.org/trunk@51149 git-svn-id: https://core.svn.wordpress.org/trunk@50758 1a063a9b-81f0-0310-95a4-ce76da25c4cd

mikejolley · 2021-06-15T11:06:51Z

We were working on a similar issue with child components re-mounting if the wrapping component changed, but we found that simply toggling class names did not rerender anything. I threw up a Code Sandbox example here:

https://codesandbox.io/s/es6-forked-up4z8?file=/src/app.js

The top component will change the wrapping element based on state. This triggers unmount/remount/rerender for the children.

The bottom component does not change the wrapping element, it just toggles the class name. This example does not re-render as this issue seems to indicate would happen.

cc @nerrad

gwwar · 2021-06-15T17:45:22Z

The bottom component does not change the wrapping element, it just toggles the class name. This example does not re-render as this issue seems to indicate would happen.

@mikejolley By default a parent will trigger a re-render in all child components. However if a React component returns the exact same element reference in its render output as it did the last time, React will skip re-rendering that particular child. This can be done with a memoization technique or if props.children is the same.

When we type, the children property is not the exact same object.

children.mp4

gutenberg/packages/block-editor/src/components/block-list/index.js

Line 71 in dbba260

This is why I tried https://github.com/WordPress/gutenberg/pull/32469/files#diff-d4fe1667e6f1078d2920bddb0fc64559f95cf61e3fe7d2cd4222b7e7ff4bd193R157but folks were not comfortable with memoing items.

We can definitely continue to try and stabilize references (if no changes are needed) as it'd be a great improvement in other interactions.

See also: https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/#component-render-optimization-techniques

…ta 2. This includes: **Various** - Fix multi selection for nested blocks WordPress/gutenberg#32536 - Consistently show the drop indicator while dragging blocks WordPress/gutenberg#31896 - Fix horizontal drop indicator WordPress/gutenberg#32589 - Fix Safari flickering issue WordPress/gutenberg#32581 - Silence useSelect zombie bug errors WordPress/gutenberg#32088 **Template Editor** - Clarify the template creation modal WordPress/gutenberg#32427 - Only add skip links for block templates WordPress/gutenberg#32451 **Widgets Editor** - Add block breadcrumb WordPress/gutenberg#32498 WordPress/gutenberg#32528 WordPress/gutenberg#32569 - Saved deleted and restored widgets. WordPress/gutenberg#32534 - Fix unsaved changes detection WordPress/gutenberg#32573 - Fix button spacing in the header WordPress/gutenberg#32585 - Avoid extra undo levels WordPress/gutenberg#32572 - Move Legacy Widget block to the `@wordpress/widgets` package WordPress/gutenberg#32501 - Fix Social Links color inheritance WordPress/gutenberg#32625 - Use Button appender WordPress/gutenberg#32580 **Global Styles (theme.json)** - Separate the presets per origin in the block editor settings WordPress/gutenberg#32358 WordPress/gutenberg#32622 - Use CSS Custom Properties for the preset styles WordPress/gutenberg#32627 **Performance** - Remove is-typing classname to improve typing performance WordPress/gutenberg#32567 Props nosolosw, jorgefilipecosta, aristath, ntsekouras, peterwilsoncc, mcsf. See #53397. Built from https://develop.svn.wordpress.org/trunk@51149 git-svn-id: http://core.svn.wordpress.org/trunk@50758 1a063a9b-81f0-0310-95a4-ce76da25c4cd

see if removing root class has any timing differences

7069153

gwwar changed the title ~~Do not merge: see if removing root class has any timing differences~~ Do not merge: see if removing is-typing root class has any timing differences Jun 10, 2021

gwwar closed this Jun 10, 2021

gwwar mentioned this pull request Jun 10, 2021

Performance: Try memoing large hotspots #32469

Closed

gwwar reopened this Jun 10, 2021

gwwar changed the title ~~Do not merge: see if removing is-typing root class has any timing differences~~ Performance: Remove is-typing root class Jun 10, 2021

Try :focus-within instead of is-typing

b62f8b4

gwwar marked this pull request as ready for review Jun 10, 2021

gwwar requested a review from ellatrix as a code owner Jun 10, 2021

gwwar requested review from jasmussen and youknowriad Jun 10, 2021

gwwar self-assigned this Jun 10, 2021

try adding a class to block when typing

a005470

youknowriad reviewed Jun 10, 2021

View changes

move remove-outline to use-block-class-names

71d7488

youknowriad added [Type] Performance Backport to WP Beta/RC labels Jun 11, 2021

youknowriad approved these changes Jun 11, 2021

View changes

ellatrix approved these changes Jun 11, 2021

View changes

ellatrix reviewed Jun 11, 2021

View changes

gwwar deleted the throwaway/is-typing branch Jun 11, 2021

github-actions bot added this to the Gutenberg 10.9 milestone Jun 11, 2021

youknowriad removed the Backport to WP Beta/RC label Jun 14, 2021

youknowriad added a commit that referenced this pull request Jun 14, 2021

Performance: Remove is-typing root class (#32567)

ad119ad

youknowriad mentioned this pull request Jun 14, 2021

First patch of backports/fixes for WordPress 5.8 beta 2 #32653

Merged

youknowriad added a commit that referenced this pull request Jun 14, 2021

Performance: Remove is-typing root class (#32567)

65c9ae8

nerrad mentioned this pull request Jun 14, 2021

Update Express Payments Loading UI woocommerce/woocommerce-gutenberg-products-block#4228

Merged

vcanales added a commit that referenced this pull request Jul 7, 2021

Performance: Remove is-typing root class (#32567)

427a5af

WordPress / gutenberg

Performance: Remove `is-typing` root class #32567

Performance: Remove `is-typing` root class #32567

gwwar commented Jun 9, 2021 •

edited

github-actions bot commented Jun 9, 2021 •

edited

gwwar commented Jun 10, 2021

skorasaurus commented Jun 10, 2021

youknowriad commented Jun 10, 2021

gwwar commented Jun 10, 2021

youknowriad commented Jun 10, 2021

gwwar commented Jun 10, 2021 •

edited

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

jasmussen commented Jun 11, 2021

youknowriad left a comment

ellatrix commented Jun 11, 2021

This comment has been minimized.

This comment has been minimized.

gwwar commented Jun 11, 2021

mikejolley commented Jun 15, 2021

gwwar commented Jun 15, 2021 •

edited

WordPress / gutenberg

Performance: Remove is-typing root class #32567

Performance: Remove is-typing root class #32567

Conversation

gwwar commented Jun 9, 2021 • edited

What is-typing is used for

Performance Runs

Testing Instructions

github-actions bot commented Jun 9, 2021 • edited

gwwar commented Jun 10, 2021

skorasaurus commented Jun 10, 2021

youknowriad commented Jun 10, 2021

gwwar commented Jun 10, 2021

youknowriad commented Jun 10, 2021

gwwar commented Jun 10, 2021 • edited

This comment has been minimized.

youknowriad Jun 10, 2021 Contributor

This comment has been minimized.

gwwar Jun 10, 2021 Author Contributor

This comment has been minimized.

gwwar Jun 10, 2021 Author Contributor

jasmussen commented Jun 11, 2021

youknowriad left a comment

ellatrix commented Jun 11, 2021

This comment has been minimized.

ellatrix Jun 11, 2021 Member

This comment has been minimized.

gwwar Jun 11, 2021 Author Contributor

gwwar commented Jun 11, 2021

mikejolley commented Jun 15, 2021

gwwar commented Jun 15, 2021 • edited

Performance: Remove `is-typing` root class #32567

Performance: Remove `is-typing` root class #32567

gwwar commented Jun 9, 2021 •

edited

What `is-typing` is used for

github-actions bot commented Jun 9, 2021 •

edited

gwwar commented Jun 10, 2021 •

edited

youknowriad Jun 10, 2021
Contributor

gwwar Jun 10, 2021
Author Contributor

gwwar Jun 10, 2021
Author Contributor

ellatrix Jun 11, 2021
Member

gwwar Jun 11, 2021
Author Contributor

gwwar commented Jun 15, 2021 •

edited