Help Center: Add support for WP Support 3 tab component

packages/help-center/src/components/help-center-article.scss

@@ -455,10 +455,70 @@
 				}
 			}
 
-			// Hide the tablist for the WP Support 3 tab component
-			// Context: https://github.com/Automattic/wp-calypso/issues/87340#issuecomment-1937424710
-			.wpsupport3-tab__tablist {
+			// Originally hidden with context: https://github.com/Automattic/wp-calypso/issues/87340#issuecomment-1937424710
+			// New CSS changes: Show the tab component for the WP Support 3 tab component
+
+			.wp-block-wpsupport3-tabs {
+
+				.aligncenter {
+					margin-left: auto;
+					margin-right: auto;
+				}
+
+				.wpsupport3-tab__tablist {
+					display: flex;
+					align-items: center;
+					gap: 24px;
+					white-space: nowrap;
+					overflow-x: auto;
+					border-bottom: 1px solid var( --wp--preset--color--border-light-gray, #eee );
+
+					.wpsupport3-tab__title {
+						padding: 8px 0;
+
+						color: var( --blue-blue-50, #0675c4 );
+						/* stylelint-disable-next-line declaration-property-unit-allowed-list */
+						font-size: 16px;
+						line-height: 24px;
+						border: none;
+						background: none;
+						border-bottom: 1px solid transparent;
+						transition: border-bottom 0.3s;
+
+						&:focus {
+							outline: none;
+						}
+
+						&:hover {
+							text-decoration: none;
+						}
+
+						&[aria-selected='true'] {
+							color: var( --gray-gray-100, #101517 );
+							border-bottom: 1px solid var( --gray-gray-100, #101517 );
+						}
+					}
+				}
+			}
+
+			.wp-block-wpsupport3-tab {
+				margin-top: 32px;
 				display: none;
+
+				&:not( [aria-hidden='true'] ) {
+					display: block;
+					animation: fadeIn 0.5s;
+				}
+
+				@keyframes fadeIn {
+					from {
+						opacity: 0;
+					}
+
+					to {
+						opacity: 1;
+					}
+				}
 			}
 		}
 	}

packages/help-center/src/components/help-center-article.tsx

@@ -1,7 +1,7 @@
 import { recordTracksEvent } from '@automattic/calypso-analytics';
-import { useEffect, createInterpolateElement } from '@wordpress/element';
+import { useEffect, createInterpolateElement, useCallback, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { useSearchParams } from 'react-router-dom';
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 import { useHelpCenterContext } from '../contexts/HelpCenterContext';
 import { usePostByUrl } from '../hooks';
 import { BackToTopButton } from './back-to-top-button';
@@ -12,7 +12,9 @@ import './help-center-article.scss';
 export const HelpCenterArticle = () => {
 	const [ searchParams ] = useSearchParams();
 	const { sectionName } = useHelpCenterContext();
-
+	const location = useLocation();
+	const navigate = useNavigate();
+	const [ tabHash, setTabHash ] = useState( '' );
 	const postUrl = searchParams.get( 'link' ) || '';
 	const query = searchParams.get( 'query' );
 
@@ -53,6 +55,66 @@ export const HelpCenterArticle = () => {
 		}
 	}, [ post, query, sectionName ] );
 
+	const toggleTab = ( element: Element, show: boolean ) => {
+		( element as HTMLElement ).style.display = show ? 'block' : 'none';
+		element.setAttribute( 'aria-hidden', show ? 'false' : 'true' );
+	};
+
+	const toggleTabTitle = ( element: Element, show: boolean ) => {
+		element.setAttribute( 'aria-selected', show ? 'true' : 'false' );
+	};
+
+	const activateTab = useCallback( () => {
+		const hash = tabHash;
+
+		const tabs = Array.from( document.querySelectorAll( '.wp-block-wpsupport3-tabs' ) );
+
+		tabs.forEach( ( tab ) => {
+			const titles = Array.from( tab.querySelectorAll( '.wpsupport3-tab__title' ) );
+			const bodies = Array.from(
+				tab.querySelectorAll( '.wp-block-wpsupport3-tab:not(.invisible_tabpanel)' )
+			);
+
+			const match = titles.findIndex( ( titles ) => titles.id === hash?.substring( 1 ) );
+
+			// Reset selection
+			titles.forEach( ( title ) => toggleTabTitle( title, false ) );
+			bodies.forEach( ( body ) => toggleTab( body, false ) );
+
+			if ( hash && match !== -1 ) {
+				toggleTabTitle( titles[ match ], true );
+				toggleTab( bodies[ match ], true );
+			} else {
+				// If the first tab is invisible from the editor, we set the first tab as active.
+				toggleTabTitle( titles[ 0 ], true );
+				toggleTab( bodies[ 0 ], true );
+			}
+		} );
+	}, [ tabHash ] );
+
+	useEffect( () => {
+		if ( tabHash || post ) {
+			activateTab();
+		}
+	}, [ activateTab, tabHash, post ] );
+
+	useEffect( () => {
+		if ( post ) {
+			const titles = Array.from(
+				document.querySelectorAll( '.wp-block-wpsupport3-tabs .wpsupport3-tab__title' )
+			);
+			titles.forEach( ( title ) => {
+				title.addEventListener( 'click', ( e ) => {
+					e.preventDefault();
+					setTabHash( `#${ title?.id }` );
+					setTimeout( () => {
+						window.scroll( 0, document.documentElement.scrollTop );
+					} );
+				} );
+			} );
+		}
+	}, [ location.pathname, location.search, navigate, post ] );
+
 	return (
 		<div className="help-center-article">
 			{ ! error && <ArticleContent post={ post } isLoading={ isLoading } /> }