Skip to content

Commit 2c78aae

Browse files
PatelUtkarshPatelUtkarsh
committed
Refactor global style in plugin
1 parent 2c20b78 commit 2c78aae

File tree

14 files changed

+157
-34
lines changed

14 files changed

+157
-34
lines changed

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,11 @@ import edit from './edit';
2727
import save from './save';
2828
import { example } from './example';
2929
import metadata from './block.json';
30-
import { getConfig } from '../../utils';
30+
import { isDefaultCardStyleOutlined } from '../../utils';
3131

3232
const { name } = metadata;
3333

34-
metadata.attributes.outlined.default =
35-
getConfig( 'defaults' )?.globalStyle?.card === 'outlined';
34+
metadata.attributes.outlined.default = isDefaultCardStyleOutlined();
3635
export { metadata, name };
3736

3837
/**

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,6 @@ import { getConfig } from './index';
2121
*
2222
* @return {boolean} Is outlined.
2323
*/
24-
export default () => getConfig( 'defaults' )?.globalStyle?.card === 'outlined';
24+
export default () =>
25+
// eslint-disable-next-line camelcase
26+
getConfig( 'defaults' )?.globalStyle?.card_style === 'outlined';

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,5 @@ import { getConfig } from './index';
2222
* @return {boolean} Is outlined.
2323
*/
2424
export default () =>
25-
getConfig( 'defaults' )?.globalStyle?.textField === 'outlined';
25+
// eslint-disable-next-line camelcase
26+
getConfig( 'defaults' )?.globalStyle?.text_field_style === 'outlined';

