Enhance tab group functionality and interactivity; update attributes,…

… styles, and unique identification for multiple instances

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+	"CodeGPT.apiKey": "Ollama"
+}

build/tab-group/block.json

@@ -15,9 +15,21 @@
   },
   "supports": {
     "html": false,
-    "align": true,
+    "anchor": true,
     "alignWide": true,
-    "interactivity": true
+    "interactivity": true,
+    "color": {
+      "text": true,
+      "link": true,
+      "background": true
+    },
+    "dimensions": {
+      "minHeight": true
+    },
+    "spacing": {
+      "margin": true,
+      "padding": true
+    }
   },
   "textdomain": "marvelous-tab",
   "editorScript": "file:./index.js",

build/tab-group/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-data'), 'version' => '722c5e2d4855328e12e4');
+<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-data'), 'version' => 'fafa1d3c4d7b05d2cde6');

build/tab-group/render.php

@@ -1,14 +1,18 @@
+<?php
+// generate uniq id if multiple block in content
+$block_id = uniqid();
+?>
 <div <?php echo get_block_wrapper_attributes([
 				'class' => 'marvelous-tab-group',
 			]); ?>
 	data-wp-interactive="goodmotion/marvelous-tab"
-	<?php echo wp_interactivity_data_wp_context(['current' => 'section-0']); ?>>
+	<?php echo wp_interactivity_data_wp_context(['current' => 'section-0' . '_' . $block_id]); ?>>
 	<div class="tab-control" role="tablist">
 		<?php foreach ($block->inner_blocks as $key => $inner_block): ?>
 			<button
-				id="tab-<?php echo $key; ?>"
+				id="tab-<?php echo $key . '_' . $block_id; ?>"
 				role="tab"
-				data-target="section-<?php echo $key; ?>"
+				aria-controls="section-<?php echo $key . '_' . $block_id; ?>"
 				data-wp-on--click="actions.showTab"
 				data-wp-class--tab-is-active="state.tabIsShow"
 				data-wp-bind--aria-selected="state.tabIsShow">
@@ -18,10 +22,10 @@
 	</div>
 	<div class="tab-content">
 		<?php foreach ($block->inner_blocks as $key => $inner_block): ?>
-			<div id="section-<?php echo $key; ?>"
+			<div id="section-<?php echo $key . '_' . $block_id; ?>"
 				role="tabpanel"
 				data-wp-bind--hidden="!state.isShow"
-				data-wp-bind--aria-labelledby="tab-<?php echo $key; ?>"
+				data-wp-bind--aria-labelledby="tab-<?php echo $key . '_' . $block_id; ?>"
 				data-wp-bind--aria-hidden="!state.isShow">
 				<?php echo $inner_block->render(); ?>
 			</div>

build/tab-group/view.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('@wordpress/interactivity'), 'version' => '12ecc2d9c88638177b7b', 'type' => 'module');
+<?php return array('dependencies' => array('@wordpress/interactivity'), 'version' => 'fd1c03050ab067bf2f9a', 'type' => 'module');

build/tab-item/block.json

@@ -24,7 +24,20 @@
   "supports": {
     "html": false,
     "align": true,
-    "alignWide": true
+    "alignWide": true,
+    "color": {
+      "text": true,
+      "link": true,
+      "background": true,
+      "heading": true
+    },
+    "dimensions": {
+      "minHeight": true
+    },
+    "spacing": {
+      "margin": true,
+      "padding": true
+    }
   },
   "textdomain": "marvelous-tab",
   "editorScript": "file:./index.js"

build/tab-item/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-i18n'), 'version' => '7cf693b80d7120cfebf8');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-i18n'), 'version' => 'a3d1b7ce1f5cfec53e6e');