Gutenberg: Use Fullscreen mode in Calypsoify

[mmtr]

Changes proposed in this Pull Request:

Calypsoify uses now the Gutenberg Fullscreen Mode instead of injecting the close button and including custom CSS.

We realized that the Gutenberg Fullscreen Mode is providing a UI very similar to Calypso, so by using it we can simplify the code and make it more maintainable.

This PR also includes a small fix for an 500 error raised when Jetpack is checking if Gutenberg is enabled. Fixed on #10389.

Fixes Automattic/wp-calypso#27937

Testing instructions:

• Edit a post in Gutenberg
• Append &calypsoify=1 to the URL and reload the post editor.
• Make sure that the editor is displayed in Fullscreen Mode.
• Check that there are no options for disabling the Fullscreen Mode when clicking on the "More" button.
• Confirm that the back button uses now an icon and it redirects to the posts list in Calypso when clicking on it.

Screenshots:

Before

After

Proposed changelog entry for your changes:

I don't think this is needed given Calypsoify is mainly used internally. Anyway, if needed, this is my proposed changelog:

Calypsoify uses now the Gutenberg Fullscreen Mode instead of injecting the close button and including custom CSS.

[Copons]

This PR is more oriented at making Calypsoified Gutenberg and Gutenberg in Calypso as identical as possible, but in this particular case, I'd say let's keep the group visible even if it's not there in Calypso, and only hide the "Fullscreen Mode" item.

Also, notice that now it's the last child, but that could change.
Off the top of my head there is no simple selector there, but I might be very wrong. 🙂

[mmtr]

Thanks for that! I've just committed a change handling this 🙂

I thought this view mode selector was like a radio button (you can only select one of them), but I realize that you can activate all of them at the same time, so it makes sense to only hide the "Fullscreen Mode" option.

Regarding the CSS selector using :last-child. I don't like it either, but the HTML rendered by Gutenberg doesn't provide any other class we can use for identifying this element:

[Copons]

Let me add a bit of history behind this PR.

When I wrote the code for Calypsoify Gutenberg, there was no fullscreen mode yet (or maybe there was but I didn't notice it), and the whole idea was to make Gutenberg look as much as possible as Calypso.
I've spent time styiling the main UI components (buttons, notices, etc.) to make them look as native Calypso components.

Meanwhile, Calypso-side, it had been decided that Gutenberg would have kept its style for now.
This caused the weirdness that Calypsoified Gutenberg looked more like Calypso than Gutenberg in Calypso. (I know, not simple to follow 😅)

When we learned that Gutenberg had a new fullscreen mode with a nice "Back" icon, we went to replace the Calypsoified Gutenberg's "Close" button with that icon.
Only then we realized that the fullscreen mode looked very much like Gutenberg in Calypso itself. Like, a lot.

All the overrides needed to hide the masterbar, the sidebar, etc. were there, a mere Redux action away.

So this PR simply dispatches that action, and removes (most) of the overrides as they are not needed anymore.

cc @Automattic/lannister this also means that by dispatching that action in Calypso, we might be able to drop a lot of CSS there as well.

[jetpackbot]

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

Scheduled Jetpack release: November 6, 2018.
Scheduled code freeze: October 30, 2018

Generated by 🚫 dangerJS

[Copons]

This LGTM!
We should be well in time for the 6.7 release! ✨

[jeherve]

c'ing @georgestephanis for a review on this since he's currently working on other Calypsoify improvements in #10371

[Copons]

Oh very cool!
I think that if we get to merge this, and rebase #10371, it will become considerably smaller.
On the other hand, it could be easier to just close this and reopen it after #10371 merges.
Either way sounds good to me, @georgestephanis

[gwwar]

@jeherve Can we still target this for the 6.7 release? @Copons any blockers here? I can give this a spin as well.

[Copons]

Sorry folks, this accidentally breaks the Revisions view. I'll push a hotfix in a bit, but meanwhile do not merge please! 🙇

[Copons]

Again, sorry about this.
I was too hasty in deleting all that CSS, and forgot that part of it was applied to the Revisions page, which doesn't load Gutenberg, and so of course doesn't have wp.data.select.

7360cde restore the CSS overrides of the Revisions page, and guard against undefined wp.data.select which killed it.

Testing instructions:

• Load a Gutenberg post, with ?calypsoify=1
• In order to get some revisions of the post: do some changes, save; do some other changes; update.
• Click on the new Revisions link in the Gutenberg's Document sidebar.
• Make sure the Revisions page is calypsoified as well (doesn't have any wp-admin sidebar and masterbar), and that clicking on the "back to editor" links redirects to a still calypsoified version of Gutenberg (no need to have the ?calypsoify=1 anymore; one way to check if Calypsoify is active is to check the Close URL, it should point to Calypso).

[jeherve]

Nice catch! 👍

[Copons]

I feel so bad, but I've had to sneak in one last change. 😭

ae88b29 adds back the CSS needed to hide the "Manage Reusable Blocks" links from the editor.
More context in 9-gh-calypsoify

Testing instructions:

• Create a reusable block (block toolbar -> dots menu -> "Add to reusable blocks").
• Open the Blocks inserter, and expand the "Reusable" section (should be the last one).
• Make sure the "Manage All Reusable Blocks" link is hidden.

[jeherve]

This seems to work for me. Merging.