Related Products: hide unusable options from Inspector Controls (#47845)
* Hide unusable options from Related Products block * Add changelog * Fix the dscription of Single Product template compatibility layer tests * Add E2E test * Replace editorUtils with editor in E2E tests * Fix typo Co-authored-by: Bart Kalisz <bartlomiej.kalisz@gmail.com> * Fix typo --------- Co-authored-by: Bart Kalisz <bartlomiej.kalisz@gmail.com>
This commit is contained in:
Karol Manijak
GitHub
parent
63a2788527
commit
7d3309dc6c
|
|
@ -35,6 +35,7 @@ import {
|
|||
import {
|
||||
isCustomInheritGlobalQueryImplementationEnabled,
|
||||
isWooQueryBlockVariation,
|
||||
isRelatedProducts,
|
||||
setQueryAttribute,
|
||||
useAllowedControls,
|
||||
} from './utils';
|
||||
|
|
@ -225,35 +226,40 @@ const ProductQueryControls = ( props: ProductQueryBlock ) => {
|
|||
props.attributes.namespace
|
||||
);
|
||||
|
||||
const isProductsBlock = ! isRelatedProducts( props );
|
||||
|
||||
return (
|
||||
<>
|
||||
<InspectorControls>
|
||||
{ MANUAL_REPLACE_PRODUCTS_WITH_PRODUCT_COLLECTION && (
|
||||
<UpgradeNotice upgradeBlock={ manualUpdate } />
|
||||
) }
|
||||
{ isProductsBlock &&
|
||||
MANUAL_REPLACE_PRODUCTS_WITH_PRODUCT_COLLECTION && (
|
||||
<UpgradeNotice upgradeBlock={ manualUpdate } />
|
||||
) }
|
||||
{ allowedControls?.includes( 'presets' ) && (
|
||||
<PopularPresets { ...props } />
|
||||
) }
|
||||
<ToolsPanel
|
||||
className="woocommerce-product-query-toolspanel"
|
||||
label={ __( 'Advanced Filters', 'woocommerce' ) }
|
||||
resetAll={ () => {
|
||||
setQueryAttribute( props, defaultWooQueryParams );
|
||||
} }
|
||||
>
|
||||
{ Object.entries( TOOLS_PANEL_CONTROLS ).map(
|
||||
( [ key, Control ] ) =>
|
||||
allowedControls?.includes( key ) ? (
|
||||
<Control
|
||||
{ ...props }
|
||||
defaultWooQueryParams={
|
||||
defaultWooQueryParams
|
||||
}
|
||||
key={ key }
|
||||
/>
|
||||
) : null
|
||||
) }
|
||||
</ToolsPanel>
|
||||
{ isProductsBlock && (
|
||||
<ToolsPanel
|
||||
className="woocommerce-product-query-toolspanel"
|
||||
label={ __( 'Advanced Filters', 'woocommerce' ) }
|
||||
resetAll={ () => {
|
||||
setQueryAttribute( props, defaultWooQueryParams );
|
||||
} }
|
||||
>
|
||||
{ Object.entries( TOOLS_PANEL_CONTROLS ).map(
|
||||
( [ key, Control ] ) =>
|
||||
allowedControls?.includes( key ) ? (
|
||||
<Control
|
||||
{ ...props }
|
||||
defaultWooQueryParams={
|
||||
defaultWooQueryParams
|
||||
}
|
||||
key={ key }
|
||||
/>
|
||||
) : null
|
||||
) }
|
||||
</ToolsPanel>
|
||||
) }
|
||||
</InspectorControls>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -38,6 +38,16 @@ export function isWooQueryBlockVariation( block: ProductQueryBlock ) {
|
|||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Identifies if a block is a Related Products variation.
|
||||
*/
|
||||
export function isRelatedProducts( block: ProductQueryBlock ) {
|
||||
return (
|
||||
block.name === QUERY_LOOP_ID &&
|
||||
block.attributes.namespace === QueryVariation.RELATED_PRODUCTS
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the new query arguments of a Product Query block
|
||||
*
|
||||
|
|
|
|||
|
|
@ -63,4 +63,51 @@ test.describe( `${ blockData.name } Block`, () => {
|
|||
await editor.getBlockByName( blockData.slug )
|
||||
).toBeVisible();
|
||||
} );
|
||||
|
||||
test( "doesn't display additional Products (Beta) options", async ( {
|
||||
page,
|
||||
admin,
|
||||
editor,
|
||||
} ) => {
|
||||
await admin.visitSiteEditor( {
|
||||
postId: `woocommerce/woocommerce//single-product`,
|
||||
postType: 'wp_template',
|
||||
} );
|
||||
await editor.enterEditMode();
|
||||
const relatedProducts = await editor.getBlockByName( blockData.slug );
|
||||
await editor.selectBlocks( relatedProducts );
|
||||
await editor.openDocumentSettingsSidebar();
|
||||
|
||||
const inspectorControls = page.getByRole( 'region', {
|
||||
name: 'Editor settings',
|
||||
} );
|
||||
|
||||
const upgradeNotice = inspectorControls.getByRole( 'button', {
|
||||
name: 'Upgrade to Product Collection',
|
||||
} );
|
||||
const advancedFilters = inspectorControls.getByRole( 'heading', {
|
||||
name: 'Advanced filters',
|
||||
} );
|
||||
|
||||
await expect( upgradeNotice ).toBeHidden();
|
||||
await expect( advancedFilters ).toBeHidden();
|
||||
|
||||
// Reality check - the above test will pass if:
|
||||
// 1. options are not there - valid case,
|
||||
// 2. selectors changed or are incorrect - invalid case.
|
||||
//
|
||||
// To confirm test is correct, we verify if Products (Beta)
|
||||
// have these options available using the same locators.
|
||||
await editor.setContent( '' );
|
||||
const querySlug = 'core/query';
|
||||
const productsBetaSlug = 'woocommerce/product-query';
|
||||
await editor.insertBlock( {
|
||||
name: querySlug,
|
||||
attributes: { namespace: productsBetaSlug },
|
||||
} );
|
||||
const productsBeta = await editor.getBlockByName( querySlug );
|
||||
await editor.selectBlocks( productsBeta );
|
||||
await expect( upgradeNotice ).toBeVisible();
|
||||
await expect( advancedFilters ).toBeVisible();
|
||||
} );
|
||||
} );
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ type Scenario = {
|
|||
amount: number;
|
||||
};
|
||||
|
||||
const singleOccurranceScenarios: Scenario[] = [
|
||||
const singleOccurrenceScenarios: Scenario[] = [
|
||||
{
|
||||
title: 'Before Main Content',
|
||||
dataTestId: 'woocommerce_before_main_content',
|
||||
|
|
@ -83,24 +83,22 @@ const singleOccurranceScenarios: Scenario[] = [
|
|||
},
|
||||
];
|
||||
|
||||
test.describe( 'Compatibility Layer with Product Collection block', () => {
|
||||
test.describe( 'Compatibility Layer in Single Product template', () => {
|
||||
test.beforeEach( async ( { requestUtils } ) => {
|
||||
await requestUtils.activatePlugin(
|
||||
'woocommerce-blocks-test-single-product-template-compatibility-layer'
|
||||
);
|
||||
} );
|
||||
|
||||
test.describe( 'Product Archive with Product Collection block', () => {
|
||||
for ( const scenario of singleOccurranceScenarios ) {
|
||||
test( `${ scenario.title } is attached to the page`, async ( {
|
||||
page,
|
||||
} ) => {
|
||||
await page.goto( '/product/hoodie/' );
|
||||
const hooks = page.getByTestId( scenario.dataTestId );
|
||||
for ( const scenario of singleOccurrenceScenarios ) {
|
||||
test( `${ scenario.title } is attached to the page`, async ( {
|
||||
page,
|
||||
} ) => {
|
||||
await page.goto( '/product/hoodie/' );
|
||||
const hooks = page.getByTestId( scenario.dataTestId );
|
||||
|
||||
await expect( hooks ).toHaveCount( scenario.amount );
|
||||
await expect( hooks ).toHaveText( scenario.content );
|
||||
} );
|
||||
}
|
||||
} );
|
||||
await expect( hooks ).toHaveCount( scenario.amount );
|
||||
await expect( hooks ).toHaveText( scenario.content );
|
||||
} );
|
||||
}
|
||||
} );
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: patch
|
||||
Type: fix
|
||||
|
||||
Related Products: hides unusable options from Inspector Controls
|
||||
Loading…
Reference in New Issue