Fix: Drop Cap + alignment produces a gap between paragraphs

[jorgefilipecosta]

Description

Fix: #18409

These group fo styles were added in #12177 to fix an issue with one-line paragraphs and drop cap. It seems removing clear: both; fixes #18409
bug and keeps the fix added in #12177.

How has this been tested?

I verified bug #18409 was fixed and verified we did not regress on the problem #12177 addresses.

[epiqueras]

This does regress #12177. The drop cap now overflows the hover area again.

[jorgefilipecosta]

Hi @epiqueras, thank you for the review! It seems I missed something in my tests. It turns out that addressing this problem is more complex, I proposed a new solution.

[epiqueras]

I think we could do this with pure CSS.

Some ideas:

https://stackoverflow.com/a/17761830
https://stackoverflow.com/questions/7166716/unexplained-white-space-when-using-clearboth
https://stackoverflow.com/questions/5684951/the-css-property-clear-leaves-a-huge-empty-space?noredirect=1&lq=1

[jorgefilipecosta]

Hi @epiqueras,

I think we could do this with pure CSS.

Some ideas:
stackoverflow.com/a/17761830
stackoverflow.com/questions/7166716/unexplained-white-space-when-using-clearboth
stackoverflow.com/questions/5684951/the-css-property-clear-leaves-a-huge-empty-space?noredirect=1&lq=1

I tried lots of things with pure CSS and I was not able to find a solution that works on all case.
The problem with setting a clear right or left is that the previous image may be on the right or left so setting a clear breaks the things and creates white space.

[epiqueras]

Did you try this one: https://stackoverflow.com/a/5685062?

[jorgefilipecosta]

Hi @epiqueras,
Yes, I tried to use something like:

.has-drop-cap:not(:focus)::after {
        clear: both;
        height: 0px;
        overflow: hidden;
    }

And unfortunately, it did not work.

[ellatrix]

@jorgefilipecosta This doesn't work in Firefox, probably because the selector isn't working:

[ellatrix]

Additionally, it seems like this is only applied in the editor? Previously this worked on the front-end too.

[jorgefilipecosta]

I'm sorry for the delay @ellatrix, I lost this mention. Thank you for fixing this issue 👍