Merge branch 'develop' into feature/325-large-button

material-components · Aug 27, 2022 · c2daec0 · c2daec0
2 parents 325afab + 2f6fce8
commit c2daec0
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 22 deletions.
diff --git a/plugin/assets/css/src/_frontend.css b/plugin/assets/css/src/_frontend.css
@@ -0,0 +1,35 @@
+/*
+ *
+ *  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.
+ *
+ *
+ */
+
+/*
+ * All Frontend CSS without importing material-components.css.
+ */
+@import "./base/variables.css";
+@import "./conf/index.css";
+@import "typography.css";
+@import "./components/contact-form.css";
+@import "./components/masonry-grid.css";
+@import "./components/card.css";
+@import "./components/core.css";
+@import "../../src/block-editor/blocks/common-posts-list/style.css";
+@import "../../src/block-editor/blocks/contact-form/inner-blocks/common/style.css";
+@import "../../src/block-editor/blocks/card/style.css";
+@import "./block/style/masonry.css";
+@import "./overrides.css";
+@import "./tokens/index.css";
diff --git a/plugin/assets/css/src/front-end-with-active-theme.css b/plugin/assets/css/src/front-end-with-active-theme.css
@@ -0,0 +1,21 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/*
+ * All Frontend CSS.
+ */
+@import "material-components-with-active-theme.css";
+@import "_frontend.css";
diff --git a/plugin/assets/css/src/front-end.css b/plugin/assets/css/src/front-end.css
@@ -17,17 +17,5 @@
 /*
  * All Frontend CSS.
  */
-@import "./base/variables.css";
-@import "./conf/index.css";
-@import "typography.css";
-@import "./material-components.css";
-@import "./components/contact-form.css";
-@import "./components/masonry-grid.css";
-@import "./components/card.css";
-@import "./components/core.css";
-@import "../../src/block-editor/blocks/common-posts-list/style.css";
-@import "../../src/block-editor/blocks/contact-form/inner-blocks/common/style.css";
-@import "../../src/block-editor/blocks/card/style.css";
-@import "./block/style/masonry.css";
-@import "./overrides.css";
-@import "./tokens/index.css";
+@import "material-components.css";
+@import "_frontend.css";
diff --git a/plugin/assets/css/src/material-components-with-active-theme.css b/plugin/assets/css/src/material-components-with-active-theme.css
@@ -0,0 +1,27 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/*
+ * Required Material components when material theme is active.
+ */
+
+@import "mixins.css";
+@import "@material/layout-grid/dist/mdc.layout-grid.css";
+@import "@material/tab-bar/dist/mdc.tab-bar.css";
+@import "@material/tab-scroller/dist/mdc.tab-scroller.css";
+@import "./components/material.css";
+@import "./components/datatable.css";
+@import "./components/tooltip.css";
diff --git a/plugin/assets/css/src/material-components.css b/plugin/assets/css/src/material-components.css
@@ -22,7 +22,7 @@
 @import "@material/layout-grid/dist/mdc.layout-grid.css";
 @import "@material/tab-bar/dist/mdc.tab-bar.css";
 @import "@material/tab-scroller/dist/mdc.tab-scroller.css";
-@import "components/image-card.css";
+@import "./components/image-card.css";
 @import "./components/material.css";
 @import "./components/datatable.css";
 @import "./components/text-field.css";

diff --git a/plugin/php/block-patterns/single-feature-extended.php b/plugin/php/block-patterns/single-feature-extended.php
@@ -32,7 +32,7 @@
 	'content'       => '<!-- wp:columns {"align":"wide"} -->
 <div class="wp-block-columns alignwide"><!-- wp:column -->
 <div class="wp-block-column"><!-- wp:material/image-list {"ids":[],"style":"grid","columns":{"desktop":2,"tablet":3,"mobile":1}} -->
