タブブロック追加

editor-css/_editor_before.scss

@@ -253,6 +253,8 @@ div[data-type="vk-blocks/page-content"].is-selected{
 // アニメーションブロックの識別用枠線
 @import "./editor_before_animation";
 
+@import "./editor_before_tab";
+
 // アイコンカードの見出しがテーマの見出し指定機能に負けるので上書き
 @import "./editor_before_icon-card";
 

editor-css/_editor_before_tab.scss

@@ -0,0 +1,26 @@
+/*      編集画面
+/*-------------------------------------------*/
+
+.vk_tab{
+	position: relative;
+	&.is-style-vk_tab_labels-line .vk_tab_labels {
+		margin-bottom: -1px;
+	}
+	ul.vk_tab_labels{
+		margin:0;
+		padding: 0;
+		li {
+			margin-bottom:0;
+		}
+	}
+	.block-list-appender{
+		position: absolute;
+		top: calc(var(--vk-size-text) * -6 );
+		right: calc(var(--vk-size-text) * 0 );
+	}
+}
+
+.vk_tab_bodys .vk_tab_bodys_body.vk_tab_bodys_body-state-active {
+	margin-top: 0;
+	margin-bottom: 0;
+}

gulpfile.js

@@ -106,6 +106,10 @@ gulp.task('helper-js-pro', (done) => {
 		.pipe(uglify())
 		.pipe(rename('vk-animation.min.js'))
 		.pipe(gulp.dest('./build/'));
+	gulp.src('src/blocks/_pro/tab/view.js')
+		.pipe(uglify())
+		.pipe(rename('vk-tab.min.js'))
+		.pipe(gulp.dest('./build/'));
 	done();
 });
 

inc/vk-blocks-pro/vk-blocks-pro-functions.php

@@ -34,5 +34,8 @@ function vk_blocks_pro_load_scripts() {
 
 	// Animation Block
 	wp_enqueue_script( 'vk-blocks-animation', VK_BLOCKS_DIR_URL . 'build/vk-animation.min.js', array(), VK_BLOCKS_VERSION, true );
+
+	// Tab Block
+	wp_enqueue_script( 'vk-blocks-tab', VK_BLOCKS_DIR_URL . 'build/vk-tab.min.js', array(), VK_BLOCKS_VERSION, true );
 }
 add_action( 'wp_enqueue_scripts', 'vk_blocks_pro_load_scripts' );

inc/vk-blocks/class-vk-blocks-global-settings.php

@@ -251,6 +251,14 @@ public static function blocks() {
 				'name'   => 'step-item',
 				'is_pro' => true,
 			),
+			array(
+				'name'   => 'tab',
+				'is_pro' => true,
+			),
+			array(
+				'name'   => 'tab-item',
+				'is_pro' => true,
+			),
 			array(
 				'name'   => 'table-of-contents-new',
 				'is_pro' => true,