Skip to content
This repository was archived by the owner on Feb 23, 2024. It is now read-only.

Commit 7655afc

Browse files
gigituxgigitux
committed
Add global style for product categories list block #4965
Add global style for product categories list block
1 parent b5c2342 commit 7655afc

File tree

3 files changed

+194
-4
lines changed

3 files changed

+194
-4
lines changed

‎assets/js/blocks/product-categories/index.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import './style.scss';
1313
import Block from './block.js';
1414

1515
registerBlockType( 'woocommerce/product-categories', {
16+
apiVersion: 2,
1617
title: __( 'Product Categories List', 'woo-gutenberg-products-block' ),
1718
icon: {
1819
src: <Icon srcElement={ list } />,
@@ -27,6 +28,14 @@ registerBlockType( 'woocommerce/product-categories', {
2728
supports: {
2829
align: [ 'wide', 'full' ],
2930
html: false,
31+
color: {
32+
background: false,
33+
link: true,
34+
},
35+
typography: {
36+
fontSize: true,
37+
lineHeight: true,
38+
},
3039
},
3140
example: {
3241
attributes: {

‎src/BlockTypes/ProductCategories.php‎

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
<?php
22
namespace Automattic\WooCommerce\Blocks\BlockTypes;
33

4+
use Automattic\WooCommerce\Blocks\Utils\AttributesUtils;
5+
6+
47
/**
58
* ProductCategories class.
69
*/
710
class ProductCategories extends AbstractDynamicBlock {
811

12+
913
/**
1014
* Block name.
1115
*
@@ -42,6 +46,11 @@ protected function get_block_type_attributes() {
4246
'hasEmpty' => $this->get_schema_boolean( false ),
4347
'isDropdown' => $this->get_schema_boolean( false ),
4448
'isHierarchical' => $this->get_schema_boolean( true ),
49+
'textColor' => $this->get_schema_string(),
50+
'fontSize' => $this->get_schema_string(),
51+
'lineHeight' => $this->get_schema_string(),
52+
'style' => array( 'type' => 'object' ),
53+
4554
)
4655
);
4756
}
@@ -77,9 +86,11 @@ protected function render( $attributes, $content ) {
7786
}
7887
}
7988

80-
$classes = $this->get_container_classes( $attributes );
89+
$classes_and_styles = $this->get_container_classes( $attributes );
90+
$classes = $classes_and_styles[0];
91+
$styles = $classes_and_styles[1];
8192

82-
$output = '<div class="' . esc_attr( $classes ) . '">';
93+
$output = '<div class="' . esc_attr( $classes ) . '" style="' . $styles . '">';
8394
$output .= ! empty( $attributes['isDropdown'] ) ? $this->renderDropdown( $categories, $attributes, $uid ) : $this->renderList( $categories, $attributes, $uid );
8495
$output .= '</div>';
8596

@@ -93,6 +104,7 @@ protected function render( $attributes, $content ) {
93104
* @return string space-separated list of classes.
94105
*/
95106
protected function get_container_classes( $attributes = array() ) {
107+
96108
$classes = array( 'wc-block-product-categories' );
97109

98110
if ( isset( $attributes['align'] ) ) {
@@ -109,9 +121,31 @@ protected function get_container_classes( $attributes = array() ) {
109121
$classes[] = 'is-list';
110122
}
111123

112-
return implode( ' ', $classes );
124+
$line_height_class_and_style = AttributesUtils::get_line_height_class_and_style( $attributes );
125+
$text_color_class_and_style = AttributesUtils::get_text_color_class_and_style( $attributes );
126+
$font_size_class_and_style = AttributesUtils::get_font_size_class_and_style( $attributes );
127+
128+
$classes = array_filter(
129+
[ $line_height_class_and_style['class'], $text_color_class_and_style['class'], $font_size_class_and_style['class'] ],
130+
function ( $var ) {
131+
return ! is_null( $var );
132+
}
133+
);
134+
$styles = array_filter(
135+
[ $line_height_class_and_style['style'], $text_color_class_and_style['style'], $font_size_class_and_style['style'] ],
136+
function ( $var ) {
137+
return ! is_null( $var );
138+
}
139+
);
140+
141+
$string_classes = implode( ' ', $classes );
142+
$string_styles = implode( ' ', $styles );
143+
144+
return array( $string_classes, $string_styles );
113145
}
114146

147+
148+
115149
/**
116150
* Get categories (terms) from the db.
117151
*
@@ -301,10 +335,12 @@ protected function renderList( $categories, $attributes, $uid, $depth = 0 ) {
301335
protected function renderListItems( $categories, $attributes, $uid, $depth = 0 ) {
302336
$output = '';
303337

338+
$link_color_class_and_style = AttributesUtils::get_link_color_class_and_style( $attributes );
339+
304340
foreach ( $categories as $category ) {
305341
$output .= '
306342
<li class="wc-block-product-categories-list-item">
307-
<a href="' . esc_attr( get_term_link( $category->term_id, 'product_cat' ) ) . '">' . $this->get_image_html( $category, $attributes ) . esc_html( $category->name ) . '</a>
343+
<a style="' . $link_color_class_and_style['style'] . '" class="' . $link_color_class_and_style['class'] . '" href="' . esc_attr( get_term_link( $category->term_id, 'product_cat' ) ) . '">' . $this->get_image_html( $category, $attributes ) . esc_html( $category->name ) . '</a>
308344
' . $this->getCount( $category, $attributes ) . '
309345
' . ( ! empty( $category->children ) ? $this->renderList( $category->children, $attributes, $uid, $depth + 1 ) : '' ) . '
310346
</li>

‎src/Utils/AttributesUtils.php‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
<?php
2+
namespace Automattic\WooCommerce\Blocks\Utils;
3+
4+
/**
5+
* AttributesUtils class used for getting class and style from attributes.
6+
*/
7+
class AttributesUtils {
8+
9+
10+
/**
11+
* Get class and style for font-size from attributes.
12+
*
13+
* @param array $attributes Block attributes.
14+
*
15+
* @return string
16+
*/
17+
public static function get_font_size_class_and_style( $attributes ) {
18+
19+
$font_size = $attributes['fontSize'];
20+
$custom_font_size = $attributes['style']['typography']['fontSize'];
21+
22+
if ( ! isset( $font_size ) && ! isset( $custom_font_size ) ) {
23+
return null;
24+
};
25+
26+
$has_named_font_size = ! empty( $font_size );
27+
$has_custom_font_size = isset( $custom_font_size );
28+
29+
if ( $has_named_font_size ) {
30+
return array(
31+
'class' => sprintf( 'has-font-size has-%s-font-size', $font_size ),
32+
'style' => null,
33+
);
34+
} elseif ( $has_custom_font_size ) {
35+
return array(
36+
'class' => null,
37+
'style' => sprintf( 'font-size: %s;', $custom_font_size ),
38+
);
39+
}
40+
41+
return array(
42+
'class' => null,
43+
'style' => null,
44+
);
45+
}
46+
47+
/**
48+
* Get class and style for text-color from attributes.
49+
*
50+
* @param array $attributes Block attributes.
51+
*
52+
* @return (array | null)
53+
*/
54+
public static function get_text_color_class_and_style( $attributes ) {
55+
56+
$text_color = $attributes['textColor'];
57+
$custom_text_color = $attributes['style']['color']['text'];
58+
59+
if ( ! isset( $text_color ) && ! isset( $custom_text_color ) ) {
60+
return null;
61+
};
62+
63+
$text_color_class = sprintf( 'has-text-color' );
64+
$text_color_style = sprintf( 'color: %s;', ( ! empty( $text_color ) ? $text_color : $custom_text_color ) );
65+
66+
return array(
67+
'class' => $text_color_class,
68+
'style' => $text_color_style,
69+
);
70+
}
71+
72+
/**
73+
* Get class and style for link-color from attributes.
74+
*
75+
* @param array $attributes Block attributes.
76+
*
77+
* @return (array | null)
78+
*/
79+
public static function get_link_color_class_and_style( $attributes ) {
80+
81+
$link_color = $attributes['style']['elements']['link']['color']['text'];
82+
83+
if ( ! isset( $link_color ) ) {
84+
85+
return null;
86+
};
87+
88+
$link_color_class = sprintf( 'has-link-color', $link_color );
89+
$link_color_style = sprintf( 'color: %s;', $link_color );
90+
91+
return array(
92+
'class' => $link_color_class,
93+
'style' => $link_color_style,
94+
);
95+
}
96+
97+
/**
98+
* Get class and style for line height from attributes.
99+
*
100+
* @param array $attributes Block attributes.
101+
*
102+
* @return (array | null)
103+
*/
104+
public static function get_line_height_class_and_style( $attributes ) {
105+
106+
$line_height = $attributes['style']['typography']['lineHeight'];
107+
108+
if ( ! isset( $line_height ) ) {
109+
return null;
110+
};
111+
112+
$line_height_style = 'line-height: ' . $line_height . ';';
113+
114+
return array(
115+
'class' => null,
116+
'style' => $line_height_style,
117+
);
118+
}
119+
120+
/**
121+
* Get classes and styles from attributes.
122+
*
123+
* @param array $attributes Block attributes.
124+
*
125+
* @return array
126+
*/
127+
public static function get_classes_and_styles_by_attributes( $attributes ) {
128+
$classes_and_styles = array(
129+
line_height => self::get_line_height_class_and_style( $attributes ),
130+
text_color => self::get_text_color_class_and_style( $attributes ),
131+
font_size => self::get_font_size_class_and_style( $attributes ),
132+
link_color => self::get_link_color_class_and_style( $attributes ),
133+
);
134+
135+
return array_filter(
136+
$classes_and_styles,
137+
function ( $var ) {
138+
return ! is_null( $var );
139+
}
140+
);
141+
142+
}
143+
144+
145+
}

0 commit comments

Comments
 (0)