WordPress.org

Make WordPress Core

Opened 3 months ago

Last modified 3 months ago

#54305 new enhancement

Transition of block editor width when previewing desktop/tablet/mobile causes multiple resize events (and unnecessary lag)

Reported by: askpivot Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Editor Keywords:
Focuses: Cc:

Description

When editing a page, if we click "preview", and then click one of the viewport icons at the top (desktop, tablet, mobile), it resizes the editor. This is great.

What is not so great is that it animates (seemingly via javascript) the change in width, which causes all the blocks to re-render several times, making the process slow and clunky (I am using ACF Blocks). Honestly, it makes me avoid using the viewport switcher except when I really need it. I believe if the transition was removed, it would only have to fire a single resize event. I don’t see any reason why, technically speaking, the animation should be necessary.

Change History (2)

#1 @sabernhardt
3 months ago

  • Component changed from General to Editor

#2 @askpivot
3 months ago

I think I traced the animation effect to this file in the block editor repo:
https://github.com/WordPress/gutenberg/blob/trunk/packages/edit-post/src/components/visual-editor/index.js
Line 189:

<motion.div
	className="edit-post-visual-editor__content-area"
	animate={ {
		padding: isTemplateMode ? '48px 48px 0' : '0',
	} }
	ref={ blockSelectionClearerRef }
>
Note: See TracTickets for help on using tickets.