Skip to content

Commit

Permalink
feat: editable tab header
Browse files Browse the repository at this point in the history
Soare-Robert-Daniel committed Sep 15, 2023
1 parent afd2ede commit 5c430ab
Showing 2 changed files with 36 additions and 20 deletions.
33 changes: 18 additions & 15 deletions src/blocks/blocks/tabs/editor.scss
Original file line number Diff line number Diff line change
@@ -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;
23 changes: 18 additions & 5 deletions src/blocks/blocks/tabs/group/edit.js
Original file line number Diff line number Diff line change
@@ -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, '' ) });
}}
/>
);
}) || '' }

0 comments on commit 5c430ab

Please sign in to comment.