From e75a9318636624131f9b6e1f574ee7fbf5fbc74c Mon Sep 17 00:00:00 2001 From: Utkarsh Patel Date: Wed, 2 Jun 2021 16:33:57 +0530 Subject: [PATCH 001/247] Revert "Revert "Add global settings for card and text field"" This reverts commit b6fd15f9c07105cc785d03141cb60c3500049351. --- plugin/assets/css/src/customize-controls.css | 2 +- .../src/block-editor/blocks/card/index.js | 3 +- .../blocks/cards-collection/index.js | 2 + .../block-editor/blocks/contact-form/index.js | 3 + .../blocks/hand-picked-posts/index.js | 2 + .../block-editor/blocks/recent-posts/index.js | 3 +- plugin/assets/src/block-editor/utils/index.js | 2 + .../utils/is-default-card-style-outlined.js | 26 ++++ .../utils/is-default-text-field-outlined.js | 26 ++++ plugin/php/class-block-types.php | 84 +++++++++++-- plugin/php/customizer/class-controls.php | 111 ++++++++++++++++-- plugin/php/templates/partials/single-post.php | 2 +- .../phpunit/php/class-test-block-types.php | 21 +++- .../php/customizer/class-test-controls.php | 5 +- theme/comments.php | 8 +- theme/functions.php | 15 +++ theme/searchform.php | 4 +- theme/template-parts/content.php | 2 +- theme/template-parts/search-archive.php | 7 +- 19 files changed, 290 insertions(+), 38 deletions(-) create mode 100644 plugin/assets/src/block-editor/utils/is-default-card-style-outlined.js create mode 100644 plugin/assets/src/block-editor/utils/is-default-text-field-outlined.js diff --git a/plugin/assets/css/src/customize-controls.css b/plugin/assets/css/src/customize-controls.css index aba8e6b16..b6bc50daf 100644 --- a/plugin/assets/css/src/customize-controls.css +++ b/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; } } diff --git a/plugin/assets/src/block-editor/blocks/card/index.js b/plugin/assets/src/block-editor/blocks/card/index.js index 4af7f2985..2ef01bcec 100644 --- a/plugin/assets/src/block-editor/blocks/card/index.js +++ b/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 }; diff --git a/plugin/assets/src/block-editor/blocks/cards-collection/index.js b/plugin/assets/src/block-editor/blocks/cards-collection/index.js index 42b269de2..07b026553 100644 --- a/plugin/assets/src/block-editor/blocks/cards-collection/index.js +++ b/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 }; /** diff --git a/plugin/assets/src/block-editor/blocks/contact-form/index.js b/plugin/assets/src/block-editor/blocks/contact-form/index.js index b7cb27d89..592791de2 100644 --- a/plugin/assets/src/block-editor/blocks/contact-form/index.js +++ b/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; diff --git a/plugin/assets/src/block-editor/blocks/hand-picked-posts/index.js b/plugin/assets/src/block-editor/blocks/hand-picked-posts/index.js index e00dfa261..087e08976 100644 --- a/plugin/assets/src/block-editor/blocks/hand-picked-posts/index.js +++ b/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 }; /** diff --git a/plugin/assets/src/block-editor/blocks/recent-posts/index.js b/plugin/assets/src/block-editor/blocks/recent-posts/index.js index 6eafbc290..d6ad1acc1 100644 --- a/plugin/assets/src/block-editor/blocks/recent-posts/index.js +++ b/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 }; /** diff --git a/plugin/assets/src/block-editor/utils/index.js b/plugin/assets/src/block-editor/utils/index.js index 83acdd361..7f70e3fd7 100644 --- a/plugin/assets/src/block-editor/utils/index.js +++ b/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'; diff --git a/plugin/assets/src/block-editor/utils/is-default-card-style-outlined.js b/plugin/assets/src/block-editor/utils/is-default-card-style-outlined.js new file mode 100644 index 000000000..1af47d9e0 --- /dev/null +++ b/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'; diff --git a/plugin/assets/src/block-editor/utils/is-default-text-field-outlined.js b/plugin/assets/src/block-editor/utils/is-default-text-field-outlined.js new file mode 100644 index 000000000..30da18685 --- /dev/null +++ b/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'; diff --git a/plugin/php/class-block-types.php b/plugin/php/class-block-types.php index 654177512..b4fe62cef 100644 --- a/plugin/php/class-block-types.php +++ b/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. * diff --git a/plugin/php/customizer/class-controls.php b/plugin/php/customizer/class-controls.php index abbb402df..5db22bd82 100644 --- a/plugin/php/customizer/class-controls.php +++ b/plugin/php/customizer/class-controls.php @@ -99,6 +99,9 @@ public function register( $wp_customize ) { // Add all controls in the "Icon Styles" section. $this->add_icon_collection_controls(); + + // Add global style control. + $this->add_global_style_control(); } /** @@ -128,31 +131,38 @@ public function add_panel() { */ public function add_sections() { $sections = [ - 'style' => __( 'Starter Styles', 'material-design' ), - 'colors' => __( 'Color Palette ', 'material-design' ), - 'typography' => __( 'Typography (Font Styles)', 'material-design' ), - 'corner_styles' => __( 'Shape Size', 'material-design' ), - 'icons' => __( 'Icon Styles', 'material-design' ), + 'style' => __( 'Starter Styles', 'material-design' ), + 'colors' => __( 'Color Palette ', 'material-design' ), + 'typography' => __( 'Typography (Font Styles)', 'material-design' ), + 'corner_styles' => __( 'Shape Size', 'material-design' ), + 'icons' => __( 'Icon Styles', 'material-design' ), + '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' ), + ], ]; - foreach ( $sections as $id => $label ) { + foreach ( $sections as $id => $maybe_label ) { $id = $this->prepend_slug( $id ); - $args = [ + $label = is_array( $maybe_label ) ? $maybe_label['label'] : $maybe_label; + $args = [ 'priority' => 10, 'capability' => 'edit_theme_options', 'title' => esc_html( $label ), 'panel' => $this->slug, 'type' => 'collapse', ]; + $args = is_array( $maybe_label ) ? array_merge( $args, $maybe_label ) : $args; /** * Filters the customizer section args. * * This allows other plugins/themes to change the customizer section args. * - * @param array $args Array of section args. - * @param string $id ID of the section. + * @param array $args Array of section args. + * @param string $id ID of the section. */ $section = apply_filters( $this->slug . '_customizer_section_args', $args, $id ); @@ -504,6 +514,89 @@ function ( $child ) { } } + /** + * Select sanitization callback. + * + * - Sanitization: select + * - Control: select, radio + * + * Sanitization callback for 'select' and 'radio' type controls. This callback sanitizes `$input` + * as a slug, and then validates `$input` against the choices defined for the control. + * + * @see sanitize_key() https://developer.wordpress.org/reference/functions/sanitize_key/ + * @see $wp_customize->get_control() https://developer.wordpress.org/reference/classes/wp_customize_manager/get_control/ + * + * @param string $input Slug to sanitize. + * @param WP_Customize_Setting $setting Setting instance. + * @return string Sanitized slug if it is a valid choice; otherwise, the setting default. + */ + public function sanitize_select( $input, $setting ) { + // Ensure input is a slug. + $input = sanitize_key( $input ); + + // Get list of choices from the control associated with the setting. + $choices = $setting->manager->get_control( $setting->id )->choices; + + // If the input is a valid key, return it; otherwise, return the default. + return ( array_key_exists( $input, $choices ) ? $input : $setting->default ); + } + + /** + * Get global style controls. + * + * @return array[] + */ + public function get_global_style_controls() { + return [ + [ + 'id' => 'card_style', + 'label' => esc_html__( 'Cards', 'material-design' ), + 'type' => 'radio', + 'default' => 'elevated', + 'choices' => [ + 'elevated' => esc_html__( 'Elevated', 'material-design' ), + 'outlined' => esc_html__( 'Outlined', 'material-design' ), + ], + ], + [ + 'id' => 'text_field_style', + 'label' => esc_html__( 'Text field', 'material-design' ), + 'type' => 'radio', + 'default' => 'elevated', + 'choices' => [ + 'elevated' => esc_html__( 'Elevated', 'material-design' ), + 'outlined' => esc_html__( 'Outlined', 'material-design' ), + ], + ], + ]; + } + + /** + * Add global style control. + */ + public function add_global_style_control() { + $settings = []; + $controls = []; + + foreach ( $this->get_global_style_controls() as $control ) { + $settings[ $control['id'] ] = [ + 'transport' => 'refresh', + 'sanitize_callback' => [ $this, 'sanitize_select' ], + 'default' => $control['default'], + ]; + + $controls[ $control['id'] ] = array_merge( + [ + 'section' => 'global-setting', + ], + $control + ); + } + + $this->add_settings( $settings ); + $this->add_controls( $controls ); + } + /** * Enqueue Customizer scripts. */ diff --git a/plugin/php/templates/partials/single-post.php b/plugin/php/templates/partials/single-post.php index 24b7b8f2e..11484cb58 100644 --- a/plugin/php/templates/partials/single-post.php +++ b/plugin/php/templates/partials/single-post.php @@ -30,7 +30,7 @@ $attributes = isset( $attributes ) ? $attributes : []; $style = isset( $attributes['style'] ) ? $attributes['style'] : 'masonry'; $columns = absint( isset( $attributes['columns'] ) ? $attributes['columns'] : 3 ); -$outlined = isset( $attributes['outlined'] ) ? $attributes['outlined'] : false; +$outlined = ! empty( $attributes['outlined'] ) ? $attributes['outlined'] : \MaterialDesign\Plugin\get_plugin_instance()->block_types->get_global_styles( 'card_style' ) === 'outlined'; $layout = isset( $attributes['contentLayout'] ) ? $attributes['contentLayout'] : 'text-above-media'; $featured_image = isset( $attributes['displayFeaturedImage'] ) ? $attributes['displayFeaturedImage'] : true; diff --git a/plugin/tests/phpunit/php/class-test-block-types.php b/plugin/tests/phpunit/php/class-test-block-types.php index f9315b18f..eb90a4d7f 100644 --- a/plugin/tests/phpunit/php/class-test-block-types.php +++ b/plugin/tests/phpunit/php/class-test-block-types.php @@ -84,13 +84,27 @@ function( $block ) { } ); + update_option( + 'material_design', + [ + 'text_field_style' => 'elevated', + 'card_style' => 'outlined', + ] + ); + $block_types->register_blocks(); $blocks = \WP_Block_Type_Registry::get_instance()->get_all_registered(); + $card_blocks = [ + 'card', + 'cards-collection', + 'recent-posts', + ]; + array_walk( self::$blocks, - function( $block_name ) use ( $blocks ) { + function( $block_name ) use ( $blocks, $card_blocks ) { // Assert the block is registered. $this->assertTrue( array_key_exists( 'material/' . $block_name, $blocks ) ); @@ -103,6 +117,10 @@ function( $block_name ) use ( $blocks ) { $block_json = $block_folder . '/block.json'; $metadata = json_decode( file_get_contents( $block_json ), true ); // phpcs:ignore + // We have set outlined to true for card blocks. + if ( in_array( $block_name, $card_blocks, true ) ) { + $metadata['attributes']['outlined']['default'] = true; + } $this->assertEquals( $metadata['category'], $block->category ); $this->assertEquals( $metadata['attributes'], $block->attributes ); @@ -137,6 +155,7 @@ public function test_enqueue_block_editor_assets() { // Assert inline js vars contains ajax url data. $this->assertRegexp( '/ajax_url/', $inline_js ); + $this->assertRegexp( '/globalStyle/', $inline_js ); } /** diff --git a/plugin/tests/phpunit/php/customizer/class-test-controls.php b/plugin/tests/phpunit/php/customizer/class-test-controls.php index 9546368af..68fdcea5e 100644 --- a/plugin/tests/phpunit/php/customizer/class-test-controls.php +++ b/plugin/tests/phpunit/php/customizer/class-test-controls.php @@ -209,14 +209,15 @@ function ( $args, $id ) use ( $controls, $icons_section ) { // Set up the expectation for the add_section() method // to be called 5 times, once for each section. - $this->wp_customize->expects( $this->exactly( 5 ) ) + $this->wp_customize->expects( $this->exactly( 6 ) ) ->method( 'add_section' ) ->withConsecutive( [ $this->equalTo( "{$controls->slug}_style" ) ], [ $this->equalTo( "{$controls->slug}_colors" ) ], [ $this->equalTo( "{$controls->slug}_typography" ) ], [ $this->equalTo( "{$controls->slug}_corner_styles" ) ], - [ $this->equalTo( $icons_section ) ] + [ $this->equalTo( $icons_section ) ], + [ $this->equalTo( "{$controls->slug}_global-setting" ) ] ); $controls->add_sections(); diff --git a/theme/comments.php b/theme/comments.php index 9e2130288..1298eab1f 100644 --- a/theme/comments.php +++ b/theme/comments.php @@ -37,10 +37,12 @@ return; } -$commenter = wp_get_current_commenter(); -$style = get_theme_mod( 'comment_fields_style', 'outlined' ); +$commenter = wp_get_current_commenter(); +$style = get_theme_mod( 'comment_fields_style', 'outlined' ); +$global_style = get_material_global_style( 'text_field_style' ); + +$classes = in_array( 'outlined', [ $style, $global_style ], true ) ? 'mdc-text-field--outlined mdc-text-field--no-label' : 'mdc-text-field--filled'; -$classes = 'outlined' === $style ? 'mdc-text-field--outlined mdc-text-field--no-label' : 'mdc-text-field--filled'; $req = get_option( 'require_name_email' ); $html_req = ( $req ? " required='required'" : '' ); diff --git a/theme/functions.php b/theme/functions.php index 2139d02ea..9fe830e7c 100644 --- a/theme/functions.php +++ b/theme/functions.php @@ -196,6 +196,21 @@ function material_is_plugin_active() { return class_exists( '\MaterialDesign\Plugin\Plugin' ); } +/** + * Get material global style. + * + * @param string $key setting to get. + */ +function get_material_global_style( $key ) { + if ( material_is_plugin_active() ) { + $instance = \MaterialDesign\Plugin\get_plugin_instance(); + if ( property_exists( $instance, 'block_types' ) && method_exists( $instance->block_types, 'get_global_styles' ) ) { + return $instance->block_types->get_global_styles( $key ); + } + } + return ''; +} + /** * Custom template tags for this theme. */ diff --git a/theme/searchform.php b/theme/searchform.php index 0fd29d895..24e1023b1 100644 --- a/theme/searchform.php +++ b/theme/searchform.php @@ -25,11 +25,11 @@ $search_id = uniqid( 'search-' ); $search_label_id = uniqid( 'search-label-' ); - +$global_style = get_material_global_style( 'text_field_style' ); ?>