Fix Global Styles Panel Font Change Update

[pbking]

This appears to only reproduce when in production (or with some other
dependency I'm unable to reproduce). When running this editing-toolkit
locally this works as expected.

Note that when running locally the edited content resides in the
element:

<div tabindex="-1" class="edit-post-visual-editor
editor-styles-wrapper">

However on wpcom I see that it's actually in:

<div class="edit-post-visual-editor">
  <div class="popover-slot"/>
  <div class="editor-styles-wrapper">

Therefore the selector .edit-post-visual-editor.editor-styles-wrapper
does not reflect the values being written.

Changing this selector is still the most specific selector defining the
variables so those are what are displayed.

Changes proposed in this Pull Request

• relax selector assigning font CSS variables

Testing instructions

• Tested with Varia
• With the change the contents should render with the selected font immediately upon selection.

This addresses a bug opened against themes: Automattic/themes#2989

[matticbot]

Test live: https://calypso.live/?branch=fix/global-styles-dynamic-change

[matticbot]

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

D55893-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]

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

Webpack Runtime (~14 bytes added 📈 [gzipped])

name      parsed_size           gzip_size
manifest        +35 B  (+0.1%)      +14 B  (+0.1%)

Webpack runtime for loading modules. It is included in the HTML page as an inline script. Is downloaded and parsed every time the app is loaded.

App Entrypoints (~72 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
entry-main                  +105 B  (+0.0%)      +27 B  (+0.0%)
entry-login                 +105 B  (+0.0%)      +26 B  (+0.0%)
entry-gutenboarding         +105 B  (+0.0%)      +31 B  (+0.0%)
entry-domains-landing       +105 B  (+0.0%)      +33 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

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.

[oandregal]

I haven't tested it but this change looks legit. It looks like WordPress/gutenberg#27035 changed the node where the editor-styles-wrapper class is attached to make it a child of edit-post-visual-editor. I'd appreciate that dotcom people can confirm this works.

[david-szabo97]

Works perfectly! Tested with Varia and Seedlet

[vindl]

I applied this patch to my sandbox and tested it with Seedlet and Varia themes on my Simple site. I made sure that the site and API were sandboxed. However I'm still noticing the issue that it should fix.

Maybe I'm missing something with the testing instructions?

[david-szabo97]

I applied this patch to my sandbox and tested it with Seedlet and Varia themes on my Simple site. I made sure that the site and API were sandboxed. However I'm still noticing the issue that it should fix.

Maybe I'm missing something with the testing instructions?

Did you sandbox public-api and widgets? Since this is an ETK change we need to sandbox those too. I think one of them should be enough to make this work, but I never tested out which one so I usually just sandbox both of them.

[vindl]

Never mind, the patch won't apply cleanly on sandbox due to conflict in new ETK plugin version (it was updated in the meantime). After altering it manually to match the one from the diff everything worked fine.

[vindl]

Did you sandbox public-api and widgets?

Just public-api, widgets are not needed for this.