mtoensing/simpletoc

WordPress plugin that adds a custom "Table of Contents" Gutenberg block.

simpletoc's Issues

Suggestion: filter out UTF8 icons like 😁 from auto-generated ID's to better pass accessibility checks.

SimpleTOC encodes "special characters" in the header, for instance 😉, when creating an ID for that header, as expected.

That triggers a false "broken link" accessibility check error. Reported here:
equalizedigital/accessibility-checker#483

Screenshot:

SimpleTOC is not to blame, weird characters need to be encoded in URL's for sure, but have you considered filtering them out entirely. A manual inserted ID without encoded smileys satisfies the accessibility check.

Nothing critically that cannot be worked around, but maybe a potential improvement.
Bjarne

Bug: Sticky Top Nav Invalidates Scroll Position

When a navigation bar is fixed/sticky at the top of the page, the Simple Table of Contents (TOC) fails to accurately calculate the required scroll position from the top. Consequently, the targeted H1 to H6 tags end up being obscured by the sticky navigation bar.

How to reproduce:

<nav style="height: 90px;"> //make this sticky
Link1 Link3 Link 5
</nav>
<div>
<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lobortis ligula sit amet tellus faucibus vulputate. Curabitur imperdiet ligula a lacus volutpat, eget suscipit erat dictum. Integer eget convallis est, sed porta tellus. Phasellus quam nulla, tristique quis justo vitae, blandit ultrices lorem. Morbi at neque ac ex luctus tincidunt in nec ante. Curabitur venenatis tortor neque, id laoreet nibh fringilla eget. Nunc ut purus eu arcu vehicula tristique. Sed at mauris dolor. Phasellus et neque orci. Etiam in vestibulum ante, sit amet ultricies magna. Pellentesque rhoncus mauris vel velit gravida ornare. Praesent et ex ultrices, vulputate quam lacinia, finibus neque.
</p>

<h1> NEXT PARAGRAPH NOTICE UM UNDER THE STICKY NAV</h1>


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lobortis ligula sit amet tellus faucibus vulputate. Curabitur imperdiet ligula a lacus volutpat, eget suscipit erat dictum. Integer eget convallis est, sed porta tellus. Phasellus quam nulla, tristique quis justo vitae, blandit ultrices lorem. Morbi at neque ac ex luctus tincidunt in nec ante. Curabitur venenatis tortor neque, id laoreet nibh fringilla eget. Nunc ut purus eu arcu vehicula tristique. Sed at mauris dolor. Phasellus et neque orci. Etiam in vestibulum ante, sit amet ultricies magna. Pellentesque rhoncus mauris vel velit gravida ornare. Praesent et ex ultrices, vulputate quam lacinia, finibus neque.
</div>

I'm proposing a feature that allows us to apply an offset to the Table of Contents (TOC) links upon clicking. In our specific scenario, we would need an offset of 90px.

Add smooth-scroll class to links?

Hello Marc,
thank you for a great plugin!

In the sea of WordPress Plugins that are overloaded with features it is nice to find something lightweight that does the job.

Now for my question:
My theme has a built in smooth scroll function that is triggered by adding class="smooth-scroll" to the <a> tag.
Is there an easy way to make simpletoc output the extra class on it's links?

Thanks in advance,
Alex

Duplicate icon displaying then dissapearing

Issue
Often when opening a post that has the SimpleTOC plugin active two + icons display for a second or two and then one of them disappears.

Using Chrome Dev Tools, I was able to see what the issue was, but not sure of the cause. It appears that the icon is displayed using ::after on <span class="simpletoc-icon"></span>. While the page is still loading in 100%, the icon is duplicated to <button class="simpletoc-collapsible"></button> element one level up.

This is the website I am testing it on: https://sffgeek.com/2023/10/08/jonsbo-n3-8-bay-nas-gpu-pc-case/

I have attached an image of the issue, as well as the ::after in the linked to the button element.

Version and device info

