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:
parent
426eb51830
commit
9d1464baf3
|
@ -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 }
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
},
|
||||
] }
|
||||
>
|
||||
{ !! url && (
|
||||
<>
|
||||
<PanelBody
|
||||
title={ __(
|
||||
'Overlay',
|
||||
'woo-gutenberg-products-block'
|
||||
) }
|
||||
>
|
||||
<RangeControl
|
||||
label={ __(
|
||||
'Background Opacity',
|
||||
|
@ -251,16 +238,15 @@ const FeaturedProduct = ( {
|
|||
}
|
||||
/>
|
||||
) }
|
||||
</PanelBody>
|
||||
</>
|
||||
) }
|
||||
</PanelColorSettings>
|
||||
</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 );
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
|
@ -1,4 +1,6 @@
|
|||
.wc-block-featured-product {
|
||||
background-color: inherit;
|
||||
|
||||
.components-resizable-box__handle {
|
||||
z-index: 10;
|
||||
}
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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 );
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue