From ae207242109f0b5e79fa82189a49500c8ff283d6 Mon Sep 17 00:00:00 2001 From: Fernando Marichal Date: Fri, 13 Sep 2024 18:52:12 -0300 Subject: [PATCH] Add inspector controls to Product Search block (#51247) * Add inspector controls to product search * Add changelog * Move inspector panel to Styles * Remove not used Fragment * improve code * Rename enum * Rename type ProductSearchBlockProps * Use PositionOptions constant * Change hook namespace --- .../js/blocks/product-search/constants.ts | 10 ++ .../assets/js/blocks/product-search/index.tsx | 38 ++++- .../product-search/inspector-controls.tsx | 156 ++++++++++++++++++ .../assets/js/blocks/product-search/types.ts | 23 +++ .../assets/js/blocks/product-search/utils.ts | 75 +++++++++ ...-47890_inspector_control_to_product_search | 4 + 6 files changed, 303 insertions(+), 3 deletions(-) create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/product-search/constants.ts create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/product-search/inspector-controls.tsx create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/product-search/types.ts create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/product-search/utils.ts create mode 100644 plugins/woocommerce/changelog/add-47890_inspector_control_to_product_search diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-search/constants.ts b/plugins/woocommerce-blocks/assets/js/blocks/product-search/constants.ts new file mode 100644 index 00000000000..ae42399cf3d --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-search/constants.ts @@ -0,0 +1,10 @@ +export const SEARCH_BLOCK_NAME = 'core/search'; +export const SEARCH_VARIATION_NAME = 'woocommerce/product-search'; + +export enum PositionOptions { + OUTSIDE = 'button-outside', + INSIDE = 'button-inside', + NO_BUTTON = 'no-button', + BUTTON_ONLY = 'button-only', + INPUT_AND_BUTTON = 'input-and-button', +} diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-search/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-search/index.tsx index 9691e2cdf9a..89bd2ac4dac 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-search/index.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-search/index.tsx @@ -2,6 +2,7 @@ /** * External dependencies */ +import { addFilter } from '@wordpress/hooks'; import { store as blockEditorStore, Warning } from '@wordpress/block-editor'; import { useDispatch, useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; @@ -9,6 +10,7 @@ import { Icon, search } from '@wordpress/icons'; import { getSettingWithCoercion } from '@woocommerce/settings'; import { isBoolean } from '@woocommerce/types'; import { Button } from '@wordpress/components'; +import type { Block as BlockType } from '@wordpress/blocks'; import { // @ts-ignore waiting for @types/wordpress__blocks update registerBlockVariation, @@ -21,8 +23,10 @@ import { */ import './style.scss'; import './editor.scss'; +import { withProductSearchControls } from './inspector-controls'; import Block from './block'; import Edit from './edit'; +import { SEARCH_BLOCK_NAME, SEARCH_VARIATION_NAME } from './constants'; const isBlockVariationAvailable = getSettingWithCoercion( 'isBlockVariationAvailable', @@ -71,6 +75,7 @@ const PRODUCT_SEARCH_ATTRIBUTES = { query: { post_type: 'product', }, + namespace: SEARCH_VARIATION_NAME, }; const DeprecatedBlockEdit = ( { clientId }: { clientId: string } ) => { @@ -115,7 +120,7 @@ const DeprecatedBlockEdit = ( { clientId }: { clientId: string } ) => { ); }; -registerBlockType( 'woocommerce/product-search', { +registerBlockType( SEARCH_VARIATION_NAME, { title: __( 'Product Search', 'woocommerce' ), apiVersion: 3, icon: { @@ -146,7 +151,7 @@ registerBlockType( 'woocommerce/product-search', { isMatch: ( { idBase, instance } ) => idBase === 'woocommerce_product_search' && !! instance?.raw, transform: ( { instance } ) => - createBlock( 'woocommerce/product-search', { + createBlock( SEARCH_VARIATION_NAME, { label: instance.raw.title || PRODUCT_SEARCH_ATTRIBUTES.label, @@ -172,9 +177,31 @@ registerBlockType( 'woocommerce/product-search', { }, } ); +function registerProductSearchNamespace( props: BlockType, blockName: string ) { + if ( blockName === 'core/search' ) { + // Gracefully handle if settings.attributes is undefined. + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore -- We need this because `attributes` is marked as `readonly` + props.attributes = { + ...props.attributes, + namespace: { + type: 'string', + }, + }; + } + + return props; +} + +addFilter( + 'blocks.registerBlockType', + SEARCH_VARIATION_NAME, + registerProductSearchNamespace +); + if ( isBlockVariationAvailable ) { registerBlockVariation( 'core/search', { - name: 'woocommerce/product-search', + name: SEARCH_VARIATION_NAME, title: __( 'Product Search', 'woocommerce' ), icon: { src: ( @@ -199,4 +226,9 @@ if ( isBlockVariationAvailable ) { ), attributes: PRODUCT_SEARCH_ATTRIBUTES, } ); + addFilter( + 'editor.BlockEdit', + SEARCH_BLOCK_NAME, + withProductSearchControls + ); } diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-search/inspector-controls.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-search/inspector-controls.tsx new file mode 100644 index 00000000000..3212dd9e76e --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-search/inspector-controls.tsx @@ -0,0 +1,156 @@ +/** + * External dependencies + */ +import { type ElementType, useEffect, useState } from '@wordpress/element'; +import { EditorBlock } from '@woocommerce/types'; +import { __ } from '@wordpress/i18n'; +import { InspectorControls } from '@wordpress/block-editor'; +import { + PanelBody, + RadioControl, + ToggleControl, + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore - Ignoring because `__experimentalToggleGroupControl` is not yet in the type definitions. + // eslint-disable-next-line @wordpress/no-unsafe-wp-apis + __experimentalToggleGroupControl as ToggleGroupControl, + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore - Ignoring because `__experimentalToggleGroupControlOption` is not yet in the type definitions. + // eslint-disable-next-line @wordpress/no-unsafe-wp-apis + __experimentalToggleGroupControlOption as ToggleGroupControlOption, +} from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { + getInputAndButtonOption, + getSelectedRadioControlOption, + isInputAndButtonOption, + isWooSearchBlockVariation, +} from './utils'; +import { ButtonPositionProps, ProductSearchBlockProps } from './types'; +import { PositionOptions } from './constants'; + +const ProductSearchControls = ( props: ProductSearchBlockProps ) => { + const { attributes, setAttributes } = props; + const { buttonPosition, buttonUseIcon, showLabel } = attributes; + const [ initialPosition, setInitialPosition ] = + useState< ButtonPositionProps >( buttonPosition ); + + useEffect( () => { + if ( + isInputAndButtonOption( buttonPosition ) && + initialPosition !== buttonPosition + ) { + setInitialPosition( buttonPosition ); + } + }, [ buttonPosition ] ); + + return ( + + + & + PositionOptions.INPUT_AND_BUTTON + ) => { + if ( selected !== PositionOptions.INPUT_AND_BUTTON ) { + setAttributes( { + buttonPosition: selected, + } ); + } else { + const newButtonPosition = + getInputAndButtonOption( initialPosition ); + setAttributes( { + buttonPosition: newButtonPosition, + } ); + } + } } + /> + { buttonPosition !== PositionOptions.NO_BUTTON && ( + <> + { buttonPosition !== PositionOptions.BUTTON_ONLY && ( + { + setAttributes( { + buttonPosition: value, + } ); + } } + value={ getInputAndButtonOption( + buttonPosition + ) } + > + + + + ) } + { + setAttributes( { + buttonUseIcon: value, + } ); + } } + value={ buttonUseIcon } + > + + + + + ) } + + setAttributes( { + showLabel: showInputLabel, + } ) + } + /> + + + ); +}; + +export const withProductSearchControls = + < T extends EditorBlock< T > >( BlockEdit: ElementType ) => + ( props: ProductSearchBlockProps ) => { + return isWooSearchBlockVariation( props ) ? ( + <> + + + + ) : ( + + ); + }; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-search/types.ts b/plugins/woocommerce-blocks/assets/js/blocks/product-search/types.ts new file mode 100644 index 00000000000..290523ae727 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-search/types.ts @@ -0,0 +1,23 @@ +/** + * External dependencies + */ +import type { EditorBlock } from '@woocommerce/types'; + +export type ButtonPositionProps = + | 'button-outside' + | 'button-inside' + | 'no-button' + | 'button-only'; + +export interface SearchBlockAttributes { + buttonPosition: ButtonPositionProps; + buttonText?: string; + buttonUseIcon: boolean; + isSearchFieldHidden: boolean; + label?: string; + namespace?: string; + placeholder?: string; + showLabel: boolean; +} + +export type ProductSearchBlockProps = EditorBlock< SearchBlockAttributes >; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-search/utils.ts b/plugins/woocommerce-blocks/assets/js/blocks/product-search/utils.ts new file mode 100644 index 00000000000..5b70f82a27a --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-search/utils.ts @@ -0,0 +1,75 @@ +/** + * Internal dependencies + */ +import { + PositionOptions, + SEARCH_BLOCK_NAME, + SEARCH_VARIATION_NAME, +} from './constants'; +import { ButtonPositionProps, ProductSearchBlockProps } from './types'; + +/** + * Identifies if a block is a Search block variation from our conventions + * + * We are extending Gutenberg's core Search block with our variations, and + * also adding extra namespaced attributes. If those namespaced attributes + * are present, we can be fairly sure it is our own registered variation. + * + * @param {ProductSearchBlockProps} block - A WooCommerce block. + */ +export function isWooSearchBlockVariation( block: ProductSearchBlockProps ) { + return ( + block.name === SEARCH_BLOCK_NAME && + block.attributes?.namespace === SEARCH_VARIATION_NAME + ); +} + +/** + * Checks if the given button position is a valid option for input and button placement. + * + * The function verifies if the provided `buttonPosition` matches one of the predefined + * values for placing a button either inside or outside an input field. + * + * @param {string} buttonPosition - The position of the button to check. + */ +export function isInputAndButtonOption( buttonPosition: string ): boolean { + return ( + buttonPosition === 'button-outside' || + buttonPosition === 'button-inside' + ); +} + +/** + * Returns the option for the selected button position + * + * Based on the provided `buttonPosition`, the function returns a predefined option + * if the position is valid for input and button placement. If the position is not + * one of the predefined options, it returns the original `buttonPosition`. + * + * @param {string} buttonPosition - The position of the button to evaluate. + */ +export function getSelectedRadioControlOption( + buttonPosition: string +): string { + if ( isInputAndButtonOption( buttonPosition ) ) { + return PositionOptions.INPUT_AND_BUTTON; + } + return buttonPosition; +} + +/** + * Returns the appropriate option for input and button placement based on the given value + * + * This function checks if the provided `value` is a valid option for placing a button either + * inside or outside an input field. If the `value` is valid, it is returned as is. If the `value` + * is not valid, the function returns a default option. + * + * @param {ButtonPositionProps} value - The position of the button to evaluate. + */ +export function getInputAndButtonOption( value: ButtonPositionProps ) { + if ( isInputAndButtonOption( value ) ) { + return value; + } + // The default value is 'inside' for input and button. + return PositionOptions.OUTSIDE; +} diff --git a/plugins/woocommerce/changelog/add-47890_inspector_control_to_product_search b/plugins/woocommerce/changelog/add-47890_inspector_control_to_product_search new file mode 100644 index 00000000000..351aa293cfd --- /dev/null +++ b/plugins/woocommerce/changelog/add-47890_inspector_control_to_product_search @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Add inspector controls to Product Search block #51247