diff --git a/assets/js/blocks/product-query/inspector-controls.tsx b/assets/js/blocks/product-query/inspector-controls.tsx
index 3ba006a7ad3..58f3865b5de 100644
--- a/assets/js/blocks/product-query/inspector-controls.tsx
+++ b/assets/js/blocks/product-query/inspector-controls.tsx
@@ -37,17 +37,19 @@ export const withProductQueryControls =
< T extends EditorBlock< T > >( BlockEdit: ElementType ) =>
( props: ProductQueryBlock ) => {
const allowedControls = useAllowedControls( props.attributes );
- return isWooQueryBlockVariation( props ) ? (
+
+ const availableControls = Object.entries( INSPECTOR_CONTROLS ).filter(
+ ( [ key ] ) => allowedControls?.includes( key )
+ );
+ return isWooQueryBlockVariation( props ) &&
+ availableControls.length > 0 ? (
<>
- { Object.entries( INSPECTOR_CONTROLS ).map(
- ( [ key, Control ] ) =>
- allowedControls?.includes( key ) ? (
-
- ) : null
- ) }
+ { availableControls.map( ( [ key, Control ] ) => (
+
+ ) ) }
>
diff --git a/package.json b/package.json
index c347f0bae2e..d130c692ae3 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,10 @@
"./assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/**/index.tsx",
"./assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/register-components.ts",
"./assets/js/blocks/cart-checkout-shared/sidebar-notices/index.tsx",
- "./assets/js/blocks/filter-wrapper/register-components.ts"
+ "./assets/js/blocks/filter-wrapper/register-components.ts",
+ "./assets/js/blocks/product-query/variations/**.tsx",
+ "./assets/js/blocks/product-query/index.tsx",
+ "./assets/js/blocks/product-query/inspector-controls.tsx"
],
"repository": {
"type": "git",
diff --git a/tests/e2e/fixtures/fixture-data.js b/tests/e2e/fixtures/fixture-data.js
index 61e713d73ec..2fb4a4145ba 100644
--- a/tests/e2e/fixtures/fixture-data.js
+++ b/tests/e2e/fixtures/fixture-data.js
@@ -227,6 +227,7 @@ const Products = () => [
name: 'Woo Single #3 - Limited Edition',
type: 'simple',
regular_price: '100.00',
+ sale_price: '90.00',
virtual: true,
downloadable: true,
downloads: [
diff --git a/tests/e2e/specs/backend/__fixtures__/product-query.fixture.json b/tests/e2e/specs/backend/__fixtures__/product-query.fixture.json
new file mode 100644
index 00000000000..b9373c83d8c
--- /dev/null
+++ b/tests/e2e/specs/backend/__fixtures__/product-query.fixture.json
@@ -0,0 +1 @@
+{"title":"Product Query Block","pageContent":"
"}
diff --git a/tests/e2e/specs/backend/product-query.test.ts b/tests/e2e/specs/backend/product-query.test.ts
new file mode 100644
index 00000000000..7dc77922b4c
--- /dev/null
+++ b/tests/e2e/specs/backend/product-query.test.ts
@@ -0,0 +1,102 @@
+/**
+ * External dependencies
+ */
+import {
+ getAllBlocks,
+ switchUserToAdmin,
+ canvas,
+ openDocumentSettingsSidebar,
+ openListView,
+ setPostContent,
+ insertBlock,
+} from '@wordpress/e2e-test-utils';
+import { visitBlockPage } from '@woocommerce/blocks-test-utils';
+
+/**
+ * Internal dependencies
+ */
+import {
+ insertBlockDontWaitForInsertClose,
+ GUTENBERG_EDITOR_CONTEXT,
+ describeOrSkip,
+} from '../../utils';
+
+const block = {
+ name: 'Product Query',
+ slug: 'woocommerce/product-query',
+ class: '.wp-block-query',
+};
+
+describeOrSkip( GUTENBERG_EDITOR_CONTEXT === 'gutenberg' )(
+ `${ block.name } Block`,
+ () => {
+ beforeAll( async () => {
+ await switchUserToAdmin();
+ await visitBlockPage( `${ block.name } Block` );
+ } );
+
+ it( 'can be inserted more than once', async () => {
+ await insertBlockDontWaitForInsertClose( block.name );
+ expect( await getAllBlocks() ).toHaveLength( 2 );
+ } );
+
+ it( 'renders without crashing', async () => {
+ await expect( page ).toRenderBlock( block );
+ } );
+
+ it( 'Editor preview shows only on sale products after enabling `Show only products on sale`', async () => {
+ await visitBlockPage( `${ block.name } Block` );
+ const canvasEl = canvas();
+ await openDocumentSettingsSidebar();
+ await openListView();
+ await page.click(
+ '.block-editor-list-view-block__contents-container a.components-button'
+ );
+ const [ onSaleToggle ] = await page.$x(
+ '//label[text()="Show only products on sale"]'
+ );
+ await onSaleToggle.click();
+ await canvasEl.waitForSelector( `${ block.class } > p` );
+ await canvasEl.waitForSelector(
+ `${ block.class } > ul.wp-block-post-template`
+ );
+ const products = await canvasEl.$$(
+ `${ block.class } ul.wp-block-post-template > li.block-editor-block-preview__live-content`
+ );
+ expect( products ).toHaveLength( 1 );
+ } );
+
+ describe( 'On Sale variation', () => {
+ beforeAll( async () => {
+ await visitBlockPage( `${ block.name } Block` );
+ await setPostContent( '' );
+ await insertBlock( 'Products on Sale' );
+ } );
+
+ it( 'Show only on sale products', async () => {
+ const canvasEl = canvas();
+ await canvasEl.waitForSelector(
+ `${ block.class } > ul.wp-block-post-template`
+ );
+ const products = await canvasEl.$$(
+ `${ block.class } ul.wp-block-post-template > li.block-editor-block-preview__live-content`
+ );
+ expect( products ).toHaveLength( 1 );
+ } );
+
+ it( 'Does not have on sale toggle', async () => {
+ await openDocumentSettingsSidebar();
+ await openListView();
+ await page.click(
+ '.block-editor-list-view-block__contents-container a.components-button'
+ );
+ await expect( page ).not.toMatchElement(
+ '.block-editor-block-inspector',
+ {
+ text: 'Show only products on sale',
+ }
+ );
+ } );
+ } );
+ }
+);