[wp-trac] [WordPress Trac] #65328: editor-expand.js DFW button remnant causes intermittent TinyMCE editor height miscalculation in WordPress 7.0

[WordPress Trac]

#65328: editor-expand.js DFW button remnant causes intermittent TinyMCE editor
height miscalculation in WordPress 7.0
--------------------------+------------------------------
 Reporter:  MadtownLems   |       Owner:  (none)
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  Awaiting Review
Component:  TinyMCE       |     Version:
 Severity:  normal        |  Resolution:
 Keywords:                |     Focuses:
--------------------------+------------------------------
Description changed by sabernhardt:

Old description:

> Disclosure: This is an AI-assisted bug report. I've done my best to
> investigate its accuracy, but it's a bit out of my area of expertise. I
> used AI to help debug the problem that I noticed.
>

> In WordPress 7.0, the Distraction Free Writing (DFW) button no longer
> appears in the TinyMCE toolbar, indicating the feature was removed or
> disabled. However, wp-admin/js/editor-expand.js still contains code that
> registers the DFW button with TinyMCE and immediately hides it during the
> editor init event:
>
> editor.on( 'init', function() {
>     if ( button.disabled() ) {
>         button.hide();
>     }
> } );
>
> This button.hide() call triggers a TinyMCE reflow/repaint cycle (via
> theme.js) at a moment when the new React-based admin UI introduced in 7.0
> has not finished laying out. The result is an incorrect height being
> stamped onto #mceu_31-body, causing the TinyMCE editor area to render
> with a large empty gray space.
> The bug is intermittent because it is a race condition between React
> finishing its layout and TinyMCE firing init. It reproduces most reliably
> on a hard refresh (Shift+F5).
> Steps to reproduce:
>
> Install WordPress 7.0
> Use the Classic Editor (either via the Classic Editor plugin or
> add_filter( 'use_block_editor_for_post', '__return_false' ))
> Open any post for editing
> Hard refresh (Shift+F5) repeatedly until the bug appears
>
> Expected result: TinyMCE editor renders at the correct height.
> Actual result: #mceu_31-body receives an inflated inline height (e.g.
> 459.391px) while the inner #content_ifr iframe is a normal size, leaving
> a large gray gap.
> Root cause: The DFW button registration and hide logic in editor-
> expand.js was not removed when DFW support was dropped in 7.0. Removing
> that block should resolve the issue.
> Workaround: None confirmed beyond avoiding hard refreshes.

New description:

 Disclosure: This is an AI-assisted bug report. I've done my best to
 investigate its accuracy, but it's a bit out of my area of expertise. I
 used AI to help debug the problem that I noticed.


 In WordPress 7.0, the Distraction Free Writing (DFW) button no longer
 appears in the TinyMCE toolbar, indicating the feature was removed or
 disabled. However,`wp-admin/js/editor-expand.js` still contains code that
 registers the DFW button with TinyMCE and immediately hides it during the
 editor `init` event:

 {{{
 editor.on( 'init', function() {
     if ( button.disabled() ) {
         button.hide();
     }
 } );
 }}}

 This `button.hide()` call triggers a TinyMCE reflow/repaint cycle (via
 `theme.js`) at a moment when the new React-based admin UI introduced in
 7.0 has not finished laying out. The result is an incorrect height being
 stamped onto `#mceu_31-body`, causing the TinyMCE editor area to render
 with a large empty gray space.
 The bug is intermittent because it is a race condition between React
 finishing its layout and TinyMCE firing `init`. It reproduces most
 reliably on a hard refresh (`Shift+F5`).

 Steps to reproduce:

 - Install WordPress 7.0
 - Use the Classic Editor (either via the Classic Editor plugin or
 `add_filter( 'use_block_editor_for_post', '__return_false' )`)
 - Open any post for editing
 - Hard refresh (`Shift+F5`) repeatedly until the bug appears

 Expected result: TinyMCE editor renders at the correct height.
 Actual result: `#mceu_31-body` receives an inflated inline height (e.g.
 459.391px) while the inner `#content_ifr iframe` is a normal size, leaving
 a large gray gap.
 Root cause: The DFW button registration and hide logic in `editor-
 expand.js` was not removed when DFW support was dropped in 7.0. Removing
 that block should resolve the issue.
 Workaround: None confirmed beyond avoiding hard refreshes.

--

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/65328#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform