Editor: Hide plugin buttons in header on mobile layouts

[p-jackson]

Changes proposed in this Pull Request

• Tidy up the icons in the header on mobile viewport widths.
• Added a filter in case we want to disable this in a hurry.

This is a stripped down version of the original PR that also collapsed the publish/save/update buttons #49079

Testing instructions

• Checkout branch, sandbox a test site, and run yarn dev --sync
• Open a post or page in the block editor
• Shrink viewport down to mobile size and observe the plugin buttons disappear (they should still be available in the more menu)

Fixes #48337

[matticbot]

Test live: https://calypso.live/?branch=update/collapse-plugin-icons-on-mobile

[matticbot]

Caution: This PR affects files in the Editing Toolkit Plugin on WordPress.com
Please ensure your changes work on WordPress.com before merging.

D56047-code has been created so you can easily test it on your sandbox. See this FieldGuide page about developing the Editing Toolkit Plugin for more info: PCYsg-ly5-p2

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[Copons]

This works well except for an edge case where pinned plugins might appear before the settings icon.
Given we are only keeping the first-child, it means that if a plugin icon is the first, we end up hiding the settings:

As far as I can see, the repro steps are a bit weird:

• Click on the JP icon to open the JP sidebar.
• Click on the star icon (only visible on large screens) to unpin JP from the header.
• Click on the star icon again.
• ⚠️ The JP icon is now before the settings.

The weird part is that this instead works appropriately:

• Click on the JP icon to open the JP sidebar.
• Click on the star icon to unpin JP from the header.
• Close the JP sidebar.
• Open the JP sidebar through the More menu.
• Click on the star icon to pin JP to the header.
• ✅ The JP icon is now after the settings.

In the scenario where the settings icon is hidden, AFAIK the only way of opening the post/block sidebar (aside from resizing the window or hit ⇧⌘,, which might not be possible on mobile) would be to select a block and click on "Show More Settings" (first item of the block toolbar's "more options" menu).

---

As I said at the beginning, I'm inclined to consider this an unlikely edge case, which has a clear (although not straightforward) workaround.

Also, as mentioned internally, Gutenberg itself should have hidden the icons on small screens in the first place, and this is apparently a regression.
With this in mind, the WPCOM fix should be considered temporary (hopefully, at least 😄), which IMHO makes this good enough even with the edge case issue.

[Copons]

This LGTM, and making it filterable is an excellent idea! ✨

I'm "pre-approving" this as I deem the edge case is unlikely enough.
Although, before merging, I'd recommend to observe p7DVsv-amS-p2, because @jasmussen is working on a fix on Gutenberg, which might render this PR obsolete very quickly.

[jasmussen]

I have a fix for this in core, here: WordPress/gutenberg#28521

This seems like a lot of code for the fix, but I'll defer to you on the details. But it would also be good to remove this again once the core fix lands.

[Copons]

The Core fix is scheduled for 9.9, which should land next week.
I guess we can wait 1-2 week for 9.9 to merge into WPCOM rather than have multiple ETK releases, considering that the issue is visually (very!) unpleasant, but not a blocker. 🤔
@simison do you have any preferences?

[p-jackson]

@Copons I see that @simison has listed it as a blocker for the next onboarding test (pbAok1-1PR-p2) so I'm going to deploy this fix (it's not the only blocker of course, but I wouldn't want to be in the situation where we're waiting for a GB release before we start testing)

This seems like a lot of code for the fix

It is! Some of the code is unfortunately needed to satisfy the webpack build. The other code is so we can quickly disable it without an ETK release. Could be useful if when we ship GB 9.9 but aren't immediately in a position to ship a version of ETK.

edge case where pinned plugins might appear before the settings icon

I see the core fix has also WordPress/gutenberg#28526 dealt with this by just hiding everything after the first-child too.

[Copons]

edge case where pinned plugins might appear before the settings icon

I see the core fix has also WordPress/gutenberg#28526 dealt with this by just hiding everything after the first-child too.

Yup!
It's an acceptable stopgap, but there will be a follow up in Gutenberg to either move the settings button outside the pinned items container, or add a specific CSS class to it.
We might want to keep observing the header for a while, and revert this change once the "final" Core fix has found its way to WPCOM.
Meanwhile, the current Core workarounds won't conflict with this, so there won't be any urgency in reverting this change eventually. 🙂

[jasmussen]

Thanks for the work. I'm happy to be pinged directly for any followup questions or PRs that need to be done here.