docs: update misc things

.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"
 	}
 }

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

simple-tabs-block.php

@@ -1,7 +1,7 @@
 <?php
 /**
  * Plugin Name:       Simple Tabs Block
- * Description:       Block to create a tabbed layout.
+ * Description:       Create rich tabbed layouts to organize information in a simple way using Simple Tabs Block
  * Requires at least: 5.9
  * Requires PHP:      7.0
  * Version:           0.0.0-development

src/tab/block.json

@@ -36,7 +36,7 @@
 		"html": false,
 		"color": {
 			"gradients": true,
-			"link": true,
+			"link": false,
 			"__experimentalDefaultControls": {
 				"background": true,
 				"text": true

src/tabs/edit.js

@@ -3,7 +3,6 @@
  */
 import classnames from 'classnames';
 import times from 'lodash/times';
-import { nanoid, customAlphabet } from 'nanoid';
 
 import { __ } from '@wordpress/i18n';
 import {
@@ -13,7 +12,7 @@ import {
 	InnerBlocks,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useRef, useEffect } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 import { PanelBody, SelectControl } from '@wordpress/components';
 import { withSelect, useSelect, withDispatch, select } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
@@ -36,7 +35,6 @@ function Edit( {
 	const {
 		defaultTab,
 		activeTab,
-		tabs,
 		layout: {
 			justifyContent,
 			orientation = 'horizontal',
@@ -193,14 +191,10 @@ export default compose(
 			innerBlocks: _select( 'core/block-editor' ).getBlocks( clientId ),
 		};
 	} ),
-	withDispatch( ( dispatch, { clientId }, { select } ) => {
-		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 )
-				);
 			},
 		};
 	} )

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;
-		}
-	}
 }

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' ) );