• WordPress v6.3.1
• Twenty Twenty-Three theme v1.2
• SimpleTOC v6.0.10
• Chrome build 117.0.5938.149
• Windows 11 build 22631.2338

[Request] - Ability to hide GenerateBlocks headings

Hi again. I saw in the code that the plugin supports GenerateBlocks (very cool).

Is there a way to hide these from the TOC as well using the simpletoc-hidden class?

Thanks!

Scroll to top of heading

Maybe I have misconfigured SimpleTOC, but every time I click something in simple TOC it takes me to the bottom of heading and doesn't show the heading i clicked at all.

Suggestion: use details tag without js or css as a "native accordion"

The core idea of SimpleTOC is simplicity without compromises. I always disliked the accordion because of the JavaScript that has to be added.

Now @infinitnet came up with a brilliant idea: the details tag: https://www.w3schools.com/tags/tag_details.asp

The solution could look like this and would replace or be the alternative to the accordion:

<nav aria-label="Table of Contents">
   <details id="simpletoc-details" class="simpletoc">
      <summary>Table of Contents</summary>
      <div class="simpletoc-content">
         <ul class="simpletoc-list">
            <li><a href="#topic-1">Topic 1</a></li>
            <li><a href="#topic-2">Topic 2</a></li>
            <li><a href="#topic-3">Topic 3</a></li>
            <li><a href="#topic-4">Topic 4</a></li>
            <li><a href="#topic-5">Topic 5</a></li>
            <li><a href="#topic-6">Topic 6</a></li>
            <li><a href="#download">Download</a></li>
         </ul>
      </div>
   </details>
</nav>

Are the any suggestions to the markup or general ideas? Especially for the ARIA attributes and the Nav tag?

Make simpleTOC work with sticky headers

Hi, thanks for the great -no thrills, just works- TOC plugin.
I have a suggestion to make it much better with sticky headers.
Add

$tag->setAttribute("style", "display: block; margin-top: -235px; padding-top: 235px;");

below line 397 of plugin.php, but to really shine, make the number 235 configurable (possibly to become any size expression).
I can then configure the size (e.g. in pixel) of my sticky header and link to a position of the page, such that the anchor is showing just below my sticky header and not underneath it ;-)

Exclude certain headings?

Is there a way to exclude headings from being output? If not, would you be open to a PR?

Function wp_enqueue_script() was called incorrectly when opening Appearance > Widgets

Hey!

I get the following notice, when I go to Appearance > Widgets, having WP-DEBUG and SimpleTOC enabled.

Notice: Function wp_enqueue_script() was called incorrectly. "wp-editor" script should not be enqueued together with the new widgets editor (wp-edit-widgets or wp-customize-widgets). Please see Debugging in WordPress for more information. (This message was added in version 5.8.0.) in /example.net/wp-includes/functions.php on line 6078

If I disable SimpleTOC the notice goes away.

WP 6.5 and PHP 8.2

Is that something you can reproduce?

Best regards,
Bjarne

Ability to disable "Hide in accordion menu" option

For example, in my own theme I have already made my own accordion, with my own scripts.
It would be useful if there was an option to block this option so that editors could not use it to break a site.

This could be another filter for developers.

Block Wrapper

Currently the table of contents is wrapped with <div> only if it has an additional class.
Couldn't it be that this div renders always? This would give theme developers more options for styling this block. Currently, for example, you can't even add a border to the table of contents.

Alternatively, I can send a PR to add the appropriate filter. But I think it is better and simpler to just always render this div.

Custom anchor does not work when heading block is a inner block

To reproduce:

• Add a heading block and set a custom anchor for it
• Add a group block, for example, and add a heading block inside and set a custom anchor for it
• The link in the TOC to the first block works, to the second one does not

Editor:

Frontend:

Allow sub-topic lists

Hi!

Thanks for this plugin, I love it!

There's a feature that I would love to see added and that's the ability to add TOC lists within sub-headings.

For example, at the top of a page I might want a TOC of the h2s of the whole document and under each h2 I'd love a TOC of that section - i.e. everything between that h2 and the next.

