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

Commit

Permalink
Add global style for product categories list block #4965
Browse files Browse the repository at this point in the history
Add global style for product categories list block
  • Loading branch information
gigitux committed Nov 16, 2021
1 parent b5c2342 commit 02dd6e6
Show file tree
Hide file tree
Showing 5 changed files with 330 additions and 8 deletions.
10 changes: 7 additions & 3 deletions assets/js/blocks/product-categories/block.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { InspectorControls } from '@wordpress/block-editor';
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import ServerSideRender from '@wordpress/server-side-render';
import PropTypes from 'prop-types';
import {
Expand Down Expand Up @@ -183,8 +183,12 @@ const ProductCategoriesBlock = ( { attributes, setAttributes, name } ) => {
);
};

const blockProps = useBlockProps( {
className: 'wc-block-product-categories',
} );

return (
<>
<div { ...blockProps }>
{ getInspectorControls() }
<Disabled>
<ServerSideRender
Expand All @@ -193,7 +197,7 @@ const ProductCategoriesBlock = ( { attributes, setAttributes, name } ) => {
EmptyResponsePlaceholder={ EmptyPlaceholder }
/>
</Disabled>
</>
</div>
);
};

Expand Down
9 changes: 9 additions & 0 deletions assets/js/blocks/product-categories/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import './style.scss';
import Block from './block.js';

