Commit 572b6a8981e for woocommerce
commit 572b6a8981e052d0ca3686b8f9400d39d3b899fa
Author: Albert Juhé Lluveras <contact@albertjuhe.com>
Date: Tue May 26 10:52:16 2026 +0200
Update Featured Product and Featured Category block previews in the inserter so they better match the frontend (#64206)
* Add changelog
* Update Featured Product and Featured Category block previews in the inserter so they better match the frontend
* Fix Featured Product title not centered
* Linting
* Refactor the logic to get title and description to display
* Code cleanup
* Remove unnecessary dependency
* Revert "Fix Featured Product title not centered"
This reverts commit 0e909b07112af425ad4c4c53b3bc8b45218e2a7e.
* Use 'core/post-title' block instead of heading
diff --git a/plugins/woocommerce/changelog/fix-64205-featured-items-preview b/plugins/woocommerce/changelog/fix-64205-featured-items-preview
new file mode 100644
index 00000000000..240687ba6ca
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-64205-featured-items-preview
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Update Featured Product and Featured Category block previews in the inserter so they better match the frontend
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/category-description/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/category-description/edit.tsx
index 3b8c750594d..160af45fce1 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/category-description/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/category-description/edit.tsx
@@ -11,6 +11,9 @@ import {
useBlockProps,
PlainText,
} from '@wordpress/block-editor';
+import { usePreviewMode } from '@woocommerce/base-hooks';
+import { previewCategories } from '@woocommerce/resource-previews';
+
interface Props {
attributes: {
textAlign?: string;
@@ -47,6 +50,27 @@ export default function Edit( { attributes, setAttributes, context }: Props ) {
String( termId )
);
+ const isPreviewMode = usePreviewMode();
+
+ let displayRawDescription = '';
+ if ( isPreviewMode ) {
+ displayRawDescription = previewCategories[ 0 ].description;
+ } else if ( typeof rawDescription === 'string' ) {
+ displayRawDescription = rawDescription;
+ }
+
+ let displayFullDescription = '';
+ if ( isPreviewMode ) {
+ displayFullDescription = previewCategories[ 0 ].description;
+ } else if (
+ typeof fullDescription === 'object' &&
+ fullDescription !== null &&
+ 'rendered' in fullDescription &&
+ typeof fullDescription.rendered === 'string'
+ ) {
+ displayFullDescription = fullDescription.rendered;
+ }
+
const blockProps = useBlockProps( {
className: clsx( { [ `has-text-align-${ textAlign }` ]: textAlign } ),
} );
@@ -60,7 +84,7 @@ export default function Edit( { attributes, setAttributes, context }: Props ) {
<PlainText
tagName="p"
placeholder={ __( 'No description', 'woocommerce' ) as string }
- value={ rawDescription }
+ value={ displayRawDescription }
onChange={ ( v: string ) =>
( setDescription as ( v: string ) => void )( v )
}
@@ -71,7 +95,7 @@ export default function Edit( { attributes, setAttributes, context }: Props ) {
<p
{ ...blockProps }
dangerouslySetInnerHTML={ {
- __html: fullDescription?.rendered,
+ __html: displayFullDescription,
} }
/>
);
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/category-title/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/category-title/edit.tsx
index 574a8907fe9..321e6a14d31 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/category-title/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/category-title/edit.tsx
@@ -15,6 +15,8 @@ import {
PlainText,
HeadingLevelDropdown,
} from '@wordpress/block-editor';
+import { usePreviewMode } from '@woocommerce/base-hooks';
+import { previewCategories } from '@woocommerce/resource-previews';
// eslint-disable-next-line @woocommerce/dependency-group
import {
ToggleControl,
@@ -78,6 +80,7 @@ export default function Edit( { attributes, setAttributes, context }: Props ) {
[ termId, termTaxonomy ]
);
+ const isPreviewMode = usePreviewMode();
const [ rawTitle = '', setTitle, fullTitle ] = useEntityProp(
'taxonomy',
termTaxonomy || 'product_cat',
@@ -85,6 +88,25 @@ export default function Edit( { attributes, setAttributes, context }: Props ) {
termId ? String( termId ) : undefined
);
+ let displayRawTitle = '';
+ if ( isPreviewMode ) {
+ displayRawTitle = previewCategories[ 0 ].description;
+ } else if ( typeof rawTitle === 'string' ) {
+ displayRawTitle = rawTitle;
+ }
+
+ let displayFullTitle = '';
+ if ( isPreviewMode ) {
+ displayFullTitle = previewCategories[ 0 ].description;
+ } else if (
+ typeof fullTitle === 'object' &&
+ fullTitle !== null &&
+ 'rendered' in fullTitle &&
+ typeof fullTitle.rendered === 'string'
+ ) {
+ displayFullTitle = fullTitle.rendered;
+ }
+
const link = useSelect(
( select ) => {
if ( ! termId ) return undefined;
@@ -116,7 +138,7 @@ export default function Edit( { attributes, setAttributes, context }: Props ) {
<PlainText
tagName={ TagName }
placeholder={ __( 'No title', 'woocommerce' ) }
- value={ rawTitle }
+ value={ displayRawTitle }
onChange={ ( v ) => setTitle( v ) }
__experimentalVersion={ 2 }
{ ...blockProps }
@@ -126,7 +148,7 @@ export default function Edit( { attributes, setAttributes, context }: Props ) {
tagName={ TagName }
{ ...blockProps }
dangerouslySetInnerHTML={ {
- __html: fullTitle?.rendered,
+ __html: displayFullTitle,
} }
/>
);
@@ -141,11 +163,11 @@ export default function Edit( { attributes, setAttributes, context }: Props ) {
target={ linkTarget }
rel={ rel }
placeholder={
- ! rawTitle?.length
+ ! displayRawTitle?.length
? __( 'No title', 'woocommerce' )
: undefined
}
- value={ rawTitle }
+ value={ displayRawTitle }
onChange={ ( v ) => setTitle( v ) }
__experimentalVersion={ 2 }
/>
@@ -158,7 +180,7 @@ export default function Edit( { attributes, setAttributes, context }: Props ) {
rel={ rel }
onClick={ ( event ) => event.preventDefault() }
dangerouslySetInnerHTML={ {
- __html: fullTitle?.rendered,
+ __html: displayFullTitle,
} }
/>
</ContainerElement>
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/featured-items/with-edit-mode.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/featured-items/with-edit-mode.tsx
index ba660aca8d6..badda60a1c4 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/featured-items/with-edit-mode.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/featured-items/with-edit-mode.tsx
@@ -2,6 +2,7 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
+import { usePreviewMode } from '@woocommerce/base-hooks';
import type { ComponentType } from 'react';
import { useEffect, useState } from '@wordpress/element';
import { info } from '@wordpress/icons';
@@ -102,7 +103,13 @@ export const withEditMode =
itemType: name,
} );
+ const isPreviewMode = usePreviewMode();
+
useEffect( () => {
+ if ( isPreviewMode ) {
+ return;
+ }
+
if ( ! isLoading ) {
const currEditModeValue =
( name === BLOCK_NAMES.featuredProduct &&
@@ -113,7 +120,7 @@ export const withEditMode =
setEditMode( currEditModeValue );
}
}
- }, [ status, isDeleted, name, isLoading ] );
+ }, [ status, isDeleted, name, isLoading, isPreviewMode ] );
if ( editMode ) {
return (
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/featured-items/with-featured-item.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/featured-items/with-featured-item.tsx
index c20c901708c..6b83365e6ee 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/featured-items/with-featured-item.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/featured-items/with-featured-item.tsx
@@ -218,6 +218,8 @@ export const withFeaturedItem =
const renderInnerBlocks = () => {
if ( product ) {
+ const innerBlocksTemplate =
+ FEATURED_PRODUCT_DEFAULT_TEMPLATE( product );
return (
<BlockContextProvider
value={ { postId: product.id, postType: 'product' } }
@@ -228,9 +230,7 @@ export const withFeaturedItem =
>
<div className={ `${ className }__inner-blocks` }>
<InnerBlocks
- template={ FEATURED_PRODUCT_DEFAULT_TEMPLATE(
- product
- ) }
+ template={ innerBlocksTemplate }
templateLock={ false }
/>
</div>