From 2f805128eb1fbbe447560b3892f284aa07922646 Mon Sep 17 00:00:00 2001 From: Luigi Date: Wed, 12 Jan 2022 14:32:03 +0100 Subject: [PATCH] Featured Product block: enable global style #4965 Featured Product block: enable global style --- assets/js/blocks/featured-product/block.js | 49 +++++++------------- assets/js/blocks/featured-product/edit.tsx | 20 ++++++++ assets/js/blocks/featured-product/index.js | 24 ++++++++-- assets/js/blocks/featured-product/style.scss | 14 ++++-- src/BlockTypes/FeaturedProduct.php | 26 ++++++++--- 5 files changed, 86 insertions(+), 47 deletions(-) create mode 100644 assets/js/blocks/featured-product/edit.tsx diff --git a/assets/js/blocks/featured-product/block.js b/assets/js/blocks/featured-product/block.js index fda297ca4df..4812e8dee4c 100644 --- a/assets/js/blocks/featured-product/block.js +++ b/assets/js/blocks/featured-product/block.js @@ -8,8 +8,6 @@ import { InnerBlocks, InspectorControls, MediaReplaceFlow, - PanelColorSettings, - withColors, RichText, } from '@wordpress/block-editor'; import { withSelect } from '@wordpress/data'; @@ -44,6 +42,7 @@ import { getImageSrcFromProduct, getImageIdFromProduct, } from '../../utils/products'; +import { useColorProps } from '../../hooks/style-attributes'; /** * Component to handle edit mode of "Featured Product". @@ -55,10 +54,8 @@ import { * @param {function(any):any} props.getProduct Function for getting the product. * @param {boolean} props.isLoading Whether product is loading or not. * @param {boolean} props.isSelected Whether block is selected or not. - * @param {Object} props.overlayColor Overlay color object. * @param {Object} props.product Product object. * @param {function(any):any} props.setAttributes Setter for attributes. - * @param {function(any):any} props.setOverlayColor Setter for overlay color. * @param {function():any} props.triggerUrlUpdate Function for triggering a url update for product. */ const FeaturedProduct = ( { @@ -68,10 +65,8 @@ const FeaturedProduct = ( { getProduct, isLoading, isSelected, - overlayColor, product, setAttributes, - setOverlayColor, triggerUrlUpdate = () => void null, } ) => { const renderApiError = () => ( @@ -210,21 +205,14 @@ const FeaturedProduct = ( { } /> - + - { !! url && ( - <> + ) } + > ) } - - ) } - + + + ) } ); }; @@ -277,17 +265,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; @@ -301,7 +285,10 @@ const FeaturedProduct = ( { return ( { const Block = select( 'core/block-editor' ).getBlock( clientId ); diff --git a/assets/js/blocks/featured-product/edit.tsx b/assets/js/blocks/featured-product/edit.tsx new file mode 100644 index 00000000000..bf23210f40e --- /dev/null +++ b/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 ) => { + const blockProps = useBlockProps(); + + return ( +
+ +
+ ); +}; diff --git a/assets/js/blocks/featured-product/index.js b/assets/js/blocks/featured-product/index.js index e45a66b1128..3bb527d7606 100644 --- a/assets/js/blocks/featured-product/index.js +++ b/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,21 @@ registerBlockType( 'woocommerce/featured-product', { supports: { align: [ 'wide', 'full' ], html: false, + color: { + text: true, + background: true, + }, + typography: { + fontSize: true, + }, + ...( isFeaturePluginBuild() && { + __experimentalBorder: { + color: true, + radius: true, + width: true, + __experimentalSkipSerialization: false, + }, + } ), }, example, attributes: { @@ -154,9 +170,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/assets/js/blocks/featured-product/style.scss b/assets/js/blocks/featured-product/style.scss index 4cf6081485e..af7e6a640f3 100644 --- a/assets/js/blocks/featured-product/style.scss +++ b/assets/js/blocks/featured-product/style.scss @@ -1,10 +1,17 @@ +.wp-block-woocommerce-featured-product { + border-color: transparent; + overflow: hidden; + color: #fff; + background-color: #000; +} + .wc-block-featured-product { 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; @@ -49,10 +56,11 @@ .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; + font-size: inherit; a, a:hover, diff --git a/src/BlockTypes/FeaturedProduct.php b/src/BlockTypes/FeaturedProduct.php index fda5df8947d..a288188664a 100644 --- a/src/BlockTypes/FeaturedProduct.php +++ b/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 @@ protected function render( $attributes, $content ) { 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 @@ public function get_styles( $attributes, $product ) { 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 @@ public function get_classes( $attributes ) { $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 ); }