Nav sidebar: Add "view all" and "create new" buttons to sidebar

[p-jackson]

Note to anyone reading this while preparing a release of the FSE plugin

This change doesn't require any release notes. We're developing a new feature which is currently hidden behind a flag.

Changes proposed in this Pull Request

• Re-arrange files to make room for more components
• Add "View all posts" button
  • a8c.WpcomBlockEditorNavSidebar.allPostsLabel hook so calypso can override label
  • a8c.WpcomBlockEditorNavSidebar.allPostsUrl hook so calypso can send user back to calypso rather than wp-admin
• Add "Create new post" button
  • a8c.WpcomBlockEditorNavSidebar.createPostLabel hook so calypso can override label
  • a8c.WpcomBlockEditorNavSidebar.createPostUrl hook so calypso will create new post using iframe'd block editor
• a8c.WpcomBlockEditorNavSidebar.linkTarget hook so calypso can ensure links open in the outer frame rather
• Disabled calypso css class name lint rule (names need to be more specific so they don't collide with elements in Gutenberg)

I decided to add a single general purpose getCalypsoUrlInfo message to <CalypsoifyIframe> rather than individual messages to get the "view all" and "create new" urls. In the future we'll want the ability to build even more calypso urls, like a block editor url for each post id. Seemed better to just give iframe-bridge-server.js the building blocks to do it.

I also decided to have messages to fetch the label text from <CalypsoifyIframe> rather than have it in iframe-bridge-server.js. I don't think the wpcom-block-editor app has support for translations.

Testing instructions

• Start up dev environment for calypso, wpcom-block-editor and FSE! 3 seperate apps to make some buttons 🤦
• Ensure WPCOM_BLOCK_EDITOR_SIDEBAR is defined†
• Open a page or post in the calypso block editor
  • Click (W) to open sidebar
  • Button label text should match mockups pbAok1-JQ-p2#comment-1676
  • Clicking link replaces the url in the browser
• Use wp-env or something similar to check the FSE plugin works in wp-admin without calypsoify. The button label text might not be perfect; I'm using some pre-existing text that already exists in core. I think it's close enough and we're not expecting this to be used in wp-admin editors initially. It just needs to not break.

---

† If running locally with wp-env then define WPCOM_BLOCK_EDITOR_SIDEBAR in apps/full-site-editing/.wp-env.override.json:

    {
      "config": {
      	"WPCOM_BLOCK_EDITOR_SIDEBAR": true
      }
    }

Or on the sandbox define it in 0-sandbox.php

[matticbot]

Test live: https://calypso.live/?branch=update/nav-sidebar-view-all-pages

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~121 bytes added 📈 [gzipped])

name              parsed_size           gzip_size
gutenberg-editor       +421 B  (+0.0%)     +121 B  (+0.1%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[matticbot]

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

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

[ramonjd]

In Calyspo, adding a new page or post sends me off to wp-admin

[p-jackson]

Start up dev environment for calypso, wpcom-block-editor and FSE! 3 seperate apps to make some buttons 🤦

Unfortunately this needs to be tested against calypso.localhost:3000 because this contains changes to the calypsoify iframe. Glad the sidebar is resilient to the new calypso code not being there though! It's falling back to the dotorg site behaviour as expected.

[ramonjd]

Argh, dang. Thanks for highlighting that. 🤦

[ramonjd]

I also wanted to add that the buttons work and look as expected otherwise 👍

[ramonjd]

Okay retested using calypso localhost and it works as described. There are no areas in the code that jump out at me, so it would still be good get a onceover from @Automattic/cylon when they have time.

[noahtallen]

so it would still be good get a onceover from cylon

oops

This looks fine from an FSE plugin perspective to me. I didn't test it though :)

Btw, does this handle the existing back button behavior in the top-left of the sidebar thing? i.e. if you enter the site editor from customer home, will it take you back to customer home? (and will the button label be correct?)

[p-jackson]

Btw, does this handle the existing back button behavior in the top-left of the sidebar thing? i.e. if you enter the site editor from customer home, will it take you back to customer home? (and will the button label be correct?)

@noahtallen it goes back to wherever the calypsoify iframe tells us to go back to. So if calypsoifyGutenberg.closeUrl says customer home then that's where we go. Sometimes it says to go back to the theme gallery, in which case we go there.

The label we use for the text link is correct but unfortunately this doesn't fix the tooltip for the (W) button if that's what you meant. I'm going to work on using the official (W) button hook next, which will allow us to fix the tooltip properly.

[noahtallen]

this doesn't fix the tooltip

Cool. I wasn't even aware that that was broken; I just meant the main label itself. Sounds good!

[p-jackson]

IE test failures unrelated: #43298

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/3851908

Thank you @p-jackson for including a screenshot in the description! This is really helpful for our translators.

[a8ci18n]

Translation for this Pull Request has now been finished.