‎plugin/php/class-block-types.php‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -323,15 +323,23 @@ public function get_color_defaults() {
323323

324324
/**
325325
* Get global style configs.
326+
*
327+
* @param string $key get single value.
328+
*
329+
* @return array|string
326330
*/
327-
public function get_global_styles() {
328-
$text_field_style = get_theme_mod( 'text_style' );
329-
$card_style = get_theme_mod( 'card_style' );
331+
public function get_global_styles( $key = null ) {
332+
$defaults = [];
333+
$controls = $this->plugin->customizer_controls;
330334

331-
return [
332-
'card' => ! empty( $card_style ) ? $card_style : 'elevated',
333-
'textField' => ! empty( $text_field_style ) ? $text_field_style : 'elevated',
334-
];
335+
foreach ( $controls->get_global_style_controls() as $control ) {
336+
$value = $controls->get_option( $control['id'] );
337+
if ( ! empty( $value ) ) {
338+
$defaults[ $control['id'] ] = $value;
339+
}
340+
}
341+
342+
return ( $key ? ( isset( $defaults[ $key ] ) ? $defaults[ $key ] : '' ) : $defaults );
335343
}
336344

337345
/**
@@ -341,8 +349,9 @@ public function get_global_styles() {
341349
*/
342350
public function is_default_card_style_outlined() {
343351
$style = $this->get_global_styles();
352+
$style = isset( $style['card_style'] ) ? $style['card_style'] : '';
344353

345-
return 'outlined' === $style['card'];
354+
return 'outlined' === $style;
346355
}
347356

348357
/**
@@ -352,8 +361,9 @@ public function is_default_card_style_outlined() {
352361
*/
353362
public function is_default_text_field_style_outlined() {
354363
$style = $this->get_global_styles();
364+
$style = isset( $style['text_field_style'] ) ? $style['text_field_style'] : '';
355365

356-
return 'outlined' === $style['textField'];
366+
return 'outlined' === $style;
357367
}
358368

359369
/**

‎plugin/php/customizer/class-controls.php‎

Lines changed: 102 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,9 @@ public function register( $wp_customize ) {
9999

100100
// Add all controls in the "Icon Styles" section.
101101
$this->add_icon_collection_controls();
102+
103+
// Add global style control.
104+
$this->add_global_style_control();
102105
}
103106

104107
/**
@@ -128,31 +131,38 @@ public function add_panel() {
128131
*/
129132
public function add_sections() {
130133
$sections = [
131-
'style' => __( 'Starter Styles', 'material-design' ),
132-
'colors' => __( 'Color Palette ', 'material-design' ),
133-
'typography' => __( 'Typography (Font Styles)', 'material-design' ),
134-
'corner_styles' => __( 'Shape Size', 'material-design' ),
135-
'icons' => __( 'Icon Styles', 'material-design' ),
134+
'style' => __( 'Starter Styles', 'material-design' ),
135+
'colors' => __( 'Color Palette ', 'material-design' ),
136+
'typography' => __( 'Typography (Font Styles)', 'material-design' ),
137+
'corner_styles' => __( 'Shape Size', 'material-design' ),
138+
'icons' => __( 'Icon Styles', 'material-design' ),
139+
'global-setting' => [
140+
'label' => __( 'Global Styles', 'material-design' ),
141+
'priority' => 300,
142+
'description' => esc_html__( 'Global style change will affect all the blocks used in your pages. This may override styles applied to blocks locally.', 'material-design' ),
143+
],
136144
];
137145

138-
foreach ( $sections as $id => $label ) {
146+
foreach ( $sections as $id => $maybe_label ) {
139147
$id = $this->prepend_slug( $id );
140148

141-
$args = [
149+
$label = is_array( $maybe_label ) ? $maybe_label['label'] : $maybe_label;
150+
$args = [
142151
'priority' => 10,
143152
'capability' => 'edit_theme_options',
144153
'title' => esc_html( $label ),
145154
'panel' => $this->slug,
146155
'type' => 'collapse',
147156
];
157+
$args = is_array( $maybe_label ) ? array_merge( $args, $maybe_label ) : $args;
148158

149159
/**
150160
* Filters the customizer section args.
151161
*
152162
* This allows other plugins/themes to change the customizer section args.
153163
*
154-
* @param array $args Array of section args.
155-
* @param string $id ID of the section.
164+
* @param array $args Array of section args.
165+
* @param string $id ID of the section.
156166
*/
157167
$section = apply_filters( $this->slug . '_customizer_section_args', $args, $id );
158168

@@ -504,6 +514,89 @@ function ( $child ) {
504514
}
505515
}
506516

517+
/**
518+
* Select sanitization callback.
519+
*
520+
* - Sanitization: select
521+
* - Control: select, radio
522+
*
523+
* Sanitization callback for 'select' and 'radio' type controls. This callback sanitizes `$input`
524+
* as a slug, and then validates `$input` against the choices defined for the control.
525+
*
526+
* @see sanitize_key() https://developer.wordpress.org/reference/functions/sanitize_key/
527+
* @see $wp_customize->get_control() https://developer.wordpress.org/reference/classes/wp_customize_manager/get_control/
528+
*
529+
* @param string $input Slug to sanitize.
530+
* @param WP_Customize_Setting $setting Setting instance.
531+
* @return string Sanitized slug if it is a valid choice; otherwise, the setting default.
532+
*/
533+
public function sanitize_select( $input, $setting ) {
534+
// Ensure input is a slug.
535+
$input = sanitize_key( $input );
536+
537+
// Get list of choices from the control associated with the setting.
538+
$choices = $setting->manager->get_control( $setting->id )->choices;
539+
540+
// If the input is a valid key, return it; otherwise, return the default.
541+
return ( array_key_exists( $input, $choices ) ? $input : $setting->default );
542+
}
543+
544+
/**
545+
* Get global style controls.
546+
*
547+
* @return array[]
548+
*/
549+
public function get_global_style_controls() {
550+
return [
551+
[
552+
'id' => 'card_style',
553+
'label' => esc_html__( 'Cards', 'material-design' ),
554+
'type' => 'radio',
555+
'default' => 'elevated',
556+
'choices' => [
557+
'elevated' => esc_html__( 'Elevated', 'material-design' ),
558+
'outlined' => esc_html__( 'Outlined', 'material-design' ),
559+
],
560+
],
561+
[
562+
'id' => 'text_field_style',
563+
'label' => esc_html__( 'Text field', 'material-design' ),
564+
'type' => 'radio',
565+
'default' => 'elevated',
566+
'choices' => [
567+
'elevated' => esc_html__( 'Elevated', 'material-design' ),
568+
'outlined' => esc_html__( 'Outlined', 'material-design' ),
569+
],
570+
],
571+
];
572+
}
573+
574+
/**
575+
* Add global style control.
576+
*/
577+
public function add_global_style_control() {
578+
$settings = [];
579+
$controls = [];
580+
581+
foreach ( $this->get_global_style_controls() as $control ) {
582+
$settings[ $control['id'] ] = [
583+
'transport' => 'refresh',
584+
'sanitize_callback' => [ $this, 'sanitize_select' ],
585+
'default' => $control['default'],
586+
];
587+
588+
$controls[ $control['id'] ] = array_merge(
589+
[
590+
'section' => 'global-setting',
591+
],
592+
$control
593+
);
594+
}
595+
596+
$this->add_settings( $settings );
597+
$this->add_controls( $controls );
598+
}
599+
507600
/**
508601
* Enqueue Customizer scripts.
509602
*/

‎plugin/php/templates/partials/single-post.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
$attributes = isset( $attributes ) ? $attributes : [];
3131
$style = isset( $attributes['style'] ) ? $attributes['style'] : 'masonry';
3232
$columns = absint( isset( $attributes['columns'] ) ? $attributes['columns'] : 3 );
33-
$outlined = ! empty( $attributes['outlined'] ) ? $attributes['outlined'] : get_theme_mod( 'card_style' ) === 'outlined';
33+
$outlined = ! empty( $attributes['outlined'] ) ? $attributes['outlined'] : \MaterialDesign\Plugin\get_plugin_instance()->block_types->get_global_styles( 'card_style' );
3434
$layout = isset( $attributes['contentLayout'] ) ? $attributes['contentLayout'] : 'text-above-media';
3535
$featured_image = isset( $attributes['displayFeaturedImage'] ) ? $attributes['displayFeaturedImage'] : true;
3636

‎plugin/tests/phpunit/php/class-test-block-types.php‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,8 +84,13 @@ function( $block ) {
8484
}
8585
);
8686

87-
set_theme_mod( 'text_style', 'elevated' );
88-
set_theme_mod( 'card_style', 'outlined' );
87+
update_option(
88+
'material_design',
89+
[
90+
'text_field_style' => 'elevated',
91+
'card_style' => 'outlined',
92+
]
93+
);
8994

9095
$block_types->register_blocks();
9196

‎plugin/tests/phpunit/php/customizer/class-test-controls.php‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -209,14 +209,15 @@ function ( $args, $id ) use ( $controls, $icons_section ) {
209209

210210
// Set up the expectation for the add_section() method
211211
// to be called 5 times, once for each section.
212-
$this->wp_customize->expects( $this->exactly( 5 ) )
212+
$this->wp_customize->expects( $this->exactly( 6 ) )
213213
->method( 'add_section' )
214214
->withConsecutive(
215215
[ $this->equalTo( "{$controls->slug}_style" ) ],
216216
[ $this->equalTo( "{$controls->slug}_colors" ) ],
217217
[ $this->equalTo( "{$controls->slug}_typography" ) ],
218218
[ $this->equalTo( "{$controls->slug}_corner_styles" ) ],
219-
[ $this->equalTo( $icons_section ) ]
219+
[ $this->equalTo( $icons_section ) ],
220+
[ $this->equalTo( "{$controls->slug}_global-setting" ) ]
220221
);
221222

222223
$controls->add_sections();

‎theme/comments.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939

4040
$commenter = wp_get_current_commenter();
4141
$style = get_theme_mod( 'comment_fields_style', 'outlined' );
42-
$global_style = get_theme_mod( 'text_style' );
42+
$global_style = get_material_global_style( 'text_field_style' );
4343

4444
$classes = in_array( 'outlined', [ $style, $global_style ], true ) ? 'mdc-text-field--outlined mdc-text-field--no-label' : 'mdc-text-field--filled';
4545

‎theme/functions.php‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -196,6 +196,18 @@ function material_is_plugin_active() {
196196
return class_exists( '\MaterialDesign\Plugin\Plugin' );
197197
}
198198

199+
/**
200+
* Get material global style.
201+
*
202+
* @param string $key setting to get.
203+
*/
204+
function get_material_global_style( $key ) {
205+
if ( material_is_plugin_active() ) {
206+
return \MaterialDesign\Plugin\get_plugin_instance()->block_types->get_global_styles( $key );
207+
}
208+
return '';
209+
}
210+
199211
/**
200212
* Custom template tags for this theme.
201213
*/

0 commit comments

Comments
 (0)