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 }
>
- { title }
+
);
};
@@ -251,9 +261,12 @@ const Edit = ({
toggleActiveTab( tabHeader.clientId ) }
+ onChangeTitle={ value => {
+ dispatch( 'core/block-editor' ).updateBlockAttributes( tabHeader.clientId, { title: value.replace( /(\r\n|\n|\r|
)/gm, '' ) });
+ }}
/>
);
}) || '' }
diff --git a/src/blocks/test/e2e/blocks/tabs.spec.js b/src/blocks/test/e2e/blocks/tabs.spec.js
index f9d370b0e..4b637f79a 100644
--- 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();
+ });
});