Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
This commit is contained in:
Luigi Teschio 2022-02-01 15:01:31 +01:00 committed by GitHub
parent 426eb51830
commit 9d1464baf3
8 changed files with 84 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
plugins/woocommerce-blocks/assets/js/blocks/featured-category/block.js
View File

@ -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 (
<ResizableBox
className={ classes }
size={ {
height: '',
width: '',
} }
size={ { height } }
minHeight={ getSetting( 'min_height', 500 ) }
enable={ { bottom: true } }
onResizeStop={ onResizeStop }

2
plugins/woocommerce-blocks/assets/js/blocks/featured-category/style.scss
View File

@ -10,7 +10,7 @@
background-size: cover;
background-position: center center;
width: 100%;
margin: 0 0 0 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;

44
plugins/woocommerce-blocks/assets/js/blocks/featured-product/block.js
View File

@ -8,8 +8,6 @@ import {
InnerBlocks,
InspectorControls,
MediaReplaceFlow,
PanelColorSettings,
withColors,
RichText,
} from '@wordpress/block-editor';
import { withSelect } from '@wordpress/data';
@ -55,10 +53,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 +64,8 @@ const FeaturedProduct = ( {
getProduct,
isLoading,
isSelected,
overlayColor,
product,
setAttributes,
setOverlayColor,
triggerUrlUpdate = () => void null,
} ) => {
const renderApiError = () => (
@ -210,21 +204,14 @@ const FeaturedProduct = ( {
}
/>
</PanelBody>
<PanelColorSettings
title={ __( 'Overlay', 'woo-gutenberg-products-block' ) }
colorSettings={ [
{
value: overlayColor.color,
onChange: setOverlayColor,
label: __(
'Overlay Color',
{ !! url && (
<>
<PanelBody
title={ __(
'Overlay',
'woo-gutenberg-products-block'
),
},
] }
>
{ !! url && (
<>
) }
>
<RangeControl
label={ __(
'Background Opacity',
@ -251,16 +238,15 @@ const FeaturedProduct = ( {
}
/>
) }
</>
) }
</PanelColorSettings>
</PanelBody>
</>
) }
</InspectorControls>
);
};
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 );

20
plugins/woocommerce-blocks/assets/js/blocks/featured-product/edit.tsx Normal file
View File

@ -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 (
<div { ...blockProps }>
<Block { ...props } />
</div>
);
};

2
plugins/woocommerce-blocks/assets/js/blocks/featured-product/editor.scss
View File

@ -1,4 +1,6 @@
.wc-block-featured-product {
background-color: inherit;
.components-resizable-box__handle {
z-index: 10;
}

18
plugins/woocommerce-blocks/assets/js/blocks/featured-product/index.js
View File

@ -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 <Block { ...props } />;
},
edit: Edit,
/**
* Block content is rendered in PHP, not via save function.

12
plugins/woocommerce-blocks/assets/js/blocks/featured-product/style.scss
View File

@ -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,

26
plugins/woocommerce-blocks/src/BlockTypes/FeaturedProduct.php
View File

@ -1,6 +1,8 @@
<?php
namespace Automattic\WooCommerce\Blocks\BlockTypes;
use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;
/**
* FeaturedProduct class.
*/
@ -29,6 +31,13 @@ class FeaturedProduct extends AbstractDynamicBlock {
'showPrice' => 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( '<div class="%1$s" style="%2$s">', 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( '<div class="%1$s wp-block-woocommerce-featured-product" style="%2$s">', esc_attr( trim( $classes ) ), esc_attr( $styles ) );
$output .= '<div class="wc-block-featured-product__wrapper">';
$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 );
}