Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Drop Cap + alignment produces a gap between paragraphs #18831

Merged

Conversation

@jorgefilipecosta
Copy link
Member

jorgefilipecosta commented Nov 29, 2019

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.

Copy link
Contributor

epiqueras left a comment

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

@jorgefilipecosta jorgefilipecosta force-pushed the fix/drop-cap-alignment-produces-a-gap-between-paragraphs branch from 561eb17 to 91b2898 Dec 4, 2019
@jorgefilipecosta

This comment has been minimized.

Copy link
Member Author

jorgefilipecosta commented Dec 4, 2019

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.

@jorgefilipecosta

This comment has been minimized.

Copy link
Member Author

jorgefilipecosta commented Dec 4, 2019

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.

@jorgefilipecosta jorgefilipecosta force-pushed the fix/drop-cap-alignment-produces-a-gap-between-paragraphs branch from 91b2898 to 14c1d84 Dec 4, 2019
@epiqueras

This comment has been minimized.

Copy link
Contributor

epiqueras commented Dec 4, 2019

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

@jorgefilipecosta

This comment has been minimized.

Copy link
Member Author

jorgefilipecosta commented Dec 5, 2019

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.

@epiqueras epiqueras merged commit 8966f52 into master Dec 5, 2019
2 checks passed
2 checks passed
pull-request-automation
Details
Travis CI - Pull Request Build Passed
Details
@epiqueras epiqueras deleted the fix/drop-cap-alignment-produces-a-gap-between-paragraphs branch Dec 5, 2019
@youknowriad youknowriad added this to the Gutenberg 7.1 milestone Dec 9, 2019
scruffian added a commit to scruffian/gutenberg that referenced this pull request Dec 10, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.