Added capability to change tabs via URL hash within the tabs block.

blocks/tabs/assets/tabs.js

@@ -4,6 +4,8 @@ class Tabs {
 
 	constructor(wrapper) {
 		this.loadElements(wrapper);
+		this.addAriaControls();
+		this.setTabByHash();
 		this.setTabActiveState();
 		this.addEventListeners();
 	}
@@ -14,6 +16,41 @@ class Tabs {
 		this.elements.pattern = wrapper.next().find('.tabs__pattern');
 	}
 
+	addAriaControls() {
+		this.elements.tab.each(
+			(index) => {
+				const tab = this.elements.tab.eq(index);
+				const pattern = this.elements.pattern.eq(index);
+
+				tab.attr('aria-controls', pattern.attr('id'));
+			}
+		);
+	}
+
+	setTabByHash() {
+		const hash = location.hash;
+
+		if (!hash) {
+			return;
+		}
+
+		this.elements.pattern.each(
+			(index) => {
+				const pattern = this.elements.pattern.eq(index);
+
+				if (pattern.is(hash)) {
+					this.setActiveTab(index);
+					return false;
+				}
+
+				if (pattern.find(hash).length) {
+					this.setActiveTab(index);
+					return false;
+				}
+			}
+		);
+	}
+
 	setTabActiveState() {
 		this.elements.tab.removeClass('tabs__tab--active');
 		this.elements.pattern.prop('hidden', true);
@@ -31,9 +68,20 @@ class Tabs {
 	addEventListeners() {
 		this.elements.tab.on(
 			'click',
+			(event) => {
+				const tab = jQuery(event.currentTarget);
+				const patternId = tab.attr('aria-controls');
+
+				history.pushState({}, '', '#' + patternId);
+				this.setTabByHash();
+				this.setTabActiveState();
+			}
+		);
+
+		window.addEventListener(
+			'popstate',
 			() => {
-				const index = this.elements.tab.index(event.currentTarget);
-				this.setActiveTab(index);
+				this.setTabByHash();
 				this.setTabActiveState();
 			}
 		);

blocks/tabs/templates/block.php

@@ -85,21 +85,33 @@ class="tabs__tabs"
 	</div>
 </div>
 
+<?php $tab_counter = apply_filters( 'tabs_block_tab_counter', 1 ); ?>
+
 <div class="tabs__patterns">
 	<?php foreach ( $patterns as $index => $pattern ) : ?>
 		<div
 			class="tabs__pattern"
-			data-index="<?php echo esc_attr( $index ); ?>"
+			id="tab-<?php echo esc_attr( $tab_counter ); ?>"
 			<?php if ( $index !== $active_tab ) : ?>
 				hidden
 				aria-hidden="true"
 			<?php endif; ?>
 		>
 			<?php $creode_block->render_block_pattern( $pattern ); ?>
 		</div>
+		<?php $tab_counter++; ?>
 	<?php endforeach; ?>
 </div>
 
+<?php
+add_filter(
+	'tabs_block_tab_counter',
+	function () use ( $tab_counter ) {
+		return $tab_counter;
+	}
+);
+?>
+
 <?php if ( ! $is_preview ) : ?>
 	</div>
 <?php endif; ?>