Merge 7a713f7 into 5c1d589

plugin/assets/css/src/customize-controls.css

@@ -50,7 +50,7 @@
 		content: "\f460" !important;
 	}
 
-	& .customize-section-description-container {
+	& .customize-section-description-container .customize-section-title {
 		display: none;
 	}
 }

plugin/assets/src/block-editor/blocks/card/index.js

@@ -27,7 +27,8 @@ import edit from './edit';
 import save from './save';
 import metadata from './block.json';
 import { example } from './example';
-
+import { isDefaultCardStyleOutlined } from '../../utils';
+metadata.attributes.outlined.default = isDefaultCardStyleOutlined();
 const { name } = metadata;
 
 export { metadata, name };

plugin/assets/src/block-editor/blocks/cards-collection/index.js

@@ -27,9 +27,11 @@ import edit from './edit';
 import save from './save';
 import { example } from './example';
 import metadata from './block.json';
+import { isDefaultCardStyleOutlined } from '../../utils';
 
 const { name } = metadata;
 
+metadata.attributes.outlined.default = isDefaultCardStyleOutlined();
 export { metadata, name };
 
 /**

plugin/assets/src/block-editor/blocks/contact-form/index.js

@@ -25,6 +25,9 @@ import { __ } from '@wordpress/i18n';
 import edit from './edit';
 import save from './save';
 import metadata from './block.json';
+import { isDefaultTextFieldStyleOutlined } from '../../utils';
+
+metadata.attributes.outlined.default = isDefaultTextFieldStyleOutlined();
 
 const { name } = metadata;
 

plugin/assets/src/block-editor/blocks/hand-picked-posts/index.js

@@ -27,6 +27,8 @@ import metadata from './block.json';
 
 const { name } = metadata;
 
+import { isDefaultCardStyleOutlined } from '../../utils';
+metadata.attributes.outlined.default = isDefaultCardStyleOutlined();
 export { metadata, name };
 
 /**

plugin/assets/src/block-editor/blocks/recent-posts/index.js

@@ -25,9 +25,10 @@ import { __ } from '@wordpress/i18n';
 import edit from './edit';
 import metadata from './block.json';
 import { example } from './example';
+import { isDefaultCardStyleOutlined } from '../../utils';
 
 const { name } = metadata;
-
+metadata.attributes.outlined.default = isDefaultCardStyleOutlined();
 export { metadata, name };
 
 /**

plugin/assets/src/block-editor/utils/index.js

@@ -17,3 +17,5 @@
 export { default as findIcon } from './find-icon';
 export { default as getConfig } from './get-config';
 export { default as getIconName } from './get-icon-name';
+export { default as isDefaultCardStyleOutlined } from './is-default-card-style-outlined';
+export { default as isDefaultTextFieldStyleOutlined } from './is-default-text-field-outlined';

plugin/assets/src/block-editor/utils/is-default-card-style-outlined.js

@@ -0,0 +1,26 @@
+/**
+ * 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.
+ */
+
+import { getConfig } from './index';
+
+/**
+ * Whether global card style outlined.
+ *
+ * @return {boolean} Is outlined.
+ */
+export default () =>
+	// eslint-disable-next-line camelcase
+	getConfig( 'defaults' )?.globalStyle?.card_style === 'outlined';

plugin/assets/src/block-editor/utils/is-default-text-field-outlined.js

@@ -0,0 +1,26 @@
+/**
+ * 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.
+ */
+
+import { getConfig } from './index';
+
+/**
+ * Whether global text input style outlined.
+ *
+ * @return {boolean} Is outlined.
+ */
+export default () =>
+	// eslint-disable-next-line camelcase
+	getConfig( 'defaults' )?.globalStyle?.text_field_style === 'outlined';

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-block-types.php

