Sync from pro: TOC improvements, CSS updates, settings; update readme for Pro TOC features

Author: ajaydsouza

README.md

@@ -43,12 +43,13 @@ Effortlessly create a powerful, multi-product knowledge base. Boost your support
 
 ### Pro features
 
-[Knowledge Base Pro](https://webberzone.com/plugins/knowledgebase/#pro) enhances the plugin with advanced features for larger documentation sites, including ratings and feedback, a help widget, a powerful custom permalinks engine, premium layouts, and additional admin tools.
+[Knowledge Base Pro](https://webberzone.com/plugins/knowledgebase/#pro) enhances the plugin with advanced features for larger documentation sites, including ratings and feedback, a help widget, a powerful custom permalinks engine, premium layouts, enhanced TOC surfaces, and additional admin tools.
 
 - ⭐ __Article Rating & Feedback System__ — Collect binary or 5-star feedback with optional follow-up questions, admin alerts, Bayesian sorting, and GDPR-friendly tracking modes.
 - 💬 __Help Widget__ — Offer an in-app support hub with live search, suggested articles, and a contact form inside a floating assistant.
 - 🧭 __Custom Permalinks Engine__ — Craft advanced URL structures for articles, sections, tags, and products using dynamic placeholders.
 - 🎨 __Premium Layout Pack__ — Unlock seven additional frontend styles (Card, Minimal, Boxed, Gradient, Compact, Magazine, Professional).
+- 📑 __Enhanced Table of Contents__ — Three Pro TOC delivery surfaces: a sidebar widget that renders the TOC for the current article, a Gutenberg block for inline insertion, and a floating/sticky panel that follows the reader down the page.
 - 🛠️ __Advanced Admin Tools__ — Control knowledge base caching with expiry settings, on-demand cache clearing, and other productivity enhancements.
 
 ### Key Concepts

includes/admin/class-settings.php

@@ -730,6 +730,26 @@ public static function settings_output() {
 				'type'    => 'text',
 				'default' => __( 'Table of Contents', 'knowledgebase' ),
 			),
+			'show_floating_toc'     => array(
+				'id'      => 'show_floating_toc',
+				'name'    => esc_html__( 'Show floating table of contents', 'knowledgebase' ),
+				'desc'    => esc_html__( 'Display a sticky/floating TOC panel that follows the reader as they scroll through a KB article. Highlights the active section automatically.', 'knowledgebase' ),
+				'type'    => 'checkbox',
+				'default' => false,
+				'pro'     => true,
+			),
+			'floating_toc_position' => array(
+				'id'      => 'floating_toc_position',
+				'name'    => esc_html__( 'Floating TOC position', 'knowledgebase' ),
+				'desc'    => esc_html__( 'Side of the viewport where the floating TOC panel is anchored.', 'knowledgebase' ),
+				'type'    => 'radio',
+				'default' => 'right',
+				'options' => array(
+					'right' => esc_html__( 'Right', 'knowledgebase' ),
+					'left'  => esc_html__( 'Left', 'knowledgebase' ),
+				),
+				'pro'     => true,
+			),
 		);
 
 		/**

includes/blocks/src/components/icons.js

@@ -1,3 +1,52 @@
+export const tocIcon = (props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="-76.8 -76.8 665.6 665.6"
+		{...props}
+	>
+		<rect
+			width={665.6}
+			height={665.6}
+			x={-76.8}
+			y={-76.8}
+			fill="#FFBD59"
+			rx={332.8}
+		/>
+		{ /* Bullet dots */}
+		<circle cx="80" cy="120" r="32" fill="#792a18" />
+		<circle cx="80" cy="256" r="32" fill="#792a18" />
+		<circle cx="80" cy="392" r="32" fill="#792a18" />
+		{ /* Lines */}
+		<rect x="152" y="100" width="240" height="40" rx="20" fill="#fff" />
+		<rect x="152" y="236" width="200" height="40" rx="20" fill="#fff" />
+		<rect x="152" y="372" width="220" height="40" rx="20" fill="#fff" />
+		{ /* Indented sub-items */}
+		<rect x="192" y="168" width="160" height="32" rx="16" fill="#f0ebea" />
+		<rect x="192" y="304" width="140" height="32" rx="16" fill="#f0ebea" />
+	</svg>
+);
+
+export const ratingIcon = (props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="-76.8 -76.8 665.6 665.6"
+		{...props}
+	>
+		<rect
+			width={665.6}
+			height={665.6}
+			x={-76.8}
+			y={-76.8}
+			fill="#FFBD59"
+			rx={332.8}
+		/>
+		<path
+			fill="#792a18"
+			d="M256 60l48.6 148.6H460l-126.3 91.8 48.2 148.4L256 357l-125.9 91.8 48.2-148.4L52 208.6h155.4z"
+		/>
+	</svg>
+);
+
 export const bookIcon = (props) => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"

