update grid to show "all" category items

src/scripts/modules/grid/index.ts

@@ -1,3 +1,4 @@
+import { __ } from '@wordpress/i18n';
 const prefix = 'category-';
 
 /**
@@ -43,54 +44,81 @@ function getLastElementFromHref( href ) {
 	const pathname = url.pathname;
 	const pathnameParts = pathname.split( '/' );
 	const lastElement = pathnameParts[ pathnameParts.length - 2 ];
+
+	if ( url.hash === '#all' ) {
+		return null;
+	}
+
 	return lastElement;
 }
 
+function addAllCategory( ulElement ) {
+	if ( ulElement ) {
+		// Create a new <li> element
+		const liElement = document.createElement( 'li' );
+		liElement.setAttribute( 'class', 'cat-item cat-item-all' );
+
+		// Create a new <a> element with the "All" label
+		const aElement = document.createElement( 'a' );
+		aElement.href = '#all'; // Set the appropriate URL if needed
+		aElement.innerText = __( 'All' );
+
+		// Append the <a> element to the <li> element
+		liElement.appendChild( aElement );
+
+		// Insert the new <li> element before the first child of the <ul>
+		ulElement.insertBefore( liElement, ulElement.firstChild );
+	}
+}
+
 /**
  * The `modulrGrid` function adds event listeners to grid buttons and toggles the visibility of grid
  * categories based on user interaction.
  */
 export async function modulrGrid(): Promise< void > {
+	addAllCategory( document.querySelector( 'ul.modulr-grid-buttons' ) );
+
 	/* Finding all elements with the class `animate__animated` and adding them to an array. */
-	const gridButtons: HTMLAnchorElement[] | null = document.querySelectorAll(
-		'.modulr-grid-buttons li a'
-	);
+	const gridButtons: NodeListOf< HTMLAnchorElement > =
+		document.querySelectorAll( '.modulr-grid-buttons li' );
 
 	const grid: HTMLElement | null =
 		document.querySelector( '.modulr-grid > ul' );
 
 	if ( gridButtons && grid ) {
-		// the first item is the active button
-		gridButtons[ 0 ].classList.add( 'active' );
-
 		const { wrapGrid } = await import( 'animate-css-grid' );
 
 		const { forceGridAnimation } = wrapGrid( grid );
 
 		/* The code block is adding event listeners to each button in the `gridButtons` array. */
 		gridButtons.forEach( ( button, index ) => {
 			button.dataset.index = index.toString();
+
 			button.addEventListener( 'click', function ( e: Event ) {
 				e.preventDefault();
 
 				const clickedItem = e.currentTarget as HTMLAnchorElement;
+				const clickedItemAnchor =
+					clickedItem.firstChild as HTMLAnchorElement;
 
-				const category = getLastElementFromHref( clickedItem?.href );
+				const category = getLastElementFromHref(
+					clickedItemAnchor?.href
+				);
 
-				if ( clickedItem.classList.contains( 'active' ) ) {
+				if ( clickedItem?.classList.contains( 'current-cat' ) ) {
+					toggleCategoryVisiblity( grid, null, forceGridAnimation );
 					// the main button cannot be disabled
 					if ( clickedItem.dataset.index === '0' ) {
 						return;
 					}
-					toggleCategoryVisiblity( grid, null, forceGridAnimation );
-					clickedItem.classList.remove( 'active' );
-					gridButtons[ 0 ].classList.add( 'active' );
+					clickedItem.classList.remove( 'current-cat' );
+					gridButtons[ 0 ].classList.add( 'current-cat' );
 				} else {
 					// remove the active class from sibling buttons
 					gridButtons.forEach( ( el ) => {
-						el.classList.remove( 'active' );
+						el.classList.remove( 'current-cat' );
 					} );
-					button.classList.add( 'active' );
+					button.classList.add( 'current-cat' );
 					toggleCategoryVisiblity(
 						grid,
 						category,

src/styles/patterns/_grid.scss

@@ -7,15 +7,16 @@
 
 	li {
 		padding-bottom: var(--wp--preset--spacing--30);
+
+		&.current-cat a {
+			background: var(--wp--preset--color--gray-light);
+		}
 	}
 
 	a {
 		padding: 8px 12px;
 		border: 1px solid var(--wp--preset--color--gray-light);
 		border-radius: 50px;
-		&.active {
-			background: var(--wp--preset--color--gray-light);
-		}
 	}
 }