Make WordPress Core

Opened 3 years ago

Last modified 3 years ago

#54305 new enhancement

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

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


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 years ago

  • Component changed from General to Editor

#2 @askpivot
3 years ago

I think I traced the animation effect to this file in the block editor repo:
Line 189:

	animate={ {
		padding: isTemplateMode ? '48px 48px 0' : '0',
	} }
	ref={ blockSelectionClearerRef }
Note: See TracTickets for help on using tickets.