fix #753

src/blocks/tabs/deprecated.js

@@ -0,0 +1,97 @@
+import classnames from 'classnames';
+import metadata from './block.json';
+
+import {
+	RichText,
+	useBlockProps,
+	useInnerBlocksProps,
+} from '@wordpress/block-editor';
+
+const blockAttributes = metadata.attributes;
+const blockSupports = metadata.supports;
+
+export default [
+	{
+		attributes: {
+			...blockAttributes,
+		},
+
+		supports: {
+			...blockSupports,
+		},
+
+		save( { attributes, className } ) {
+			const {
+				tabs: _tabs,
+				matchHeight,
+				tabsJustification,
+				tabsId,
+				orientation,
+			} = attributes;
+			const tabs = JSON.parse( _tabs );
+
+			const dataMatchHeightBoolean =
+				'vertical' === orientation ||
+				( 'horizontal' === orientation && 'true' === matchHeight );
+
+			const classes = classnames( 'smb-tabs', className );
+
+			return (
+				<div
+					{ ...useBlockProps.save( { className: classes } ) }
+					data-tabs-id={ tabsId }
+					data-orientation={ orientation }
+					data-match-height={
+						dataMatchHeightBoolean ? 'true' : matchHeight
+					}
+					data-tabs-justification={
+						'horizontal' === orientation
+							? tabsJustification
+							: undefined
+					}
+				>
+					{ 0 < tabs.length && (
+						<div className="smb-tabs__tabs">
+							{ tabs.map( ( tab, index ) => {
+								return (
+									<div
+										className="smb-tabs__tab-wrapper"
+										key={ index }
+									>
+										<RichText.Content
+											tagName="button"
+											value={ tab.title }
+											className="smb-tabs__tab"
+											role="tab"
+											aria-controls={ tab.tabPanelId }
+											aria-selected={
+												0 === index ? 'true' : 'false'
+											}
+										/>
+									</div>
+								);
+							} ) }
+						</div>
+					) }
+
+					<div
+						{ ...useInnerBlocksProps.save( {
+							className: 'smb-tabs__body',
+						} ) }
+					/>
+
+					{ dataMatchHeightBoolean && (
+						<style>
+							{ tabs.map(
+								( tab, index ) =>
+									`[data-tabs-id="${ tabsId }"] > .smb-tabs__body > .smb-tab-panel:nth-child(${
+										index + 1
+									}) {left: ${ -100 * index }%}`
+							) }
+						</style>
+					) }
+				</div>
+			);
+		},
+	},
+];

src/blocks/tabs/index.js

@@ -7,6 +7,7 @@ import icon from './icon';
 import metadata from './block.json';
 import edit from './edit';
 import save from './save';
+import deprecated from './deprecated';
 
 registerBlockType( metadata.name, {
 	icon: {
@@ -15,6 +16,7 @@ registerBlockType( metadata.name, {
 	},
 	edit,
 	save,
+	deprecated,
 	styles: [
 		{
 			name: 'default',

src/blocks/tabs/save.js

@@ -33,7 +33,7 @@ export default function ( { attributes, className } ) {
 			}
 		>
 			{ 0 < tabs.length && (
-				<div className="smb-tabs__tabs">
+				<div className="smb-tabs__tabs" role="tablist">
 					{ tabs.map( ( tab, index ) => {
 						return (
 							<div