Use js to override global style

plugin/assets/src/front-end/global-style.js

@@ -0,0 +1,58 @@
+/**
+ * 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.
+ */
+
+/* global materialDesign */
+
+const getOutlineClassHandler = ( style, classSelector, outlinedClass ) => {
+	return () => {
+		// eslint-disable-next-line camelcase
+		if ( style === 'inherit' || ! style ) {
+			return;
+		}
+		const list = document.querySelectorAll( classSelector );
+		list.forEach( item => {
+			const hasOutlined = item.classList.contains( outlinedClass );
+			if ( style === 'outlined' && ! hasOutlined ) {
+				item.classList.add( outlinedClass );
+			} else if ( style !== 'outlined' && hasOutlined ) {
+				item.classList.remove( outlinedClass );
+			}
+		} );
+	};
+};
+
+const initCardGlobalStyle = () => {
+	getOutlineClassHandler(
+		// eslint-disable-next-line camelcase
+		materialDesign?.globalStyle?.card_style,
+		'.mdc-card',
+		'mdc-card--outlined'
+	)();
+};
+
+const initTextFieldGlobalStyle = () => {
+	getOutlineClassHandler(
+		// eslint-disable-next-line camelcase
+		materialDesign?.globalStyle?.text_field_style,
+		'.mdc-text-field',
+		'mdc-text-field--outlined'
+	)();
+};
+
+export const initGlobalStyle = () => {
+	initCardGlobalStyle();
+	initTextFieldGlobalStyle();
+};

plugin/assets/src/front-end/index.js

@@ -27,8 +27,10 @@ import {
 	initToolTips,
 } from '../common/mdc-components-init';
 import { initContactForm } from './contact-form';
+import { initGlobalStyle } from './global-style';
 
 addEventListener( 'DOMContentLoaded', () => {
+	initGlobalStyle();
 	initButtons();
 	initLists();
 	initTabBar();

plugin/php/class-plugin.php

@@ -209,7 +209,10 @@ public function enqueue_front_end_assets() {
 		);
 
 		$material_design_recaptcha_site_key = get_option( 'material_design_recaptcha_site_key', '' );
-		$wp_localized_script_data           = [ 'ajax_url' => admin_url( 'admin-ajax.php' ) ];
+		$wp_localized_script_data           = [
+			'ajax_url'    => admin_url( 'admin-ajax.php' ),
+			'globalStyle' => $this->block_types->get_global_styles(),
+		];
 
 		if ( function_exists( 'has_block' ) && has_block( 'material/contact-form' ) && ! empty( $material_design_recaptcha_site_key ) ) {
 			wp_enqueue_script(

plugin/php/customizer/class-controls.php

@@ -139,7 +139,7 @@ public function add_sections() {
 			'global-setting' => [
 				'label'       => __( 'Global Styles', 'material-design' ),
 				'priority'    => 300,
-				'description' => esc_html__( 'Global styles will be applied to any new and existing static block using the default style. This will not affect any local style overrides for supported blocks.', 'material-design' ),
+				'description' => esc_html__( 'Global styles will be applied in all pages including custom templates.', 'material-design' ),
 			],
 		];
 
@@ -552,8 +552,9 @@ public function get_global_style_controls() {
 				'id'      => 'card_style',
 				'label'   => esc_html__( 'Cards', 'material-design' ),
 				'type'    => 'radio',
-				'default' => 'elevated',
+				'default' => 'inherit',
 				'choices' => [
+					'inherit'  => esc_html__( 'Inherit', 'material-design' ),
 					'elevated' => esc_html__( 'Elevated', 'material-design' ),
 					'outlined' => esc_html__( 'Outlined', 'material-design' ),
 				],
@@ -562,8 +563,9 @@ public function get_global_style_controls() {
 				'id'      => 'text_field_style',
 				'label'   => esc_html__( 'Text field', 'material-design' ),
 				'type'    => 'radio',
-				'default' => 'elevated',
+				'default' => 'inherit',
 				'choices' => [
+					'inherit'  => esc_html__( 'Inherit', 'material-design' ),
 					'elevated' => esc_html__( 'Elevated', 'material-design' ),
 					'outlined' => esc_html__( 'Outlined', 'material-design' ),
 				],