diff --git a/.gitignore b/.gitignore index 0a7fc74..9810763 100644 --- a/.gitignore +++ b/.gitignore @@ -31,3 +31,4 @@ node_modules/ # Build files dist +build diff --git a/src/tab/block.json b/src/tab/block.json index abf3675..098d702 100644 --- a/src/tab/block.json +++ b/src/tab/block.json @@ -17,6 +17,14 @@ "label": { "type": "string", "default": "Title" + }, + "showDescription": { + "type": "boolean", + "default": false + }, + "description": { + "type": "string", + "default": "" } }, "usesContext": [ diff --git a/src/tab/edit.js b/src/tab/edit.js index 1f64336..8a43186 100644 --- a/src/tab/edit.js +++ b/src/tab/edit.js @@ -4,25 +4,30 @@ import classnames from 'classnames'; import { __ } from '@wordpress/i18n'; -import { PanelBody, TextControl } from '@wordpress/components'; +import { PanelBody, TextControl, ToggleControl } from '@wordpress/components'; import { useInnerBlocksProps, useBlockProps, InspectorControls } from '@wordpress/block-editor'; import './editor.scss'; export default function Edit({ attributes, setAttributes, className, clientId, context }) { const { index, - label + label, + showDescription, } = attributes; const blockProps = useBlockProps( { - tabId: index, + tabid: index, style: { 'display': clientId === context['cloudcatch/tabs/activeTab'] ? 'block' : 'none' } } ); - const innerBlocksProps = useInnerBlocksProps( blockProps, { - + const innerBlocksProps = useInnerBlocksProps( { + tabid: index, + className: 'wp-block-cloudcatch-tab', + style: { + 'display': clientId === context['cloudcatch/tabs/activeTab'] ? 'block' : 'none' + } } ); return ( @@ -34,11 +39,14 @@ export default function Edit({ attributes, setAttributes, className, clientId, c value={ label } onChange={ ( value ) => setAttributes( { label: value } ) } /> + setAttributes( { showDescription: ! showDescription } ) } + /> -
-
-
+
); } diff --git a/src/tab/save.js b/src/tab/save.js index 4f71936..19baafd 100644 --- a/src/tab/save.js +++ b/src/tab/save.js @@ -1,14 +1,17 @@ /** * WordPress dependencies */ -import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; +import { useInnerBlocksProps } from '@wordpress/block-editor'; export default function save( { attributes } ) { const { index } = attributes; + const innerBlocksProps = useInnerBlocksProps.save( { + tabid: index, + className: 'wp-block-cloudcatch-tab' + } ); + return ( -
- -
+
); } diff --git a/src/tabs/edit.js b/src/tabs/edit.js index c98be96..c2b3d79 100644 --- a/src/tabs/edit.js +++ b/src/tabs/edit.js @@ -80,27 +80,42 @@ function Edit({ attributes, setAttributes, className, innerBlocks, clientId, upd
{ tabs.map((innerBlock, key) => { + console.log( innerBlock?.attributes?.className ); return ( - { - updateBlockAttributes( innerBlock.clientId, { - label: value, - } ); - }} - key={ key } - role="tab" - // aria-controls={ uuid + '-tab' } - tabid={ key } - tabIndex="0" - withoutInteractiveFormatting - identifier="label" - className={ classnames( 'wp-block-cloudcatch-tab__label', { 'active': activeTab === innerBlock.clientId } ) } - unstableOnFocus={ (e) => changeTab( innerBlock.clientId ) } - /> +
+ { + updateBlockAttributes( innerBlock.clientId, { + label: value, + } ); + }} + role="tab" + tabid={ key } + tabIndex="0" + withoutInteractiveFormatting + identifier="label" + className={ classnames( 'wp-block-cloudcatch-tab__label', innerBlock?.attributes?.className, { 'active': activeTab === innerBlock.clientId } ) } + unstableOnFocus={ (e) => changeTab( innerBlock.clientId ) } + /> + { innerBlock?.attributes?.showDescription && ( + { + updateBlockAttributes( innerBlock.clientId, { + description: value, + } ); + }} + identifier="div" + className="wp-block-cloudcatch-tab__description" + /> + ) } +
); }) } @@ -148,7 +163,7 @@ export default compose( index: n, } ); - tabs.push( { "clientId": block.innerBlocks[ n ].clientId, "label": block.innerBlocks[ n ].attributes.label } ); + tabs.push( { "clientId": block.innerBlocks[ n ].clientId, "attributes": block.innerBlocks[ n ].attributes } ); } ); updateBlockAttributes( clientId, { diff --git a/src/tabs/save.js b/src/tabs/save.js index 3751849..a925c1f 100644 --- a/src/tabs/save.js +++ b/src/tabs/save.js @@ -33,15 +33,24 @@ export default function save( { attributes } ) {
{ tabs.map((innerBlock, key) => - +
+ + { innerBlock?.attributes?.showDescription && ( + + ) } +
) }
diff --git a/src/tabs/view.js b/src/tabs/view.js index f878eab..aa1653a 100644 --- a/src/tabs/view.js +++ b/src/tabs/view.js @@ -40,6 +40,17 @@ setActiveTab(tabLabel.getAttribute('tabid')); }); + tabLabel.addEventListener('keydown', (e) => { + var key = e.keyCode; + + switch (key) { + case keys.up: + case keys.down: + determineOrientation(e); + break; + } + }); + tabLabel.addEventListener('keyup', (e) => { var key = e.keyCode; @@ -58,7 +69,7 @@ tab.style.display = 'none'; }); - tabLabelsContainer.querySelectorAll(':scope > *').forEach(label => { + tabLabels.forEach(label => { label.classList.remove('active'); label.setAttribute( 'aria-selected', 'false' ); }); @@ -100,6 +111,8 @@ tabLabels[x].addEventListener('focus', focusEventHandler); } + console.log( direction[pressed] ); + if (direction[pressed]) { var desiredIndex = activeIndex + direction[pressed];