Classic Editor block: toolbar is no longer sticky when scrolling

[saurabh20]

Description

Hi,

I'm writing to report a bug in the WordPress block editor. When I include the 'classic block' and start writing content, the classic block menu used to be sticky when I scrolled down the viewport. However, after the 6.3 update, the classic block menu is no longer sticky. This makes it difficult to format content, as the formatting menu is no longer visible when I scroll down.

I have attached two videos that demonstrate the issue.

The first video shows the 'classic block 'menu being sticky in the earlier version (6.2.2) of WordPress. : https://bit.ly/47D7kc7

The second video shows 'classic block' menu being non-sticky in the latest version (6.3) of WordPress.: https://bit.ly/47nzQOB

I hope this issue will be fixed soon. In the meantime, I would appreciate it if you could investigate the issue and provide me with an update.

Thank you for your time.

NON-Sticky.Classic.Block.Menu.Area.in.Wordpress.6.3.mp4

Sticky.Classic.Block.Menu.area.in.Wordpress.6.2.2.mp4

Step-by-step reproduction instructions

1. Go to Gutenberg Editor Wordpre 6.3
2. Use Classic Block
3. Write content & scroll
4. You will not able to format content as Classic Block menu is non-sticky

Screenshots, screen recording, code snippet

The first video shows the 'classic block 'menu being sticky in the earlier version (6.2.2) of WordPress. :
The second video shows 'classic block' menu being non-sticky in the latest version (6.3) of WordPress.:

Environment info

The first video shows the 'classic block 'menu being sticky in the earlier version (6.2.2) of WordPress.
The second video shows 'classic block' menu being non-sticky in the latest version (6.3) of WordPress.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[annezazu]

Hey there! Thanks for opening this issue and using the latest version of WordPress. I tried to replicate but I wasn't able to with a new classic block. Here's what I can see:

Screen.Recording.2023-08-09.at.9.50.46.AM.mov

Can you ensure you've deactivated other plugins and test again?

[saurabh20]

Hey there,

I have again checked the following:

1. I reinstalled the latest WordPress 6.3 on my 5 websites, which are hosted on different servers and hosting providers.
2. I disabled all plugins on all 5 sites.
3. I checked again with the Gutenberg/Block editor. The same issue is happening.

Can you please try enabling 4-5 plugins like Yoast, Akismet, Hello Dolly, and Jetpack and then test again in the Gutenberg/Block Editor?

This seems to be a really weird issue. I have been trying to troubleshoot it for the past 10 hours.

Thanks for your help!

NO.edit.option.into.Classic.Block.of.Gutenburg_Code.Editor.Wordpress.v6.3.mp4

[annezazu]

Thank you for this video! I'm going to flag for our test crew and keep it in the 6.3.x board until we can track it down.

[saurabh20]

I also discovered few new findings,

1. If we have any plugin/theme having some PANEL or Section in Block editor then 'edit' option disappering.
2. I tested with fresh Wordpress Installtion. It shows with NO plugin and default Wordpress theme enable Without 'Custom Fields' panel in ( Prefrences ->Additional). Please refer attached image
   
3. If you enable 'Custom Fields' panel, it will not render 'edit' option.

[costdev]

Reproduction Report

Description

This report validates whether the issue can be reproduced.

Environment

• WordPress: 6.4-alpha-56267-src
• PHP: 7.4.33
• Server: Apache/2.4.56 (Ubuntu)
• Database: mysqli (Server: 5.7.41-0ubuntu0.18.04.1 / Client: mysqlnd 7.4.33)
• Browser: Firefox 115.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Three 1.2
• MU Plugins: None activated
• Plugins:
  • Advanced Custom Fields 6.2.0
  • Gutenberg 16.4.0
  • WP Test Reports 0.2.0

Steps to reproduce

1. Enable a plugin that adds a custom field panel to the editor, such as Advanced Custom Fields. Add a new custom field that appears on post/page edit screens.
2. Navigate to Pages > Add New and insert a Classic block.
3. Add some content to the Classic block so the scrollbar appears.
4. 🐞Scroll to the bottom of the Classic block's content.

Actual Results

1. ✅ The Classic block toolbar moves up the page, rather than remaining in place. Issue reproduced.

Additional Notes

