Responsive Live Preview in Blocks and Customiser isn’t working

[Adam Helman]

Adam Helman

October 22, 2020 at 10:35 am

Hi

Not sure if this is a Kadence Theme thing, or a block thing, or both.

If I’m in a block (say Header) and I click on the font size slider – dragging it left and right does cause the header text to enlarge/shrink as expected. However, if I then click on the tablet or mobile icons to adjust for mobile – sliding or editing the value does NOT change the header text as I adjust the value. If I update the page and reload, the changes did take, they just didn’t change “live”.

Strangely, I also observed that if in the block editor I choose Preview | Mobile. Changing the font size of the header (with the desktop selector chosen, changes the text size live in that small preview window – so it looks like changing the preview mode doesn’t “link” with the correct responsive icon. And even if I then (whilst still Mobile preview) cick the mobile icon, any font size changes are no longer shown live.

I see the same behaviour in the Customiser, e.g in Transparent header, changing the width of the logo – live preview works fine in desktop view, but when I click the tablet or mobile icon, the live preview no longer reflects the values as I adjust them.

So I wondered if maybe there was a plugin conflict so I deactivated everything except Kadence Pro, Kadence Blocks and Kadence Blocks Pro – the same thing still happens.

I even deactivated Kadence Theme and went with Twenty Twenty to see if block live preview would start to work. It didn’t

The only other thing of note (though unsure if relevant), is the browser console has this error (it stopped appearing, though, when I flipped to Twenty Twenty):

Uncaught Error: Minified React error #200; visit *Login to see link for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at render (react-dom.min.js:227)
at HTMLDocument.<anonymous> (admin-notices.min.js:7)