Make WordPress Core

Opened 5 years ago

Last modified 5 years ago

#48915 new defect (bug)

Gutenberg Paragraph Block, Drop Cap missing sanitize rule for initial hard return line <br>

Reported by: giorgio25b's profile Giorgio25b Owned by:
Milestone: Awaiting Review Priority: normal
Severity: minor Version: 5.3
Component: Editor Keywords: needs-patch
Focuses: ui Cc:

Description

When content has dirty markups, or mistaken is made with hard return before input, more specifically a <br> markup as first element, Drop Cap option can be enable but there is no effect on the first letter in the rendered content.
See example:

<!-- wp:paragraph {"dropCap":true} -->
<p class="has-drop-cap"><br>Lorem Ipsum quam quasi mollitia</p>
<!-- /wp:paragraph -->

Change History (2)

#1 @apieschel
5 years ago

Was able to reproduce. This is indeed not ideal, but I don't think this is a bug specific to the editor that can be patched. My impression is this is just how the :first-letter CSS selector works. From /wp-includes/css/dist/block-library/style.css, here's the CSS that's targeting the drop-cap styles:

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

In any context, if there's an element inside the <p> tags before the inner text (such as the <br> in your example), then the :first-letter selector will have no effect.

#2 @Giorgio25b
5 years ago

Then we either have to make clear that the Drop Cap only works for a real first-letter case or a check-up on the markups or a warning should be implemented to make sure that Drop Cap is applicable, or not, depending on the html tags.
Something like if <p>^[A-Za-z0-9 ]* you can Drop Cap, else don't.

I mean this is a rough approach, but some sort of control should be in place to avoid the issue

Last edited 5 years ago by Giorgio25b (previous) (diff)
Note: See TracTickets for help on using tickets.