This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 218
Product Collection - Add Created
filter in inspector controls
#11562
Merged
imanish003
merged 13 commits into
trunk
from
add/11357-product-collection-filters-creation-date
Nov 8, 2023
Merged
Changes from 3 commits
Commits
Show all changes
13 commits
Select commit
Hold shift + click to select a range
7376dc6
Add time frame filter to Product Collection block
imanish003 7c7e672
Refactor: Standardize 'timeFrame' to be 'undefined' instead of 'null'
imanish003 210c6b8
Merge branch 'trunk' into add/11357-product-collection-filters-creati…
imanish003 12dbdfc
Merge branch 'trunk' into add/11357-product-collection-filters-creati…
imanish003 91ccf8e
Merge branch 'trunk' into add/11357-product-collection-filters-creati…
imanish003 b807d12
Switch date query to use post_date_gmt for DST consistency
imanish003 499ba3a
Capitalize toggle group labels
imanish003 1cb7875
Merge branch 'trunk' into add/11357-product-collection-filters-creati…
imanish003 3b90b44
Make first letter of first work capital
imanish003 1f592ac
Merge branch 'trunk' into add/11357-product-collection-filters-creati…
imanish003 7e4f6cb
Rename to Within & Before
imanish003 f2055e7
Update i18n for Product Collection query operators
imanish003 5c50c6e
Merge branch 'trunk' into add/11357-product-collection-filters-creati…
imanish003 File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
109 changes: 109 additions & 0 deletions
109
assets/js/blocks/product-collection/inspector-controls/created-control.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,109 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import { __ } from '@wordpress/i18n'; | ||
import { | ||
Flex, | ||
FlexItem, | ||
RadioControl, | ||
// 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, | ||
// @ts-expect-error Using experimental features | ||
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis | ||
__experimentalToolsPanelItem as ToolsPanelItem, | ||
} from '@wordpress/components'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import { ETimeFrameOperator, QueryControlProps } from '../types'; | ||
|
||
const CreatedControl = ( props: QueryControlProps ) => { | ||
const { query, setQueryAttribute } = props; | ||
const { timeFrame } = query; | ||
|
||
return ( | ||
<ToolsPanelItem | ||
label={ __( 'Created', 'woo-gutenberg-products-block' ) } | ||
hasValue={ () => timeFrame?.operator && timeFrame?.value } | ||
onDeselect={ () => { | ||
setQueryAttribute( { | ||
timeFrame: undefined, | ||
} ); | ||
} } | ||
> | ||
<Flex direction="column" gap={ 3 }> | ||
<FlexItem> | ||
<ToggleGroupControl | ||
label={ __( | ||
'Created', | ||
'woo-gutenberg-products-block' | ||
) } | ||
isBlock | ||
onChange={ ( value: ETimeFrameOperator ) => { | ||
setQueryAttribute( { | ||
timeFrame: { | ||
...timeFrame, | ||
operator: value, | ||
}, | ||
} ); | ||
} } | ||
value={ timeFrame?.operator || ETimeFrameOperator.IN } | ||
> | ||
<ToggleGroupControlOption | ||
value={ ETimeFrameOperator.IN } | ||
label={ __( 'IN', 'woo-gutenberg-products-block' ) } | ||
/> | ||
<ToggleGroupControlOption | ||
value={ ETimeFrameOperator.NOT_IN } | ||
label={ __( | ||
'Not in', | ||
'woo-gutenberg-products-block' | ||
) } | ||
/> | ||
</ToggleGroupControl> | ||
</FlexItem> | ||
<FlexItem> | ||
<RadioControl | ||
onChange={ ( value: string ) => { | ||
setQueryAttribute( { | ||
timeFrame: { | ||
operator: ETimeFrameOperator.IN, | ||
...timeFrame, | ||
value, | ||
}, | ||
} ); | ||
} } | ||
options={ [ | ||
{ | ||
label: 'last 24 hours', | ||
value: '-1 day', | ||
}, | ||
{ | ||
label: 'last 7 days', | ||
value: '-7 days', | ||
}, | ||
{ | ||
label: 'last 30 days', | ||
value: '-30 days', | ||
}, | ||
{ | ||
label: 'last 3 months', | ||
value: '-3 months', | ||
}, | ||
] } | ||
selected={ timeFrame?.value } | ||
/> | ||
</FlexItem> | ||
</Flex> | ||
</ToolsPanelItem> | ||
); | ||
}; | ||
|
||
export default CreatedControl; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nit: is it intentional that
IN
is uppercase whileNot in
isn't?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@Aljullu, I've referenced the design from the provided screenshot; however, I'm unable to locate it in Figma. @kmanijak, could you please share the Figma design's URL? 🙂
To ensure consistency, we could:
@manospsyx What do you think? 🙂
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'd say to use capitalized letters since the "In" might not look great, but I'd wait for Mano's input!
Another nit: It would be better to use the
_x()
function with context instead of the generic__()
. These words are small, making it difficult to understand what is actually being translated.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'd probably:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@xristos3490
Makes sense to me. What do you think about the following contexts?
I can make the changes once we finalize the context text.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's a good practice for translators to have context when dealing with short phrases. There is no set rule for when to use the _x() function, but I believe this is a valid reason to use it.
That said, It's also advisable to provide context for other instances here like "Stack" or "Grid".
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@xristos3490 Makes sense. Let's try to figure out what text we can use for context 🙂
This doesn't seem relevant anymore as we have changed the text to "Within" & "Before". What alternative text you would suggest? Here is my suggestion:
What do you think?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Makes sense. What do you think about the following?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In my opinion, providing an exact description of the context could result in excessive wordiness. A simple term such as "Product Collection query operator" should suffice for translators to comprehend the intended meaning. However, I do not have a strong preference, so I leave it up to you to decide. :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't have a strong opinion either. I will go ahead and add "Product Collection query operator". Thanks 🙏🏻