diff --git a/inc/Editor/DataBinding/FieldShortcode.php b/inc/Editor/DataBinding/FieldShortcode.php index 3738d5b0..1ac0dcf5 100644 --- a/inc/Editor/DataBinding/FieldShortcode.php +++ b/inc/Editor/DataBinding/FieldShortcode.php @@ -9,7 +9,7 @@ public static function init(): void { add_action( 'the_content', [ __CLASS__, 'render_frontend_fields' ] ); } - private static function get_meta_field_value( array $context, string $field ): string|null { + private static function get_meta_field_value( array $context, string $field ): string|int|null { $query_results = BlockBindings::execute_query( $context, $field ); if ( isset( $query_results['metadata'][ $field ]['value'] ) ) { @@ -46,19 +46,20 @@ public static function render_frontend_fields( string $content ): string { $status = 'parse-error'; $value = $fallback_value; } else { + $context = [ + 'blockName' => $query_data['remoteData']['blockName'], + 'queryInput' => $query_data['remoteData']['queryInput'], + ]; $block = [ 'context' => [ - BlockBindings::$context_name => [ - 'blockName' => $query_data['remoteData']['blockName'], - 'queryInput' => $query_data['remoteData']['queryInput'], - ], + BlockBindings::$context_name => $context, ], ]; $field = $query_data['selectedField']; $type = $query_data['type'] ?? 'field'; if ( 'meta' === $type ) { - $value = self::get_meta_field_value( $block['context'], $field ); + $value = self::get_meta_field_value( $context, $field ); } else { $value = BlockBindings::get_value( [ 'field' => $field ], $block ); } diff --git a/src/blocks/remote-data-container/components/field-shortcode/FieldShortcode.scss b/src/blocks/remote-data-container/components/field-shortcode/FieldShortcode.scss new file mode 100644 index 00000000..e56f65b9 --- /dev/null +++ b/src/blocks/remote-data-container/components/field-shortcode/FieldShortcode.scss @@ -0,0 +1,49 @@ + +.rdb-field-shortcode_dropdown, +.remote-data-blocks-field-shortcode-dropdown { + + .components-popover__content { + width: unset; + min-width: 160px; + max-width: 320px; + } +} + +.rdb-field-shortcode_dropdown { + + .components-toolbar-group { + display: flex; + flex-direction: column; + border-right: none; + + .components-dropdown-menu { + + .components-dropdown-menu__toggle { + display: flex; + flex-direction: row-reverse; + justify-content: space-between; + width: 100%; + } + } + } +} + +.remote-data-blocks-inline-field { + + span.components-menu-item__item { + width: 100%; + + .remote-data-blocks-inline-field-choice { + + width: 100%; + + .components-base-control__field { + display: flex; + flex-direction: row; + justify-content: space-between; + } + } + + } +} + diff --git a/src/blocks/remote-data-container/components/field-shortcode/FieldShortcodeButton.tsx b/src/blocks/remote-data-container/components/field-shortcode/FieldShortcodeButton.tsx index 3be0959a..13456f4f 100644 --- a/src/blocks/remote-data-container/components/field-shortcode/FieldShortcodeButton.tsx +++ b/src/blocks/remote-data-container/components/field-shortcode/FieldShortcodeButton.tsx @@ -1,18 +1,21 @@ import { BlockControls } from '@wordpress/block-editor'; -import { Modal, ToolbarButton, ToolbarGroup } from '@wordpress/components'; +import { ToolbarDropdownMenu, ToolbarGroup } from '@wordpress/components'; import { useEffect, useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { RichTextFormat, insertObject, WPFormatEditProps } from '@wordpress/rich-text'; +import { FieldShortcodeSelectExisting } from './FieldShortcodeSelectExisting'; +import { FieldShortcodeSelectMeta } from './FieldShortcodeSelectMeta'; +import { FieldShortcodeSelectNew } from './FieldShortcodeSelectNew'; +import { useExistingRemoteData } from '../../hooks/useExistingRemoteData'; import { formatName, formatTypeSettings, } from '@/blocks/remote-data-container/components/field-shortcode'; import { FieldShortcodeSelectFieldPopover } from '@/blocks/remote-data-container/components/field-shortcode/FieldShortcodeSelectFieldPopover'; -import { FieldShortcodeSelectTabs } from '@/blocks/remote-data-container/components/field-shortcode/FieldShortcodeSelectTabs'; -import { FieldShortcodeSelectField } from '@/blocks/remote-data-container/components/field-shortcode/FieldShortcodeSelection'; import { sendTracksEvent } from '@/blocks/remote-data-container/utils/tracks'; import { getBlockDataSourceType } from '@/utils/localized-block-data'; +import './FieldShortcode.scss'; function parseDataQuery( dataQuery?: string ): FieldSelection | null { if ( ! dataQuery ) { @@ -26,36 +29,18 @@ function parseDataQuery( dataQuery?: string ): FieldSelection | null { } } -interface QueryInput { - blockName: string; - queryInput: RemoteDataQueryInput; -} - export function FieldShortcodeButton( props: WPFormatEditProps ) { const { onChange, onFocus, value, isObjectActive, activeObjectAttributes, contentRef } = props; const fieldSelection = parseDataQuery( activeObjectAttributes?.[ 'data-query' ] ); - - const [ queryInput, setQueryInput ] = useState< QueryInput | null >( null ); const [ showUI, setShowUI ] = useState< boolean >( false ); - function onClick() { - setShowUI( ! showUI ); - sendTracksEvent( 'remotedatablocks_field_shortcode', { action: 'toolbar_icon_clicked' } ); - } - - function onClose() { - setShowUI( false ); - onFocus(); - } - - function onSelectItem( config: BlockConfig, data: RemoteDataQueryInput ) { - setQueryInput( { - blockName: config.name, - queryInput: data, - } ); - } + useEffect( () => { + if ( isObjectActive ) { + setShowUI( true ); + } + }, [ isObjectActive ] ); - function updateOrInsertField( data: FieldSelection | null, fieldValue: string ) { + const updateOrInsertField = ( data: FieldSelection | null, fieldValue: string ) => { const format: RichTextFormat = { attributes: { ...activeObjectAttributes, @@ -65,86 +50,79 @@ export function FieldShortcodeButton( props: WPFormatEditProps ) { type: formatName, }; - if ( Object.keys( activeObjectAttributes ).length ) { - const replacements = value.replacements.slice(); - replacements[ value.start ] = format; - - onChange( { ...value, replacements } ); - return; - } - - onChange( insertObject( value, format ) ); - } - - function onSelectField( data: FieldSelection, fieldValue: string ) { + onChange( + Object.keys( activeObjectAttributes ).length + ? { + ...value, + replacements: value.replacements.map( ( replacement, index ) => + index === value.start ? format : replacement + ), + } + : insertObject( value, format ) + ); + }; + + const onSelectField = ( data: FieldSelection, fieldValue: string ) => { updateOrInsertField( data, fieldValue ); - onClose(); + setShowUI( false ); + onFocus(); sendTracksEvent( 'remotedatablocks_field_shortcode', { action: data.action, data_source_type: getBlockDataSourceType( data.remoteData?.blockName ), selection_path: data.selectionPath, } ); - } + }; - function resetField( blockName?: string ): void { + const resetField = ( blockName?: string ): void => { updateOrInsertField( null, 'Unbound field' ); - setQueryInput( null ); sendTracksEvent( 'remotedatablocks_field_shortcode', { action: 'reset_field_shortcode', data_source_type: getBlockDataSourceType( blockName ), } ); - } + }; - useEffect( () => { - if ( isObjectActive ) { - setShowUI( true ); - } - }, [ isObjectActive ] ); + const remoteData = useExistingRemoteData(); return ( <> - - - - - { showUI && ! fieldSelection && ( - - { ! queryInput && ( - 0 ? ( + + { () => ( + + + + + + ) } + + ) : ( + - ) } - { queryInput && ( - - onSelectField( { ...data, selectionPath: 'select_new_tab' }, fieldValue ) - } - queryInput={ queryInput.queryInput } - fieldType="field" + icon="shortcode" + label={ __( 'Select block bindings', 'remote-data-blocks' ) } + popoverProps={ { offset: 8, placement: 'bottom-start' } } + text={ undefined } /> ) } - - ) } + + + { showUI && fieldSelection && ( { + setShowUI( false ); + onFocus(); + } } onSelectField={ ( data, fieldValue ) => onSelectField( { ...data, selectionPath: 'popover' }, fieldValue ) } diff --git a/src/blocks/remote-data-container/components/field-shortcode/FieldShortcodeSelectExisting.tsx b/src/blocks/remote-data-container/components/field-shortcode/FieldShortcodeSelectExisting.tsx index 1abd6270..52880326 100644 --- a/src/blocks/remote-data-container/components/field-shortcode/FieldShortcodeSelectExisting.tsx +++ b/src/blocks/remote-data-container/components/field-shortcode/FieldShortcodeSelectExisting.tsx @@ -1,4 +1,6 @@ -import { __experimentalHeading as Heading } from '@wordpress/components'; +import { DropdownMenu, MenuGroup } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { chevronRightSmall } from '@wordpress/icons'; import { FieldSelectionFromAvailableBindings } from '@/blocks/remote-data-container/components/field-shortcode/FieldShortcodeSelection'; import { useExistingRemoteData } from '@/blocks/remote-data-container/hooks/useExistingRemoteData'; @@ -14,30 +16,32 @@ export function FieldShortcodeSelectExisting( props: FieldShortcodeSelectExistin remoteData => ! remoteData.isCollection ); - if ( remoteDatas.length === 0 ) { - return ( -
-

No existing items.

-
- ); - } - - return ( -
- { remoteDatas.map( remoteData => ( -
- - { blockConfigs[ remoteData.blockName ]?.settings.title ?? remoteData.blockName } - - - - props.onSelectField( { ...data, selectionPath: 'select_existing_tab' }, fieldValue ) - } - remoteData={ remoteData } - /> -
- ) ) } -
- ); + return remoteDatas.length > 0 ? ( + + { () => + remoteDatas.map( remoteData => ( + + + props.onSelectField( { ...data, selectionPath: 'select_existing_tab' }, fieldValue ) + } + remoteData={ remoteData } + /> + + ) ) + } + + ) : undefined; } diff --git a/src/blocks/remote-data-container/components/field-shortcode/FieldShortcodeSelectFieldPopover.tsx b/src/blocks/remote-data-container/components/field-shortcode/FieldShortcodeSelectFieldPopover.tsx index 743ae59a..5e535b8f 100644 --- a/src/blocks/remote-data-container/components/field-shortcode/FieldShortcodeSelectFieldPopover.tsx +++ b/src/blocks/remote-data-container/components/field-shortcode/FieldShortcodeSelectFieldPopover.tsx @@ -7,6 +7,7 @@ import { __experimentalHeading as Heading, Popover, } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; import { WPFormat, useAnchor } from '@wordpress/rich-text'; import { FieldShortcodeSelectField } from '@/blocks/remote-data-container/components/field-shortcode/FieldShortcodeSelection'; @@ -40,7 +41,7 @@ export function FieldShortcodeSelectFieldPopover( props: FieldShortcodeSelectFie > - Select a field to bind + { __( 'Select a field to bind', 'remote-data-blocks' ) } diff --git a/src/blocks/remote-data-container/components/field-shortcode/FieldShortcodeSelectMeta.tsx b/src/blocks/remote-data-container/components/field-shortcode/FieldShortcodeSelectMeta.tsx index 6892c471..57b36a1a 100644 --- a/src/blocks/remote-data-container/components/field-shortcode/FieldShortcodeSelectMeta.tsx +++ b/src/blocks/remote-data-container/components/field-shortcode/FieldShortcodeSelectMeta.tsx @@ -1,4 +1,6 @@ -import { __experimentalHeading as Heading } from '@wordpress/components'; +import { DropdownMenu, MenuGroup } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { chevronRightSmall } from '@wordpress/icons'; import { FieldSelectionFromMetaFields } from '@/blocks/remote-data-container/components/field-shortcode/FieldShortcodeSelection'; import { useExistingRemoteData } from '@/blocks/remote-data-container/hooks/useExistingRemoteData'; @@ -12,30 +14,32 @@ export function FieldShortcodeSelectMeta( props: FieldShortcodeSelectMetaProps ) const blockConfigs = getBlocksConfig(); const remoteDatas: RemoteData[] = useExistingRemoteData(); - if ( remoteDatas.length === 0 ) { - return ( -
-

No query metadata avaialble.

-
- ); - } - - return ( -
- { remoteDatas.map( remoteData => ( -
- - { blockConfigs[ remoteData.blockName ]?.settings.title ?? remoteData.blockName } - - - - props.onSelectField( { ...data, selectionPath: 'select_meta_tab' }, fieldValue ) - } - remoteData={ remoteData } - /> -
- ) ) } -
- ); + return remoteDatas.length > 0 ? ( + + { () => + remoteDatas.map( remoteData => ( + + + props.onSelectField( { ...data, selectionPath: 'select_meta_tab' }, fieldValue ) + } + remoteData={ remoteData } + /> + + ) ) + } + + ) : undefined; } diff --git a/src/blocks/remote-data-container/components/field-shortcode/FieldShortcodeSelectNew.tsx b/src/blocks/remote-data-container/components/field-shortcode/FieldShortcodeSelectNew.tsx index dd189ac9..bcd72592 100644 --- a/src/blocks/remote-data-container/components/field-shortcode/FieldShortcodeSelectNew.tsx +++ b/src/blocks/remote-data-container/components/field-shortcode/FieldShortcodeSelectNew.tsx @@ -1,28 +1,62 @@ -import { __experimentalHeading as Heading } from '@wordpress/components'; +import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components'; +import { DropdownMenuProps } from '@wordpress/components/build-types/dropdown-menu/types'; +import { __ } from '@wordpress/i18n'; +import { chevronRightSmall } from '@wordpress/icons'; -import { ItemSelectQueryType } from '@/blocks/remote-data-container/components/placeholders/ItemSelectQueryType'; +import { DataViewsModal } from '../modals/DataViewsModal'; import { getBlocksConfig } from '@/utils/localized-block-data'; -interface FieldShortcodeSelectNewProps { - onSelectItem: ( config: BlockConfig, data: RemoteDataQueryInput ) => void; -} +type FieldShortcodeSelectNewProps = Omit< DropdownMenuProps, 'label' > & { + onSelectField: ( data: FieldSelection, fieldValue: string ) => void; + label?: string; +}; export function FieldShortcodeSelectNew( props: FieldShortcodeSelectNewProps ) { + const { onSelectField, ...restProps } = props; + const blockConfigs = getBlocksConfig(); + const nonLoopBlocks = Object.values( blockConfigs ).filter( ( { loop } ) => ! loop ); + const blocksByType = nonLoopBlocks.reduce< + Record< string, Array< BlocksConfig[ keyof BlocksConfig ] > > + >( ( source, blockConfig ) => { + const type = blockConfig.dataSourceType; + if ( ! source[ type ] ) { + source[ type ] = []; + } + source[ type ].push( blockConfig ); + return source; + }, {} ); + return ( -
- { Object.values( getBlocksConfig() ) - .filter( ( { loop } ) => ! loop ) - .map( blockConfig => ( -
- - { blockConfig.settings.title } - - props.onSelectItem( blockConfig, data ) } - /> -
- ) ) } -
+ + { () => + Object.entries( blocksByType ).map( ( [ dataSourceType, configs ] ) => ( + + { configs.map( blockConfig => ( + ( + + { blockConfig.settings?.title ?? blockConfig.name } + + ) } + /> + ) ) } + + ) ) + } + ); } diff --git a/src/blocks/remote-data-container/components/field-shortcode/FieldShortcodeSelectTabs.tsx b/src/blocks/remote-data-container/components/field-shortcode/FieldShortcodeSelectTabs.tsx deleted file mode 100644 index fe463df3..00000000 --- a/src/blocks/remote-data-container/components/field-shortcode/FieldShortcodeSelectTabs.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { TabPanel } from '@wordpress/components'; - -import { FieldShortcodeSelectExisting } from '@/blocks/remote-data-container/components/field-shortcode/FieldShortcodeSelectExisting'; -import { FieldShortcodeSelectMeta } from '@/blocks/remote-data-container/components/field-shortcode/FieldShortcodeSelectMeta'; -import { FieldShortcodeSelectNew } from '@/blocks/remote-data-container/components/field-shortcode/FieldShortcodeSelectNew'; - -interface FieldShortcodeSelectTabsProps { - onSelectField: ( data: FieldSelection, fieldValue: string ) => void; - onSelectItem: ( config: BlockConfig, data: RemoteDataQueryInput ) => void; -} - -export function FieldShortcodeSelectTabs( props: FieldShortcodeSelectTabsProps ) { - return ( - - { tab => { - switch ( tab.name ) { - case 'existing': - return ; - - case 'new': - return ; - - case 'meta': - return ; - } - } } - - ); -} diff --git a/src/blocks/remote-data-container/components/field-shortcode/FieldShortcodeSelection.tsx b/src/blocks/remote-data-container/components/field-shortcode/FieldShortcodeSelection.tsx index 242ed7be..22f18b44 100644 --- a/src/blocks/remote-data-container/components/field-shortcode/FieldShortcodeSelection.tsx +++ b/src/blocks/remote-data-container/components/field-shortcode/FieldShortcodeSelection.tsx @@ -1,4 +1,4 @@ -import { Spinner } from '@wordpress/components'; +import { BaseControl, Icon, MenuItem, Spinner } from '@wordpress/components'; import { useEffect } from '@wordpress/element'; import { check } from '@wordpress/icons'; @@ -30,28 +30,41 @@ export function FieldSelection( props: FieldSelectionProps ) { }; return ( -
- { fieldDetails.name }:{ ' ' } - { - evt.preventDefault(); + { + evt.preventDefault(); + props.onSelectField( fieldSelection, fieldDetails.value ); + } } + onKeyDown={ evt => { + if ( evt.key.toLowerCase() === 'enter' ) { props.onSelectField( fieldSelection, fieldDetails.value ); - } } - onKeyDown={ evt => { - if ( evt.key.toLowerCase() === 'enter' ) { - props.onSelectField( fieldSelection, fieldDetails.value ); - } - } } - > + } + } } + suffix={ + props.selectedField === fieldName ? ( + + ) : undefined + } + > + + + { fieldDetails.name }: + { fieldDetails.value } - { props.selectedField === fieldName && ( - { check } - ) } - -
+ + ); } ) } diff --git a/src/blocks/remote-data-container/components/item-list/ItemList.tsx b/src/blocks/remote-data-container/components/item-list/ItemList.tsx index 7ce1d91f..53912e00 100644 --- a/src/blocks/remote-data-container/components/item-list/ItemList.tsx +++ b/src/blocks/remote-data-container/components/item-list/ItemList.tsx @@ -1,3 +1,4 @@ +import { Button } from '@wordpress/components'; import { useInstanceId } from '@wordpress/compose'; import { DataViews, filterSortAndPaginate, View } from '@wordpress/dataviews/wp'; import { useEffect, useMemo, useState } from '@wordpress/element'; @@ -10,14 +11,49 @@ interface ItemListProps { blockName: string; loading: boolean; onSelect: ( data: RemoteDataQueryInput ) => void; - results?: RemoteDataResult[]; + onSelectField?: ( data: FieldSelection, fieldValue: string ) => void; + remoteData?: RemoteData; searchTerms: string; setSearchTerms: ( newValue: string ) => void; } +const createFieldSelection = ( + field: string, + item: RemoteDataResult, + blockName: string, + remoteData: RemoteData +): FieldSelection => ( { + action: 'add_field_shortcode', + remoteData: { + ...remoteData, + blockName, + queryInput: { + ...item, + field: { + field, + value: item[ field ] as string, + }, + }, + resultId: item.id?.toString() ?? '', + results: [ item ], + }, + selectedField: field, + selectionPath: 'select_new_tab', + type: 'field', +} ); + export function ItemList( props: ItemListProps ) { - const { availableBindings, blockName, loading, onSelect, results, searchTerms, setSearchTerms } = - props; + const { + availableBindings, + blockName, + loading, + onSelect, + onSelectField, + remoteData, + searchTerms, + setSearchTerms, + } = props; + const results = remoteData?.results ?? []; const { defaultPattern: pattern } = usePatterns( blockName ); const instanceId = useInstanceId( ItemList, blockName ); @@ -68,26 +104,50 @@ export function ItemList( props: ItemListProps ) { ( [ _, binding ] ) => binding.type === 'image_url' )?.[ 0 ]; - const fieldObject = getFields.map( field => { - return { - id: field, - label: availableBindings[ field ]?.name ?? field, - enableGlobalSearch: true, - getValue: ( { item }: { item: RemoteDataResult } ) => item[ field ] as string, - render: - field === media - ? ( { item }: { item: RemoteDataResult } ) => { - return ( - { - ); - } - : undefined, - enableSorting: field !== media, - }; - } ); + const renderField = ( field: string, item: RemoteDataResult ) => { + if ( field === media ) { + return {; + } + + if ( onSelectField && remoteData ) { + const queryInput: RemoteDataQueryInput = { + ...item, + field: { + field, + value: item[ field ] as string, + }, + }; + + return ( + + ); + } + + return item[ field ] as string; + }; + + const fieldObject = getFields.map( field => ( { + id: field, + label: availableBindings[ field ]?.name ?? field, + enableGlobalSearch: true, + getValue: ( { item }: { item: RemoteDataResult } ) => item[ field ] as string, + render: ( { item }: { item: RemoteDataResult } ) => renderField( field, item ), + enableSorting: field !== media, + } ) ); return { fields: fieldObject, tableFields: getFields, titleField: title, mediaField: media }; - }, [ availableBindings, data ] ); + }, [ availableBindings, data, onSelectField, remoteData ] ); const [ view, setView ] = useState< View >( { type: 'table' as const, @@ -130,17 +190,20 @@ export function ItemList( props: ItemListProps ) { return filterSortAndPaginate( data ?? [], view, fields ); }, [ data, view ] ); - const actions = [ - { - id: 'choose', - icon: <>{ __( 'Choose' ) }, - isPrimary: true, - label: '', - callback: ( items: RemoteDataResult[] ) => { - items.map( item => onSelect( item ) ); - }, - }, - ]; + // Hide actions for field shortcode selection + const actions = ! onSelectField + ? [ + { + id: 'choose', + icon: <>{ __( 'Choose' ) }, + isPrimary: true, + label: '', + callback: ( items: RemoteDataResult[] ) => { + items.map( item => onSelect( item ) ); + }, + }, + ] + : []; return ( void; + onSelect?: ( data: RemoteDataQueryInput ) => void; + onSelectField?: ( data: FieldSelection, fieldValue: string ) => void; queryKey: string; - title: string; + renderTrigger?: ( props: { onClick: () => void } ) => React.ReactNode; + title?: string; } export const DataViewsModal: React.FC< DataViewsModalProps > = props => { - const { blockName, onSelect, queryKey, title } = props; + const { className, blockName, onSelect, onSelectField, queryKey, renderTrigger, title } = props; + + const blockConfig = getBlockConfig( blockName ); + const availableBindings = getBlockAvailableBindings( blockName ); - const { loading, results, searchTerms, setSearchTerms } = useSearchResults( { + const { + loading, + data: remoteData, + searchTerms, + setSearchTerms, + } = useSearchResults( { blockName, queryKey, } ); const { close, isOpen, open } = useModalState(); - function onSelectItem( data: RemoteDataQueryInput ): void { - onSelect( data ); - sendTracksEvent( 'remotedatablocks_add_block', { - action: 'select_item', - selected_option: 'search_from_list', - data_source_type: getBlockDataSourceType( blockName ), - } ); - close(); - } + const handleSelect = ( data: RemoteDataQueryInput ): void => { + onSelect?.( data ); + }; + const triggerElement = renderTrigger ? ( + renderTrigger( { onClick: open } ) + ) : ( + + ); return ( - - - + <> + { triggerElement } + { isOpen && ( + + + + ) } + ); }; diff --git a/src/blocks/remote-data-container/components/placeholders/ItemSelectQueryType.tsx b/src/blocks/remote-data-container/components/placeholders/ItemSelectQueryType.tsx index ae31a187..04abcdfa 100644 --- a/src/blocks/remote-data-container/components/placeholders/ItemSelectQueryType.tsx +++ b/src/blocks/remote-data-container/components/placeholders/ItemSelectQueryType.tsx @@ -29,7 +29,13 @@ export function ItemSelectQueryType( props: ItemSelectQueryTypeProps ) { switch ( selector.type ) { case 'search': case 'list': - return ; + return ( + + ); case 'input': return ; } diff --git a/src/blocks/remote-data-container/editor.scss b/src/blocks/remote-data-container/editor.scss index f5bd0d16..8b3034ec 100644 --- a/src/blocks/remote-data-container/editor.scss +++ b/src/blocks/remote-data-container/editor.scss @@ -82,7 +82,7 @@ remote-data-blocks-inline-field { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); } -.dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper:not(.dataviews-column-primary__media) { +.rdb-editor_dataviews-modal-item-select .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper:not(.dataviews-column-primary__media) { white-space: normal; width: 250px; max-width: 100%; diff --git a/src/blocks/remote-data-container/hooks/useSearchResults.ts b/src/blocks/remote-data-container/hooks/useSearchResults.ts index c4570db9..fcf01a47 100644 --- a/src/blocks/remote-data-container/hooks/useSearchResults.ts +++ b/src/blocks/remote-data-container/hooks/useSearchResults.ts @@ -45,7 +45,7 @@ export function useSearchResults( { return { loading, onKeyDown, - results: data?.results, + data, searchTerms, setSearchTerms, };