diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-categories/index.js b/plugins/woocommerce-blocks/assets/js/blocks/product-categories/index.js index 2ad395c17cc..865a3658c76 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-categories/index.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-categories/index.js @@ -35,6 +35,13 @@ registerBlockType( 'woocommerce/product-categories', { }, }, attributes: { + /** + * Alignment of the block. + */ + align: { + type: 'string', + }, + /** * Whether to show the product count in each category. */ diff --git a/plugins/woocommerce-blocks/src/BlockTypes/ProductCategories.php b/plugins/woocommerce-blocks/src/BlockTypes/ProductCategories.php index 3d593e777f3..cc77dfdace1 100644 --- a/plugins/woocommerce-blocks/src/BlockTypes/ProductCategories.php +++ b/plugins/woocommerce-blocks/src/BlockTypes/ProductCategories.php @@ -43,6 +43,7 @@ class ProductCategories extends AbstractDynamicBlock { return array_merge( parent::get_attributes(), array( + 'align' => $this->get_schema_align(), 'className' => $this->get_schema_string(), 'hasCount' => $this->get_schema_boolean( true ), 'hasImage' => $this->get_schema_boolean( false ), @@ -84,13 +85,41 @@ class ProductCategories extends AbstractDynamicBlock { } } - $output = '
'; + $classes = $this->get_container_classes( $attributes ); + + $output = '
'; $output .= ! empty( $attributes['isDropdown'] ) ? $this->renderDropdown( $categories, $attributes, $uid ) : $this->renderList( $categories, $attributes, $uid ); $output .= '
'; return $output; } + /** + * Get the list of classes to apply to this block. + * + * @param array $attributes Block attributes. Default empty array. + * @return string space-separated list of classes. + */ + protected function get_container_classes( $attributes = array() ) { + $classes = array( 'wc-block-product-categories' ); + + if ( isset( $attributes['align'] ) ) { + $classes[] = "align{$attributes['align']}"; + } + + if ( ! empty( $attributes['className'] ) ) { + $classes[] = $attributes['className']; + } + + if ( $attributes['isDropdown'] ) { + $classes[] = 'is-dropdown'; + } else { + $classes[] = 'is-list'; + } + + return implode( ' ', $classes ); + } + /** * Get categories (terms) from the db. *