Footnotes Block malfunctions on nested content

[zachspears]

Quick summary

When using the new footnotes block, it does not actually create footnotes consistently (I think this may be when the original block for the footnote is nested).

Steps to reproduce

steps updated 2023-07-17 - cuemarie

1. Create a new post
2. Add nested text content (such as inside a group or column block)
3. Add a footnote to the nested text

What you expected to happen

Footnote should open as shown in the announcement post: p7DVsv-hNL-p2

What actually happened

Impossible to add footnote:

Screen.Recording.2023-07-13.at.2.05.07.PM.mov

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

Platform (Simple and/or Atomic)

Simple, Atomic

Logs or notes

Workaround using page jumps and manually making footnotes as was done prior to this.

[zachspears]

Note to add that I tried other pre-defined layouts so it is unlikely this is limited to the Heiwa theme, but I did not have time to test that.

[cuemarie]

📌 SCRUBBING : RESULT - Replicated / Could Not Replicate / Uncertain

• Tested on Simple – Replicated
• Tested on Atomic – Replicated
• Replicable outside of Dotcom – Yes

📌 FINDINGS/SCREENSHOTS/VIDEO

• Replicated consistently - the issue here is that footnotes on content nested inside of groups, columns, etc. are not working properly.

Screenshots/Recordings

4aAVQx.mp4

Outside of Dotcom

📌 ACTIONS

• Assigned to Other
• Added to ‘HE Cross-repo Watchlist’ project board
• Reported here: Footnotes don't work on nested content WordPress/gutenberg#52703

[cuemarie]

This will be fixed in WP 6.3 with WordPress/gutenberg#52682

[cuemarie]

Tested on an AT site with WP 6.3 and GB 16.4.0, and footnotes work on nested content now. Closing as resolved.

[gambuzino-wonder]

My Current version: 6.7.1 (the latest) and footnotes keep disappearing, randomly. Sometimes they save sometimes they vanish. 😮‍💨

[gambuzino-wonder]

Workaround

It isn't pretty but it works.

1. Make sure you have the settings to show WP custom fields.

2. Scroll down and search the "footnotes" custom field ( if you inserted at the post it should be already visible and in use ).

3. Insert a footnote into your text, right click and copy the footnote link ↵.

4. Extract the footnote ID from the url. For e.g. for the this url https://yourwebsite.org/wp-admin/post.php?post=21849&action=edit#009557fc-eef8-4116-bfb7-ccaf257c5b1e-link the id is the number between # and -link. In the previous will be 009557fc-eef8-4116-bfb7-ccaf257c5b1e.

5. Use the following model to inject your footnote content and link:
   [{"content":"ContentGoesHere","id":"idGoesHere"}]
   E.g.: [{"content":"Roses are red but also of many colors.","id":"009557fc-eef8-4116-bfb7-ccaf257c5b1e"}]

6. Inject the code at the value of the footnotes custom field (see image).

7. For many footnotes per post use the following structure model:
   [{"content":"1ContentGoesHere","id":"1idGoesHere"},{"content":"2ContentGoesHere","id":"2idGoesHere"}]

8. Save and refresh.

Until WP solves definitely 🤷‍♂️
Tell me if it worked for you.