Gutenberg: Display of the drop cap is blocking some text…

It’s a bit hard to tell what the cause is because of the CSS compression. Try turning off the autoptimize plugin.

@kt1wporg The effect can be reproduced in www.ads-software.com/gutenberg/ demo with Google Chrome. Firefox seems to work fine.

@herbie888, is this means that it is a browser issue? Since you said that it is displaying fine with Firefox?

@kt1wporg You could test it with a few browsers and report an issue here.

The relevant CSS is somewhere in /wp-content/plugins/gutenberg/build/block-library/style.css – the CSS compression there is from Gutenberg, not from Autoptimize.

p.has-drop-cap:not(:focus):first-letter {
    float: left;
    font-size: 8.4em;
    font-style: normal;
    font-weight: 100;
    line-height: .68;
    margin: .05em .1em 0 0;
    text-transform: uppercase;
}

for future reference; you can disable Autoptimize on a per-request basis by adding ?ao_noptimize=1 to the URL.

hope this helps debugging,
frank (ao dev)

Hi @herbie888

I test this on Safari, Chrome and Firefox. Only in Firefox that it seems to be displaying fine. This is an issue related to some browsers or it’s a solely Gutenberg issue?

Furthermore, above you said that “the effect can be reproduced in www.ads-software.com/gutenberg/ demo with Google Chrome. Firefox seems to work fine.” This is means that it is a Gutenberg issue which is conflicting with other applications?

NOW, the code you posted above and which you said is located somewhere in /wp-content/plugins/gutenberg/build/block-library/style.css. Should I add it in the CSS file of Gutenberg [and not of Autoptimize] in that location? And after a Gutenberg update [which I believe the will be in due course], should I keep on going to this location and add this code? Or the next update of Gutenberg would have this code embedded in the CSS file?

Hi Frank & @optimizingmatters

You said that “for future reference; you can disable Autoptimize on a per-request basis by adding ?ao_noptimize=1 to the URL“. How do I do it? Or where exactly can I disable “Autoptimize on a per-request basis”? Please clarify with details that will enable me to make those changes.

This is not a “fix”, but a trick to troubleshoot CSS or JS issues by disabling AO for a specific page by adding ?ao_noptimize=1 to the URL in your browser address bar. this allows you to see the original JS/ CSS and .. troubleshoot ??

@kt1wporg It is obviously a bug in Gutenberg, report an issue if you feel like.