WordPress.org

Make WordPress Core

Opened 4 months ago

Closed 3 months ago

Last modified 3 months ago

#52938 closed defect (bug) (fixed)

Twenty Twenty-One: H1 is misplaced for a page set as blogpost container

Reported by: rianrietveld Owned by: sabernhardt
Milestone: 5.8 Priority: normal
Severity: normal Version: 5.6
Component: Bundled Theme Keywords: has-patch has-screenshots commit
Focuses: ui, accessibility Cc:

Description

When a page is used to display the blogposts, the H1 isn't the page title but the site title in the header. This results in an H1 that doesn't represent the content of the page.

How to reproduce:
In the Admin go to Settings > Reading.
With "Your homepage displays" select "A static page (select below)" and for the Posts page select an existing page.

Expected result:
The page title is the (visual) H1, which is set above the listed posts.
The same way the posts of category are displayed.

Attachments (4)

52938.diff (586 bytes) - added by justinahinon 4 months ago.
This patch adds the page header to the blog posts page
52938-1.diff (569 bytes) - added by justinahinon 4 months ago.
52938.2.diff (1.6 KB) - added by sabernhardt 3 months ago.
adds heading to blog page only if title exists, removes the H1 from posts page site-title
Screen Shot 2021-04-30 at 16.03.38-52938.png (509.0 KB) - added by francina 3 months ago.
Screenshot of blog archive page after patch

Download all attachments as: .zip

Change History (23)

#1 @SergeyBiryukov
4 months ago

  • Summary changed from H1 is misplaced for a page set as blogpost container in Twenty Twenty-One to Twenty Twenty-One: H1 is misplaced for a page set as blogpost container

@justinahinon
4 months ago

This patch adds the page header to the blog posts page

#2 @SergeyBiryukov
4 months ago

  • Milestone changed from Awaiting Review to 5.8
  • Version changed from trunk to 5.6

#3 @mukesh27
4 months ago

i tested 52938.diff but it will not return any title and show an empty header tag. @justinahinon is the above patch working for you?

#4 @justinahinon
4 months ago

@mukesh27 yes, I do have the title on blog page.

How you can test:

  • On a fresh install with Twenty Twenty-One, create a page (Blog for instance)
  • Go to Settings > Reading and select the page created as the "Posts page"
  • Go to the new created page on the frontend and you should see its title at the top of the page. See this screenshot https://cln.sh/0Bv0jw.

#5 follow-up: @mukesh27
4 months ago

@justinahinon thanks for confirming.

If we select the Posts page as the existing page then it will show the title of that page.

But For Settings > Reading > Your latest posts option shows an empty title. https://tinyurl.com/yez25bbn

Last edited 4 months ago by mukesh27 (previous) (diff)

#6 in reply to: ↑ 5 @justinahinon
4 months ago

Replying to mukesh27:

But For Settings > Reading > Your latest posts option shows an empty title. https://tinyurl.com/yez25bbn

I noticed this. Thanks for flagging. Working on updating the patch.

Last edited 4 months ago by justinahinon (previous) (diff)

#7 @justinahinon
4 months ago

@mukesh27 in 52938-1.diff, I checked if the page is not the default front page and is is_home() is true.

But I'm still seeing an edge case where this will display an empty title. When in Settings > Readings, "A static page" is selected, a page is set as "Posts page" but no page is set as "Homepage". The site homepage will display an empty title.

#8 @mukesh27
4 months ago

Agreed with you. In one case it shows empty title :(

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


3 months ago

@sabernhardt
3 months ago

adds heading to blog page only if title exists, removes the H1 from posts page site-title

#10 @sabernhardt
3 months ago

  • Keywords has-patch needs-testing added
  • Owner set to sabernhardt
  • Status changed from new to accepted

Thanks for the patches!

The site-branding template needed editing, too, so it would not have two H1 headings.

For edge cases, 52938.2.diff simply does not output the header and H1 tags if there is no title (without the prefix). This could result in no H1 for the page, but I think that's better than outputting an empty tag.

#11 follow-up: @mukesh27
3 months ago

Patch 52938.2.diff working fine for me in latest version 5.8-alpha-50787

@justinahinon can you please test the patch so we can remove needs-testing keyword

#12 in reply to: ↑ 11 @justinahinon
3 months ago

Replying to mukesh27:

Tested with fresh WordPress 5.8-alpha-50427-src.

Works fine for me.

But I'd suggest we keep the need-testing tag for a bit, so that other people can test also.

Last edited 3 months ago by justinahinon (previous) (diff)

#13 @Boniu91
3 months ago

  • Keywords has-testing-info added

This ticket was mentioned in Slack in #core-test by boniu91. View the logs.


3 months ago

#15 @francina
3 months ago

Tested on

  • MacOS 11.3
  • Safari 14.1
  • WordPress 5.8-alpha-50427-src

Patch 52938.2.diff works fine for me

@francina
3 months ago

Screenshot of blog archive page after patch

#16 @justinahinon
3 months ago

  • Keywords needs-testing removed

Removing the needs-testing feedback after @francina's test.

@audrasjb, at this point, can we add the commit tag to the ticket?

#17 @audrasjb
3 months ago

  • Keywords has-screenshots commit added; has-testing-info removed

I tested the proposed patch and I can confirm it shows the single_post_title in a <h1> tag (which is "a Blog page" when using the Theme Unit Test dataset and when this page is defined as the blog page). Also, the site title uses a <p> tag.

Good to go!

Last edited 3 months ago by audrasjb (previous) (diff)

#18 @SergeyBiryukov
3 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 50802:

Twenty Twenty-One: Display page title as the H1 heading when a static page is selected as the "Posts page".

This ensures that the heading represents the content of the page. Previously, the site title was displayed instead.

Props sabernhardt, justinahinon, rianrietveld, mukesh27, francina, audrasjb, Boniu91.
Fixes #52938.

#19 @SergeyBiryukov
3 months ago

In 50806:

Twenty Twenty-One: Fix "Opening PHP tag must be on a line by itself" WPCS issue.

Follow-up to [50802].

See #52938.

Note: See TracTickets for help on using tickets.