Block Editor: Optimize resizable preview hooks

[aduth]

Previously: #19082

This pull request seeks to optimize hooks used in rendering resizable previews. Currently, useSimulatedMediaQuery is the highest self-time spent during page load, despite only being relevant for use in the resizable previews:

The changes in this pull request seek to try to do as much as possible to defer transforms and resize event handlers only when relevant (when using device preview modes).

Testing Instructions:

Repeat Testing Instructions from #19082, verifying there are no regressions.

[github-actions]

Size Change: +10 B (0%)

Total Size: 1.12 MB

Filename	Size	Change
build/block-editor/index.js	105 kB	+10 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
build/a11y/index.js	1.02 kB	0 B
build/annotations/index.js	3.62 kB	0 B
build/api-fetch/index.js	3.39 kB	0 B
build/autop/index.js	2.83 kB	0 B
build/blob/index.js	620 B	0 B
build/block-directory/index.js	6.93 kB	0 B
build/block-directory/style-rtl.css	790 B	0 B
build/block-directory/style.css	791 B	0 B
build/block-editor/style-rtl.css	10.8 kB	0 B
build/block-editor/style.css	10.8 kB	0 B
build/block-library/editor-rtl.css	7.17 kB	0 B
build/block-library/editor.css	7.17 kB	0 B
build/block-library/index.js	119 kB	0 B
build/block-library/style-rtl.css	7.48 kB	0 B
build/block-library/style.css	7.48 kB	0 B
build/block-library/theme-rtl.css	683 B	0 B
build/block-library/theme.css	685 B	0 B
build/block-serialization-default-parser/index.js	1.88 kB	0 B
build/block-serialization-spec-parser/index.js	3.1 kB	0 B
build/blocks/index.js	48.1 kB	0 B
build/components/index.js	190 kB	0 B
build/components/style-rtl.css	17.1 kB	0 B
build/components/style.css	17.1 kB	0 B
build/compose/index.js	9.24 kB	0 B
build/core-data/index.js	11.4 kB	0 B
build/data-controls/index.js	1.29 kB	0 B
build/data/index.js	8.42 kB	0 B
build/date/index.js	5.47 kB	0 B
build/deprecated/index.js	772 B	0 B
build/dom-ready/index.js	568 B	0 B
build/dom/index.js	3.11 kB	0 B
build/edit-navigation/index.js	6.6 kB	0 B
build/edit-navigation/style-rtl.css	857 B	0 B
build/edit-navigation/style.css	856 B	0 B
build/edit-post/index.js	302 kB	0 B
build/edit-post/style-rtl.css	12.2 kB	0 B
build/edit-post/style.css	12.2 kB	0 B
build/edit-site/index.js	12.8 kB	0 B
build/edit-site/style-rtl.css	5.22 kB	0 B
build/edit-site/style.css	5.22 kB	0 B
build/edit-widgets/index.js	7.73 kB	0 B
build/edit-widgets/style-rtl.css	4.59 kB	0 B
build/edit-widgets/style.css	4.59 kB	0 B
build/editor/editor-styles-rtl.css	425 B	0 B
build/editor/editor-styles.css	428 B	0 B
build/editor/index.js	44.3 kB	0 B
build/editor/style-rtl.css	5.07 kB	0 B
build/editor/style.css	5.08 kB	0 B
build/element/index.js	4.65 kB	0 B
build/escape-html/index.js	733 B	0 B
build/format-library/index.js	7.64 kB	0 B
build/format-library/style-rtl.css	502 B	0 B
build/format-library/style.css	502 B	0 B
build/hooks/index.js	2.13 kB	0 B
build/html-entities/index.js	622 B	0 B
build/i18n/index.js	3.56 kB	0 B
build/is-shallow-equal/index.js	711 B	0 B
build/keyboard-shortcuts/index.js	2.51 kB	0 B
build/keycodes/index.js	1.94 kB	0 B
build/list-reusable-blocks/index.js	3.13 kB	0 B
build/list-reusable-blocks/style-rtl.css	226 B	0 B
build/list-reusable-blocks/style.css	226 B	0 B
build/media-utils/index.js	5.29 kB	0 B
build/notices/index.js	1.79 kB	0 B
build/nux/index.js	3.4 kB	0 B
build/nux/style-rtl.css	616 B	0 B
build/nux/style.css	613 B	0 B
build/plugins/index.js	2.56 kB	0 B
build/primitives/index.js	1.5 kB	0 B
build/priority-queue/index.js	789 B	0 B
build/redux-routine/index.js	2.85 kB	0 B
build/rich-text/index.js	14.8 kB	0 B
build/server-side-render/index.js	2.68 kB	0 B
build/shortcode/index.js	1.7 kB	0 B
build/token-list/index.js	1.28 kB	0 B
build/url/index.js	4.02 kB	0 B
build/viewport/index.js	1.84 kB	0 B
build/warning/index.js	1.14 kB	0 B
build/wordcount/index.js	1.17 kB	0 B

_{compressed-size-action}

[tellthemachines]

Thanks for fixing this @aduth!

We might have to revisit having Desktop as default if we implement Desktop previews on mobile devices but for now it's working very well.

[aduth]

Thanks @tellthemachines !

Regarding the default, as I was looking at the code, I also wonder if it's something where we can do more to disambiguate default from one of the specific states. I had some initial confusion in considering "Default" as in contrast to "Tablet" and "Mobile", likely because I was thinking of it more in the way of the comment you referenced at #13203 (comment) where "Desktop" could be a valid preview mode, even in a smaller device. In that case, we should probably want to more explicitly disambiguate the default neutral state.

In some ways, I think these changes might help move a bit more in that direction, e.g. removing assumptions around specific canvas widths for the neutral state. Maybe a good next step could be to replace the 'Desktop' deviceType string (as it's used today) with a null value. At some point in the future, the 'Desktop' state could be reintroduced to represent what's described in #13203 (comment).