diff --git a/assets/js/blocks/featured-category/block.js b/assets/js/blocks/featured-category/block.js index 1d98eb0ae23..74c36e56f9a 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 && ( - <> + ) } + > ) } - - ) } - + + + ) } ); }; @@ -287,14 +274,8 @@ const FeaturedCategory = ( { }; const renderCategory = () => { - const { - className, - contentAlign, - dimRatio, - focalPoint, - height, - showDesc, - } = attributes; + const { contentAlign, dimRatio, focalPoint, showDesc } = attributes; + const classes = classnames( 'wc-block-featured-category', { @@ -304,14 +285,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; @@ -325,7 +302,10 @@ const FeaturedCategory = ( { return ( { 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..990154b4121 --- /dev/null +++ b/assets/js/blocks/featured-category/edit.tsx @@ -0,0 +1,23 @@ +/** + * External dependencies + */ +import { useBlockProps } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import Block from './block'; + +export const Edit = ( props: unknown ): JSX.Element => { + const blockProps = useBlockProps(); + + // The useBlockProps function returns the style with the `color`. + // We need to remove it to avoid the block to be styled with the color. + const { color, ...styles } = blockProps.style; + + return ( +
+ +
+ ); +}; diff --git a/assets/js/blocks/featured-category/editor.scss b/assets/js/blocks/featured-category/editor.scss index 943703a21de..2a5b2726ccb 100644 --- a/assets/js/blocks/featured-category/editor.scss +++ b/assets/js/blocks/featured-category/editor.scss @@ -1,4 +1,6 @@ .wc-block-featured-category { + background-color: inherit; + .components-resizable-box__handle { z-index: 10; } diff --git a/assets/js/blocks/featured-category/index.js b/assets/js/blocks/featured-category/index.js index e9b3f6bd178..cd90f4ded68 100644 --- a/assets/js/blocks/featured-category/index.js +++ b/assets/js/blocks/featured-category/index.js @@ -6,19 +6,21 @@ import { InnerBlocks } from '@wordpress/block-editor'; import { registerBlockType } from '@wordpress/blocks'; import { getSetting } from '@woocommerce/settings'; import { Icon, folderStarred } from '@woocommerce/icons'; +import { isFeaturePluginBuild } from '@woocommerce/block-settings'; /** * Internal dependencies */ 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 +39,18 @@ registerBlockType( 'woocommerce/featured-category', { supports: { align: [ 'wide', 'full' ], html: false, + color: true, + typography: { + fontSize: true, + }, + ...( isFeaturePluginBuild() && { + __experimentalBorder: { + color: true, + radius: true, + width: true, + __experimentalSkipSerialization: false, + }, + } ), }, example, attributes: { @@ -146,14 +160,12 @@ registerBlockType( 'woocommerce/featured-category', { * * @param {Object} props Props to pass to block. */ - edit( props ) { - return ; - }, + edit: Edit, /** * Block content is rendered in PHP, not via save function. */ - save() { + save: () => { return ; }, } ); diff --git a/assets/js/blocks/featured-category/style.scss b/assets/js/blocks/featured-category/style.scss index 8a0fc195c82..4974c6cef5a 100644 --- a/assets/js/blocks/featured-category/style.scss +++ b/assets/js/blocks/featured-category/style.scss @@ -1,10 +1,16 @@ +.wp-block-woocommerce-featured-category { + background-color: #000; + border-color: transparent; + color: #fff; + overflow: hidden; +} + .wc-block-featured-category { position: relative; - background-color: $gray-900; 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 +69,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 +79,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; } 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..8270d350e36 100644 --- a/src/BlockTypes/FeaturedCategory.php +++ b/src/BlockTypes/FeaturedCategory.php @@ -1,6 +1,8 @@ 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 +63,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 +85,10 @@ 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 ) ) ); + $styles = $this->get_styles( $attributes, $category ); + $classes = $this->get_classes( $attributes ); + + $output = sprintf( '