From 9d1464baf312ae454353fae829a8fd47e6145868 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Tue, 1 Feb 2022 15:01:31 +0100 Subject: [PATCH] Featured Product: Enable global style (https://github.com/woocommerce/woocommerce-blocks/pull/5555) * Product title: add support global style woocommerce/woocommerce-blocks#4965 * add specific type * add custom save function * move hooks in a specific folder * fix crash on WP 5.8 * Featured Category block: Add support for global style woocommerce/woocommerce-blocks#4965 Featured Category block: Add support for global style * fix border color * Featured Product block: enable global style woocommerce/woocommerce-blocks#4965 Featured Product block: enable global style * fix border color * fix eslint error * fix opacity * fix border radius * fix opacity * disable font-size support * restore height for featured product and featured category --- .../js/blocks/featured-category/block.js | 13 +++--- .../js/blocks/featured-category/style.scss | 2 +- .../js/blocks/featured-product/block.js | 44 +++++-------------- .../js/blocks/featured-product/edit.tsx | 20 +++++++++ .../js/blocks/featured-product/editor.scss | 2 + .../js/blocks/featured-product/index.js | 18 +++++--- .../js/blocks/featured-product/style.scss | 12 +++-- .../src/BlockTypes/FeaturedProduct.php | 26 ++++++++--- 8 files changed, 84 insertions(+), 53 deletions(-) create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/featured-product/edit.tsx diff --git a/plugins/woocommerce-blocks/assets/js/blocks/featured-category/block.js b/plugins/woocommerce-blocks/assets/js/blocks/featured-category/block.js index 74c36e56f9a..1efd753e588 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/featured-category/block.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/featured-category/block.js @@ -274,7 +274,13 @@ const FeaturedCategory = ( { }; const renderCategory = () => { - const { contentAlign, dimRatio, focalPoint, showDesc } = attributes; + const { + height, + contentAlign, + dimRatio, + focalPoint, + showDesc, + } = attributes; const classes = classnames( 'wc-block-featured-category', @@ -302,10 +308,7 @@ const FeaturedCategory = ( { return ( void null, } ) => { const renderApiError = () => ( @@ -210,21 +204,14 @@ const FeaturedProduct = ( { } /> - + - { !! url && ( - <> + ) } + > ) } - - ) } - + + + ) } ); }; const renderProduct = () => { const { - className, contentAlign, dimRatio, focalPoint, @@ -277,17 +263,13 @@ const FeaturedProduct = ( { 'has-background-dim': dimRatio !== 0, }, dimRatioToClass( dimRatio ), - contentAlign !== 'center' && `has-${ contentAlign }-content`, - className + contentAlign !== 'center' && `has-${ contentAlign }-content` ); const style = getBackgroundImageStyles( attributes.mediaSrc || product ); - if ( overlayColor.color ) { - style.backgroundColor = overlayColor.color; - } if ( focalPoint ) { const bgPosX = focalPoint.x * 100; const bgPosY = focalPoint.y * 100; @@ -451,9 +433,6 @@ FeaturedProduct.propTypes = { price_html: PropTypes.node, permalink: PropTypes.string, } ), - // from withColors - overlayColor: PropTypes.object, - setOverlayColor: PropTypes.func.isRequired, // from withSpokenMessages debouncedSpeak: PropTypes.func.isRequired, triggerUrlUpdate: PropTypes.func, @@ -461,7 +440,6 @@ FeaturedProduct.propTypes = { export default compose( [ withProduct, - withColors( { overlayColor: 'background-color' } ), withSpokenMessages, withSelect( ( select, { clientId }, { dispatch } ) => { const Block = select( 'core/block-editor' ).getBlock( clientId ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/featured-product/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/featured-product/edit.tsx new file mode 100644 index 00000000000..d8fe566c42f --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/featured-product/edit.tsx @@ -0,0 +1,20 @@ +/** + * External dependencies + */ +import { useBlockProps } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import Block from './block'; +import './editor.scss'; + +export const Edit = ( props: unknown ): JSX.Element => { + const blockProps = useBlockProps(); + + return ( +
+ +
+ ); +}; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/featured-product/editor.scss b/plugins/woocommerce-blocks/assets/js/blocks/featured-product/editor.scss index 64a0e852724..acc516bef47 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/featured-product/editor.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/featured-product/editor.scss @@ -1,4 +1,6 @@ .wc-block-featured-product { + background-color: inherit; + .components-resizable-box__handle { z-index: 10; } diff --git a/plugins/woocommerce-blocks/assets/js/blocks/featured-product/index.js b/plugins/woocommerce-blocks/assets/js/blocks/featured-product/index.js index e45a66b1128..ce45aaa59a6 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/featured-product/index.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/featured-product/index.js @@ -6,19 +6,20 @@ import { InnerBlocks } from '@wordpress/block-editor'; import { registerBlockType } from '@wordpress/blocks'; import { getSetting } from '@woocommerce/settings'; import { Icon, star } from '@woocommerce/icons'; +import { isFeaturePluginBuild } from '@woocommerce/block-settings'; /** * Internal dependencies */ import './style.scss'; -import './editor.scss'; import { example } from './example'; -import Block from './block'; +import { Edit } from './edit'; /** * Register and run the "Featured Product" block. */ registerBlockType( 'woocommerce/featured-product', { + apiVersion: 2, title: __( 'Featured Product', 'woo-gutenberg-products-block' ), icon: { src: ( @@ -37,6 +38,15 @@ registerBlockType( 'woocommerce/featured-product', { supports: { align: [ 'wide', 'full' ], html: false, + color: true, + ...( isFeaturePluginBuild() && { + __experimentalBorder: { + color: true, + radius: true, + width: true, + __experimentalSkipSerialization: false, + }, + } ), }, example, attributes: { @@ -154,9 +164,7 @@ registerBlockType( 'woocommerce/featured-product', { * * @param {Object} props Props to pass to block. */ - edit( props ) { - return ; - }, + edit: Edit, /** * Block content is rendered in PHP, not via save function. diff --git a/plugins/woocommerce-blocks/assets/js/blocks/featured-product/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/featured-product/style.scss index 4cf6081485e..e09634d4f45 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/featured-product/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/featured-product/style.scss @@ -1,10 +1,16 @@ +.wp-block-woocommerce-featured-product { + background-color: $gray-900; + border-color: transparent; + color: #fff; + overflow: hidden; +} + .wc-block-featured-product { position: relative; - background-color: $gray-900; background-size: cover; background-position: center center; width: 100%; - margin: 0 0 1.5em 0; + margin: 0; display: flex; justify-content: center; align-items: center; @@ -49,10 +55,10 @@ .wc-block-featured-product__variation, .wc-block-featured-product__description, .wc-block-featured-product__price { - color: $white; line-height: 1.25; margin-bottom: 0; text-align: center; + color: inherit; a, a:hover, diff --git a/plugins/woocommerce-blocks/src/BlockTypes/FeaturedProduct.php b/plugins/woocommerce-blocks/src/BlockTypes/FeaturedProduct.php index fda5df8947d..a288188664a 100644 --- a/plugins/woocommerce-blocks/src/BlockTypes/FeaturedProduct.php +++ b/plugins/woocommerce-blocks/src/BlockTypes/FeaturedProduct.php @@ -1,6 +1,8 @@ true, ); + /** + * Global style enabled for this block. + * + * @var array + */ + protected $global_style_wrapper = array( 'text_color', 'font_size', 'border_color', 'border_radius', 'border_width', 'background_color', 'text_color' ); + /** * Render the Featured Product block. * @@ -68,7 +77,10 @@ class FeaturedProduct extends AbstractDynamicBlock { wp_kses_post( $product->get_price_html() ) ); - $output = sprintf( '
', esc_attr( $this->get_classes( $attributes ) ), esc_attr( $this->get_styles( $attributes, $product ) ) ); + $styles = $this->get_styles( $attributes, $product ); + $classes = $this->get_classes( $attributes ); + + $output = sprintf( '
', esc_attr( trim( $classes ) ), esc_attr( $styles ) ); $output .= '
'; $output .= $title; if ( $attributes['showDesc'] ) { @@ -118,12 +130,15 @@ class FeaturedProduct extends AbstractDynamicBlock { if ( is_array( $attributes['focalPoint'] ) && 2 === count( $attributes['focalPoint'] ) ) { $style .= sprintf( - 'background-position: %s%% %s%%', + 'background-position: %s%% %s%%;', $attributes['focalPoint']['x'] * 100, $attributes['focalPoint']['y'] * 100 ); } + $global_style_style = StyleAttributesUtils::get_styles_by_attributes( $attributes, $this->global_style_wrapper ); + $style .= $global_style_style; + return $style; } @@ -152,14 +167,13 @@ class FeaturedProduct extends AbstractDynamicBlock { $classes[] = "has-{$attributes['contentAlign']}-content"; } - if ( isset( $attributes['overlayColor'] ) ) { - $classes[] = "has-{$attributes['overlayColor']}-background-color"; - } - if ( isset( $attributes['className'] ) ) { $classes[] = $attributes['className']; } + $global_style_classes = StyleAttributesUtils::get_classes_by_attributes( $attributes, $this->global_style_wrapper ); + $classes[] = $global_style_classes; + return implode( ' ', $classes ); }