Make WordPress Core

Opened 5 years ago

Last modified 5 days ago

#47460 new defect (bug)

Twenty Nineteen: heading style breaks headings in content added by core or plugins in the front end

Reported by: afercia's profile afercia Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-screenshots needs-testing reporter-feedback
Focuses: Cc:

Description

The Twenty Nineteen style for headings uses some CSS generated content to draw a short horizontal line before the headings.

This comes from the post-section-dash mixin used for various elements, for example the h1-h2 headings, entry-title, author-title, and comments-title.

So far so good. But when "external" content is added to a Twenty Nineteen page, the horizontal line CSS rule targets any H1 and H2 headings.

For example, when adding the media modal in the front end, the modal headings break. See attached screenshots.

This also applies to any content added by plugins when the added content includes H1 and H2 headings.

Seems to me this CSS selectors should be better scoped to try to target only the headings within the theme content:

https://github.com/WordPress/twentynineteen/blob/b604f127c2cae10bd48bbbec0fbbbff2cd31f957/sass/elements/_elements.scss#L55-L58

Attachments (3)

01 Screenshot 2019-06-02 at 10.57.04.jpg (119.3 KB) - added by afercia 5 years ago.
"select" media modal used in the front end
02 Screenshot 2019-06-01 at 22.16.52.jpg (83.8 KB) - added by afercia 5 years ago.
"add media" modal used in the front end
wp-frontend-media-master.zip (10.1 KB) - added by afercia 5 days ago.

Download all attachments as: .zip

Change History (7)

@afercia
5 years ago

"select" media modal used in the front end

@afercia
5 years ago

"add media" modal used in the front end

#1 @karmatosed
6 weeks ago

  • Keywords needs-testing added

#2 @karmatosed
5 days ago

@afercia are you still seeing this? If so it would be great to get some steps to replicate as you note it is only on the front end.

#3 @karmatosed
5 days ago

  • Keywords reporter-feedback added

#4 @afercia
5 days ago

@karmatosed the media modal dialog case is just an example. The post-section-dash mixin that adds the \020 character, which is styled as a horizontal line, may break any heading added on the front end by plugins.

I haven't seen many reports of this potential breakage. Still, scoping a bit more that mixin shouldn't be much effort.

Anyways, to reproduce the media modal dialog example:

  • Go to https://github.com/dbspringer/wp-frontend-media click the green button 'Code' and 'Download zip'. It's an example plugin by @derekspringer
  • Alternatively, use the zip I attached to this ticket.
  • Activate Twenty Nineteen.
  • Go to Plugins > Add New Plugin > Upload Plugin.
  • Upload the zip and activate the plugin.
  • Edit any post and add a Shortcode block with this content: [frontend-button]
  • Save and view the post on the front end.
  • Click the 'Select File' button.
  • The Media modal dialog opens.
  • Observe the styling of the headings within the media modal dialog is broken.
Note: See TracTickets for help on using tickets.