diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-filters/block.json b/plugins/woocommerce-blocks/assets/js/blocks/product-filters/block.json index b8d3b6457fb..c70a4f49fa8 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-filters/block.json +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-filters/block.json @@ -21,8 +21,8 @@ "background": true, "text": true }, - "multiple": false, - "inserter": false, + "multiple": true, + "inserter": true, "interactivity": true, "typography": { "fontSize": true, @@ -46,15 +46,6 @@ }, "textdomain": "woocommerce", "usesContext": [ "postId" ], - "providesContext": { - "woocommerce/product-filters/overlay": "overlay" - }, - "attributes": { - "overlay": { - "type": "string", - "default": "never" - } - }, "viewScript": "wc-product-filters-frontend", "example": {} } diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-filters/constants.ts b/plugins/woocommerce-blocks/assets/js/blocks/product-filters/constants.ts index 3a8317c659e..9050148306e 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-filters/constants.ts +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-filters/constants.ts @@ -1,9 +1,3 @@ -export const BlockOverlayAttribute = { - NEVER: 'never', - MOBILE: 'mobile', - ALWAYS: 'always', -} as const; - export const EXCLUDED_BLOCKS = [ 'woocommerce/product-filters', 'woocommerce/product-filter-attribute', diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-filters/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-filters/edit.tsx index 0d8c773e3cd..50b3c7ed185 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-filters/edit.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-filters/edit.tsx @@ -1,40 +1,15 @@ /** * External dependencies */ -import { getSetting } from '@woocommerce/settings'; -import { - InnerBlocks, - InspectorControls, - useBlockProps, - useInnerBlocksProps, -} from '@wordpress/block-editor'; -import { - BlockEditProps, - BlockInstance, - InnerBlockTemplate, - createBlock, -} from '@wordpress/blocks'; +import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; +import { BlockEditProps, InnerBlockTemplate } from '@wordpress/blocks'; import { __ } from '@wordpress/i18n'; -import { useEffect } from '@wordpress/element'; -import { select, dispatch } from '@wordpress/data'; -import { useLocalStorageState } from '@woocommerce/base-hooks'; -import { - ExternalLink, - PanelBody, - // @ts-expect-error - no types. - // eslint-disable-next-line @wordpress/no-unsafe-wp-apis - __experimentalToggleGroupControl as ToggleGroupControl, - // @ts-expect-error - no types. - // eslint-disable-next-line @wordpress/no-unsafe-wp-apis - __experimentalToggleGroupControlOption as ToggleGroupControlOption, -} from '@wordpress/components'; /** * Internal dependencies */ import './editor.scss'; import { type BlockAttributes } from './types'; -import { BlockOverlayAttribute } from './constants'; const TEMPLATE: InnerBlockTemplate[] = [ [ @@ -73,138 +48,12 @@ const TEMPLATE: InnerBlockTemplate[] = [ ], ]; -export const Edit = ( { - setAttributes, - attributes, - clientId, -}: BlockEditProps< BlockAttributes > ) => { +export const Edit = ( {}: BlockEditProps< BlockAttributes > ) => { const blockProps = useBlockProps(); - const templatePartEditUri = getSetting< string >( - 'templatePartProductFiltersOverlayEditUri', - '' - ); - - const [ - productFiltersOverlayNavigationAttributes, - setProductFiltersOverlayNavigationAttributes, - ] = useLocalStorageState< Record< string, unknown > >( - 'product-filters-overlay-navigation-attributes', - {} - ); - - useEffect( () => { - const filtersClientIds = select( 'core/block-editor' ).getBlocksByName( - 'woocommerce/product-filters' - ); - - let overlayBlock: - | BlockInstance< { [ k: string ]: unknown } > - | undefined; - - for ( const filterClientId of filtersClientIds ) { - const filterBlock = - select( 'core/block-editor' ).getBlock( filterClientId ); - - if ( filterBlock ) { - for ( const innerBlock of filterBlock.innerBlocks ) { - if ( - innerBlock.name === - 'woocommerce/product-filters-overlay-navigation' && - innerBlock.attributes.triggerType === 'open-overlay' - ) { - overlayBlock = innerBlock; - } - } - } - } - - if ( attributes.overlay === 'never' && overlayBlock ) { - setProductFiltersOverlayNavigationAttributes( - overlayBlock.attributes - ); - - dispatch( 'core/block-editor' ).updateBlockAttributes( - overlayBlock.clientId, - { - lock: {}, - } - ); - - dispatch( 'core/block-editor' ).removeBlock( - overlayBlock.clientId - ); - } else if ( attributes.overlay !== 'never' && ! overlayBlock ) { - if ( productFiltersOverlayNavigationAttributes ) { - productFiltersOverlayNavigationAttributes.triggerType = - 'open-overlay'; - } - - dispatch( 'core/block-editor' ).insertBlock( - createBlock( - 'woocommerce/product-filters-overlay-navigation', - productFiltersOverlayNavigationAttributes - ? productFiltersOverlayNavigationAttributes - : { - align: 'left', - triggerType: 'open-overlay', - lock: { move: true, remove: true }, - } - ), - 0, - clientId, - false - ); - } - }, [ - attributes.overlay, - clientId, - productFiltersOverlayNavigationAttributes, - setProductFiltersOverlayNavigationAttributes, - ] ); - return (
- - - { - setAttributes( { overlay: value } ); - } } - > - - - - - { attributes.overlay !== 'never' && ( - - { __( 'Edit overlay', 'woocommerce' ) } - - ) } - -
); }; - -export const Save = () => { - const blockProps = useBlockProps.save(); - const innerBlocksProps = useInnerBlocksProps.save( blockProps ); - return
; -}; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/overlay-navigation/block.json b/plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/overlay-navigation/block.json index 2670f83d872..829afc09465 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/overlay-navigation/block.json +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/overlay-navigation/block.json @@ -46,7 +46,7 @@ "supports": { "interactivity": true, "align": [ "left", "right", "center"], - "inserter": false, + "inserter": true, "color": { "__experimentalDefaultControls": { "text": false, diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/overlay-navigation/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/overlay-navigation/edit.tsx index 8c9a6bee4b5..85845cdff45 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/overlay-navigation/edit.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/overlay-navigation/edit.tsx @@ -12,12 +12,7 @@ import { filter, filterThreeLines } from '@woocommerce/icons'; /** * Internal dependencies */ -import type { - BlockAttributes, - BlockContext, - BlockVariationTriggerType, -} from './types'; -import { BlockOverlayAttribute as ProductFiltersBlockOverlayAttribute } from '../../constants'; +import type { BlockAttributes, BlockVariationTriggerType } from './types'; import './editor.scss'; import { Inspector } from './inspector-controls'; @@ -128,9 +123,9 @@ const OverlayNavigationContent = ( { return null; }; -type BlockProps = BlockEditProps< BlockAttributes > & { context: BlockContext }; +type BlockProps = BlockEditProps< BlockAttributes >; -export const Edit = ( { attributes, setAttributes, context }: BlockProps ) => { +export const Edit = ( { attributes, setAttributes }: BlockProps ) => { const { navigationStyle, buttonStyle, @@ -139,57 +134,19 @@ export const Edit = ( { attributes, setAttributes, context }: BlockProps ) => { style, triggerType, } = attributes; - const { 'woocommerce/product-filters/overlay': productFiltersOverlayMode } = - context; + const blockProps = useBlockProps( { className: clsx( 'wc-block-product-filters-overlay-navigation', { 'wp-block-button__link wp-element-button': buttonStyle !== 'link', } ), } ); - const { - isWithinProductFiltersOverlayTemplatePart, - }: { - isWithinProductFiltersOverlayTemplatePart: boolean; - } = useSelect( ( select ) => { - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - const { getCurrentPostId, getCurrentPostType } = - select( 'core/editor' ); - const currentPostId = getCurrentPostId< string >(); - const currentPostIdParts = currentPostId?.split( '//' ); - const currentPostType = getCurrentPostType< string >(); - let isProductFiltersOverlayTemplatePart = false; - - if ( - currentPostType === 'wp_template_part' && - currentPostIdParts?.length > 1 - ) { - const [ , postId ] = currentPostIdParts; - isProductFiltersOverlayTemplatePart = - postId === 'product-filters-overlay'; - } - - return { - isWithinProductFiltersOverlayTemplatePart: - isProductFiltersOverlayTemplatePart, - }; - } ); const shouldHideBlock = () => { if ( triggerType === 'open-overlay' ) { - if ( - productFiltersOverlayMode === - ProductFiltersBlockOverlayAttribute.NEVER - ) { - return true; - } - - if ( isWithinProductFiltersOverlayTemplatePart ) { - return true; - } + return false; } - return false; + return true; }; // We need useInnerBlocksProps because Gutenberg only applies layout classes // to parent block. We don't have any inner blocks but we want to use the diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/overlay-navigation/types.ts b/plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/overlay-navigation/types.ts index b13405eb511..74db6bb5f21 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/overlay-navigation/types.ts +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/overlay-navigation/types.ts @@ -1,8 +1,3 @@ -/** - * Internal dependencies - */ -import { BlockOverlayAttributeOptions as ProductFiltersBlockOverlayAttributeOptions } from '../../types'; - type BorderRadius = { bottomLeft: string; bottomRight: string; @@ -14,18 +9,12 @@ type BorderSide = { width: string; }; -export interface BlockContext { - // eslint-disable-next-line @typescript-eslint/naming-convention - 'woocommerce/product-filters/overlay': ProductFiltersBlockOverlayAttributeOptions; -} - export type BlockVariationTriggerType = 'open-overlay' | 'close-overlay'; export type BlockAttributes = { navigationStyle: 'label-and-icon' | 'label-only' | 'icon-only'; buttonStyle: string; iconSize?: number; - overlayMode: ProductFiltersBlockOverlayAttributeOptions; triggerType: BlockVariationTriggerType; overlayIcon: string; style: { diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-filters/types.ts b/plugins/woocommerce-blocks/assets/js/blocks/product-filters/types.ts index 20f83a8633a..0b18f49912a 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-filters/types.ts +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-filters/types.ts @@ -1,15 +1,6 @@ -/** - * Internal dependencies - */ -import { BlockOverlayAttribute } from './constants'; - -export type BlockOverlayAttributeOptions = - ( typeof BlockOverlayAttribute )[ keyof typeof BlockOverlayAttribute ]; - export interface BlockAttributes { setAttributes: ( attributes: ProductFiltersBlockAttributes ) => void; productId?: string; - overlay: BlockOverlayAttributeOptions; overlayIcon: | 'filter-icon-1' | 'filter-icon-2' diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/product-filters-overlay/product-filters-overlay-template-part.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/product-filters-overlay/product-filters-overlay-template-part.block_theme.spec.ts deleted file mode 100644 index f46c9d76028..00000000000 --- a/plugins/woocommerce-blocks/tests/e2e/tests/product-filters-overlay/product-filters-overlay-template-part.block_theme.spec.ts +++ /dev/null @@ -1,305 +0,0 @@ -/** - * External dependencies - */ -import { test, expect } from '@woocommerce/e2e-utils'; - -const templatePartData = { - selectors: { - frontend: {}, - editor: { - blocks: { - activeFilters: { - title: 'Active (Experimental)', - blockLabel: 'Block: Active (Experimental)', - }, - productFilters: { - title: 'Product Filters (Experimental)', - blockLabel: 'Block: Product Filters (Experimental)', - }, - filterOptions: { - title: 'Filter Options', - blockLabel: 'Block: Filter Options', - }, - productFiltersOverlayNavigation: { - title: 'Overlay Navigation (Experimental)', - name: 'woocommerce/product-filters-overlay-navigation', - blockLabel: 'Block: Overlay Navigation (Experimental)', - }, - }, - }, - }, - slug: 'product-filters', - productPage: '/product/hoodie/', -}; - -test.describe( 'Filters Overlay Template Part', () => { - test.beforeEach( async ( { admin, requestUtils } ) => { - await requestUtils.activatePlugin( - 'woocommerce-blocks-test-enable-experimental-features' - ); - await admin.visitSiteEditor( { - postType: 'wp_template_part', - postId: 'woocommerce/woocommerce//product-filters-overlay', - canvas: 'edit', - } ); - } ); - - test( 'should be visible in the template parts list', async ( { - page, - admin, - } ) => { - await admin.visitSiteEditor( { - postType: 'wp_template_part', - } ); - const block = page - .getByLabel( 'Patterns content' ) - .getByText( 'Filters Overlay' ) - .and( page.getByRole( 'button' ) ); - await expect( block ).toBeVisible(); - } ); - - test( 'should render the correct inner blocks', async ( { editor } ) => { - const productFiltersTemplatePart = editor.canvas - .locator( '[data-type="core/template-part"]' ) - .filter( { - has: editor.canvas.getByLabel( - templatePartData.selectors.editor.blocks.productFilters - .blockLabel - ), - } ); - - await expect( productFiltersTemplatePart ).toBeVisible(); - } ); - - test.describe( 'frontend', () => { - test.beforeEach( async ( { admin } ) => { - await admin.visitSiteEditor( { - postId: `woocommerce/woocommerce//archive-product`, - postType: 'wp_template', - canvas: 'edit', - } ); - } ); - - // Since we need to overhaul the overlay area, we can skip this test for now. - // eslint-disable-next-line playwright/no-skipped-test - test.skip( 'should open and close the dialog when clicking on the Product Filters Overlay Navigation block', async ( { - editor, - page, - frontendUtils, - } ) => { - await editor.setContent( '' ); - await editor.openGlobalBlockInserter(); - await page - .getByText( - templatePartData.selectors.editor.blocks.productFilters - .title - ) - .click(); - const block = editor.canvas.getByLabel( - templatePartData.selectors.editor.blocks.productFilters - .blockLabel - ); - await expect( block ).toBeVisible(); - - // This forces the list view to show the inner blocks of the Product Filters template part. - await editor.canvas - .getByLabel( - templatePartData.selectors.editor.blocks.activeFilters - .blockLabel - ) - .click(); - - await editor.openDocumentSettingsSidebar(); - await page.getByLabel( 'Document Overview' ).click(); - await page - .getByRole( 'link', { - name: templatePartData.selectors.editor.blocks - .productFilters.title, - } ) - .nth( 1 ) - .click(); - - const layoutSettings = editor.page.getByText( - 'OverlayNeverMobileAlways' - ); - await layoutSettings.getByLabel( 'Always' ).click(); - await editor.page - .getByRole( 'link', { - name: templatePartData.selectors.editor.blocks - .productFiltersOverlayNavigation.title, - } ) - .click(); - - await editor.saveSiteEditorEntities( { - isOnlyCurrentEntityDirty: false, - } ); - - await page.goto( '/shop/' ); - - const productFiltersOverlayNavigation = ( - await frontendUtils.getBlockByName( - templatePartData.selectors.editor.blocks - .productFiltersOverlayNavigation.name - ) - ).filter( { - has: page.locator( ':visible' ), - } ); - - await expect( productFiltersOverlayNavigation ).toBeVisible(); - - await page - .locator( '.wc-block-product-filters-overlay-navigation' ) - .first() - .click(); - - const productFiltersDialog = page.locator( - '.wc-block-product-filters--dialog-open' - ); - - await expect( productFiltersDialog ).toBeVisible(); - - const productFiltersDialogCloseButton = ( - await frontendUtils.getBlockByName( - templatePartData.selectors.editor.blocks - .productFiltersOverlayNavigation.name - ) - ).filter( { hasText: 'Close' } ); - - await expect( productFiltersDialogCloseButton ).toBeVisible(); - - await productFiltersDialogCloseButton.click(); - - await expect( productFiltersDialog ).toBeHidden(); - } ); - - // Since we need to overhaul the overlay area, we can skip this test for now. - // eslint-disable-next-line playwright/no-skipped-test - test.skip( 'should hide Product Filters Overlay Navigation block when the Overlay mode is set to `Never`', async ( { - editor, - page, - frontendUtils, - } ) => { - await editor.setContent( '' ); - await editor.openGlobalBlockInserter(); - await page - .getByText( - templatePartData.selectors.editor.blocks.productFilters - .title - ) - .click(); - const block = editor.canvas.getByLabel( - templatePartData.selectors.editor.blocks.productFilters - .blockLabel - ); - await expect( block ).toBeVisible(); - - // This forces the list view to show the inner blocks of the Product Filters template part. - await editor.canvas - .getByLabel( - templatePartData.selectors.editor.blocks.activeFilters - .blockLabel - ) - .click(); - - await editor.openDocumentSettingsSidebar(); - await page.getByLabel( 'Document Overview' ).click(); - await page - .getByRole( 'link', { - name: templatePartData.selectors.editor.blocks - .productFilters.title, - } ) - .nth( 1 ) - .click(); - - const layoutSettings = editor.page.getByText( - 'OverlayNeverMobileAlways' - ); - await layoutSettings.getByLabel( 'Never' ).click(); - - await editor.saveSiteEditorEntities( { - isOnlyCurrentEntityDirty: true, - } ); - - await page.goto( '/shop/' ); - - const productFiltersOverlayNavigation = ( - await frontendUtils.getBlockByName( - templatePartData.selectors.editor.blocks - .productFiltersOverlayNavigation.name - ) - ).filter( { - has: page.locator( ':visible' ), - } ); - - await expect( productFiltersOverlayNavigation ).toBeHidden(); - } ); - - // Since we need to overhaul the overlay area, we can skip this test for now. - // eslint-disable-next-line playwright/no-skipped-test - test.skip( 'should hide Product Filters Overlay Navigation block when the Overlay mode is set to `Mobile` and user is on desktop', async ( { - editor, - page, - frontendUtils, - } ) => { - await editor.setContent( '' ); - await editor.openGlobalBlockInserter(); - await page - .getByText( - templatePartData.selectors.editor.blocks.productFilters - .title - ) - .click(); - const block = editor.canvas.getByLabel( - templatePartData.selectors.editor.blocks.productFilters - .blockLabel - ); - await expect( block ).toBeVisible(); - - // This forces the list view to show the inner blocks of the Product Filters template part. - await editor.canvas - .getByLabel( - templatePartData.selectors.editor.blocks.activeFilters - .blockLabel - ) - .click(); - - await editor.openDocumentSettingsSidebar(); - await page.getByLabel( 'Document Overview' ).click(); - await page - .getByRole( 'link', { - name: templatePartData.selectors.editor.blocks - .productFilters.title, - } ) - .nth( 1 ) - .click(); - - const layoutSettings = editor.page.getByText( - 'OverlayNeverMobileAlways' - ); - await layoutSettings.getByLabel( 'Mobile' ).click(); - await editor.page - .getByRole( 'link', { - name: templatePartData.selectors.editor.blocks - .productFiltersOverlayNavigation.title, - } ) - .click(); - - await editor.saveSiteEditorEntities( { - isOnlyCurrentEntityDirty: false, - } ); - - await page.goto( '/shop/' ); - - const productFiltersOverlayNavigation = ( - await frontendUtils.getBlockByName( - templatePartData.selectors.editor.blocks - .productFiltersOverlayNavigation.name - ) - ).filter( { - has: page.locator( ':visible' ), - } ); - - await expect( productFiltersOverlayNavigation ).toBeHidden(); - } ); - } ); -} ); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/product-filters/product-filters-template-part.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/product-filters/product-filters-template-part.block_theme.spec.ts deleted file mode 100644 index 3d16f0c9e89..00000000000 --- a/plugins/woocommerce-blocks/tests/e2e/tests/product-filters/product-filters-template-part.block_theme.spec.ts +++ /dev/null @@ -1,80 +0,0 @@ -/** - * External dependencies - */ -import { test, expect, BlockData } from '@woocommerce/e2e-utils'; - -const blockData: BlockData = { - name: 'Product Filters (Experimental)', - slug: 'woocommerce/product-filters', - mainClass: '.wp-block-woocommerce-product-filters', - selectors: { - editor: { - block: '.wp-block-woocommerce-product-filters', - }, - frontend: {}, - }, -}; - -test.describe( 'Product Filters Template Part', () => { - test.beforeEach( async ( { admin, requestUtils } ) => { - await requestUtils.activatePlugin( - 'woocommerce-blocks-test-enable-experimental-features' - ); - await admin.visitSiteEditor( { - postType: 'wp_template_part', - postId: 'woocommerce/woocommerce//product-filters', - canvas: 'edit', - } ); - } ); - - test( 'should be visible in the templates part list', async ( { - page, - admin, - } ) => { - await admin.visitSiteEditor( { - postType: 'wp_template_part', - } ); - const templatePart = page - .getByLabel( 'Patterns content' ) - .getByText( 'Product Filters (Experimental)', { exact: true } ) - .and( page.getByRole( 'button' ) ); - await expect( templatePart ).toBeVisible(); - } ); - - test( 'should render the Product Filters block', async ( { editor } ) => { - const productFiltersBlock = editor.canvas.getByLabel( - `Block: ${ blockData.name }` - ); - await expect( productFiltersBlock ).toBeVisible(); - } ); - - test( 'Filters > can be added multiple times', async ( { editor } ) => { - const block = editor.canvas.getByLabel( `Block: ${ blockData.name }` ); - await expect( block ).toBeVisible(); - - const searchTerms = [ 'Color (Experimental)', 'Active (Experimental)' ]; - - for ( const filter of searchTerms ) { - await editor.selectBlocks( blockData.selectors.editor.block ); - - const addBlock = block.getByRole( 'button', { - name: 'Add block', - } ); - - await addBlock.click(); - - await editor.page.getByPlaceholder( 'Search' ).fill( filter ); - - const searchResult = editor.page.getByRole( 'option', { - name: filter, - } ); - await expect( searchResult ).toBeVisible(); - - await searchResult.click(); - - const _locator = `[aria-label="Block: ${ filter }"]`; - - await expect( editor.canvas.locator( _locator ) ).toHaveCount( 2 ); - } - } ); -} ); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/product-filters/product-filters.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/product-filters/product-filters.block_theme.spec.ts index e6838d7c37d..e4df48b8750 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/product-filters/product-filters.block_theme.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/product-filters/product-filters.block_theme.spec.ts @@ -183,63 +183,6 @@ test.describe( `${ blockData.name }`, () => { ).toBeVisible(); } ); - test( 'should display the correct inspector setting controls', async ( { - editor, - pageObject, - } ) => { - await pageObject.addProductFiltersBlock( { cleanContent: true } ); - - const filtersBlock = editor.canvas.getByLabel( - blockData.selectors.editor.blocks.filters.label - ); - await expect( filtersBlock ).toBeVisible(); - - const overlayBlock = editor.canvas.getByLabel( - blockData.selectors.editor.blocks.overlay.label - ); - - // Overlay mode is set to 'Never' by default so the block should be hidden - await expect( overlayBlock ).toBeHidden(); - - await editor.openDocumentSettingsSidebar(); - - // Layout settings - await expect( - editor.page.getByText( 'LayoutJustificationOrientation' ) - ).toBeVisible(); - - // Overlay settings - const overlayModeSettings = [ 'Never', 'Mobile', 'Always' ]; - - await expect( editor.page.getByText( 'Overlay' ) ).toBeVisible(); - - for ( const mode of overlayModeSettings ) { - await expect( editor.page.getByText( mode ) ).toBeVisible(); - } - - await editor.page.getByLabel( 'Never' ).click(); - - await expect( editor.page.getByText( 'Edit overlay' ) ).toBeHidden(); - - await expect( overlayBlock ).toBeHidden(); - - await editor.page.getByLabel( 'Mobile' ).click(); - - await expect( editor.page.getByText( 'Edit overlay' ) ).toBeVisible(); - - await expect( overlayBlock ).toBeVisible(); - - await editor.page.getByLabel( 'Always' ).click(); - - await expect( editor.page.getByText( 'Edit overlay' ) ).toBeVisible(); - - await expect( overlayBlock ).toBeVisible(); - - await editor.page.getByLabel( 'Never' ).click(); - - await expect( overlayBlock ).toBeHidden(); - } ); - test( 'Layout > default to vertical stretch', async ( { editor, pageObject, diff --git a/plugins/woocommerce/assets/images/blocks/product-filters-overlay/overlay-drawer-fullscreen.svg b/plugins/woocommerce/assets/images/blocks/product-filters-overlay/overlay-drawer-fullscreen.svg deleted file mode 100644 index 98ca133b371..00000000000 --- a/plugins/woocommerce/assets/images/blocks/product-filters-overlay/overlay-drawer-fullscreen.svg +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/plugins/woocommerce/assets/images/blocks/product-filters-overlay/overlay-drawer-left.svg b/plugins/woocommerce/assets/images/blocks/product-filters-overlay/overlay-drawer-left.svg deleted file mode 100644 index c6e52e02485..00000000000 --- a/plugins/woocommerce/assets/images/blocks/product-filters-overlay/overlay-drawer-left.svg +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/plugins/woocommerce/assets/images/blocks/product-filters-overlay/overlay-drawer-right.svg b/plugins/woocommerce/assets/images/blocks/product-filters-overlay/overlay-drawer-right.svg deleted file mode 100644 index 16de07ee32d..00000000000 --- a/plugins/woocommerce/assets/images/blocks/product-filters-overlay/overlay-drawer-right.svg +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/plugins/woocommerce/changelog/52041-product-filters-remove-template-parts b/plugins/woocommerce/changelog/52041-product-filters-remove-template-parts new file mode 100644 index 00000000000..9fe1fa1d755 --- /dev/null +++ b/plugins/woocommerce/changelog/52041-product-filters-remove-template-parts @@ -0,0 +1,4 @@ +Significance: patch +Type: tweak +Comment: Experimental block - remove template parts + diff --git a/plugins/woocommerce/src/Blocks/BlockTemplatesRegistry.php b/plugins/woocommerce/src/Blocks/BlockTemplatesRegistry.php index 76cec00b179..309315397bf 100644 --- a/plugins/woocommerce/src/Blocks/BlockTemplatesRegistry.php +++ b/plugins/woocommerce/src/Blocks/BlockTemplatesRegistry.php @@ -17,8 +17,6 @@ use Automattic\WooCommerce\Blocks\Templates\ProductCategoryTemplate; use Automattic\WooCommerce\Blocks\Templates\ProductTagTemplate; use Automattic\WooCommerce\Blocks\Templates\ProductSearchResultsTemplate; use Automattic\WooCommerce\Blocks\Templates\SingleProductTemplate; -use Automattic\WooCommerce\Blocks\Templates\ProductFiltersTemplate; -use Automattic\WooCommerce\Blocks\Templates\ProductFiltersOverlayTemplate; /** * BlockTemplatesRegistry class. @@ -61,11 +59,6 @@ class BlockTemplatesRegistry { MiniCartTemplate::SLUG => new MiniCartTemplate(), CheckoutHeaderTemplate::SLUG => new CheckoutHeaderTemplate(), ); - - if ( Features::is_enabled( 'experimental-blocks' ) ) { - $template_parts[ ProductFiltersTemplate::SLUG ] = new ProductFiltersTemplate(); - $template_parts[ ProductFiltersOverlayTemplate::SLUG ] = new ProductFiltersOverlayTemplate(); - } } else { $template_parts = array(); } diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/ProductFilters.php b/plugins/woocommerce/src/Blocks/BlockTypes/ProductFilters.php index fdfa5f22452..3e0fb1fa561 100644 --- a/plugins/woocommerce/src/Blocks/BlockTypes/ProductFilters.php +++ b/plugins/woocommerce/src/Blocks/BlockTypes/ProductFilters.php @@ -1,8 +1,6 @@ asset_data_registry->add( 'isWidgetEditor', 'widgets.php' === $pagenow || 'customize.php' === $pagenow ); } - /** - * Return the dialog content. - * - * @return string - */ - protected function render_dialog() { - $template_part = BlockTemplateUtils::get_template_part( 'product-filters-overlay' ); - - $html = $this->render_template_part( $template_part ); - - $html = strtr( - '', - array( - '{{html}}' => $html, - ) - ); - - $p = new \WP_HTML_Tag_Processor( $html ); - if ( $p->next_tag() ) { - $p->set_attribute( 'data-wc-interactive', wp_json_encode( array( 'namespace' => 'woocommerce/product-filters' ), JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP ) ); - $p->set_attribute( 'data-wc-bind--hidden', '!state.isDialogOpen' ); - $p->set_attribute( 'data-wc-class--wc-block-product-filters--dialog-open', 'state.isDialogOpen' ); - $p->set_attribute( 'data-wc-class--wc-block-product-filters--with-admin-bar', 'context.hasPageWithWordPressAdminBar' ); - $html = $p->get_updated_html(); - } - - return $html; - } - - /** - * This method is used to render the template part. For each template part, we parse the blocks and render them. - * - * @param string $template_part The template part to render. - * @return string The rendered template part. - */ - protected function render_template_part( $template_part ) { - $parsed_blocks = parse_blocks( $template_part ); - $wrapper_template_part_block = $parsed_blocks[0]; - $html = $wrapper_template_part_block['innerHTML']; - $target_div = '
'; - - $template_part_content_html = array_reduce( - $wrapper_template_part_block['innerBlocks'], - function ( $carry, $item ) { - if ( 'core/template-part' === $item['blockName'] ) { - $inner_template_part = BlockTemplateUtils::get_template_part( $item['attrs']['slug'] ); - $inner_template_part_content_html = $this->render_template_part( $inner_template_part ); - - return $carry . $inner_template_part_content_html; - } - return $carry . render_block( $item ); - }, - '' - ); - - $html = str_replace( $target_div, $template_part_content_html . $target_div, $html ); - - return $html; - } - - /** - * Inject dialog into the product filters HTML. - * - * @param string $product_filters_html The Product Filters HTML. - * @param string $dialog_html The dialog HTML. - * - * @return string - */ - protected function inject_dialog( $product_filters_html, $dialog_html ) { - // Find the position of the last . - $pos = strrpos( $product_filters_html, '' ); - - if ( $pos ) { - // Inject the dialog_html at the correct position. - $html = substr_replace( $product_filters_html, $dialog_html, $pos, 0 ); - - return $html; - } - - return $product_filters_html; - } - /** * Include and render the block. * @@ -151,13 +65,6 @@ class ProductFilters extends AbstractBlock { $tags->set_attribute( 'data-wc-navigation-id', $this->generate_navigation_id( $block ) ); $tags->set_attribute( 'data-wc-watch', 'callbacks.maybeNavigate' ); - if ( - 'always' === $attributes['overlay'] || - ( 'mobile' === $attributes['overlay'] && wp_is_mobile() ) - ) { - return $this->inject_dialog( $tags->get_updated_html(), $this->render_dialog() ); - } - return $tags->get_updated_html(); } } diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/ProductFiltersOverlayNavigation.php b/plugins/woocommerce/src/Blocks/BlockTypes/ProductFiltersOverlayNavigation.php index ebfdaba12d5..9517d14c168 100644 --- a/plugins/woocommerce/src/Blocks/BlockTypes/ProductFiltersOverlayNavigation.php +++ b/plugins/woocommerce/src/Blocks/BlockTypes/ProductFiltersOverlayNavigation.php @@ -35,11 +35,6 @@ class ProductFiltersOverlayNavigation extends AbstractBlock { 'class' => 'wc-block-product-filters-overlay-navigation', ) ); - $overlay_mode = isset( $block->context['woocommerce/product-filters/overlay'] ) ? $block->context['woocommerce/product-filters/overlay'] : 'never'; - - if ( 'open-overlay' === $attributes['triggerType'] && ( 'never' === $overlay_mode || ( ! wp_is_mobile() && 'mobile' === $overlay_mode ) ) ) { - return null; - } $html = strtr( '
diff --git a/plugins/woocommerce/src/Blocks/Templates/ProductFiltersOverlayTemplate.php b/plugins/woocommerce/src/Blocks/Templates/ProductFiltersOverlayTemplate.php deleted file mode 100644 index 38c19590275..00000000000 --- a/plugins/woocommerce/src/Blocks/Templates/ProductFiltersOverlayTemplate.php +++ /dev/null @@ -1,47 +0,0 @@ -name ) { - return $variations; - } - - // If template part is modified, Core will pick it up and register a variation - // for it. Check if the variation already exists before adding it. - foreach ( $variations as $variation ) { - if ( ! empty( $variation['attributes']['slug'] ) && 'product-filters' === $variation['attributes']['slug'] ) { - return $variations; - } - } - - $theme = 'woocommerce/woocommerce'; - // Check if current theme overrides this template part. - if ( BlockTemplateUtils::theme_has_template_part( 'product-filters' ) ) { - $theme = wp_get_theme()->get( 'TextDomain' ); - } - - $variations[] = array( - 'name' => 'file_' . self::SLUG, - 'title' => $this->get_template_title(), - 'description' => true, - 'attributes' => array( - 'slug' => self::SLUG, - 'theme' => $theme, - 'area' => $this->template_area, - ), - 'scope' => array( 'inserter' ), - 'icon' => 'layout', - ); - return $variations; - } -} diff --git a/plugins/woocommerce/src/Blocks/Utils/BlockTemplateUtils.php b/plugins/woocommerce/src/Blocks/Utils/BlockTemplateUtils.php index 8e6133155fa..3ab02b295ce 100644 --- a/plugins/woocommerce/src/Blocks/Utils/BlockTemplateUtils.php +++ b/plugins/woocommerce/src/Blocks/Utils/BlockTemplateUtils.php @@ -319,11 +319,6 @@ class BlockTemplateUtils { 'mini-cart.html', ); - if ( Features::is_enabled( 'experimental-blocks' ) ) { - $wp_template_part_filenames[] = 'product-filters.html'; - $wp_template_part_filenames[] = 'product-filters-overlay.html'; - } - /* * This may return the blockified directory for wp_templates. * At the moment every template file has a corresponding blockified file. diff --git a/plugins/woocommerce/templates/parts/product-filters-overlay.html b/plugins/woocommerce/templates/parts/product-filters-overlay.html deleted file mode 100644 index 0e39b331cf8..00000000000 --- a/plugins/woocommerce/templates/parts/product-filters-overlay.html +++ /dev/null @@ -1,8 +0,0 @@ - -
- -
- - -
- diff --git a/plugins/woocommerce/templates/parts/product-filters.html b/plugins/woocommerce/templates/parts/product-filters.html deleted file mode 100644 index a4e82272829..00000000000 --- a/plugins/woocommerce/templates/parts/product-filters.html +++ /dev/null @@ -1,28 +0,0 @@ - -
- -

Filters

- - - - - - - -
- -
- Apply -
- -
- -
-