includes/frontend/class-toc.php

@@ -52,7 +52,7 @@ public function inject_toc( string $content ): string {
 			return $content;
 		}
 
-		$result = self::process_content( $content );
+		$result = self::process_content( $content, array( 'extra_class' => 'wzkb-toc--inline' ) );
 
 		if ( empty( $result['toc'] ) ) {
 			return $content;
@@ -75,6 +75,7 @@ public function inject_toc( string $content ): string {
 	 *     @type int    $heading_depth Max heading level to include (2–6). Default from setting.
 	 *     @type int    $min_headings  Minimum headings required to show TOC. Default from setting.
 	 *     @type string $title         TOC title text. Default from setting.
+	 *     @type string $extra_class   Additional CSS class added to the TOC nav element. Default empty.
 	 * }
 	 * @return array {
 	 *     @type string $toc     TOC HTML, or empty string if below minimum headings.
@@ -86,6 +87,7 @@ public static function process_content( string $content, array $args = array() )
 			'heading_depth' => (int) \wzkb_get_option( 'toc_heading_depth', 4 ),
 			'min_headings'  => (int) \wzkb_get_option( 'toc_min_headings', 3 ),
 			'title'         => (string) \wzkb_get_option( 'toc_title', __( 'Table of Contents', 'knowledgebase' ) ),
+			'extra_class'   => '',
 		);
 		$args     = wp_parse_args( $args, $defaults );
 
@@ -158,8 +160,9 @@ private static function build_toc_html( array $headings, array $args ): string {
 			return '';
 		}
 
-		$title  = isset( $args['title'] ) ? (string) $args['title'] : '';
-		$output = '<nav class="wzkb-toc" aria-label="' . esc_attr__( 'Table of Contents', 'knowledgebase' ) . '">';
+		$title       = isset( $args['title'] ) ? (string) $args['title'] : '';
+		$extra_class = isset( $args['extra_class'] ) && '' !== $args['extra_class'] ? ' ' . esc_attr( $args['extra_class'] ) : '';
+		$output      = '<nav class="wzkb-toc' . $extra_class . '" aria-label="' . esc_attr__( 'Table of Contents', 'knowledgebase' ) . '">';
 
 		if ( '' !== $title ) {
 			$output .= '<p class="wzkb-toc-title">' . esc_html( $title ) . '</p>';
@@ -186,9 +189,6 @@ private static function build_toc_html( array $headings, array $args ): string {
 				}
 				if ( ! empty( $stack ) && end( $stack ) === $level ) {
 					$output .= '</li>';
-				} elseif ( ! empty( $stack ) ) {
-					$output .= '<ul>';
-					$stack[] = $level;
 				} else {
 					$stack[] = $level;
 				}

includes/frontend/css/styles/classic-rtl.css

@@ -922,11 +922,14 @@ nav.pagination {
 
 /* Table of Contents */
 .wzkb-toc {
+	margin-bottom: 2rem;
+}
+
+.wzkb-toc--inline {
 	background: var(--wzkb-bg-light);
 	border: 1px solid var(--wzkb-border-light);
 	border-radius: 6px;
 	padding: 1rem 1.5rem;
-	margin-bottom: 2rem;
 	display: inline-block;
 	min-width: 200px;
 	max-width: 100%;
@@ -941,6 +944,11 @@ nav.pagination {
 	font-size: 15px;
 }
 
+.wzkb-toc--widget .wzkb-toc-title {
+	color: inherit;
+	font-size: inherit;
+}
+
 .wzkb-toc-list,
 .wzkb-toc-list ul {
 	margin: 0;