Update header button styling and full width block margins for Gutenberg v8.0.0

[andrewserong]

This PR updates the FSE plugin with class names to add support for Gutenberg v8.0.0.

Changes proposed in this Pull Request

• Update class names used for hiding the close button on mobile viewports
• Update class names for removing additional margins on full width blocks

Testing instructions

Note: the whitespace at the top is dealt with separately in #41572

Mobile before	Mobile after

Full width blocks before	Full width blocks after

• On a site using dotcom FSE, enable the Edge sticker and sandbox this PR using the diff automatically generated below ( D42611-code )
• Edit a page, and on mobile the close / back button should be hidden as in the above screenshot
• Edit a page that contains full width blocks, and they should not overflow the page 'container', as in the above screenshot
• Remove the Edge sticker from your site and reload the editor, and make sure the styling still looks correct

Fixes #41513
Fixes part of #41521 (the other part is dealt with in #41572)

[matticbot]

Test live: https://calypso.live/?branch=update/fse-plugin-gutenberg-v8.0.0-compatibility

[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.

[andrewserong]

@Automattic/cylon 👋 — just added you as reviewers, too, but no worries if you don't have time to test it out. One question I had about the deployment process — once this is approved, do I deploy the diff immediately, too, or do we wait until the next FSE plugin release instead of deploying each diff separately?

[matticbot]

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

D42611-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

[alshakero]

I'm not entirely sure if I'm testing this correctly. But I followed the instructions closely and I can't get the CSS change above in my browser.

I have a FSE site (alshakero.wordpress.com) . With GB 8.0.0-rc.1 and applied the patch, sandboxed my requests, sandboxes s0.wp.com, and still can't see the effect.

It seems that CSS coming from this URL https://s0.wp.com/_static/??-eJylUttygyAQ/aESkkxS40On3wKCui2wDgva/n1XnaTjVPqSN5Zz2aucBtFgSDYkmXrrLckhazmqCEpS+nZWWAMJ450lJjCpPzREL/I/LYRmq5+GBv0f3eByB4Fkm50TBGmlQ+jEisjbpa7O5+NVdg61Ys7sSdIApe3XE9YGE9cmWrKr72/8hOnSr9AOm8/7CEL+WhPsY49kynh24kgyzWM4cLgDthg9FbDlJbwNuUAwinqNKpoC7rhOkZSeJ7vPmAsvQNGOQIChJPWsVQVsvaRSWxpzKWlQ49LwVst36LLhi5kpHA8IvMlY8ODj7mwqZV/2DU1xIe50fEDv/u10vVV1fXq9VB8/uQM9CQ==?cssminify=yes is outdated and I don't know how to access the new CSS proposed here.

[noahtallen]

Not sure if this is helpful, but I always sandbox the public API and the site I am testing against and that gets the changes to show up. You can also checkout syncing directly to your sandbox (i.e. yarn dev --sync) (should be in the FG page linked above)

once this is approved, do I deploy the diff immediately, too, or do we wait until the next FSE plugin release instead of deploying each diff separately?

good question!

1. do not deploy this diff to simple sites unless it's urgent. You can and it won't break anything, but you wouldn't be able to deploy this exact code to atomic sites
2. follow instructions at PCYsg-mMA-p2 to release a new version. (there are no scheduled releases right now, it's all ad hoc). You have to go through bumping the version of the plugin before releasing it if you want to get the changes deployed to the dotorg plugin repo, and hence to Atomic sites :)

[andrewserong]

Great, thanks for the tips @noahtallen!

@alshakero not sure if I can add anything extra to what Noah's already said, but I applied the diff to my sandbox to double-check this, and these were the steps I followed:

• Applied D42611-code in my sandbox
• Added the following to my hosts file, mapped to my sandbox:
  • public-api.wordpress.com
  • widgets.wp.com
  • s0.wp.com s1.wp.com s2.wp.com
  • andyslegacyfullsiteeditingsite . wordpress.com (but remove the spaces)

The dotcom-fse.css file is then being loaded from: https://andyslegacyfullsiteeditingsite . wordpress.com/wp-content/plugins/full-site-editing-plugin/90932076/dotcom-fse/dist/dotcom-fse.css?m=1588232461h&ver=1588232461 (with the spaces removed)

[alshakero]

Goddammit I forgot to sandbox the site itself! 🤕

[ramonjd]

Goddammit I forgot to sandbox the site itself!

Wait until you forget to ssh, and spend 30 mins wondering why it won't work. Then we can talk 🤣

[alshakero]

Tested for both changes and LGTM