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

Paragraph: clear dropcap height so hover area shown correctly #12177

Merged
merged 2 commits into from Dec 20, 2018

Conversation

Projects
None yet
3 participants
@johngodley
Copy link
Contributor

johngodley commented Nov 21, 2018

A short paragraph with a dropcap shows a hover area that is too small:

edit_post_ _wordpress_latest_ _wordpress

This is because the dropcap letter is floated and the height isn’t taken into account, causing the block’s hover area to be incorrect. A paragraph that spans multiple lines won't exhibit this problem as the height is provided by the rest of the text.

This PR clears the dropcap so the height is applied.

Fixes problem in #12172
Fixes #12177

How has this been tested?

  1. Create a post with a single paragraph block
  2. Enable dropcaps from block options
  3. Hover over the block and note the hover area is shown around the dropcap and content

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
Paragraph: clear dropcap height so hover area shown correctly
Because the dropcap letter is floated, the height isn’t taken into account, causing the block’s hover area to be incorrect. Clear the float so the height is applied.
@@ -28,6 +28,13 @@ p {
text-transform: uppercase;
font-style: normal;
}

&.has-drop-cap::after {

This comment has been minimized.

@youknowriad

youknowriad Nov 26, 2018

Contributor

Should we apply this only when the RichText is focused? The dropcap is not shown when the block is focused.

Right now, if you type in a block with DropCap you can see that it's height is not the regular height because of this style.

This comment has been minimized.

@johngodley

johngodley Dec 4, 2018

Contributor

If you mean apply only when not focussed, then yes I missed that, and added!

If you do mean focussed then I'm not sure - can you add a screenshot?

@youknowriad youknowriad added this to the 4.8 milestone Dec 4, 2018

@nosolosw nosolosw self-requested a review Dec 7, 2018

@nosolosw
Copy link
Member

nosolosw left a comment

Works as expected!

@youknowriad youknowriad merged commit 0222ecf into master Dec 20, 2018

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details

@youknowriad youknowriad deleted the fix/dropcap-clear-height branch Dec 20, 2018

youknowriad added a commit that referenced this pull request Jan 3, 2019

Paragraph: clear dropcap height so hover area shown correctly (#12177)
* Paragraph: clear dropcap height so hover area shown correctly

Because the dropcap letter is floated, the height isn’t taken into account, causing the block’s hover area to be incorrect. Clear the float so the height is applied.

* Restrict dropcap clearer to only focussed block
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment