Synced Pattern: Display issues with background, and bottom panels "sticking"

[laurelfulford]

Description

There's a couple differences when testing the Synced Pattern editor in WP 6.6 RC2 compared to how it looks in WP 6.5.x:

• There's a light grey border around the editor content
• Bottom panels (like if you have the Custom Fields displaying) don't move down as you build longer patterns.

I'm reporting these together in case they're related, but let me know if I should break them out into separate issues!

Step-by-step reproduction instructions

1. For ease of seeing the issues, edit a page and add a Group Block with a background, and an image inside of it. Save it as a Synced Pattern.
2. Click the Synced Pattern, and click Edit Original.
3. From the Synced Pattern editor, navigate to Prefernces under the ... menu, and enable the Custom Fields panel under the Advanced section (this bit is admittedly a weird edge case, but our team originally ran across this issue with Yoast's panel showing automatically -- this is just a way to see it with Core tools).
4. Note the appearance of the editor: there's a light grey boarder around the content that isn't there in 6.5.
5. Copy your image block a couple times inside of the synced pattern editor, until the bottom one goes offscreen. Scroll down to see it and note that it goes behind the Custom Fields panel.

Screenshots, screen recording, code snippet

Synced Pattern editor in WP 6.5.4 with my pattern:

Synced Pattern editor with the same pattern in WP 6.6 RC2:

Synced Pattern editor in WP 6.5.4 after copying the image block & scrolling to the bottom:

Synced Pattern editor in WP 6.6 RC2 after copying the image block & scrolling to the bottom:

Environment info

WordPress 6.6 RC2, without Gutenberg installed.
Using the Twenty Twenty Four theme.

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

[carolinan]

Thank you for reporting this issue.
I am testing with 6.6-RC2-58675, with and without Gutenberg trunk and with and without Yoast SEO Version 23.0.
Yoast SEO is not available on the pattern screen.

I do not se this option in the preferences when I am editing a synced or not synced pattern:

From the Synced Pattern editor, navigate to Prefernces under the ... menu, and enable the Custom Fields panel under the Advanced section

Are there any other steps needed to reproduce the issue?

---

The grey border was visible on 6.5 with classic themes, when the meta boxes were showing and the non-iframed editor was enforced, but this was supposedly fixed in #62350

[laurelfulford]

Thanks for double-checking this, @carolinan!

I do not se this option in the preferences when I am editing a synced or not synced pattern:

I messed around with it a bit, and I can get it but it depends on how I edit the pattern, which I missed the first time through!

• If I go from WP Admin > Appearance > Patterns, I don't get the 'Advanced' section under preferences to enable the Custom Fields.
• If I insert the synced pattern into a post/page, then click 'Edit Original' I do get it.

I'm seeing something similar when in install and activate Yoast -- the bottom panel only appears when I click 'Edit Original' from a post/page, but it doesn't happen from Appearance > Patterns.

Just let me know if that doesn't help and I can try to do some more testing -- thanks!

[carolinan]

I tested with both Twenty Twenty-Four and a classic theme, Twenty Seventeen, using WordPress 6.6 RC2 and WordPress 6.5.5.

If I select "Editor Original", I do see the Advanced options under preference and I can enable custom fields from there.
I do not see the bug where the meta boxes are stuck further up the page, they stay at the bottom of the editor.

@youknowriad The preference panel shows different settings depending on how you choose to edit a pattern: From the Site Editor >Patterns edit option, or using "Edit Original". Is this intentional?

[laurelfulford]

Thanks @carolinan!

I do not see the bug where the meta boxes are stuck further up the page, they stay at the bottom of the editor.

I only ran into this when I edited the pattern to be longer than the screen's height. Initially the panels stick to the bottom for me, but it's like they don't move down as the editor content gets longer, so the blocks end up running behind them.

I made a little video which probably explains what I'm seeing better than I am -- it's with Twenty Twenty Four, the WP 6.6 RC 2 and just the WordPress Beta plugin installed:

Screen.Recording.2024-07-09.at.8.29.02.AM.mov

If the bottoms panels aren't meant to show here, it's probably a moot point! 🙂 (Assuming that this also isn't just me!)

[youknowriad]

@youknowriad The preference panel shows different settings depending on how you choose to edit a pattern: From the Site Editor >Patterns edit option, or using "Edit Original". Is this intentional?

Is is intentional that the "custom fields" option is edit-post only as meta-boxes can't work as they exist today in the site editor.

I'm not entirely sure whether the meta-boxes should be visible or not when editing a pattern in the post editor though. Maybe they shouldn't.

[carolinan]

In general it is confusing that there are two screens to edit patterns in the first place.

[carolinan]

I had a spacer block that was 400px high in my pattern, but I will try again with even longer content.
Meanwhile I am also trying to find an older issue, because I clearly remember that this was reported for the block editor once before, and solved.

[youknowriad]

In general it is confusing that there are two screens to edit patterns in the first place.

There are two screens to edit everything, what we did is to unify (as much as we can) the way they work. But it's a hard problem:

• You don't want to reload the page when you navigate the site editor
• You don't want to leave the "post editor" when you click "edit template" or "edit original" (as you might lose your changes...)

So until we "complete" the admin redesign (making everything a single page basically), we'll have to live with two screens that are identical to edit this kind of "connected entities"

[carolinan]

This time I added a 4000px tall spacer block and I was able to reproduce it.
When I select the option "Edit original" from the block editor, the components-resizable-box__container inside edit-post-visual-editor has a calculated height set in pixels instead of 100%. The custom fields displays at that height.

[carolinan]

And I believe this is the previous issue: #38062

[carolinan]

I tried looking into this on Friday before the work on #63724.
It seems to be related to the props in the ResizableBox component.

[smerriman]

What is the status of this? This appears to have been brought up prior to the release of 6.6, so I'm not sure why it wasn't resolved as it is really a breaking issue.

I am completely unable to edit some block patterns by clicking it and then 'Edit original', due to the overlap. Compacting the metaboxes isn't even a viable workaround, as they still cover up a portion of the content making it inaccessible.

Feels like this is something that needs urgently pushing to a minor 6.6 release?