registerBlockType( 'woocommerce/product-categories', {
apiVersion: 2,
title: __( 'Product Categories List', 'woo-gutenberg-products-block' ),
icon: {
src: <Icon srcElement={ list } />,
Expand All @@ -27,6 +28,14 @@ registerBlockType( 'woocommerce/product-categories', {
supports: {
align: [ 'wide', 'full' ],
html: false,
color: {
background: false,
link: true,
},
typography: {
fontSize: true,
lineHeight: true,
},
},
example: {
attributes: {
Expand Down
49 changes: 44 additions & 5 deletions src/BlockTypes/ProductCategories.php
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
<?php
namespace Automattic\WooCommerce\Blocks\BlockTypes;

use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;


/**
* ProductCategories class.
*/
class ProductCategories extends AbstractDynamicBlock {


/**
* Block name.
*
Expand Down Expand Up @@ -42,6 +46,11 @@ protected function get_block_type_attributes() {
'hasEmpty' => $this->get_schema_boolean( false ),
'isDropdown' => $this->get_schema_boolean( false ),
'isHierarchical' => $this->get_schema_boolean( true ),
'textColor' => $this->get_schema_string(),
'fontSize' => $this->get_schema_string(),
'lineHeight' => $this->get_schema_string(),
'style' => array( 'type' => 'object' ),

)
);
}
Expand Down Expand Up @@ -77,9 +86,11 @@ protected function render( $attributes, $content ) {
}
}

$classes = $this->get_container_classes( $attributes );
$classes_and_styles = $this->get_container_classes( $attributes );
$classes = $classes_and_styles[0];
$styles = $classes_and_styles[1];

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

Expand All @@ -93,6 +104,7 @@ protected function render( $attributes, $content ) {
* @return string space-separated list of classes.
*/
protected function get_container_classes( $attributes = array() ) {

$classes = array( 'wc-block-product-categories' );

if ( isset( $attributes['align'] ) ) {
Expand All @@ -109,9 +121,34 @@ protected function get_container_classes( $attributes = array() ) {
$classes[] = 'is-list';
}

return implode( ' ', $classes );
$line_height_class_and_style = StyleAttributesUtils::get_line_height_class_and_style( $attributes );
$text_color_class_and_style = StyleAttributesUtils::get_text_color_class_and_style( $attributes );
$font_size_class_and_style = StyleAttributesUtils::get_font_size_class_and_style( $attributes );

$line_height_class = isset( $line_height_class_and_style['class'] ) ? $line_height_class_and_style['class'] : null;
$text_color_class = isset( $text_color_class_and_style['class'] ) ? $text_color_class_and_style['class'] : null;
$font_size_class = isset( $font_size_class_and_style['class'] ) ? $font_size_class_and_style['class'] : null;

$classes = array_filter(
[ $line_height_class, $text_color_class, $font_size_class ]
);

$line_height_style = isset( $line_height_class_and_style['style'] ) ? $line_height_class_and_style['style'] : null;
$text_color_style = isset( $text_color_class_and_style['style'] ) ? $text_color_class_and_style['style'] : null;
$font_size_style = isset( $font_size_class_and_style['style'] ) ? $font_size_class_and_style['style'] : null;

$styles = array_filter(
[ $line_height_style, $text_color_style, $font_size_style ]
);

$string_classes = implode( ' ', $classes );
$string_styles = implode( ' ', $styles );

return array( $string_classes, $string_styles );
}



/**
* Get categories (terms) from the db.
*
Expand Down Expand Up @@ -301,11 +338,13 @@ protected function renderList( $categories, $attributes, $uid, $depth = 0 ) {
protected function renderListItems( $categories, $attributes, $uid, $depth = 0 ) {
$output = '';

$link_color_class_and_style = AttributesUtils::get_link_color_class_and_style( $attributes );

foreach ( $categories as $category ) {
$output .= '
<li class="wc-block-product-categories-list-item">
<a href="' . esc_attr( get_term_link( $category->term_id, 'product_cat' ) ) . '">' . $this->get_image_html( $category, $attributes ) . esc_html( $category->name ) . '</a>
' . $this->getCount( $category, $attributes ) . '
<a href="' . esc_attr( get_term_link( $category->term_id, 'product_cat' ) ) . '">' . $this->get_image_html( $category, $attributes ) . esc_html( $category->name ) . '</a>
' . $this->getCount( $category, $attributes ) . '
' . ( ! empty( $category->children ) ? $this->renderList( $category->children, $attributes, $uid, $depth + 1 ) : '' ) . '
</li>
';
Expand Down
145 changes: 145 additions & 0 deletions src/Utils/AttributesUtils.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
<?php
namespace Automattic\WooCommerce\Blocks\Utils;

/**
* AttributesUtils class used for getting class and style from attributes.
*/
class AttributesUtils {


/**
* Get class and style for font-size from attributes.
*
* @param array $attributes Block attributes.
*
* @return string
*/
public static function get_font_size_class_and_style( $attributes ) {

$font_size = $attributes['fontSize'];
$custom_font_size = $attributes['style']['typography']['fontSize'];

if ( ! isset( $font_size ) && ! isset( $custom_font_size ) ) {
return null;
};

$has_named_font_size = ! empty( $font_size );
$has_custom_font_size = isset( $custom_font_size );

if ( $has_named_font_size ) {
return array(
'class' => sprintf( 'has-font-size has-%s-font-size', $font_size ),
'style' => null,
);
} elseif ( $has_custom_font_size ) {
return array(
'class' => null,
'style' => sprintf( 'font-size: %s;', $custom_font_size ),
);
}

return array(
'class' => null,
'style' => null,
);
}

/**
* Get class and style for text-color from attributes.
*
* @param array $attributes Block attributes.
*
* @return (array | null)
*/
public static function get_text_color_class_and_style( $attributes ) {

$text_color = $attributes['textColor'];
$custom_text_color = $attributes['style']['color']['text'];

if ( ! isset( $text_color ) && ! isset( $custom_text_color ) ) {
return null;
};

$text_color_class = sprintf( 'has-text-color' );
$text_color_style = sprintf( 'color: %s;', ( ! empty( $text_color ) ? $text_color : $custom_text_color ) );

return array(
'class' => $text_color_class,
'style' => $text_color_style,
);
}

/**
* Get class and style for link-color from attributes.
*
* @param array $attributes Block attributes.
*
* @return (array | null)
*/
public static function get_link_color_class_and_style( $attributes ) {

$link_color = $attributes['style']['elements']['link']['color']['text'];

if ( ! isset( $link_color ) ) {

return null;
};

$link_color_class = sprintf( 'has-link-color', $link_color );
$link_color_style = sprintf( 'color: %s;', $link_color );

return array(
'class' => $link_color_class,
'style' => $link_color_style,
);
}

/**
* Get class and style for line height from attributes.
*
* @param array $attributes Block attributes.
*
* @return (array | null)
*/
public static function get_line_height_class_and_style( $attributes ) {

$line_height = $attributes['style']['typography']['lineHeight'];

if ( ! isset( $line_height ) ) {
return null;
};

$line_height_style = 'line-height: ' . $line_height . ';';

return array(
'class' => null,
'style' => $line_height_style,
);
}

/**
* Get classes and styles from attributes.
*
* @param array $attributes Block attributes.
*
* @return array
*/
public static function get_classes_and_styles_by_attributes( $attributes ) {
$classes_and_styles = array(
line_height => self::get_line_height_class_and_style( $attributes ),
text_color => self::get_text_color_class_and_style( $attributes ),
font_size => self::get_font_size_class_and_style( $attributes ),
link_color => self::get_link_color_class_and_style( $attributes ),
);

return array_filter(
$classes_and_styles,
function ( $var ) {
return ! is_null( $var );
}
);

}


}
Loading

0 comments on commit 02dd6e6

Please sign in to comment.