[wp-trac] [WordPress Trac] #65306: Twenty Thirteen: ".sidebar .entry-meta" selector is too broad, compresses block-rendered entry-meta

[WordPress Trac]

#65306: Twenty Thirteen: ".sidebar .entry-meta" selector is too broad, compresses
block-rendered entry-meta
-----------------------------+-----------------------------
 Reporter:  gustavohappyeng  |      Owner:  (none)
     Type:  defect (bug)     |     Status:  new
 Priority:  normal           |  Milestone:  Awaiting Review
Component:  Bundled Theme    |    Version:  trunk
 Severity:  normal           |   Keywords:
  Focuses:  ui, css          |
-----------------------------+-----------------------------
 In `wp-content/themes/twentythirteen/style.css` (and `rtl.css`), the rule:

 {{{
 .sidebar .entry-header,
 .sidebar .entry-content,
 .sidebar .entry-summary,
 .sidebar .entry-meta {
     max-width: 1040px;
     padding: 0 376px 0 60px;
 }
 }}}

 applies a 376px right padding to **any** descendant `.entry-meta` (or
 `.entry-content` / `.entry-summary` / `.entry-header`) when the Secondary
 Widget Area is active. When a block outputs `.entry-meta` markup (for
 example a third-party block plugin that emits the same class), it inherits
 the padding and is squeezed into ~168px of usable width, even though it
 has no relation to the theme's classic-template `.entry-meta`.

 == Steps to reproduce ==

  1. Activate Twenty Thirteen on a self-hosted install.
  2. Add a widget to the Secondary Widget Area (this activates the
 `.sidebar` class).
  3. Create a page or post containing a block that renders `<div class
 ="entry-meta">…</div>`. A Custom HTML block with the following content
 reproduces it without any extra plugin:
 {{{
 <div class="entry-meta">By <a href="#">Author</a> • <time>May 21,
 2026</time></div>
 }}}
  4. View the page. The author/date line is squeezed into ~168px on the
 left side of the content column.

 Reproduced on a vanilla self-hosted WordPress install with Twenty Thirteen
 4.6.

 == Expected behavior ==

 The `.sidebar .entry-meta` rule should only style the theme's own classic-
 template `.entry-meta` (the one that is a direct child of `.hentry`).
 Block-rendered `.entry-meta` nested elsewhere in the document should not
 inherit the 376px / 60px padding.

 == Proposed fix ==

 Scope each selector to a direct child of `.hentry`:

 {{{
 .sidebar .hentry > .entry-header,
 .sidebar .hentry > .entry-content,
 .sidebar .hentry > .entry-summary,
 .sidebar .hentry > .entry-meta {
     max-width: 1040px;
     padding: 0 376px 0 60px;
 }
 }}}

 Same change mirrored in `rtl.css`. The theme's own classic templates emit
 `.entry-meta` as a direct child of `.hentry`, so the existing layout is
 preserved. Block-emitted `.entry-meta` nested inside other wrappers no
 longer matches.

 A GitHub PR with the patch is open against `WordPress/wordpress-develop`:
 https://github.com/WordPress/wordpress-develop/pull/11929 — I will add a
 comment with the patch link once this ticket is filed.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/65306>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform