feat: sync free-side changes for Documentation Layout and Section Tree (Pro)

- docs_mode setting and wizard pro-features gate (setting stub present in free;
  feature activates only with a Pro licence)
- TOC anchor injection enabled when docs_mode is on
- wzkb_get_section_tree() / wzkb_the_section_tree() public helper stubs
  (return '' when Pro class is absent)
- Nav CSS updated to use flexbox for article pagination
- JS repeater unique-field sync refactored to shared outer listener
- Section Tree block icon added to block icon registry

Author: ajaydsouza

README.md

@@ -57,6 +57,8 @@ Effortlessly create a powerful, multi-product knowledge base. Boost your support
 - 🎨 __Premium Layout Pack__ — Unlock seven additional frontend styles (Modern, 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.
+- 📄 __Documentation Layout Mode__ — Transform any KB page into a three-column docs site with a sticky section-tree sidebar on the left, article content in the centre, and an "On this page" TOC rail on the right. Collapsible accordion navigation adapts to the current product, section, or article automatically.
+- 🌳 __Section Tree Block & Widget__ — Display a context-aware hierarchical navigation tree of your KB products, sections, and articles anywhere — as a Gutenberg block or a classic sidebar widget. The tree collapses and expands sections with an accessible accordion, and highlights the current page automatically.
 - 🤖 __GitHub Integration__ — Sync markdown documentation from a GitHub repo. Push changes via webhooks and articles are created or updated automatically. YAML frontmatter controls slug, title, products, and sections.
 - 📦 __Article Export & Import__ — Export all Knowledge Base articles as a Markdown ZIP (with YAML frontmatter), a SQL INSERT dump, or an XLSX metadata spreadsheet. Re-import Markdown ZIPs to restore or migrate articles, with automatic taxonomy mapping and overwrite/skip control.
 

includes/admin/class-settings-wizard.php

@@ -132,6 +132,7 @@ public function get_wizard_steps() {
 			'columns',
 		);
 		$pro_features_keys     = array(
+			'docs_mode',
 			'show_floating_toc',
 			'rating_system',
 			'rating_tracking_method',

includes/admin/class-settings.php

@@ -825,6 +825,14 @@ public static function settings_styles() {
 				'options' => self::get_kb_styles(),
 				'default' => 'classic',
 			),
+			'docs_mode'              => array(
+				'id'      => 'docs_mode',
+				'name'    => esc_html__( 'Documentation layout', 'knowledgebase' ),
+				'desc'    => esc_html__( 'Display the entire knowledge base as a three-column documentation site: a categorized navigation sidebar, the article content, and an "On this page" outline. Works alongside your chosen style.', 'knowledgebase' ),
+				'type'    => 'checkbox',
+				'default' => false,
+				'pro'     => true,
+			),
 			'columns'                => array(
 				'id'      => 'columns',
 				'name'    => esc_html__( 'Number of columns', 'knowledgebase' ),

includes/admin/settings/class-settings-wizard-api.php

@@ -5,7 +5,7 @@
  * A reusable API class for creating multi-step settings wizards.
  * This class provides the framework for creating guided setup experiences.
  *
- * @package WebberZone\Knowledge_Base
+ * @package    WebberZone\Knowledge_Base
  */
 
 namespace WebberZone\Knowledge_Base\Admin\Settings;

includes/admin/settings/css/wizard-rtl.min.css

@@ -57,6 +57,33 @@ jQuery(document).ready(function ($) {
 		formmodified = 0;
 	});
 
+	// Shared helper: enforce unique selection within a repeater wrapper.
+	function syncUniqueSelectsForWrapper(wrapper) {
+		var uniqueField = wrapper.data('unique-field') || '';
+		if (!uniqueField) {
+			return;
+		}
+		var $selects = wrapper.find('.wz-repeater-item select[name$="[fields][' + uniqueField + ']"]');
+		var usedValues = {};
+		$selects.each(function () {
+			var val = $(this).val();
+			if (val) {
+				usedValues[val] = true;
+			}
+		});
+		$selects.each(function () {
+			var $sel = $(this);
+			var ownVal = $sel.val();
+			$sel.find('option').each(function () {
+				var optVal = $(this).val();
+				if (!optVal) {
+					return;
+				}
+				$(this).prop('disabled', optVal !== ownVal && usedValues[optVal]);
+			});
+		});
+	}
+
 	// Initialize Repeater Fields.
 	$('.wz-repeater-wrapper').each(function () {
 		var wrapper = $(this);
@@ -141,44 +168,15 @@ jQuery(document).ready(function ($) {
 
 		// Enforce unique selection across rows for the field named in data-unique-field.
 		var uniqueField = wrapper.data('unique-field') || '';
-		function syncUniqueSelects() {
-			if (!uniqueField) {
-				return;
-			}
-			var $selects = itemsContainer.find('.wz-repeater-item select[name$="[fields][' + uniqueField + ']"]');
-			var usedValues = {};
-			$selects.each(function () {
-				var val = $(this).val();
-				if (val) {
-					usedValues[val] = true;
-				}
-			});
-			$selects.each(function () {
-				var $sel = $(this);
-				var ownVal = $sel.val();
-				$sel.find('option').each(function () {
-					var optVal = $(this).val();
-					if (!optVal) {
-						return;
-					}
-					$(this).prop('disabled', optVal !== ownVal && usedValues[optVal]);
-				});
-			});
-		}
 
 		if (uniqueField) {
-			syncUniqueSelects();
+			syncUniqueSelectsForWrapper(wrapper);
 			wrapper.on('change', '.wz-repeater-item select[name$="[fields][' + uniqueField + ']"]', function () {
-				syncUniqueSelects();
+				syncUniqueSelectsForWrapper(wrapper);
 			});
 			wrapper.on('click', '.remove-item', function () {
 				// Sync after DOM removal; removal handler fires before remove, so defer.
-				setTimeout(syncUniqueSelects, 0);
-			});
-			document.addEventListener('wz:repeater-item-added', function (e) {
-				if (wrapper.get(0).contains(e.detail.container)) {
-					syncUniqueSelects();
-				}
+				setTimeout(function () { syncUniqueSelectsForWrapper(wrapper); }, 0);
 			});
 		}
 
@@ -202,4 +200,14 @@ jQuery(document).ready(function ($) {
 		});
 	});
 
+	// Single self-scoping listener: re-enforce unique selection for the wrapper
+	// that owns the newly added item, regardless of how many repeaters exist.
+	document.addEventListener('wz:repeater-item-added', function (e) {
+		var wrapper = $(e.detail.container).closest('.wz-repeater-wrapper');
+		if (!wrapper.length) {
+			return;
+		}
+		syncUniqueSelectsForWrapper(wrapper);
+	});
+
 });

includes/admin/settings/js/settings-admin-scripts.js

@@ -12,15 +12,15 @@ export const tocIcon = (props) => (
 			fill="#FFBD59"
 			rx={332.8}
 		/>
-		{ /* Bullet dots */}
+		{/* 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 */}
+		{/* 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 */}
+		{/* 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>
@@ -111,3 +111,35 @@ export const bookIcon = (props) => (
 		<path d="M212.426 285.957h-128a8.169 8.169 0 0 0-8.17 8.17 8.169 8.169 0 0 0 8.17 8.17h128a8.169 8.169 0 0 0 8.17-8.17 8.169 8.169 0 0 0-8.17-8.17zM212.426 239.66h-128a8.169 8.169 0 0 0-8.17 8.17 8.169 8.169 0 0 0 8.17 8.17h128a8.169 8.169 0 0 0 8.17-8.17 8.169 8.169 0 0 0-8.17-8.17zM212.426 193.362h-128c-4.513 0-8.17 3.657-8.17 8.17s3.657 8.17 8.17 8.17h128c4.513 0 8.17-3.657 8.17-8.17s-3.657-8.17-8.17-8.17zM212.426 147.064h-128c-4.513 0-8.17 3.657-8.17 8.17s3.657 8.17 8.17 8.17h128c4.513 0 8.17-3.657 8.17-8.17s-3.657-8.17-8.17-8.17zM212.426 100.766h-128c-4.513 0-8.17 3.657-8.17 8.17s3.657 8.17 8.17 8.17h128c4.513 0 8.17-3.657 8.17-8.17s-3.657-8.17-8.17-8.17zM435.745 294.128a8.169 8.169 0 0 0-8.17-8.17h-128a8.169 8.169 0 0 0-8.17 8.17 8.169 8.169 0 0 0 8.17 8.17h128a8.169 8.169 0 0 0 8.17-8.17zM299.574 256h128a8.169 8.169 0 0 0 8.17-8.17v-53.106a8.169 8.169 0 0 0-8.17-8.17 8.169 8.169 0 0 0-8.17 8.17v44.936h-111.66V117.106h111.66v44.936a8.169 8.169 0 0 0 8.17 8.17 8.169 8.169 0 0 0 8.17-8.17v-53.106a8.169 8.169 0 0 0-8.17-8.17h-128a8.169 8.169 0 0 0-8.17 8.17V247.83a8.169 8.169 0 0 0 8.17 8.17z" />
 	</svg>
 );
+
+export const sectionTreeIcon = (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}
+		/>
+		{/* Root */}
+		<rect x="40" y="32" width="160" height="32" rx="12" fill="#792a18" />
+		{/* Branch lines */}
+		<rect x="120" y="64" width="8" height="64" rx="4" fill="#ab5d4a" />
+		<rect x="120" y="120" width="40" height="8" rx="4" fill="#ab5d4a" />
+		<rect x="120" y="184" width="40" height="8" rx="4" fill="#ab5d4a" />
+		{/* Children */}
+		<rect x="160" y="96" width="140" height="28" rx="10" fill="#fff" />
+		<rect x="160" y="160" width="140" height="28" rx="10" fill="#fff" />
+		{/* Grandchildren under second child */}
+		<rect x="240" y="188" width="8" height="48" rx="4" fill="#ab5d4a" />
+		<rect x="240" y="224" width="32" height="8" rx="4" fill="#ab5d4a" />
+		<rect x="240" y="288" width="32" height="8" rx="4" fill="#ab5d4a" />
+		<rect x="272" y="200" width="100" height="28" rx="10" fill="#f0ebea" />
+		<rect x="272" y="264" width="100" height="28" rx="10" fill="#f0ebea" />
+	</svg>
+);

includes/admin/settings/js/settings-admin-scripts.min.js

@@ -85,15 +85,16 @@ public function inject_anchors( string $content ): string {
 	/**
 	 * Whether any non-inline TOC consumer is active on the current page.
 	 *
-	 * Checks for: floating TOC option, the TOC sidebar widget, and the TOC block embedded in
-	 * the post content. The inline TOC is excluded because inject_toc() handles anchors itself.
+	 * Checks for: documentation layout, floating TOC option, the TOC sidebar widget, and the TOC
+	 * block embedded in the post content. The inline TOC is excluded because inject_toc() handles
+	 * anchors itself.
 	 *
 	 * @since 3.0.1
 	 *
 	 * @return bool
 	 */
 	private static function needs_anchor_injection(): bool {
-		if ( \wzkb_get_option( 'show_floating_toc' ) ) {
+		if ( \wzkb_get_option( 'docs_mode' ) || \wzkb_get_option( 'show_floating_toc' ) ) {
 			return true;
 		}
 

includes/blocks/src/components/icons.js

@@ -467,12 +467,15 @@ body.wzkb-sidebar-enabled #wzkb-sidebar-primary {
 }
 
 /* Navigation */
-.nav-previous {
-	float: right;
+body.single-wz_knowledgebase .nav-links {
+	display: flex;
+	justify-content: space-between;
+	gap: 1rem;
 }
 
-.nav-next {
-	float: left;
+body.single-wz_knowledgebase .nav-next {
+	text-align: left;
+	margin-right: auto;
 }
 
 /* Search form */