From 5c430ab04b6894e05aceb66170db5d301c95a2f0 Mon Sep 17 00:00:00 2001
From: "Soare Robert Daniel (Mac 2023)" <soare.robert.daniel@protonmail.com>
Date: Fri, 15 Sep 2023 14:25:38 +0300
Subject: [PATCH] feat: editable tab header

---
 src/blocks/blocks/tabs/editor.scss   | 33 +++++++++++++++-------------
 src/blocks/blocks/tabs/group/edit.js | 23 ++++++++++++++-----
 2 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/src/blocks/blocks/tabs/editor.scss b/src/blocks/blocks/tabs/editor.scss
index d185aeb1d..568d1c90a 100644
--- a/src/blocks/blocks/tabs/editor.scss
+++ b/src/blocks/blocks/tabs/editor.scss
@@ -15,9 +15,12 @@
     .wp-block-themeisle-blocks-tabs__header_item + div {
         margin-bottom: calc(0px - var(--border-side-width));
     }
-    
+
     .wp-block-themeisle-blocks-tabs__header_item {
-        
+        * {
+            cursor: text;
+        }
+
         svg {
             fill: gray;
             max-width: 24px;
@@ -39,7 +42,7 @@
                     margin-bottom: 0px;
                 }
 
-                &> .block-editor-block-list__block { 
+                &> .block-editor-block-list__block {
 					border-color: inherit;
                     &:not(:last-of-type) {
                         &> .wp-block-themeisle-blocks-tabs-item__header {
@@ -70,10 +73,10 @@
         .wp-block-themeisle-blocks-tabs__content {
             > .block-editor-inner-blocks {
                 height: 100%;
-    
+
                 > .block-editor-block-list__layout {
                     height: 100%;
-    
+
                     > .block-editor-block-list__block {
                         &:has( > .wp-block-themeisle-blocks-tabs-item__content.active) {
                             @media (min-width: 800px) {
@@ -84,7 +87,7 @@
                 }
             }
         }
-    } 
+    }
 
     // &.is-style-boxed > .wp-block-themeisle-blocks-tabs__content {
     //     &> .block-editor-inner-blocks {
@@ -110,26 +113,26 @@
                         border-left-width: 0px;
                         border-top-width: 0px;
                         border-right-width: 0px;
-        
+
                         &:not(.active) {
                             border-bottom-color: transparent;
                         }
-        
+
                         &.active {
                             border-bottom-style: solid;
                             border-color: var(--active-title-border-color);
                         }
                     }
-    
+
                     &> .wp-block-themeisle-blocks-tabs-item__content {
                         border-left-width: 0px;
                         border-right-width: 0px;
-        
+
                         @media (max-width: 800px) {
                             border-top-width: 0px;
                             border-bottom-width: 0px;
                         }
-        
+
                         @media (min-width: 800px) {
                             border-bottom-width: 0px;
                         }
@@ -147,14 +150,14 @@
 			@media (max-width: 800px) {
 				flex-direction: column;
 			}
-			
+
 
 			&> .wp-block-themeisle-blocks-tabs-item__content {
 				flex-grow: 1;
 			}
 		}
 	}
-    
+
     .add-header-container {
         display: flex;
         align-items: center;
@@ -167,11 +170,11 @@
             z-index: 10;
         }
     }
-    
+
     &.has-pos-left {
         .add-header-container {
             height: 30px;
-    
+
             &> .add-header-item > button {
                 left: 0px;
                 bottom: -10px;
diff --git a/src/blocks/blocks/tabs/group/edit.js b/src/blocks/blocks/tabs/group/edit.js
index 1287678ba..1d19ee791 100644
--- a/src/blocks/blocks/tabs/group/edit.js
+++ b/src/blocks/blocks/tabs/group/edit.js
@@ -12,12 +12,14 @@ import { createBlock } from '@wordpress/blocks';
 
 import {
 	InnerBlocks,
+	RichText,
 	useBlockProps
 } from '@wordpress/block-editor';
 
 import {
 	useSelect,
-	useDispatch
+	useDispatch,
+	dispatch
 } from '@wordpress/data';
 
 import {
@@ -34,7 +36,7 @@ import metadata from './block.json';
 import Inspector from './inspector.js';
 import Controls from './controls.js';
 import { blockInit, getDefaultValueByField } from '../../../helpers/block-utility.js';
-import { boxToCSS, objectOrNumberAsBox, _i, _px } from '../../../helpers/helper-functions';
+import { boxToCSS, objectOrNumberAsBox, _px } from '../../../helpers/helper-functions';
 import classNames from 'classnames';
 import BlockAppender from '../../../components/block-appender-button';
 import { useDarkBackground } from '../../../helpers/utility-hooks.js';
@@ -45,7 +47,8 @@ const TabHeader = ({
 	tag,
 	title,
 	onClick,
-	active
+	active,
+	onChangeTitle
 }) => {
 	const CustomTag = tag ?? 'div';
 	return (
@@ -58,7 +61,14 @@ const TabHeader = ({
 			) }
 			onClick={ onClick }
 		>
-			<CustomTag >{ title }</CustomTag>
+			<RichText
+				placeholder={ __( 'Add title…', 'otter-blocks' ) }
+				value={ title }
+				onChange={ onChangeTitle }
+				tagName={ tag ?? 'div' }
+				withoutInteractiveFormatting
+				multiline={ false }
+			/>
 		</div>
 	);
 };
@@ -251,9 +261,12 @@ const Edit = ({
 							<TabHeader
 								key={ tabHeader.clientId }
 								tag={ attributes.titleTag }
-								title={ tabHeader.attributes.title ?? `${__( 'Tab', 'otter-blocks' )} ${idx + 1}` }
+								title={ tabHeader.attributes?.title ?? `${__( 'Tab', 'otter-blocks' )} ${idx + 1}` }
 								active={ tabHeader.clientId === activeTab }
 								onClick={ () => toggleActiveTab( tabHeader.clientId ) }
+								onChangeTitle={ value => {
+									dispatch( 'core/block-editor' ).updateBlockAttributes( tabHeader.clientId, { title: value.replace( /(\r\n|\n|\r|<br>)/gm, '' ) });
+								}}
 							/>
 						);
 					}) || '' }