Merge branch 'develop' into image-card-edit

plugin/assets/css/src/components/tooltip.css

@@ -0,0 +1,84 @@
+/*
+ *  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.
+ */
+
+.mdc-tooltip {
+	z-index: 2;
+}
+
+.mdc-tooltip {
+	position: fixed;
+	display: none;
+}
+
+.mdc-tooltip--shown,
+.mdc-tooltip--showing,
+.mdc-tooltip--hide {
+	display: inline-flex;
+}
+
+@mixin selector-typography .mdc-tooltip__surface, body-small, 0.75, 1, 400;
+
+.mdc-tooltip__surface {
+	border-radius: var(--mdc-shape-small, 4px);
+	color: var(--md-sys-color-inverse-on-surface, #fff);
+	background-color: var(--md-sys-color-inverse-surface);
+	word-break: var(--mdc-tooltip-word-break, normal);
+	overflow-wrap: anywhere;
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-font-smoothing: antialiased;
+	line-height: 16px;
+	padding: 4px 8px;
+	min-width: 40px;
+	max-width: 200px;
+	min-height: 24px;
+	max-height: 40vh;
+	box-sizing: border-box;
+	overflow: hidden;
+	transform: scale(0.8);
+	text-align: center;
+	opacity: 0;
+	outline: 1px solid transparent;
+}
+
+.mdc-tooltip--multiline .mdc-tooltip__surface {
+	text-align: left;
+}
+
+[dir="rtl"] .mdc-tooltip--multiline .mdc-tooltip__surface,
+.mdc-tooltip--multiline .mdc-tooltip__surface[dir="rtl"] {
+	text-align: right;
+}
+
+.mdc-tooltip--shown .mdc-tooltip__surface {
+	-webkit-transform: scale(1);
+	transform: scale(1);
+	opacity: 1;
+}
+
+.mdc-tooltip--showing-transition .mdc-tooltip__surface {
+	transition: opacity 150ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1);
+	transition: opacity 150ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1);
+	transition: opacity 150ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.mdc-tooltip--hide .mdc-tooltip__surface {
+	-webkit-transform: scale(1);
+	transform: scale(1);
+}
+
+.mdc-tooltip--hide-transition .mdc-tooltip__surface {
+	transition: opacity 75ms 0ms cubic-bezier(0.4, 0, 1, 1);
+}

plugin/assets/css/src/material-components.css

@@ -18,12 +18,11 @@
  * Material components used in the blocks and frontend.
  */
 
+@import "mixins.css";
 @import "@material/icon-button/dist/mdc.icon-button.css";
 @import "@material/layout-grid/dist/mdc.layout-grid.css";
-@import "@material/list/dist/mdc.list.css";
 @import "@material/tab-bar/dist/mdc.tab-bar.css";
 @import "@material/tab-scroller/dist/mdc.tab-scroller.css";
-@import "@material/tooltip/dist/mdc.tooltip.css";
 @import "components/image-card.css";
 @import "./components/material.css";
 @import "./components/datatable.css";
@@ -32,3 +31,5 @@
 @import "./components/floating-label.css";
 @import "./components/tab.css";
 @import "./components/tab-indicator.css";
+@import "./components/list.css";
+@import "./components/tooltip.css";

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,

theme/assets/css/src/material-components.css

@@ -14,17 +14,16 @@
  * limitations under the License.
  */
 
-@import "@material/top-app-bar/dist/mdc.top-app-bar.css";
 @import "@material/icon-button/dist/mdc.icon-button.css";
-@import "@material/drawer/dist/mdc.drawer.css";
-@import "@material/list/dist/mdc.list.css";
 @import "@material/checkbox/dist/mdc.checkbox.css";
 @import "@material/layout-grid/dist/mdc.layout-grid.css";
 @import "@material/ripple/dist/mdc.ripple.css";
 @import "@material/tab-bar/dist/mdc.tab-bar.css";
 @import "@material/tab-scroller/dist/mdc.tab-scroller.css";
 @import "@material/tab/dist/mdc.tab.css";
 @import "./components/material.css";
+@import "./material/drawer.css";
+@import "./material/top-app-bar.css";
 
 /**
   Todo: Add style from plugin for material card and image card.