-<div class="wp-block-material-image-list" id="block-material-image-list-1"><ul class="mdc-image-list mdc-image-list--with-text-protection"><li class="mdc-image-list__item"><a class="mdc-image-list__item-wrap" href="https://materialdesign.test/wp-content/plugins/material-design/assets/images/placeholder.png"><div class="mdc-image-list__image-aspect-container"><img class="mdc-image-list__image" alt="" src="' . $image . '" data-link="' . $image . '"/></div></a></li><li class="mdc-image-list__item"><a class="mdc-image-list__item-wrap" href="' . $image . '"><div class="mdc-image-list__image-aspect-container"><img class="mdc-image-list__image" alt="" src="' . $image . '" data-link="' . $image . '"/></div></a></li><li class="mdc-image-list__item"><a class="mdc-image-list__item-wrap" href="' . $image . '"><div class="mdc-image-list__image-aspect-container"><img class="mdc-image-list__image" alt="" src="' . $image . '" data-link="' . $image . '"/></div></a></li><li class="mdc-image-list__item"><a class="mdc-image-list__item-wrap" href="' . $image . '"><div class="mdc-image-list__image-aspect-container"><img class="mdc-image-list__image" alt="" src="' . $image . '" data-link="' . $image . '"/></div></a></li></ul></div>
+<div class="wp-block-material-image-list" id="block-material-image-list-1"><ul class="mdc-image-list mdc-image-list--with-text-protection"><li class="mdc-image-list__item"><a class="mdc-image-list__item-wrap" href="' . $image . '"><div class="mdc-image-list__image-aspect-container"><img class="mdc-image-list__image" alt="" src="' . $image . '" data-link="' . $image . '"/></div></a></li><li class="mdc-image-list__item"><a class="mdc-image-list__item-wrap" href="' . $image . '"><div class="mdc-image-list__image-aspect-container"><img class="mdc-image-list__image" alt="" src="' . $image . '" data-link="' . $image . '"/></div></a></li><li class="mdc-image-list__item"><a class="mdc-image-list__item-wrap" href="' . $image . '"><div class="mdc-image-list__image-aspect-container"><img class="mdc-image-list__image" alt="" src="' . $image . '" data-link="' . $image . '"/></div></a></li><li class="mdc-image-list__item"><a class="mdc-image-list__item-wrap" href="' . $image . '"><div class="mdc-image-list__image-aspect-container"><img class="mdc-image-list__image" alt="" src="' . $image . '" data-link="' . $image . '"/></div></a></li></ul></div>
 <!-- /wp:material/image-list --></div>
 <!-- /wp:column -->
 

diff --git a/plugin/php/class-plugin.php b/plugin/php/class-plugin.php
@@ -263,12 +263,21 @@ public function enqueue_front_end_assets() {
 
 		wp_localize_script( 'material-front-end-js', 'materialDesign', $wp_localized_script_data );
 
-		wp_enqueue_style(
-			'material-front-end-css',
-			$this->asset_url( 'assets/css/front-end-compiled.css' ),
-			[],
-			$this->asset_version()
-		);
+		if ( self::THEME_SLUG === get_template() ) {
+			wp_enqueue_style(
+				'material-front-end-css',
+				$this->asset_url( 'assets/css/front-end-w-theme-compiled.css' ),
+				[],
+				$this->asset_version()
+			);
+		} else {
+			wp_enqueue_style(
+				'material-front-end-css',
+				$this->asset_url( 'assets/css/front-end-compiled.css' ),
+				[],
+				$this->asset_version()
+			);
+		}
 
 		/**
 		 * Enqueue material style overrides if the theme is not material.

diff --git a/webpack.config.js b/webpack.config.js
@@ -84,6 +84,14 @@ const assets = {
 				'./plugin/assets/css/src/front-end.css',
 			],
 		},
+		{
+			name: 'Front End with material theme ', // Remove duplicate css from theme when theme is active.
+			chunk: 'front-end-w-theme',
+			entry: [
+				'./plugin/assets/src/front-end/index.js',
+				'./plugin/assets/css/src/front-end-with-active-theme.css',
+			],
+		},
 		{
 			name: 'Admin',
 			chunk: 'admin',