diff --git a/plugins/woocommerce-blocks/assets/js/blocks/breadcrumbs/block.json b/plugins/woocommerce-blocks/assets/js/blocks/breadcrumbs/block.json new file mode 100644 index 00000000000..9a0cd1681a6 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/breadcrumbs/block.json @@ -0,0 +1,47 @@ +{ + "name": "woocommerce/breadcrumbs", + "version": "1.0.0", + "title": "Store Breadcrumbs", + "description": "Enable customers to keep track of their location within the store and navigate back to parent pages.", + "category": "woocommerce", + "keywords": [ "WooCommerce" ], + "textdomain": "woo-gutenberg-products-block", + "attributes": { + "contentJustification": { + "type": "string" + }, + "fontSize": { + "type": "string", + "default": "small" + }, + "align": { + "type": "string", + "default": "wide" + } + }, + "supports": { + "align": [ "wide", "full" ], + "color": { + "background": false, + "link": true, + "__experimentalDefaultControls": { + "text": true, + "link": true + } + }, + "html": false, + "typography": { + "fontSize": true, + "lineHeight": true, + "__experimentalFontFamily": true, + "__experimentalFontStyle": true, + "__experimentalFontWeight": true, + "__experimentalTextTransform": true, + "__experimentalDefaultControls": { + "fontSize": true + } + } + }, + "apiVersion": 2, + "$schema": "https://schemas.wp.org/trunk/block.json" +} diff --git a/plugins/woocommerce-blocks/assets/js/blocks/breadcrumbs/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/breadcrumbs/edit.tsx new file mode 100644 index 00000000000..f68daead0d5 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/breadcrumbs/edit.tsx @@ -0,0 +1,29 @@ +/** + * External dependencies + */ +import { useBlockProps } from '@wordpress/block-editor'; +import { Disabled } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +export interface Attributes { + className?: string; +} + +const Edit = () => { + const blockProps = useBlockProps( { + className: 'woocommerce wc-block-breadcrumbs', + } ); + + return ( +
+ + + { __( 'Breadcrumbs', 'woo-gutenberg-products-block' ) } + + { __( ' / Navigation / Path', 'woo-gutenberg-products-block' ) } + +
+ ); +}; + +export default Edit; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/breadcrumbs/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/breadcrumbs/index.tsx new file mode 100644 index 00000000000..3803cf2020a --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/breadcrumbs/index.tsx @@ -0,0 +1,29 @@ +/** + * External dependencies + */ +import { registerBlockType } from '@wordpress/blocks'; +import { Icon, queryPagination } from '@wordpress/icons'; + +/** + * Internal dependencies + */ +import metadata from './block.json'; +import edit from './edit'; + +registerBlockType( metadata, { + icon: { + src: ( + + ), + }, + attributes: { + ...metadata.attributes, + }, + edit, + save() { + return null; + }, +} ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/breadcrumbs/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/breadcrumbs/style.scss new file mode 100644 index 00000000000..a455e9008dc --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/breadcrumbs/style.scss @@ -0,0 +1,3 @@ +.woocommerce.wc-block-breadcrumbs { + font-size: inherit; +} diff --git a/plugins/woocommerce-blocks/bin/webpack-entries.js b/plugins/woocommerce-blocks/bin/webpack-entries.js index 5bdb771020a..46e0e773b92 100644 --- a/plugins/woocommerce-blocks/bin/webpack-entries.js +++ b/plugins/woocommerce-blocks/bin/webpack-entries.js @@ -20,6 +20,7 @@ const blocks = { customDir: 'reviews/all-reviews', }, 'attribute-filter': {}, + breadcrumbs: {}, cart: {}, 'catalog-sorting': {}, checkout: {}, diff --git a/plugins/woocommerce-blocks/src/BlockTypes/Breadcrumbs.php b/plugins/woocommerce-blocks/src/BlockTypes/Breadcrumbs.php new file mode 100644 index 00000000000..dc25d2258bd --- /dev/null +++ b/plugins/woocommerce-blocks/src/BlockTypes/Breadcrumbs.php @@ -0,0 +1,57 @@ +%4$s', + esc_attr( $classes_and_styles['classes'] ), + esc_attr( $classname ), + esc_attr( $classes_and_styles['styles'] ), + $breadcrumb + ); + } + + /** + * Get the frontend script handle for this block type. + * + * @param string $key Data to get, or default to everything. + */ + protected function get_block_type_script( $key = null ) { + return null; + } +} diff --git a/plugins/woocommerce-blocks/src/BlockTypesController.php b/plugins/woocommerce-blocks/src/BlockTypesController.php index dadfc4ee512..ad4ea3f4ee6 100644 --- a/plugins/woocommerce-blocks/src/BlockTypesController.php +++ b/plugins/woocommerce-blocks/src/BlockTypesController.php @@ -168,6 +168,7 @@ final class BlockTypesController { 'AllProducts', 'AllReviews', 'AttributeFilter', + 'Breadcrumbs', 'CatalogSorting', 'ClassicTemplate', 'CustomerAccount', @@ -249,6 +250,7 @@ final class BlockTypesController { $block_types = array_diff( $block_types, [ + 'Breadcrumbs', 'CatalogSorting', 'ClassicTemplate', 'ProductResultsCount', diff --git a/plugins/woocommerce-blocks/tests/e2e/specs/backend/breadcrumbs.test.js b/plugins/woocommerce-blocks/tests/e2e/specs/backend/breadcrumbs.test.js new file mode 100644 index 00000000000..cddb6e1b1d8 --- /dev/null +++ b/plugins/woocommerce-blocks/tests/e2e/specs/backend/breadcrumbs.test.js @@ -0,0 +1,61 @@ +/** + * External dependencies + */ +import { + canvas, + createNewPost, + insertBlock, + switchUserToAdmin, +} from '@wordpress/e2e-test-utils'; +import { searchForBlock } from '@wordpress/e2e-test-utils/build/inserter'; + +/** + * Internal dependencies + */ +import { + filterCurrentBlocks, + goToSiteEditor, + useTheme, + waitForCanvas, +} from '../../utils.js'; + +const block = { + name: 'Store Breadcrumbs', + slug: 'woocommerce/breadcrumbs', + class: '.wc-block-breadcrumbs', +}; + +describe( `${ block.name } Block`, () => { + it( 'in can not be inserted in a post', async () => { + await switchUserToAdmin(); + await createNewPost( { + postType: 'post', + title: block.name, + } ); + await searchForBlock( block.name ); + expect( page ).toMatch( 'No results found.' ); + } ); + + describe( 'in FSE editor', () => { + useTheme( 'emptytheme' ); + + beforeEach( async () => { + await goToSiteEditor(); + await waitForCanvas(); + } ); + + it( 'can be inserted in FSE area', async () => { + await insertBlock( block.name ); + await expect( canvas() ).toMatchElement( block.class ); + } ); + + it( 'can be inserted more than once', async () => { + await insertBlock( block.name ); + await insertBlock( block.name ); + const foo = await filterCurrentBlocks( + ( b ) => b.name === block.slug + ); + expect( foo ).toHaveLength( 2 ); + } ); + } ); +} );