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(); + }); });