Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Page/Post editor: grey border appears on either side of the editor when using a classic theme with Jetpack blocks enabled #40678

Open
annezazu opened this issue Nov 19, 2024 · 6 comments · May be fixed by #40685
Open

Page/Post editor: grey border appears on either side of the editor when using a classic theme with Jetpack blocks enabled #40678

annezazu opened this issue Nov 19, 2024 · 6 comments · May be fixed by #40685
Assignees
@jeherve
Labels
[Experiment] AI labels added [Focus] Blocks Issues related to the block editor, aka Gutenberg, and its extensions developed in Jetpack [Pri] Normal [Status] Auto-allocated [Status] In Progress [Type] Bug When a feature is broken and / or not performing as intended

Comments

@annezazu
Copy link

I noticed today while doing some testing on a simple site with classic themes, like Twenty Seventeen, that there's a grey border/padding on either side of the editor when writing a new post or page:

Image

I can't replicate this in Core on Playground with GB installed + Twenty Seventeen: https://playground.wordpress.net/?plugin=gutenberg&theme=twentyseventeen It seems WordPress.com specific.
@annezazu annezazu added the [Type] Bug When a feature is broken and / or not performing as intended label Nov 19, 2024
@github-actions GitHub Actions
Copy link
Contributor

OpenAI suggested the following labels for this issue:

  • [Feature Group] Appearance & Themes: The issue relates to the appearance of the post/page editor in classic themes, which is affected by a visual anomaly.
  • [Feature] Classic Interface: The problem is reported while using classic themes, indicating that it concerns the traditional WordPress interface.
  • [Feature] Post/Page Editor: The grey border issue directly affects the post and page editor, highlighting a problem with editing functionality.

@Robertght
Copy link

I tested this on WordPress.com, Simple, AT and self-hosted and with Twentyseventeen and Twentysixteen, the results were the same. The border showed up on all sites, without any differences.

Is there another feature or information I'm missing in this context @annezazu?

@Robertght Robertght added the [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! label Dec 15, 2024
@annezazu
Copy link
Author

Hey Robert! I cannot replicate on a self hosted site per this playground link: https://playground.wordpress.net/?plugin=gutenberg&theme=twentyseventeen

Can you give me an example of a self hosted site where you can with Twenty Seventeen?

@Robertght
Copy link

@annezazu Sure!

Tested on Pressable: https://psbbobwoo2020com.mystagingwebsite.com/

But wait. After further testing, it turns out it's the Jetpack blocks module that's causing the side margins. Here's a short video:

CleanShot.2024-12-19.at.09.08.27.mp4

Mystery solved! :)

@jeherve I've moved this to Jetpack for now.

@Robertght Robertght transferred this issue from Automattic/wp-calypso Dec 19, 2024
@Robertght Robertght changed the title Page/Post editor: grey border appears on either side of the editor when using a classic theme Page/Post editor: grey border appears on either side of the editor when using a classic theme with Jetpack blocks Dec 19, 2024
@Robertght Robertght changed the title Page/Post editor: grey border appears on either side of the editor when using a classic theme with Jetpack blocks Page/Post editor: grey border appears on either side of the editor when using a classic theme with Jetpack blocks enabled Dec 19, 2024
@Robertght Robertght moved this from In Triage to Triaged in Automattic Prioritization: The One Board ™ Dec 19, 2024
@jeherve jeherve added [Focus] Blocks Issues related to the block editor, aka Gutenberg, and its extensions developed in Jetpack [Pri] Normal and removed [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! [Pri] TBD labels Dec 19, 2024
jeherve added a commit that referenced this issue Dec 19, 2024
@jeherve
Blocks: update remaining child blocks to API version v3
3f23283 
Fixes #40678

Follow-up to #34120
@jeherve jeherve linked a pull request Dec 19, 2024 that will close this issue
Open
3 tasks
@jeherve
Copy link
Member

jeherve commented Dec 19, 2024

That seems to be because when Jetpack blocks are active, the post editor doesn't use the iFramed editor, and that editor has a gray margin.

I'm not quite sure if the gray margin the expected behavior with the non-iFramed editor, since that margin and the background color come from Core ; here are 2 related PRs for example:

WordPress/gutenberg#62223
WordPress/gutenberg#68088

Interestingly, I would have expected the iFramed editor even when using Jetpack blocks, since we moved to version 3 of the API for all our blocks earlier this year, in #34120. I looked into it, and it seems we did not upgrade to v3 for some of our child blocks. We'll need to do that in #40685.

@annezazu
Copy link
Author

Amazing sleuthing! Thank you, folks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jeherve jeherve

Labels
[Experiment] AI labels added [Focus] Blocks Issues related to the block editor, aka Gutenberg, and its extensions developed in Jetpack [Pri] Normal [Status] Auto-allocated [Status] In Progress [Type] Bug When a feature is broken and / or not performing as intended
Projects
Automattic Prioritization: The One Board ™
Status: Triaged
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Blocks: update remaining child blocks to API version v3 Automattic/jetpack
4 participants
@jeherve @Robertght @matticbot @annezazu