From 02dd6e6e8fbad1a5cef7202b74028bbcc4dd53bb Mon Sep 17 00:00:00 2001 From: Luigi Date: Wed, 10 Nov 2021 18:14:07 +0100 Subject: [PATCH] Add global style for product categories list block #4965 Add global style for product categories list block --- assets/js/blocks/product-categories/block.js | 10 +- assets/js/blocks/product-categories/index.js | 9 ++ src/BlockTypes/ProductCategories.php | 49 ++++++- src/Utils/AttributesUtils.php | 145 +++++++++++++++++++ src/Utils/StyleAttributesUtils.php | 125 ++++++++++++++++ 5 files changed, 330 insertions(+), 8 deletions(-) create mode 100644 src/Utils/AttributesUtils.php create mode 100644 src/Utils/StyleAttributesUtils.php diff --git a/assets/js/blocks/product-categories/block.js b/assets/js/blocks/product-categories/block.js index 461dcd15bbd..459a4bbd1cd 100644 --- a/assets/js/blocks/product-categories/block.js +++ b/assets/js/blocks/product-categories/block.js @@ -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 { @@ -183,8 +183,12 @@ const ProductCategoriesBlock = ( { attributes, setAttributes, name } ) => { ); }; + const blockProps = useBlockProps( { + className: 'wc-block-product-categories', + } ); + return ( - <> +
{ getInspectorControls() } { EmptyResponsePlaceholder={ EmptyPlaceholder } /> - +
); }; diff --git a/assets/js/blocks/product-categories/index.js b/assets/js/blocks/product-categories/index.js index a491710666c..9953ffb8e63 100644 --- a/assets/js/blocks/product-categories/index.js +++ b/assets/js/blocks/product-categories/index.js @@ -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: , @@ -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: { diff --git a/src/BlockTypes/ProductCategories.php b/src/BlockTypes/ProductCategories.php index 9bdc8809b45..651cf04ab12 100644 --- a/src/BlockTypes/ProductCategories.php +++ b/src/BlockTypes/ProductCategories.php @@ -1,11 +1,15 @@ $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' ), + ) ); } @@ -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 = '
'; + $output = '
'; $output .= ! empty( $attributes['isDropdown'] ) ? $this->renderDropdown( $categories, $attributes, $uid ) : $this->renderList( $categories, $attributes, $uid ); $output .= '
'; @@ -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'] ) ) { @@ -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. * @@ -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 .= '
  • - ' . $this->get_image_html( $category, $attributes ) . esc_html( $category->name ) . ' - ' . $this->getCount( $category, $attributes ) . ' + ' . $this->get_image_html( $category, $attributes ) . esc_html( $category->name ) . ' + ' . $this->getCount( $category, $attributes ) . ' ' . ( ! empty( $category->children ) ? $this->renderList( $category->children, $attributes, $uid, $depth + 1 ) : '' ) . '
    • '; diff --git a/src/Utils/AttributesUtils.php b/src/Utils/AttributesUtils.php new file mode 100644 index 00000000000..8871af63f41 --- /dev/null +++ b/src/Utils/AttributesUtils.php @@ -0,0 +1,145 @@ + 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 ); + } + ); + + } + + +} diff --git a/src/Utils/StyleAttributesUtils.php b/src/Utils/StyleAttributesUtils.php new file mode 100644 index 00000000000..93ea2b78c8b --- /dev/null +++ b/src/Utils/StyleAttributesUtils.php @@ -0,0 +1,125 @@ + 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 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 = isset( $attributes['style']['color']['text'] ) ? $attributes['style']['color']['text'] : null; + + if ( ! isset( $text_color ) && ! isset( $custom_text_color ) ) { + return null; + }; + + $has_named_text_color = ! empty( $text_color ); + $has_custom_text_color = isset( $custom_text_color ); + + if ( $has_named_text_color ) { + return array( + 'class' => sprintf( 'has-text-color has-%s-color', $text_color ), + 'style' => null, + ); + } elseif ( $has_custom_text_color ) { + return array( + 'class' => null, + 'style' => sprintf( 'color: %s;', $custom_text_color ), + ); + } + return null; + + } + + + /** + * 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 = isset( $attributes['style']['color']['lineHeight'] ) ? $attributes['style']['color']['lineHeight'] : null; + + if ( ! isset( $line_height ) ) { + return null; + }; + + $line_height_style = sprintf( 'line-height: %s;', $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 + ); + + } + + +}