E.g.

• TOC of h2s
• h2
  • TOC of h3s
  • h3
  • h3
  • h3
• h2
  • TOC of h3s
  • h3
  • h3
  • h3
• etc.

Suggestion: Replace the h2 heading of the TOC with summary

I would suggest replacing the <h2> element of the toc heading with a <summary>.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary

Use only H2 headings?

It'd be nice to have the option to hide all H3, H4, etc.

It's just a single option more and probably you can deal with it on the PHP side?
So still, no JS or fancy stuff is required.

I quite like this plugin because of its simplicity and no dependencies philosophy, but I can't just add all those long H3s everywhere.
Specially if I want to add this plugin on a fixed navigation on the side.

[Feature request] Ignoring headers in custom blocks

I' m using header blocks inside my own block and I don't want it added to the table of contents.

It would be nice if there was an option to ignore specific parent blocks.
E.g.

add_filter( 'simpletoc_ignored_blocks', function ( array $blocks ) {
	$blocks[] = 'my/custom-block';

	return $blocks;
} );

Additional Header Block Types

Would be great if the TOC could also pull in Headline blocks from GenerateBlocks and/or Headers from Stackable - Gutenberg Blocks - these appear to just render H tags with classes.

PHP Warning: Attempt to read property "post_content" on null

Editors on my site report that sometimes changes to their posts are not saved.
So I turned on WP_DEBUG_LOG and I only see warnings like this:

[13-Jun-2022 11:07:48 UTC] PHP Warning:  Attempt to read property "post_content" on null in /wp-content/plugins/simpletoc/plugin.php on line 109
[13-Jun-2022 11:12:49 UTC] PHP Warning:  Attempt to read property "post_content" on null in /wp-content/plugins/simpletoc/plugin.php on line 109
[13-Jun-2022 11:14:06 UTC] PHP Warning:  Attempt to read property "post_content" on null in /wp-content/plugins/simpletoc/plugin.php on line 109
[13-Jun-2022 11:15:22 UTC] PHP Warning:  Attempt to read property "post_content" on null in /wp-content/plugins/simpletoc/plugin.php on line 109
[13-Jun-2022 11:16:46 UTC] PHP Warning:  Attempt to read property "post_content" on null in /wp-content/plugins/simpletoc/plugin.php on line 109
[13-Jun-2022 11:19:23 UTC] PHP Warning:  Attempt to read property "post_content" on null in /wp-content/plugins/simpletoc/plugin.php on line 109
[13-Jun-2022 11:21:54 UTC] PHP Warning:  Attempt to read property "post_content" on null in /wp-content/plugins/simpletoc/plugin.php on line 109
[13-Jun-2022 11:22:16 UTC] PHP Warning:  Attempt to read property "post_content" on null in /wp-content/plugins/simpletoc/plugin.php on line 109
[13-Jun-2022 11:25:01 UTC] PHP Warning:  Attempt to read property "post_content" on null in /wp-content/plugins/simpletoc/plugin.php on line 109

I'm not sure if this is the cause of the problem, but there are no other errors in the logs.

Duplicate headings = duplicate IDs

The title sort of explains the issue already. If we have an outline like:

H2: PHP
H3: Examples
H2: JavaScript
H3: Examples

then the two H3s would have the same ID and effectively break the functionality of the TOC. This is something I'd consider a critical issue that actually blocks me from using the plugin because having duplicate headings is a relatively common situation and not a rare exception. The obvious solution would be to append -N if there are duplicate headings, eg. #example-1 and #example-2 in the case of above outline.

[Feature Request] Add option to change TOC block heading

Hi there,

This is a simple request to add an option to change the TOC block heading type.

It currently uses H2 by default, but on my site, my default heading is H1.

A simple drop down to select either h1,h2,h3,h4,h5 or h6 as the block heading type would be ideal.

Thanks,

Stux.

Incompatible with sqlite-database-integration plugin

