Table of contents block – links don't work on initial page save

[Greatdane]

Description

If you add the Table of Contents block to a new page, when you publish the page, the links don't work properly and instead open a new page with a Page not found error. The URL is retaining an auto-draft in it. If you edit and Update the page, the links will then work properly. Alternatively, if you publish the page first, then add the Table of Contents block, they will work correctly.

Step-by-step reproduction instructions

Create a new page
Add content, with headings, and the Table of Content block
Publish the page
View the page
Try the TOC links
Return to the editor and make a change
Update the published page
View the page
The TOC links now work

Screenshots, screen recording, code snippet

Screen.Capture.on.2022-08-20.at.10-40-21.mp4

Environment info

WordPress version 6.0.1
Gutenberg 13.9.0

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[aatanasovdev]

I was able to reproduce this issue following the steps.

The tricky part is that the public URL is generated after the publish action.

When a page is added, the links of the headings are set correctly to the block's store without refreshing the edit page, but the page requires to be updated to use the public URL inside its content.

As a solution, we can remove the page URL from the links and keep only the generated hashtags.

For example, from https://example.com/sample-page/#heading-title to #heading-title.

I'm unable to find information on whether there was a reason for using the full URLs. Such page links work with hashtags only, and this solution might be sufficient.

[aaronrobertshaw]

Following the replication steps outlined in this issue, the ToC links worked for me on initial save. @Greatdane Could you confirm if this issue has been resolved or expand on the test steps?

Screen.Recording.2022-08-30.at.2.47.08.pm.mp4

[aatanasovdev]

@aaronrobertshaw, which permalink structure did you use while recording the video?

If the Plain permalink structure is used, the block works.

However, it doesn't work for me when using other permalink structures such as Post Name. In that case, the links don't include the page's name, but auto-draft is added instead.

[aaronrobertshaw]

Hi @aatanasovdev, I tested with both Plain and Post Name permalink structures however I only posted a single video.

Here's a video of the table of contents working for me on initial save with the Post Name permalink setting selected.

Screen.Recording.2022-09-05.at.7.56.07.pm.mp4

[aatanasovdev]

Hi @aaronrobertshaw, it looks like you're adding the Table of Content block to a post, not a page.

Publishing a post works slightly differently than a page.

When we add a post, there is no auto-draft URL generation before publishing the page (I haven't checked why this happens, but it has to be consistent). In that case, the TOC block uses URLs like SITE_URL/?p=34. The links work because there is a redirect from SITE_URL/?p=34 to the pretty URL (WordPress handles this redirect).

On the other side, when a page is published, the TOC block uses auto-draft inside its links.

Here is a video that shows how the block behaves.

Test-TOC-block.webm

Probably, it will be better if the auto-draft URL generation issue is addressed. Initially, the links will use the plain format, which will be changed in the next content update. In that case, the links will work without pointing to a non-existing page.

Alternatively, the links can be regenerated automatically behind the scenes when a page is published. However, it doesn't seem right.

[aaronrobertshaw]

it looks like you're adding the Table of Content block to a post, not a page.

🤦 Sorry to waste your time. You are correct, I was on autopilot and misread the instructions.

I can confirm I'm seeing this issue when I actually test it properly.

[mahnunchik]

I can confirm incorrect behaviour:

• Incorrect URL in ToC block after initial save/publish action.
• After second Update all links are correct.

WordPress version 6.2.0
Gutenberg plugin 15.1.1

[foosantos]

I could reproduce this as well. Using Gutenberg 16.4.

This is the code on the page in case it helps: https://d.pr/n/kp52JN

[annezazu]

Noting that this was brought up in the twenty fifth call for testing for the FSE Outreach Program using 16.4:

But it looks like the block does not work on previews only after the page has been published. As the preview does not have the correct structure. https://bluewinddesign.com/?page_id=385 (previewed page). Clicking one of the headings in the Table of Contents block the link anchor looks like this: https://bluewinddesign.com/resume/#head-3 . It went to a 404 page.

I've added it to the stabilizing the TOC issue!