New and improoved Tabs for GenerateBlocks

new-tabs.css

/* Buttons as TABS */
.site .triggers .gb-button {
    color: var(--contrast-2);
    background-color: var(--base-2);
}

.site .triggers .gb-button:hover,
.site .triggers .gb-button:focus,
.site .triggers .gb-button:target,
.site .triggers .gb-button[aria-selected="true"] {
  color: var(--base);
  background-color: var(--accent);
  cursor: pointer;
}

/* END Buttons a TABS */

/* Containers as TABS */
.site .triggers .gb-grid-column .gb-container{
    color: var(--contrast-2);
    background-color: var(--base-2);
}
.site .triggers .gb-grid-column .gb-container:hover,
.site .triggers .gb-grid-column .gb-container:focus,
.site .triggers .gb-grid-column .gb-container:target,
.site .triggers .gb-grid-column[aria-selected="true"] .gb-container {
  color: var(--base);
  background-color: var(--accent);
  cursor: pointer;
}

/* END Containers a TABS */


.site .containers [role="tabpanel"] {
  display: none;
}

.site .containers [role="tabpanel"][open="true"] {
  display: block;
}

new-tabs.js

window.addEventListener("DOMContentLoaded", (event) => {
  const tabSection = Array.from(document.querySelectorAll(".tabs")); // wrapper

  tabSection.forEach((section) => { // scoping all to wrapper

    /* 
    * IF you wish to use Buttons as tabs USE the following three lines 
    * and make sure the three that follow right after are commented out 
    // */
    section.querySelectorAll(".gb-button-wrapper").forEach((element) => element.setAttribute("role", "tablist"));
    let tabButtons = Array.from(section.querySelectorAll(".triggers .gb-button "));
    let tabContents = Array.from(section.querySelectorAll(".containers > .gb-inside-container > .gb-container")); 
   
    /* 
    * IF you wish to use Containers as tabs USE the following three lines 
    * and make sure the three lines above this comment are commented out 
    */
    // section.querySelectorAll(".gb-grid-wrapper").forEach((element) => element.setAttribute("role", "tablist"));
    // let tabButtons = Array.from(section.querySelectorAll(".triggers .gb-grid-column "));
    // let tabContents = Array.from(section.querySelectorAll(".containers > .gb-inside-container .gb-container"));
   
    function clearActive(element) { // if already active make non active on click or keyborad tab
      let ifActiveBtn = Array.from(section.querySelectorAll("[aria-selected=true]"));
      ifActiveBtn.forEach((element) => element.setAttribute("aria-selected", false));
   
      let ifOpen = Array.from(section.querySelectorAll("[open=true]"));
      ifOpen.forEach((element) => element.removeAttribute("open", true));
    }

    let attributes = { "aria-selected": false, role: "tab", tabindex: 0 }; // tabs initial values

    function setAttributes(element, attributes) {
        Object.keys(attributes).forEach((attr) => {
          element.setAttribute(attr, attributes[attr]);
        });
    }
    
    tabButtons.forEach((element) => setAttributes(element, attributes)); // set tabs initial values
    tabContents.forEach((element) => element.setAttribute("role", "tabpanel"));

    for (let i = 0; i < tabButtons.length; i++) {

      tabButtons[0].setAttribute("aria-selected", true); // first element state on load
      tabContents[0].setAttribute("open", true); // first element state on load
      
      function tabEvents(event) { // do on click or keyboard
        event.preventDefault();
        // [tab-key] travels over tab-buttons
        // [click] or [enter/return] opens tab content
        // then [tab] key to enter into content
        if (event.keyCode === 13 || event.button == 0) {
          clearActive();
          tabContents[i].setAttribute("tabindex", 0);
          tabContents[i].setAttribute("open", true);
          tabButtons.forEach((element) => element.setAttribute("tabindex", -1));
          tabButtons[i].setAttribute("tabindex", 0);
          tabButtons[i].setAttribute("aria-selected", true);
          // [shift] + [tab] takes you back to tab-buttons
        } if ( event.keyCode === 9 ) {
          tabButtons.forEach((element) => element.setAttribute("tabindex", 0));
        }
      }
      ["click", "keyup"].forEach((event) => tabButtons[i].addEventListener(event, tabEvents));
    }
  });
});

new-tabs.php

<?php

function thisbit_tabs_for_generateblocks() {
	global $post;
	$blocks = parse_blocks( $post->post_content );
	foreach( $blocks as $block ) {
		$block['attrs']['className'] = ""; // initiate className to fix error reporting index undefined
		if( $block['attrs']['className'] && $block['attrs']['className'] !== 'tabs' ) { return;
		} else {
			wp_enqueue_style( 'thisbit-tabs', get_stylesheet_directory_uri() . '/assets/css/tabs.css', false, '0.0.1', 'all');
			wp_enqueue_script( 'thisbit-tabs', get_stylesheet_directory_uri() . '/assets/js/tabs.js', '', '0.0.1', true );
			return;
		}
	}
}
add_action( 'wp_enqueue_scripts', 'thisbit_tabs_for_generateblocks', 9999 );

new-tabs.js
line 32
typo on attribues

Thanks. Fixed that.