Merge c56d1ad into 56fd931

plugin/assets/src/block-editor/blocks/tab-bar/deprecated.js

@@ -0,0 +1,24 @@
+/*
+ *  Copyright 2022 Google LLC
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+/**
+ * Internal dependencies
+ */
+import { SaveM2 } from './deprecated/m2/m2-tab-save';
+
+const deprecated = [ SaveM2 ];
+
+export default deprecated;

plugin/assets/src/block-editor/blocks/tab-bar/deprecated/m2/m2-tab-save.js

@@ -0,0 +1,102 @@
+/*
+ *  Copyright 2022 Google LLC
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { Tab } from '../../components/tab';
+
+/**
+ * WordPress dependencies
+ */
+import { RawHTML } from '@wordpress/element';
+import { getBlockContent } from '@wordpress/blocks';
+import { useBlockProps } from '@wordpress/block-editor';
+
+const attributesM2 = {
+	forceUpdate: {
+		type: 'boolean',
+		default: true,
+	},
+	iconPosition: {
+		type: 'string',
+		default: 'none',
+	},
+	tabs: {
+		type: 'array',
+		default: [],
+	},
+	preview: {
+		type: 'boolean',
+		default: false,
+	},
+};
+
+const TabBarSave = ( { attributes: { tabs, iconPosition } } ) => {
+	const blockProps = useBlockProps.save( {
+		className: 'mdc-tab-bar-container',
+	} );
+	return (
+		<div { ...blockProps }>
+			<div className="mdc-tab-bar" role="tablist">
+				<div className="mdc-tab-scroller">
+					<div className="mdc-tab-scroller__scroll-area mdc-tab-scroller__scroll-area--scroll">
+						<div className="mdc-tab-scroller__scroll-content">
+							{ tabs.map( ( props, index ) => (
+								<Tab
+									frontend
+									{ ...props }
+									active={ index === 0 }
+									key={ index }
+									iconPosition={ iconPosition }
+								/>
+							) ) }
+						</div>
+					</div>
+				</div>
+			</div>
+			<div>
+				{ tabs.map( ( tab, index ) => (
+					<RawHTML
+						key={ tab.label + tab.position }
+						className={ classNames(
+							'mdc-tab-content mdc-typography--body1',
+							{
+								'mdc-tab-content--active': index === 0,
+							}
+						) }
+					>
+						{ tab.content &&
+							Array.isArray( tab.content ) &&
+							tab.content
+								.map( content => getBlockContent( content ) )
+								.join( ' ' ) }
+					</RawHTML>
+				) ) }
+			</div>
+		</div>
+	);
+};
+
+export const SaveM2 = {
+	attributes: attributesM2,
+	supports: { align: [ 'wide', 'full' ] },
+	save: TabBarSave,
+};

plugin/assets/src/block-editor/blocks/tab-bar/index.js

@@ -25,6 +25,7 @@ import { __ } from '@wordpress/i18n';
 import edit from './edit';
 import save from './save';
 import metadata from './block.json';
+import deprecated from './deprecated';
 
 const { name } = metadata;
 
@@ -43,6 +44,7 @@ export const settings = {
 	icon: () => <i className="material-icons-outlined">tab</i>,
 	edit,
 	save,
+	deprecated,
 	example: {
 		attributes: {
 			preview: true,