@@ -86,19 +86,27 @@ public function register_blocks() {
 
 		$blocks_dir    = $this->plugin->dir_path . '/assets/js/blocks/';
 		$block_folders = [
-			'button',
-			'card',
-			'cards-collection',
-			'contact-form',
-			'data-table',
-			'hand-picked-posts',
-			'image-list',
-			'list',
-			'recent-posts',
-			'tab-bar',
+			'button'            => [],
+			'card'              => [
+				'outlined' => [ $this, 'is_default_card_style_outlined' ],
+			],
+			'cards-collection'  => [
+				'outlined' => [ $this, 'is_default_card_style_outlined' ],
+			],
+			'contact-form'      => [
+				'outlined' => [ $this, 'is_default_text_field_style_outlined' ],
+			],
+			'data-table'        => [],
+			'hand-picked-posts' => [],
+			'image-list'        => [],
+			'list'              => [],
+			'recent-posts'      => [
+				'outlined' => [ $this, 'is_default_card_style_outlined' ],
+			],
+			'tab-bar'           => [],
 		];
 
-		foreach ( $block_folders as $block_name ) {
+		foreach ( $block_folders as $block_name => $override_attributes ) {
 			$block_json_file = $blocks_dir . $block_name . '/block.json';
 			if ( ! file_exists( $block_json_file ) ) {
 				continue;
@@ -109,6 +117,10 @@ public function register_blocks() {
 				continue;
 			}
 
+			foreach ( $override_attributes as $attr_key => $attr ) {
+				$metadata['attributes'][ $attr_key ]['default'] = call_user_func( $attr );
+			}
+
 			$metadata['editor_script'] = 'material-block-editor-js';
 			$metadata['editor_style']  = 'material-block-editor-css';
 
@@ -213,8 +225,9 @@ public function enqueue_block_editor_assets() {
 			'tab_bar_preview'          => $this->plugin->asset_url( 'assets/images/preview/tab-bar.jpg' ),
 			'contact_form_preview'     => $this->plugin->asset_url( 'assets/images/preview/contact-form.jpg' ),
 			'defaults'                 => [
-				'blocks' => $this->get_block_defaults(),
-				'colors' => $this->get_color_defaults(),
+				'blocks'      => $this->get_block_defaults(),
+				'colors'      => $this->get_color_defaults(),
+				'globalStyle' => $this->get_global_styles(),
 			],
 			'customizerUrls'           => [
 				'colors' => add_query_arg( 'autofocus[section]', $slug . '_colors', $customizer_url ),
@@ -308,6 +321,51 @@ public function get_color_defaults() {
 		return $defaults;
 	}
 
+	/**
+	 * Get global style configs.
+	 *
+	 * @param string $key get single value.
+	 *
+	 * @return array|string
+	 */
+	public function get_global_styles( $key = null ) {
+		$defaults = [];
+		$controls = $this->plugin->customizer_controls;
+
+		foreach ( $controls->get_global_style_controls() as $control ) {
+			$value = $controls->get_option( $control['id'] );
+			if ( ! empty( $value ) ) {
+				$defaults[ $control['id'] ] = $value;
+			}
+		}
+
+		return ( $key ? ( isset( $defaults[ $key ] ) ? $defaults[ $key ] : '' ) : $defaults );
+	}
+
+	/**
+	 * Whether default card style is outlined.
+	 *
+	 * @return bool
+	 */
+	public function is_default_card_style_outlined() {
+		$style = $this->get_global_styles();
+		$style = isset( $style['card_style'] ) ? $style['card_style'] : '';
+
+		return 'outlined' === $style;
+	}
+
+	/**
+	 * Whether default text field style is outlined.
+	 *
+	 * @return bool
+	 */
+	public function is_default_text_field_style_outlined() {
+		$style = $this->get_global_styles();
+		$style = isset( $style['text_field_style'] ) ? $style['text_field_style'] : '';
+
+		return 'outlined' === $style;
+	}
+
 	/**
 	 * Gets the REST API controller for a post type.
 	 *

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(