Merge pull request #1869 from Codeinwp/feat/tabs-tab-title

Make tabs header editable
Codeinwp · Sep 25, 2023 · 3a1754a · 3a1754a
2 parents ce82c78 + d287a24
commit 3a1754a
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 20 deletions.
diff --git 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
@@ -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, '' ) });
+								}}
 							/>
 						);
 					}) || '' }

diff --git a/src/blocks/test/e2e/blocks/tabs.spec.js b/src/blocks/test/e2e/blocks/tabs.spec.js
@@ -68,4 +68,14 @@ test.describe( 'Tabs Block', () => {
 
 		expect( await page.getByRole( 'paragraph' ).filter({ hasText: 'This is just a placeholder to help you visualize how the content is displayed in' }).isVisible() ).toBeTruthy();
 	});
+
+	test( 'change tab header content', async({ editor, page }) => {
+		await editor.insertBlock({
+			name: 'themeisle-blocks/tabs'
+		});
+
+		await page.getByRole( 'textbox', { name: 'Add title…' }).first().fill( 'Tab 1000' );
+
+		await expect( page.locator( 'div' ).filter({ hasText: /^Tab 1000$/ }).first() ).toBeVisible();
+	});
 });