blockbase checkbox for duotone

[MaggieCabrera]

Do not Merge

Can be merged once this issue has been brought in and has landed on wpcom : WordPress/gutenberg#36236

Changes proposed in this Pull Request:

This PR adds a checkbox for themes that have duotone support that allows the user to turn it off for any blocks that have it set in theme.json directly from the customizer.

There are two known issues with this approach:

• If we uncheck the duotone checkbox and reload the customizer page and check it back again, the preview will not show the filter (but it will work in the frontend). There's no easy way around this because when the filter is off we don't know which selectors to apply it back on.
• On non dev environments (with no debug settings on) the transient cache from Gutenberg removes the SVG filters, Ben has opened an issue upstream but this effectively breaks the duotone filters in the frontend. That's happening regardless of this PR too, we just uncovered that while testing this.
  EDIT: the cache issue is solved by Fix duotone theme cache WordPress/gutenberg#36236

Related issue(s):

Closes #4434

[scruffian]

This is looking great, just a few small comments.

[pbking]

Works great for me locally. Wasn't working as expected on wpcom.

May be due to the cacheing issue. If so suggest we just park this until that has been fixed and shipped. Not sure how to determine that that is the problem though.

[MaggieCabrera]

Works great for me locally. Wasn't working as expected on wpcom.

May be due to the cacheing issue. If so suggest we just park this until that has been fixed and shipped. Not sure how to determine that that is the problem though.

yes, you can reproduce the problem locally! you just need to remove the dev env variables that are circumventing the cache in the first place. We definitely need the fix before we launch the theme, but with it, the problem goes away (at least for me, locally)

[pbking]

👍

Thanks @MaggieCabrera

yes, you can reproduce the problem locally! you just need to remove the dev env variables that are circumventing the cache in the first place. We definitely need the fix before we launch the theme, but with it, the problem goes away

Confirmed the problem exists and is fixed by the linked issue. Approving these changes to ship once that lands.

[MaggieCabrera]

I had to add a change because I had JS errors on Blockbase with the original PR, care to have a quick look again @scruffian?

[scruffian]

does this need to be window.duotoneVars? Couldn't it just be duotoneVars?

[MaggieCabrera]

it didn't work that way!

Uncaught ReferenceError: duotoneVars is not defined

[scruffian]

I think you need to check the type of duotoneVars:

if ( typeof duotoneVars !== 'undefined' ) {

but I suppose your way works too

[MaggieCabrera]

I think we should rebase this and check if it still works and then deploy to .org!

[scruffian]

This needs WordPress/gutenberg#38055 to be merged before it will work.

[scruffian]

I rebased this and gave it another test and it still works. If someone else could confirm we can bring it in!

[MaggieCabrera]

I rebased this and gave it another test and it still works. If someone else could confirm we can bring it in!

I don't know if I'll have time today, but did you check dotcom? last time I tried it didn't work in there

[scruffian]

It's hard to test on wpcom because the Gutenberg fix isn't there, but the customizer preview is working there.

[pbking]

I just checked on edge sites on dotcom. Seems 12.5 just landed there. However the ability to enable/disable the duotone still didn't seem to be working. It does work locally as described.

[scruffian]

The fix only landed in GB today so it won't be in 12.5

[MaggieCabrera]

I think we should close this after we discussed this