When I try to change the settings, something went wrong. I assume it's because using the sqlite-database-integration plugin, maybe I should ask in this plugin's place.

WordPress database error: [<div style="clear:both">&nbsp;</div> <div class="queries" style="clear:both;margin-bottom:2px;border:red dotted thin;"> <p>MySQL query:</p> <p>UPDATE `wp_options` SET `option_value` = NULL WHERE `option_name` = 'simpletoc_absolute_urls_enabled'</p> <p>Queries made or created this session were:</p> <ol> <li>Executing: BEGIN | (no parameters)</li> <li>Executing: UPDATE `wp_options` SET `option_value` = NULL WHERE `option_name` = :param0 | parameters: simpletoc_absolute_urls_enabled</li> <li>Executing: ROLLBACK | (no parameters)</li> </ol> </div> <div style="clear:both;margin-bottom:2px;border:red dotted thin;" class="error_message" style="border-bottom:dotted blue thin;"> Error occurred at line 3373 in Function <code>handle_error</code>. Error message was: SQLSTATE[23000]: Integrity constraint violation: 19 NOT NULL constraint failed: wp_options.option_value. </div> <p>Backtrace:</p> <pre>#0 /var/www/html/wp-content/plugins/sqlite-database-integration/wp-includes/sqlite/class-wp-sqlite-db.php(287): WP_SQLite_Translator->get_error_message() #1 /var/www/html/wp-includes/class-wpdb.php(2766): WP_SQLite_DB->query('UPDATE `wp_opti...') #2 /var/www/html/wp-includes/option.php(547): wpdb->update('wp_options', Array, Array) #3 /var/www/html/wp-admin/options.php(322): update_option('simpletoc_absol...', NULL) #4 {main}</pre> ] UPDATE `wp_options` SET `option_value` = NULL WHERE `option_name` = 'simpletoc_absolute_urls_enabled'

WordPress database error: [<div style="clear:both">&nbsp;</div> <div class="queries" style="clear:both;margin-bottom:2px;border:red dotted thin;"> <p>MySQL query:</p> <p>UPDATE `wp_options` SET `option_value` = NULL WHERE `option_name` = 'simpletoc_wrapper_enabled'</p> <p>Queries made or created this session were:</p> <ol> <li>Executing: BEGIN | (no parameters)</li> <li>Executing: UPDATE `wp_options` SET `option_value` = NULL WHERE `option_name` = :param0 | parameters: simpletoc_wrapper_enabled</li> <li>Executing: ROLLBACK | (no parameters)</li> </ol> </div> <div style="clear:both;margin-bottom:2px;border:red dotted thin;" class="error_message" style="border-bottom:dotted blue thin;"> Error occurred at line 3373 in Function <code>handle_error</code>. Error message was: SQLSTATE[23000]: Integrity constraint violation: 19 NOT NULL constraint failed: wp_options.option_value. </div> <p>Backtrace:</p> <pre>#0 /var/www/html/wp-content/plugins/sqlite-database-integration/wp-includes/sqlite/class-wp-sqlite-db.php(287): WP_SQLite_Translator->get_error_message() #1 /var/www/html/wp-includes/class-wpdb.php(2766): WP_SQLite_DB->query('UPDATE `wp_opti...') #2 /var/www/html/wp-includes/option.php(547): wpdb->update('wp_options', Array, Array) #3 /var/www/html/wp-admin/options.php(322): update_option('simpletoc_wrapp...', NULL) #4 {main}</pre> ] UPDATE `wp_options` SET `option_value` = NULL WHERE `option_name` = 'simpletoc_wrapper_enabled'

WordPress database error: [<div style="clear:both">&nbsp;</div> <div class="queries" style="clear:both;margin-bottom:2px;border:red dotted thin;"> <p>MySQL query:</p> <p>UPDATE `wp_options` SET `option_value` = NULL WHERE `option_name` = 'simpletoc_accordion_enabled'</p> <p>Queries made or created this session were:</p> <ol> <li>Executing: BEGIN | (no parameters)</li> <li>Executing: UPDATE `wp_options` SET `option_value` = NULL WHERE `option_name` = :param0 | parameters: simpletoc_accordion_enabled</li> <li>Executing: ROLLBACK | (no parameters)</li> </ol> </div> <div style="clear:both;margin-bottom:2px;border:red dotted thin;" class="error_message" style="border-bottom:dotted blue thin;"> Error occurred at line 3373 in Function <code>handle_error</code>. Error message was: SQLSTATE[23000]: Integrity constraint violation: 19 NOT NULL constraint failed: wp_options.option_value. </div> <p>Backtrace:</p> <pre>#0 /var/www/html/wp-content/plugins/sqlite-database-integration/wp-includes/sqlite/class-wp-sqlite-db.php(287): WP_SQLite_Translator->get_error_message() #1 /var/www/html/wp-includes/class-wpdb.php(2766): WP_SQLite_DB->query('UPDATE `wp_opti...') #2 /var/www/html/wp-includes/option.php(547): wpdb->update('wp_options', Array, Array) #3 /var/www/html/wp-admin/options.php(322): update_option('simpletoc_accor...', NULL) #4 {main}</pre> ] UPDATE `wp_options` SET `option_value` = NULL WHERE `option_name` = 'simpletoc_accordion_enabled'

WordPress database error: [<div style="clear:both">&nbsp;</div> <div class="queries" style="clear:both;margin-bottom:2px;border:red dotted thin;"> <p>MySQL query:</p> <p>UPDATE `wp_options` SET `option_value` = NULL WHERE `option_name` = 'simpletoc_smooth_enabled'</p> <p>Queries made or created this session were:</p> <ol> <li>Executing: BEGIN | (no parameters)</li> <li>Executing: UPDATE `wp_options` SET `option_value` = NULL WHERE `option_name` = :param0 | parameters: simpletoc_smooth_enabled</li> <li>Executing: ROLLBACK | (no parameters)</li> </ol> </div> <div style="clear:both;margin-bottom:2px;border:red dotted thin;" class="error_message" style="border-bottom:dotted blue thin;"> Error occurred at line 3373 in Function <code>handle_error</code>. Error message was: SQLSTATE[23000]: Integrity constraint violation: 19 NOT NULL constraint failed: wp_options.option_value. </div> <p>Backtrace:</p> <pre>#0 /var/www/html/wp-content/plugins/sqlite-database-integration/wp-includes/sqlite/class-wp-sqlite-db.php(287): WP_SQLite_Translator->get_error_message() #1 /var/www/html/wp-includes/class-wpdb.php(2766): WP_SQLite_DB->query('UPDATE `wp_opti...') #2 /var/www/html/wp-includes/option.php(547): wpdb->update('wp_options', Array, Array) #3 /var/www/html/wp-admin/options.php(322): update_option('simpletoc_smoot...', NULL) #4 {main}</pre> ] UPDATE `wp_options` SET `option_value` = NULL WHERE `option_name` = 'simpletoc_smooth_enabled'

Warning: Cannot modify header information - headers already sent by (output started at /var/www/html/wp-content/plugins/sqlite-database-integration/wp-includes/sqlite/class-wp-sqlite-db.php:189) in /var/www/html/wp-includes/pluggable.php on line 1435 Warning: Cannot modify header information - headers already sent by (output started at /var/www/html/wp-content/plugins/sqlite-database-integration/wp-includes/sqlite/class-wp-sqlite-db.php:189) in /var/www/html/wp-includes/pluggable.php on line 1438

Match icon colour to WordPress theme colour

Idea
Instead of using the default purple colour (#635994) as the colour for the + and - icon, it would be a nice touch to have it use the WordPress default theme colours selected by the user.

WordPress includes the following CSS variables:

    --wp--preset--color--base: #ffffff;
    --wp--preset--color--contrast: #000000;
    --wp--preset--color--primary: #2195ff;
    --wp--preset--color--secondary: #004382;
    --wp--preset--color--tertiary: #F6F6F6;