• When the custom field panel is disabled, the Edit button appears and clicking this isolates the editing to a modal, where the toolbar is sticky as expected.
• However, when the custom field panel is enabled, editing the Classic block is done inline.
  • position: sticky will not work when an ancestor element has the CSS overflow property set to hidden, scroll or auto.
  • The .edit-post-visual-editor ancestor element has overflow: hidden. Temporarily disabling this in DevTools shows the Classic block's toolbar is sticky as expected.

[t-hamano]

The Classic block editor is not displayed as modal when the editor is not an iframe. And I think the fundamental problem is because the overflow:hidden; is given to the top element, as @costdev mentioned. This style was added in #50209.

I think the solution to this problem is to add overflow: clip, as was done in #50237. But instead, the problem of the block toolbar overlapping with the classic block toolbar is back.

If the classic block toolbar were expanded and became two-tiered, the block toolbar would be completely hidden.

@andrewserong Do you know of any ideal approach to this problem? 🙏

[stokesman]

I think Aki likely meant to mention #49978 as the cause for this. It appears the single style rule it added needs to be applied only when the editor is iframed. Besides this issue, from my testing it also broke the block supports sticky positioning.

---

@saurabh20, I appreciate your gracious tone in reporting this issue. In looking for a fix for this, I realized it can be patched by a plugin or theme pretty easily. So in case you'd to work around this immediately here’s a plugin that did it for me.

<?php
/**
 * Plugin Name:       Classic Block Resticky
 * Description:       Ensures the classic block’s formatting toolbar is sticky when custom fields are present.
 */

add_action( 'admin_footer', function() {
	// Bails unless on a block editor screen
	if ( ! get_current_screen()->is_block_editor() ) return;

	?>
	<style>
		.has-metaboxes .edit-post-visual-editor { overflow: unset; }
		/* Prevents overlap of formatting toolbar and the block toolbar */
		.has-metaboxes .is-selected .block-library-classic__toolbar { top: 59px; }
	</style>
	<?php
}, 1000);

Of course, you could put that into the functions.php file of a theme and it should work too.

[saurabh20]

@stokesman Thank you very much for this workaround 👍
I'll test this and let you know if I encounter any issues.

Looking forward to this fix in the next release

[andrewserong]

Nice investigation, folks!

@andrewserong Do you know of any ideal approach to this problem? 🙏

Thanks for the ping, looks like @stokesman came up with a good fix over in #53540, which LGTM.

If the classic block toolbar were expanded and became two-tiered, the block toolbar would be completely hidden.

Sounds like that could be a good follow-up.

[t-hamano]

If the classic block toolbar were expanded and became two-tiered, the block toolbar would be completely hidden.

As per this comment, it seems to me that we can solve this problem by displaying the classic block as a modal in the non-iframed post editor as well 👍

[maddisondesigns]

@t-hamano Please don't do this. It's bad enough being in a modal popup in the iFramed editor

[einradusa]

I think Aki likely meant to mention #49978 as the cause for this. It appears the single style rule it added needs to be applied only when the editor is iframed. Besides this issue, from my testing it also broke the block supports sticky positioning.

@saurabh20, I appreciate your gracious tone in reporting this issue. In looking for a fix for this, I realized it can be patched by a plugin or theme pretty easily. So in case you'd to work around this immediately here’s a plugin that did it for me.

<?php
/**
 * Plugin Name:       Classic Block Resticky
 * Description:       Ensures the classic block’s formatting toolbar is sticky when custom fields are present.
 */

add_action( 'admin_footer', function() {
	// Bails unless on a block editor screen
	if ( ! get_current_screen()->is_block_editor() ) return;

	?>
	<style>
		.has-metaboxes .edit-post-visual-editor { overflow: unset; }
		/* Prevents overlap of formatting toolbar and the block toolbar */
		.has-metaboxes .is-selected .block-library-classic__toolbar { top: 59px; }
	</style>
	<?php
}, 1000);

Of course, you could put that into the functions.php file of a theme and it should work too.

I don't see classic block resticky as a Wordpress plugin. Where do I get it? I am not a coder :(

[stokesman]

@einradusa, if you know how to install a plugin from a zip file then it's just a matter of putting that snippet into a php file and then making a zip of it. To demonstrate, I made gist of it and that provides a zip download. Anyway the plugin shouldn't be needed with WP >= 6.3.2. If you do have need of it, keep in mind it relies on having the custom fields panel enabled.