Gutenberg: "Submit for Review" button regression on mobile

[jasmussen]

As discovered in https://github.com/WordPress/gutenberg/pull/9495#issuecomment-428549806, the fact that we allow the pre-publish checks to be turned off causes the editor bar to not fit on mobile (notably iPhone 5 size screens in german), where the width of the publish button label can say "Zur Überprüfung einreichen...".

Suggested solution: if a user disables the pre-publish checks, this only works on larger than mobile breakpoints, and on mobile, the pre-publish checks are always enabled. This is similar to how the "Unified Toolbar" function works: this is disabled on mobile because it technically isn't feasible to dock the toolbar to the top on mobile web due to how iphone treats fixed position.

CC: @nosolosw

[gziolo]

There is no corresponding PR, moving to 4.2.

[nfmohit]

Submitted #10803 addressing this issue ❤️

[nosolosw]

Hey, I don't understand how the "Pre-publish checks" play any role here. To make sure I follow the problem: is it that the editor bar grows horizontally in mobile beyond the viewport?

At least this happens when the "publish" button text is longer than a few characters, for example: when a contributor's post has been published (so the button shows the "Submit for review"). This screenshot shows how the UI looks like for mobile viewport both when a contributor's post has been published but is waiting for review (pre-publish checks enabled) and when the pre-publish checks are enabled (so the publish buttons shows the the "schedule for review" text).

Perhaps we need to work here on preventing the Publish button from growing horizontally?

[jasmussen]

@nosolosw

Hey, I don't understand how the "Pre-publish checks" play any role here. To make sure I follow the problem: is it that the editor bar grows horizontally in mobile beyond the viewport?

The way we solved this in the past was to make sure that the button _always_ says "Publish...", which is a short label that fits on mobile.

But that label only makes sense if it opens up the pre-publish checks. If a user disables those pre-publish checks, the top level button shows the direct action.

The solution proposed so far, which I believe is implemented in #10803, is to simply _always show the pre-publish checks on mobile_. On a small screen with limited real estate, I think it's okay to enforce the pre-publish checks as an extra confirm action, regardless of the users desktop setting.

[nosolosw]

As a follow-up from a slack convo with Joen: #10803 doesn't fix the issue. The "Submit for review" button will be shown anyway due to this check. Once the user hits the "Submit for review" button in the pre-publish checks modal, the post changes state to isPending so the next time the toggle won't be shown, but the button.

I'm trying to understand what that check is for and the side-effects it may have to change it. Will follow up with a PR to fix this.

[nosolosw]

https://github.com/WordPress/gutenberg/pull/10941 refactors the code and bypasses the isPending condition on small mobile viewports.