diff --git a/.eslintrc b/.eslintrc index 97709c1..233515c 100644 --- a/.eslintrc +++ b/.eslintrc @@ -4,6 +4,7 @@ "@wordpress/no-unsafe-wp-apis": 0, "no-console": "off", "eqeqeq": "off", - "jsx-a11y/label-has-associated-control": "off" + "jsx-a11y/label-has-associated-control": "off", + "react-hooks/exhaustive-deps": "off" } } \ No newline at end of file diff --git a/readme.txt b/readme.txt index 222a488..120e40e 100644 --- a/readme.txt +++ b/readme.txt @@ -24,7 +24,54 @@ Supports horizontal and vertical tabs. * Supports horizontal and vertical tabs * Set default open tab +== Changelog == + += 2.0.0 = + +* **BREAKING CHANGE**: Refactor tabs block for updated block controls +* Feat: Add CSS classes to active tabs +* Feat: Allow block styling through the native block editor styles panel + += 1.3.0 = + +* Feat: Update block styles +* Docs: Compatibility with 6.1 + += 1.2.1 = + +* Fix: Various block fixes + += 1.2.0 = + +* Feat: Trigger event on window when tab is changed + += 1.1.1 = + +* Fix: `label` undefined error + += 1.1.0 = + +* Fix: Accessibility features +* Fix: Allow CSS classes on tabs +* Feat: Added tab description field + += 1.0.0 = + +* Initial release + +== Upgrade Notice == + += 2.0.0 = +**BREAKING CHANGE**: Upgrading from version 1.x to 2.x could break any custom CSS applied to the tabs. It is highly recommended to test the upgrade on a staging environment before upgrading on a production site. + + == Installation == 1. Upload the plugin files to the `/wp-content/plugins/simple-tabs-block` directory, or install the plugin through the WordPress plugins screen directly. 1. Activate the plugin through the 'Plugins' screen in WordPress + +== Screenshots == + +1. Block editor +2. Tab styles panel +3. Frontend view \ No newline at end of file diff --git a/simple-tabs-block.php b/simple-tabs-block.php index 251cefa..6525e51 100644 --- a/simple-tabs-block.php +++ b/simple-tabs-block.php @@ -1,7 +1,7 @@ { - const { getBlock } = select( 'core/block-editor' ); - - const { updateBlockAttributes, moveBlockToPosition } = - dispatch( 'core/block-editor' ); - + withDispatch( ( dispatch, { clientId }, { select: _select } ) => { + const { getBlock } = _select( 'core/block-editor' ); + const { updateBlockAttributes } = dispatch( 'core/block-editor' ); const block = getBlock( clientId ); - const { selectBlock } = dispatch( blockEditorStore ); return { @@ -226,20 +220,6 @@ export default compose( updateBlockAttributes( block.clientId, { activeTab, } ); - // times( block.innerBlocks.length, ( n ) => { - // updateBlockAttributes( block.innerBlocks[ n ].clientId, { - // activeTab, - // } ); - // } ); - // selectBlock( activeTab ); - }, - moveTab( tabId, newIndex ) { - moveBlockToPosition( - tabId, - clientId, - clientId, - parseInt( newIndex ) - ); }, }; } ) diff --git a/src/tabs/style.scss b/src/tabs/style.scss index b36d539..a143703 100644 --- a/src/tabs/style.scss +++ b/src/tabs/style.scss @@ -3,6 +3,52 @@ --cloudcatch-tabs-column-gap: var(--wp--style--block-gap, 2em); } + +.wp-block-cloudcatch-tabs__container { + flex: 1; + display: grid; + align-items: center; + column-gap: var(--cloudcatch-tabs-column-gap); + row-gap: 0 !important; + justify-content: flex-start; + + body &.is-layout-flex { + display: grid; + } + + .wp-block-cloudcatch-tab { + order: -1; + + &-content { + order: 1; + grid-column: 1 / -1; + margin: 0; + display: none; + + &.active { + display: block; + } + } + + + &.active label, + &__label.active { + font-weight: 700; + } + } + + &.is-vertical { + grid-auto-flow: column; + grid-template-columns: min-content auto; + + .wp-block-cloudcatch-tab-content { + grid-column: 2 / 2; + grid-row: 1 / -1; + } + } +} + + .wp-block-cloudcatch-tabs.wp-block-cloudcatch-tabs__wrapper:not(.wp-block-cloudcatch-tabs-v2) { display: flex; flex-direction: column; @@ -90,47 +136,4 @@ flex-direction: column; } } - - -} - - -.wp-block-cloudcatch-tabs__container { - flex: 1; - display: grid !important; - align-items: center; - column-gap: var(--cloudcatch-tabs-column-gap); - row-gap: 0 !important; - justify-content: flex-start; - - &.is-vertical { - grid-auto-flow: column; - grid-template-columns: min-content auto; - - .wp-block-cloudcatch-tab-content { - grid-column: 2 / 2; - grid-row: 1 / -1; - } - } - - .wp-block-cloudcatch-tab { - order: -1; - - &-content { - order: 1; - grid-column: 1 / -1; - margin: 0; - display: none; - - &.active { - display: block; - } - } - - - &.active label, - &__label.active { - font-weight: 700; - } - } } diff --git a/src/tabs/view.js b/src/tabs/view.js index 88baadb..5a55a99 100644 --- a/src/tabs/view.js +++ b/src/tabs/view.js @@ -33,7 +33,7 @@ document.addEventListener( 'DOMContentLoaded', function () { const initEvents = () => { tabLabels.forEach( ( tabLabel ) => { - tabLabel.addEventListener( 'click', ( e ) => { + tabLabel.addEventListener( 'click', () => { setActiveTab( tabLabel.getAttribute( 'tabid' ) ); } ); @@ -92,7 +92,9 @@ document.addEventListener( 'DOMContentLoaded', function () { ) .classList.add( 'active' ); - const event = new Event( 'tabChanged' ); + const event = new CustomEvent( 'tabChanged', { // eslint-disable-line + detail: currentTabLabel, + } ); window.dispatchEvent( event ); }; @@ -140,7 +142,7 @@ document.addEventListener( 'DOMContentLoaded', function () { // Only activate tab on focus if it still has focus after the delay function checkTabFocus( target ) { - const focused = document.activeElement; + const focused = document.activeElement; // eslint-disable-line if ( target === focused ) { setActiveTab( target.getAttribute( 'tabid' ) );