Launch button and plugin icons need menu collapse on mobile

[lsl]

The block editor navigation bar needs to collapse branding icons and extra buttons on mobile views.

Simple sites are fine in most cases, the problems arise when there are too many dynamic additions to the menu bar.

Examples I found:

• A8c icon (global styles?) + Jetpack icon + Launch button
• Draft save cloud icon
• Screen widths where the undo/redo actions aren't yet collapsed

Note: Launch button will soon be added also to the editor header in wp-admin #47803

[yansern]

I think it depends on how do we wanna fix it, move the Publish/Launch/Preview etc. button into the triple dot more menu?

If that is the case, CSS trickery or DOM wrangling (reinsert DOM) might be not be achievable (and not sure if it will always stay there if the react component in Gutenberg decides to rerender).

The two places I would look at is the <Header> component in Gutenberg and also SlotFills for this https://developer.wordpress.org/block-editor/developers/slotfills/plugin-sidebar-more-menu-item/ or this https://developer.wordpress.org/block-editor/developers/slotfills/plugin-more-menu-item/, where we would use that to:

1. Create a plugin (maybe another module in ETK) that rerenders <PostPreviewButton>, <PostPublishButtonOrToggle>, etc. in those SlotFills (i hope they are importable from Gutenberg).
2. Use CSS to hide the existing buttons rendered by Gutenberg when on mobile.

This is probably possible without messing with Gutenberg's code.

[lsl]

This is probably possible without messing with Gutenberg's code.

Probably fair to add a filter to re-organize menu options.

Thinking purely from a mobile ux perspective, do these suggestions make sense?

• Hide the preview button (on mobile), or at least move it under the hamburger.
• Double duty launch/publish/update (on mobile).
• Move the icons to the left of the CTA (on mobile). CTA should be fixed-right on mobile (a single settings icon I could justify, three I can not)