Table of Contents block shows additional empty list item

[m-vdv]

Describe the bug:

Table of Contents block shows empty list item after H3, H4, H5, H6 heading.

To reproduce:

Add a Table of contents block to a post with multiple headings.

Expected behavior:

No additional empty list items.

FYI: If I toggle the list bullets to be hidden, the issue disappears.

Screenshots:

Isolating the problem:

• [X] This bug happens with no other plugins activated
• [ ] This bug happens with a default WordPress theme active
• [ ] This bug happens without the Gutenberg plugin active
• [X] I can reproduce this bug consistently using the steps above

WordPress version:

WP v5.8.1

Gutenberg add-ons version:

Version 2.0.0-beta.1

[RajkiranBagal]

Hello @m-vdv

Can you please share the link to the page where this issue is occurring?

So that we can debug & try to reproduce the same at our end & fix the issue.

Looking forward to hearing from you.

[m-vdv]

Hi @RajkiranBagal

Thanks for taking the time to look into this! Here's the link you requested: https://www.combell.com/nl/blog/betaalmethoden-voor-je-webshop/

Kind regards

[AbhijitNage123]

Hello @m-vdv,

I'm so sorry for the inconvenience caused to you.

I was able to replicate the same at our end but after regenerating, the assets issue was resolved.

Could you please try regenerating, the assets from Setting > UAG > Regenerate Assets and refresh the page? It seems like the Cache issue. If the issue still persists then please open a ticket here and share site credentials with us for further debugging.

Let me know how it goes. Looking forward to resolving your issue.

[m-vdv]

Hi @AbhijitNage123

Unfortunately regenerating the assets, clearing cache and refreshing did not fix the issue. Enabling or disabling separate CSS and JS files for UAG blocks did not do anything either.

I'm not able to give you credentials since our admin area is shielded.

The issue only exists when the bullets are enabled. So the problem must reside in that part of the UAG code. Hopefully you'll be able to find a fix.

Thanks in advance!

[RajkiranBagal]

Hey @m-vdv ,

I tried adding the same content you are using at my end & it is displaying perfectly fine.

Reference Screenshot - https://share.bsf.io/7KuAB11G

I understand that you are not able to give us the credentials to look into your site.

Can you please just Go into the Editor & Copy the Table of Contents & Share it with me here.

Reference Video of How You can copy the Table of Contents Block - https://share.bsf.io/4guP0Aj0

Looking forward to hearing from you!

[m-vdv]

Hey @RajkiranBagal

Here's the output of the Table of Contents copy:

<!-- wp:uagb/table-of-contents {"block_id":"c253aba3","classMigrate":true,"mappingHeaders":[false,true,true,false,false,false],"leftPadding":30,"rightPadding":30,"topPadding":30,"bottomPadding":30} /-->

[RajkiranBagal]

Hey @m-vdv

I checked the output you shared at my end still the issue is not reproducing at my end.

I have created a new UAG ZIP for you in which I have fixed the issue & removed all the empty li tags.

Can you please check by installing the ZIP at your end & see if the issue gets fixed at your end?

ZIP - https://share.bsf.io/eDug2m8x (It is a 2.0.0 beta version ZIP in which the issue is fixed.)

Looking forward to hearing from you.

[m-vdv]

Hi @RajkiranBagal

I've installed the plugin version from your ZIP file, then re-added the Table Of Contents block, cleared cache and refreshed the page but the additional empty li tags are still there.

Unfortunately the bug is not fixed.

[RajkiranBagal]

Hey @m-vdv

It's really strange behaviour on your site.

We are constantly trying to reproduce the same issue on our site but the issue is not yet reproduced at our end.

Can you please copy the whole page content on which the issue is occurring & share it with us?

Reference Screencast on How you can copy the whole page content - https://share.getcloudapp.com/8Lu9mBOO

Also, We understand that you are not comfortable in sharing the Login details with us, but can you please create a staging site of your site where the issue is reproduced & share that site & its credentials with us?

It will really help us in debugging & finding the solution for the issue.

Here is an article in which we have explained how you can create a staging site quickly in less than 5 minutes - https://wpastra.com/docs/how-to-set-up-a-staging-site/

Looking forward to hearing from you.

[m-vdv]

Hi @RajkiranGajananBagal

Thanks for your help! I don't have the time to setup a staging environment right now, however I did look into this issue some more.

The plugin is generating empty li tags (which I don't believe it should), then hides them with this css: .wp-block-uagb-table-of-contents ul li:empty { display: none; }

Now on our website that styling isn't being applied for some reason, that's why they are visible. EDIT: Reason is probably because the pseudo element ::marker is being applied to the list item.

So I see 2 possible fixes:

1. Get rid of the empty li tags (preferred)
2. Force display: none; styling to be applied to empty li tags

[RajkiranBagal]

Hey @m-vdv

Thanks for the input, I was able to reproduce the issue at my end.

I have fixed the issue by not generating the empty li tags themselves.

Please test the updated ZIP at your end & let me know if it fixes the issue.

Updated ZIP - https://share.bsf.io/qGuRAZGr

Looking forward to hearing from you.

[m-vdv]

Hey @RajkiranBagal

The updated ZIP fixes the issue!

Thank you

[NicoHood]

Will this be fixed in the next release?