diff --git a/packages/js/data/changelog/add-39125 b/packages/js/data/changelog/add-39125 new file mode 100644 index 00000000000..7da3d857f7b --- /dev/null +++ b/packages/js/data/changelog/add-39125 @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Add catalog_visibility property to the Product type diff --git a/packages/js/data/src/products/types.ts b/packages/js/data/src/products/types.ts index 42ca8bbc6dd..ad30ac27c70 100644 --- a/packages/js/data/src/products/types.ts +++ b/packages/js/data/src/products/types.ts @@ -42,6 +42,12 @@ export type ProductDimensions = { length: string; }; +export type ProductCatalogVisibility = + | 'visible' + | 'catalog' + | 'search' + | 'hidden'; + export type Product< Status = ProductStatus, Type = ProductType > = Omit< Schema.Post, 'status' | 'categories' @@ -53,6 +59,7 @@ export type Product< Status = ProductStatus, Type = ProductType > = Omit< backorders_allowed: boolean; button_text: string; categories: Pick< ProductCategory, 'id' | 'name' | 'slug' >[]; + catalog_visibility: ProductCatalogVisibility; date_created: string; date_created_gmt: string; date_modified: string; diff --git a/packages/js/product-editor/changelog/add-39125 b/packages/js/product-editor/changelog/add-39125 new file mode 100644 index 00000000000..c9974074015 --- /dev/null +++ b/packages/js/product-editor/changelog/add-39125 @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Create product search and catalog visibility blocks diff --git a/packages/js/product-editor/src/blocks/catalog-visibility/block.json b/packages/js/product-editor/src/blocks/catalog-visibility/block.json new file mode 100644 index 00000000000..987aeb070b6 --- /dev/null +++ b/packages/js/product-editor/src/blocks/catalog-visibility/block.json @@ -0,0 +1,31 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 2, + "name": "woocommerce/product-catalog-visibility-field", + "description": "A checkbox to manage the catalog visibility of the product.", + "title": "Product catalog visibility", + "category": "widgets", + "keywords": [ "products", "catalog" ], + "textdomain": "default", + "attributes": { + "label": { + "type": "string", + "__experimentalRole": "content" + }, + "visibilty": { + "type": "string", + "enum": [ "visible", "catalog", "search", "hidden" ], + "default": "visible" + } + }, + "supports": { + "align": false, + "html": false, + "multiple": false, + "reusable": false, + "inserter": false, + "lock": false, + "__experimentalToolbar": false + }, + "editorStyle": "file:./editor.css" +} diff --git a/packages/js/product-editor/src/blocks/catalog-visibility/edit.tsx b/packages/js/product-editor/src/blocks/catalog-visibility/edit.tsx new file mode 100644 index 00000000000..c9181d83cc0 --- /dev/null +++ b/packages/js/product-editor/src/blocks/catalog-visibility/edit.tsx @@ -0,0 +1,63 @@ +/** + * External dependencies + */ +import { useBlockProps } from '@wordpress/block-editor'; +import { CheckboxControl } from '@wordpress/components'; +import { useEntityProp } from '@wordpress/core-data'; +import { createElement } from '@wordpress/element'; +import { Product } from '@woocommerce/data'; + +/** + * Internal dependencies + */ +import { CatalogVisibilityBlockAttributes } from './types'; + +export function Edit( { + attributes, +}: { + attributes: CatalogVisibilityBlockAttributes; +} ) { + const { label, visibilty } = attributes; + + const blockProps = useBlockProps(); + + const [ catalogVisibility, setCatalogVisibility ] = useEntityProp< + Product[ 'catalog_visibility' ] + >( 'postType', 'product', 'catalog_visibility' ); + + const checked = + catalogVisibility === visibilty || catalogVisibility === 'hidden'; + + function handleChange( selected: boolean ) { + if ( selected ) { + if ( catalogVisibility === 'visible' ) { + setCatalogVisibility( visibilty ); + return; + } + setCatalogVisibility( 'hidden' ); + } else { + if ( catalogVisibility === 'hidden' ) { + if ( visibilty === 'catalog' ) { + setCatalogVisibility( 'search' ); + return; + } + if ( visibilty === 'search' ) { + setCatalogVisibility( 'catalog' ); + return; + } + return; + } + setCatalogVisibility( 'visible' ); + } + } + + return ( +