Changeset 11654

Timestamp:

03/09/2022 05:50:36 AM (4 years ago)

Author:

dd32

Message:

Table of Contents plugin: Switch out the heading hashes for a link icon and linking the entire heading.

Closes ​https://github.com/WordPress/wordpress.org/pull/64.
See #6171.

Location:

sites/trunk/wordpress.org/public_html/wp-content/plugins

Files:

• handbook/inc/table-of-contents.php (modified) (2 diffs)
• support-helphub/inc/handbook-toc/table-of-contents.php (modified) (4 diffs)

sites/trunk/wordpress.org/public_html/wp-content/plugins/handbook/inc/table-of-contents.php

@@ -8 +8 @@
         protected $post_types = array();
 
-        protected $styles = '<style> .toc-jump { text-align: right; font-size: 12px; } .page .toc-heading { margin-top: -50px; padding-top: 50px !important; }</style>';
+        protected $styles = '<style>
+                .toc-jump { text-align: right; font-size: 12px; }
+                .toc-heading a { color: inherit; font-weight: inherit; margin-left: -25px; text-decoration: none !important; }
+                .toc-heading a:before { visibility: hidden; vertical-align: middle; margin-top: -5px; margin-right: 5px; }
+                .toc-heading:target a:before { margin-left: -8px; margin-right: 13px; }
+                .toc-heading a:hover:before, .toc-heading a:focus:before { visibility: visible; }
+        </style>';
 
         /**
@@ -193 +199 @@
                         }
 
-                        $a11y_text      = sprintf( '<span class="screen-reader-text">%s</span>', $title );
-                        $anchor         = sprintf( '<a href="#%1$s" class="anchor"><span aria-hidden="true">#</span>%2$s</a>', $id, $a11y_text );
-                        $replacement   .= sprintf( '<%1$s id="%2$s" class="%3$s" tabindex="-1" %4$s>%5$s %6$s</%1$s>', $tag, $id, $class, $extra_attrs, $title, $anchor );
+                        $replacement   .= sprintf(
+                                '<%1$s id="%2$s" class="%3$s" tabindex="-1" %4$s><a href="#%2$s" class="dashicons-before dashicons-admin-links">%5$s</a></%1$s>',
+                                $tag,
+                                $id,
+                                $class,
+                                $extra_attrs,
+                                $title
+                        );
                         $replacements[] = $replacement;
                 }

sites/trunk/wordpress.org/public_html/wp-content/plugins/support-helphub/inc/handbook-toc/table-of-contents.php

@@ -8 +8 @@
         protected $post_types = array();
 
-        protected $styles = '<style> .toc-jump { text-align: right; font-size: 12px; } .page .toc-heading { margin-top: -50px; padding-top: 50px !important; }</style>';
+        protected $styles = '<style>
+                .toc-jump { text-align: right; font-size: 12px; }
+                .toc-heading a { color: inherit; font-weight: inherit; margin-left: -25px; text-decoration: none !important; }
+                .toc-heading a:before { visibility: hidden; vertical-align: middle; margin-top: -5px; margin-right: 5px; }
+                .toc-heading:target a:before { margin-left: -8px; margin-right: 13px; }
+                .toc-heading a:hover:before, .toc-heading a:focus:before { visibility: visible; }
+        </style>';
 
         /**
@@ -126 +132 @@
 
                 // Replace each level of the headings.
+                $content .= $this->styles . "\n";
                 $content = $this->add_ids_and_jumpto_links( $items, $content );
 
@@ -133 +140 @@
 
                 $contents_header = 'h' . reset( $items )['level']; // Duplicate the first <h#> tag in the document for the TOC header
-                $toc            .= $this->styles;
                 $toc            .= '<div class="table-of-contents">';
                 $toc            .= "<$contents_header>" . esc_html( $this->args->header_text ) . "</$contents_header><ul class=\"items\">";
@@ -193 +199 @@
                         }
 
-                        $a11y_text      = sprintf( '<span class="screen-reader-text">%s</span>', $title );
-                        $anchor         = sprintf( '<a href="#%1$s" class="anchor"><span aria-hidden="true">#</span>%2$s</a>', $id, $a11y_text );
-                        $replacement   .= sprintf( '<%1$s id="%2$s" class="%3$s" tabindex="-1" %4$s>%5$s %6$s</%1$s>', $tag, $id, $class, $extra_attrs, $title, $anchor );
+                        $replacement   .= sprintf(
+                                '<%1$s id="%2$s" class="%3$s" tabindex="-1" %4$s><a href="#%2$s" class="dashicons-before dashicons-admin-links">%5$s</a></%1$s>',
+                                $tag,
+                                $id,
+                                $class,
+                                $extra_attrs,
+                                $title
+                        );
                         $replacements[] = $replacement;
                 }