Classic Editor block: toolbar is no longer sticky when scrolling #53477

saurabh20 · 2023-08-09T15:39:33Z

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

Go to Gutenberg Editor Wordpre 6.3
Use Classic Block
Write content & scroll
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 · 2023-08-09T16:52:11Z

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 · 2023-08-09T22:19:28Z

Hey there,

I have again checked the following:

I reinstalled the latest WordPress 6.3 on my 5 websites, which are hosted on different servers and hosting providers.
I disabled all plugins on all 5 sites.
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 · 2023-08-09T23:02:56Z

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 · 2023-08-09T23:18:53Z

I also discovered few new findings,

If we have any plugin/theme having some PANEL or Section in Block editor then 'edit' option disappering.
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
If you enable 'Custom Fields' panel, it will not render 'edit' option.

costdev · 2023-08-10T00:03:33Z

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

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.
Navigate to Pages > Add New and insert a Classic block.
Add some content to the Classic block so the scrollbar appears.
🐞Scroll to the bottom of the Classic block's content.

Actual Results

✅ 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 · 2023-08-10T10:14:04Z

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 · 2023-08-10T19:35:20Z

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 · 2023-08-10T22:59:28Z

@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 · 2023-08-11T00:11:20Z

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 · 2023-08-11T08:40:25Z

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 · 2023-08-11T08:42:26Z

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

einradusa · 2023-10-04T02:20:29Z

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 · 2023-10-04T05:18:15Z

@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.

saurabh20 changed the title ~~Non Sticky 'Classic Editor' block after scrolling~~ Non Sticky 'Classic Editor' Menu block after scrolling after Wordpress 6.3 Update Aug 9, 2023

saurabh20 changed the title ~~Non Sticky 'Classic Editor' Menu block after scrolling after Wordpress 6.3 Update~~ Non Sticky 'Classic Editor' Menu block after scrolling in Wordpress 6.3 Update Aug 9, 2023

saurabh20 changed the title ~~Non Sticky 'Classic Editor' Menu block after scrolling in Wordpress 6.3 Update~~ Non Sticky 'Classic Editor' Menu block after scrolling in Wordpress 6.3 Aug 9, 2023

Mamaduka added Needs Testing Needs further testing to be confirmed. [Block] Classic Affects the Classic Editor Block labels Aug 9, 2023

annezazu changed the title ~~Non Sticky 'Classic Editor' Menu block after scrolling in Wordpress 6.3~~ Classic Editor block: toolbar is no longer sticky when scrolling Aug 9, 2023

annezazu added [Status] Needs More Info Follow-up required in order to be actionable. and removed Needs Testing Needs further testing to be confirmed. labels Aug 9, 2023

annezazu removed the [Status] Needs More Info Follow-up required in order to be actionable. label Aug 9, 2023

stokesman mentioned this issue Aug 10, 2023

Fix support of sticky position in non-iframed post editor #53540

Merged

github-actions bot assigned stokesman Aug 10, 2023

github-actions bot added the [Status] In Progress Tracking issues with work in progress label Aug 10, 2023

stokesman mentioned this issue Aug 10, 2023

When does the Block Editor get iFramed? #53511

Closed

jordesign added the [Type] Bug An existing feature does not function as intended label Aug 10, 2023

stokesman closed this as completed in #53540 Aug 15, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Classic Editor block: toolbar is no longer sticky when scrolling #53477

Classic Editor block: toolbar is no longer sticky when scrolling #53477

saurabh20 commented Aug 9, 2023

annezazu commented Aug 9, 2023

saurabh20 commented Aug 9, 2023

annezazu commented Aug 9, 2023

saurabh20 commented Aug 9, 2023

costdev commented Aug 10, 2023 •

edited

t-hamano commented Aug 10, 2023

stokesman commented Aug 10, 2023 •

edited

saurabh20 commented Aug 10, 2023

andrewserong commented Aug 11, 2023 •

edited

t-hamano commented Aug 11, 2023

maddisondesigns commented Aug 11, 2023

einradusa commented Oct 4, 2023

stokesman commented Oct 4, 2023

Classic Editor block: toolbar is no longer sticky when scrolling #53477

Classic Editor block: toolbar is no longer sticky when scrolling #53477

Comments

saurabh20 commented Aug 9, 2023

Description

Step-by-step reproduction instructions

Screenshots, screen recording, code snippet

Environment info

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

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

annezazu commented Aug 9, 2023

saurabh20 commented Aug 9, 2023

annezazu commented Aug 9, 2023

saurabh20 commented Aug 9, 2023

costdev commented Aug 10, 2023 • edited

Reproduction Report

Description

Environment

Steps to reproduce

Actual Results

Additional Notes

t-hamano commented Aug 10, 2023

stokesman commented Aug 10, 2023 • edited

saurabh20 commented Aug 10, 2023

andrewserong commented Aug 11, 2023 • edited

t-hamano commented Aug 11, 2023

maddisondesigns commented Aug 11, 2023

einradusa commented Oct 4, 2023

stokesman commented Oct 4, 2023

costdev commented Aug 10, 2023 •

edited

stokesman commented Aug 10, 2023 •

edited

andrewserong commented Aug 11, 2023 •

edited