From 3dc70d9dd5659948631ff3a2162d28b0028785a0 Mon Sep 17 00:00:00 2001 From: Luigi Date: Mon, 10 Jan 2022 18:10:37 +0100 Subject: [PATCH] Featured Category block: Add support for global style #4965 Featured Category block: Add support for global style --- assets/js/blocks/featured-category/block.js | 45 +++------- assets/js/blocks/featured-category/edit.tsx | 18 ++++ assets/js/blocks/featured-category/index.js | 34 +++++-- assets/js/blocks/featured-category/style.scss | 14 ++- assets/js/hooks/style-attributes.ts | 17 ++++ src/BlockTypes/FeaturedCategory.php | 89 ++++++++++++++++++- src/Utils/StyleAttributesUtils.php | 76 ++++++++++++++++ 7 files changed, 248 insertions(+), 45 deletions(-) create mode 100644 assets/js/blocks/featured-category/edit.tsx diff --git a/assets/js/blocks/featured-category/block.js b/assets/js/blocks/featured-category/block.js index 1d98eb0ae23..4458d77ccb0 100644 --- a/assets/js/blocks/featured-category/block.js +++ b/assets/js/blocks/featured-category/block.js @@ -8,8 +8,6 @@ import { InnerBlocks, InspectorControls, MediaReplaceFlow, - PanelColorSettings, - withColors, RichText, } from '@wordpress/block-editor'; import { @@ -56,8 +54,6 @@ import { withCategory } from '../../hocs'; * @param {function(any):any} props.getCategory Function for getting category details. * @param {boolean} props.isLoading Whether loading or not. * @param {Object} props.category The product category object. - * @param {Object} props.overlayColor Overlay color object for content. - * @param {function(any):any} props.setOverlayColor Setter for overlay color. * @param {function(any):any} props.debouncedSpeak Function for delayed speak. * @param {function():void} props.triggerUrlUpdate Function to update Shop now button Url. */ @@ -69,8 +65,6 @@ const FeaturedCategory = ( { getCategory, isLoading, category, - overlayColor, - setOverlayColor, debouncedSpeak, triggerUrlUpdate = () => void null, } ) => { @@ -148,21 +142,14 @@ const FeaturedCategory = ( { } /> - + - { !! url && ( - <> + ) } + > ) } - - ) } - + + + ) } ); }; @@ -288,13 +275,13 @@ const FeaturedCategory = ( { const renderCategory = () => { const { - className, contentAlign, dimRatio, focalPoint, height, showDesc, } = attributes; + const classes = classnames( 'wc-block-featured-category', { @@ -304,14 +291,10 @@ const FeaturedCategory = ( { 'has-background-dim': dimRatio !== 0, }, dimRatioToClass( dimRatio ), - contentAlign !== 'center' && `has-${ contentAlign }-content`, - className + contentAlign !== 'center' && `has-${ contentAlign }-content` ); const mediaSrc = attributes.mediaSrc || getCategoryImageSrc( category ); const style = !! category ? getBackgroundImageStyles( mediaSrc ) : {}; - if ( overlayColor.color ) { - style.backgroundColor = overlayColor.color; - } if ( focalPoint ) { const bgPosX = focalPoint.x * 100; const bgPosY = focalPoint.y * 100; @@ -416,9 +399,6 @@ FeaturedCategory.propTypes = { description: PropTypes.node, permalink: PropTypes.string, } ), - // from withColors - overlayColor: PropTypes.object, - setOverlayColor: PropTypes.func.isRequired, // from withSpokenMessages debouncedSpeak: PropTypes.func.isRequired, triggerUrlUpdate: PropTypes.func, @@ -426,7 +406,6 @@ FeaturedCategory.propTypes = { export default compose( [ withCategory, - withColors( { overlayColor: 'background-color' } ), withSpokenMessages, withSelect( ( select, { clientId }, { dispatch } ) => { const Block = select( 'core/block-editor' ).getBlock( clientId ); diff --git a/assets/js/blocks/featured-category/edit.tsx b/assets/js/blocks/featured-category/edit.tsx new file mode 100644 index 00000000000..b67c4e9f725 --- /dev/null +++ b/assets/js/blocks/featured-category/edit.tsx @@ -0,0 +1,18 @@ +/** + * External dependencies + */ +import { useBlockProps } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import Block from './block'; + +export const Edit = ( props: unknown ) => { + const blockProps = useBlockProps(); + return ( +
+ +
+ ); +}; diff --git a/assets/js/blocks/featured-category/index.js b/assets/js/blocks/featured-category/index.js index e9b3f6bd178..e81e101ff67 100644 --- a/assets/js/blocks/featured-category/index.js +++ b/assets/js/blocks/featured-category/index.js @@ -12,13 +12,14 @@ import { Icon, folderStarred } from '@woocommerce/icons'; */ import './style.scss'; import './editor.scss'; -import Block from './block'; import { example } from './example'; +import { Edit } from './edit'; /** * Register and run the "Featured Category" block. */ registerBlockType( 'woocommerce/featured-category', { + apiVersion: 2, title: __( 'Featured Category', 'woo-gutenberg-products-block' ), icon: { src: ( @@ -37,6 +38,19 @@ registerBlockType( 'woocommerce/featured-category', { supports: { align: [ 'wide', 'full' ], html: false, + color: { + text: true, + background: true, + }, + typography: { + fontSize: true, + }, + __experimentalBorder: { + color: true, + radius: true, + width: true, + __experimentalSkipSerialization: false, + }, }, example, attributes: { @@ -139,6 +153,14 @@ registerBlockType( 'woocommerce/featured-category', { type: 'object', default: null, }, + backgroundColor: { + type: 'string', + default: 'black', + }, + textColor: { + type: 'string', + default: 'white', + }, }, /** @@ -146,14 +168,8 @@ registerBlockType( 'woocommerce/featured-category', { * * @param {Object} props Props to pass to block. */ - edit( props ) { - return ; - }, - - /** - * Block content is rendered in PHP, not via save function. - */ - save() { + edit: Edit, + save: () => { return ; }, } ); diff --git a/assets/js/blocks/featured-category/style.scss b/assets/js/blocks/featured-category/style.scss index 8a0fc195c82..41b860997e6 100644 --- a/assets/js/blocks/featured-category/style.scss +++ b/assets/js/blocks/featured-category/style.scss @@ -1,10 +1,10 @@ .wc-block-featured-category { position: relative; - background-color: $gray-900; + background-color: inherit; background-size: cover; background-position: center center; width: 100%; - margin: 0 0 1.5em 0; + margin: 0 0 0 0; display: flex; justify-content: center; align-items: center; @@ -63,6 +63,8 @@ .wc-block-featured-category__description, .wc-block-featured-category__price, .wc-block-featured-category__link { + color: inherit; + font-size: inherit; width: 100%; padding: 0 48px 16px 48px; z-index: 1; @@ -71,12 +73,19 @@ .wc-block-featured-category__title { margin-top: 0; + div { + color: inherit; + font-size: inherit; + } + &::before { display: none; } } .wc-block-featured-category__description { + color: inherit; + font-size: inherit; p { margin: 0; } @@ -94,6 +103,7 @@ bottom: 0; right: 0; background-color: inherit; + border-radius: inherit; opacity: 0.5; z-index: 1; } diff --git a/assets/js/hooks/style-attributes.ts b/assets/js/hooks/style-attributes.ts index 9acb889d848..509a82dc6c2 100644 --- a/assets/js/hooks/style-attributes.ts +++ b/assets/js/hooks/style-attributes.ts @@ -5,6 +5,7 @@ import { __experimentalUseColorProps, __experimentalGetSpacingClassesAndStyles, + __experimentalUseBorderProps, } from '@wordpress/block-editor'; /** @@ -80,3 +81,19 @@ export const useColorProps = ( attributes: unknown ): WithStyle & WithClass => { return __experimentalUseColorProps( { ...attributesObject, style } ); }; + +export const useBorderProps = ( + attributes: unknown +): WithStyle & WithClass => { + if ( ! isFeaturePluginBuild() ) { + return { + className: '', + style: {}, + }; + } + + const attributesObject = isObject( attributes ) ? attributes : {}; + const style = parseStyle( attributesObject.style ); + + return __experimentalUseBorderProps( { ...attributesObject, style } ); +}; diff --git a/src/BlockTypes/FeaturedCategory.php b/src/BlockTypes/FeaturedCategory.php index adfc78c8214..8245d4767c0 100644 --- a/src/BlockTypes/FeaturedCategory.php +++ b/src/BlockTypes/FeaturedCategory.php @@ -1,6 +1,9 @@ true, ); + /** + * Get block attributes. + * + * @return array + */ + protected function get_block_type_attributes() { + return array_merge( + parent::get_block_type_attributes(), + array( + 'textColor' => $this->get_schema_string(), + 'fontSize' => $this->get_schema_string(), + 'lineHeight' => $this->get_schema_string(), + 'style' => array( 'type' => 'object' ), + ) + ); + } + /** * Render the Featured Category block. * @@ -36,6 +64,7 @@ class FeaturedCategory extends AbstractDynamicBlock { * @return string Rendered block type output. */ protected function render( $attributes, $content ) { + $id = absint( isset( $attributes['categoryId'] ) ? $attributes['categoryId'] : 0 ); $category = get_term( $id, 'product_cat' ); @@ -57,7 +86,13 @@ protected function render( $attributes, $content ) { wc_format_content( wp_kses_post( $category->description ) ) ); - $output = sprintf( '
', esc_attr( $this->get_classes( $attributes ) ), esc_attr( $this->get_styles( $attributes, $category ) ) ); + $background_color_class_and_style = $this->get_background_color_class_and_style_with_default( $attributes ); + $text_color_class_and_style = $this->get_text_color_class_and_style_with_default( $attributes ); + + $styles = $this->get_styles( $attributes, $category ) . ' ' . $text_color_class_and_style['style'] . ' ' . $background_color_class_and_style['style']; + $classes = $this->get_classes( $attributes ) . ' ' . $text_color_class_and_style['class'] . ' ' . $background_color_class_and_style['class']; + + $output = sprintf( '
', esc_attr( $classes ), esc_attr( $styles ) ); $output .= '
'; $output .= $title; if ( $attributes['showDesc'] ) { @@ -109,6 +144,10 @@ public function get_styles( $attributes, $category ) { ); } + $global_style_style = StyleAttributesUtils::get_styles_by_attributes( $attributes, $this->global_style_wrapper ); + + $style .= $global_style_style; + return $style; } @@ -145,6 +184,10 @@ public function get_classes( $attributes ) { $classes[] = $attributes['className']; } + $global_style_classes = StyleAttributesUtils::get_classes_by_attributes( $attributes, $this->global_style_wrapper ); + + $classes[] = $global_style_classes; + return implode( ' ', $classes ); } @@ -166,6 +209,50 @@ public function get_image( $category, $size = 'full' ) { return $image; } + /** + * Returns the background color. + * If the background color is not defined from user, + * it will be used the same fallback that it is defined in the block configuration. + * + * @param array $attributes Block attributes. Default empty array. + * @return array + */ + public function get_background_color_class_and_style_with_default( $attributes ) { + $background_styles = StyleAttributesUtils::get_background_color_class_and_style( $attributes ); + + if ( isset( $background_styles['class'] ) || isset( $background_styles['style'] ) ) { + return $background_styles; + } + + return array( + 'class' => '', + 'style' => 'background-color: #000000;', + ); + + } + + /** + * Returns the text color. + * If the text color is not defined from user, + * it will be used the same fallback that it is defined in the block configuration. + * + * @param array $attributes Block attributes. Default empty array. + * @return array + */ + public function get_text_color_class_and_style_with_default( $attributes ) { + $text_color_style = StyleAttributesUtils::get_text_color_class_and_style( $attributes ); + + if ( isset( $text_color_style['class'] ) || isset( $text_color_style['style'] ) ) { + return $text_color_style; + } + + return array( + 'class' => '', + 'style' => 'color: #ffff;', + ); + + } + /** * Extra data passed through from server to client for block. * diff --git a/src/Utils/StyleAttributesUtils.php b/src/Utils/StyleAttributesUtils.php index dbf1f40666b..2a43f55bcc3 100644 --- a/src/Utils/StyleAttributesUtils.php +++ b/src/Utils/StyleAttributesUtils.php @@ -154,6 +154,79 @@ public static function get_background_color_class_and_style( $attributes ) { return null; } + /** + * Get class and style for border-color from attributes. + * + * @param array $attributes Block attributes. + * + * @return (array | null) + */ + public static function get_border_color_class_and_style( $attributes ) { + + $border_color = $attributes['borderColor'] ?? ''; + + $custom_border_color = $attributes['style']['border']['color'] ?? ''; + + if ( ! $border_color && '' === $custom_border_color ) { + return null; + }; + + if ( $border_color ) { + return array( + 'class' => sprintf( 'has-border-color has-%s-border-color', $border_color ), + 'style' => null, + ); + } elseif ( '' !== $custom_border_color ) { + return array( + 'class' => null, + 'style' => sprintf( 'border-color: %s;', $custom_border_color ), + ); + } + return null; + } + + /** + * Get class and style for border-radius from attributes. + * + * @param array $attributes Block attributes. + * + * @return (array | null) + */ + public static function get_border_radius_class_and_style( $attributes ) { + + $custom_border_radius = $attributes['style']['border']['radius'] ?? ''; + + if ( '' === $custom_border_radius ) { + return null; + }; + + return array( + 'class' => null, + 'style' => sprintf( 'border-radius: %s;', $custom_border_radius ), + ); + } + + /** + * Get class and style for background-color from attributes. + * + * @param array $attributes Block attributes. + * + * @return (array | null) + */ + public static function get_border_width_class_and_style( $attributes ) { + + $custom_border_width = $attributes['style']['border']['width'] ?? ''; + + if ( '' === $custom_border_width ) { + return null; + }; + + return array( + 'class' => null, + 'style' => sprintf( 'border-width: %s;', $custom_border_width ), + ); + } + /** * Get classes and styles from attributes. * @@ -169,6 +242,9 @@ public static function get_classes_and_styles_by_attributes( $attributes, $prope 'font_size' => self::get_font_size_class_and_style( $attributes ), 'link_color' => self::get_link_color_class_and_style( $attributes ), 'background_color' => self::get_background_color_class_and_style( $attributes ), + 'border_color' => self::get_border_color_class_and_style( $attributes ), + 'border_radius' => self::get_border_radius_class_and_style( $attributes ), + 'border_width' => self::get_border_width_class_and_style( $attributes ), ); if ( ! empty( $properties ) ) {