Preview is different in the editor and the frontend

jornes · October 24, 2022, 5:28pm

Hi!
I noticed something.
Not so sure if it’s a bug. Anyway, I will report it as a bug for now. You can change it later if it’s not a bug.

I styled them correctly, and it’s working fine on the front end but not in the editor.

Front end

Backend

In the editor,
When I closed the panel on the right and viewed it at different breakpoints, the image worked as expected.

The only thing is that when the panel on the right is opened, the image is not showing correctly.

Is it a Gutenberg thing, or can it be improved?

Environment info

WordPress version: 6.0.3
Gutenberg Plugin version: -
Cwicly Plugin version: 1.2.3
Cwicly Theme version: 1.0.3

Marius · October 24, 2022, 5:42pm

Looks rather like lack of available space on the canvas, you can try to change the scale:

But your issue will most likely also happen on front-end when you shrink your screensize.
I think the problem is how you setup your image block.

But hard to tell without further info. Your images lack essential info.

jornes · October 24, 2022, 5:56pm

I tried. No issue when I shrink the screensize.

Marius · October 24, 2022, 6:05pm

Thanks for the feedback @jornes.

There is an existing bug, you can check it here:

Maybe this is related to your issue.
You could simply check it via browser dev tools.

Sorry for the confusion I might have created.

jornes · October 24, 2022, 6:21pm

Maybe it’s related.

I also noticed another issue when viewing the site on the editor. When I switched to a smaller breakpoint, the font family changed.

Front end

Not sure what’s wrong with it.

Marius · October 24, 2022, 6:36pm

Are you using a custom font?
I am experiencing it as well, but cycling one time through tablet and smartphone breakpoint fixes it for me - just as a workaround.

It always happens when switching from desktop mode to another breakpoint.
Not a big deal for me for definitely something which could be reviewed.

jornes · October 24, 2022, 6:38pm

Nope. I think I’m using the google font.

The G is in coloured.

jornes · October 24, 2022, 6:39pm

It is true. Now it worked as usual. Haha

Marius · October 24, 2022, 6:46pm

Made some tests and I think it’s only happening to the global styles font(s).
Fonts which are set per block basis don’t seem to be affected I think.

jornes · October 24, 2022, 6:49pm

I see. Thank you for the test you’ve done.
I usually set my font at global styles. It’s a pain to change the font family for every block I choose in the future.

Marius · October 24, 2022, 6:55pm

Sure thing, that’s the way to go.
Just tried to exclude potential causes.

I’d suggest to open a dedicated topic for it so it won’t get overlooked.

Edit:
Just created one.

jornes · October 25, 2022, 2:22am

I noticed that.Thank you!

Louis · October 25, 2022, 1:38pm

Closing this in favour of Font Family gets removed (temporarily) when switching to responsive mode - #3 by Louis as I understand they are the same issue.

Thanks.