Gutenberg: Sites unscrollable on mobile after 7.5.0 update

[arjendejong12]

Describe the bug
After the latest update (7.5.0), sites viewed on mobile cannot be scrolled anymore.
The following css is responsible for this:

html {
    position: fixed;
    width: 100%;
}

inserted by the following file: gutenberg/build/block-editor/style.css?ver=1581605516, which it gets from the following .scss file.

The style.css file in version 7.4.0 doesn't contain this css.

To reproduce
Steps to reproduce the behavior:

1. Update to the latest version (7.5.0)
2. View site in mobile view or device

Expected behavior
Page should be scrollable.

[frankyifei]

can confirm. same here

[mariohamann]

I can confirm for every theme – but only if I use our individual self-created block suite. I tested Ghost Blocks, Ultimate Blocks and CoBlocks and they do work. Maybe there is a bug in our block collection. @frankyifei @arjendejong12 @glendaviesnz – do you have self-created blocks as well?

Edit 1

I'm getting deeper into it. After activating our personal block suite, there are a lot of styles, that shouldn't be there. In fact our block suite has no frontend styles at all as everything is saved in our theme.

Without block suite:

With block suite:

Edit 2

1. I created a completely clean WordPress-Website.
2. I installed Gutenberg 7.5: Everything fine.
3. I created a new block with create-guten-block: It loads all backend styles AND we can't scroll because in the backend style is fixed.
4. I deactivated Gutenberg 7.5: It still loads all backend styles BUT we can scroll.
   -> There seems to be a problem with create guten block! It seems to load all backend styles – that's an real performance issue and now even a usability problem. @ahmadawais

Edit 3

Wrote an issue in create-gutenblock project: https://github.com/ahmadawais/create-guten-block/issues/268

[arjendejong12]

Yeah, I do have my own blocks created with cgb. Let's hope this gets resolved quickly! Thanks for getting deeper into this.

[ahmadawais]

@mariohamann feel free to send in a PR and post about the tests you did. I'll merge that. @asharirfan can you help with this?

[youknowriad]

Closing as it seems to be a CGB bug loading editor styles in the frontend.

[ahmadawais]

CGB gives you all the code you can modify it.

This PR must have solved the issue https://github.com/ahmadawais/create-guten-block/pull/267/files

I suggest you update the cgb-scripts and your code manually

Successfully published:

• [email protected]
• [email protected]

[jorgefilipecosta]

Hi @ockham, @youknowriad PR https://github.com/WordPress/gutenberg/pull/20050 moved some styles form edit post to the block editor module that applied to the "html" element https://github.com/WordPress/gutenberg//blob/c219fed9e282a1c8467827edacf0b90303587497/packages/block-editor/src/components/editor-skeleton/style.scss#L3.

The block editor may be used in contexts we are not expecting, e.g: maybe someone uses a small block editor for comments on a website. Would it make sense to revert the change back to the edit-post module?

[youknowriad]

I don't think we should revert the change. What we should/can do though, is to only apply the global style if the "EditorSkeleton" component is mounted. (maybe by adding a className to html when it's mounted).

Ideally we don't have to do this html styling at all but due to how scrolling work on mobile devices, it seems that it's the only solution we have for now.

[jorgefilipecosta]

I don't think we should revert the change. What we should/can do though, is to only apply the global style if the "EditorSkeleton" component is mounted. (maybe by adding a className to html when it's mounted).

That seems like a nice solution, maybe just having an effect that on mount adds a class to html if html still has no the class would be enough?

[youknowriad]

yes, this should work.

[frankyifei]

I can confirm for every theme – but only if I use our individual self-created block suite. I tested Ghost Blocks, Ultimate Blocks and CoBlocks and they do work. Maybe there is a bug in our block collection. @frankyifei @arjendejong12 @glendaviesnz – do you have self-created blocks as well?

Edit 1

I'm getting deeper into it. After activating our personal block suite, there are a lot of styles, that shouldn't be there. In fact our block suite has no frontend styles at all as everything is saved in our theme.

Without block suite:

With block suite:

Edit 2

1. I created a completely clean WordPress-Website.
2. I installed Gutenberg 7.5: Everything fine.
3. I created a new block with create-guten-block: It loads all backend styles AND we can't scroll because in the backend style is fixed.
4. I deactivated Gutenberg 7.5: It still loads all backend styles BUT we can scroll.
   -> There seems to be a problem with create guten block! It seems to load all backend styles – that's an real performance issue and now even a usability problem. @ahmadawais

Edit 3

Wrote an issue in create-gutenblock project: ahmadawais/create-guten-block#268

I do not have self created blocks

[mariohamann]

Maybe you use a third-party block which is based on create-guten-block?