This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
Product Collection - shrink columns to fit #11320
Merged
Conversation
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
kmanijak
added
type: enhancement
woocommercebot
requested review from
a team and
roykho
and removed request for
a team
|
The release ZIP for this PR is accessible via: Script Dependencies ReportThere is no changed script dependency between this branch and trunk. This comment was automatically generated by the TypeScript Errors Report
🎉 🎉 This PR does not introduce new TS errors. |
|
Size Change: +1.68 kB (0%) Total Size: 1.54 MB
ℹ️ View Unchanged
|
|
So I was able to trigger a console warning:
|
@roykho, nice catch! I can't reproduce it sthough. Am I doing something wrong? See video below: warning.movI repeated the steps also in the post and also in the scenario in which I add Product Collection on |
|
Interesting indeed. Please see video: file.movJust to note that I tested this with WP 6.3.2 and WP 6.4-RC.1 and with GB disabled. |
Thanks for the video, I'll be checking it further! |
kmanijak
changed the title
roykho
reviewed
Oct 20, 2023
| checked={ !! shrinkColumns } | ||
| label={ toggleLabel } | ||
| help={ toggleHelp } | ||
| onChange={ onToggleChange } |
There was a problem hiding this comment.
I would suggest a more descriptive naming for the "onChange" callbacks because if we ever want to add more "toggle" controls, onToggleChange would not describe which settings it is referring to without looking into the details. Perhaps onShrinkColToggleChange?
There was a problem hiding this comment.
Addressed in 99b6415 👍
|
For reference: the console warning issue (#11320 (comment)) was resolved in 624fdfc |
roykho
approved these changes
Oct 23, 2023
kmanijak
deleted the
add/10827-product-collection-shrink-columns-to-fit
branch
roykho
reviewed
Oct 23, 2023
| @@ -61,7 +61,11 @@ protected function render( $attributes, $content, $block ) { | |||
| $classnames = ''; | |||
| if ( isset( $block->context['displayLayout'] ) && isset( $block->context['query'] ) ) { | |||
| if ( isset( $block->context['displayLayout']['type'] ) && 'flex' === $block->context['displayLayout']['type'] ) { | |||
| $classnames = "is-flex-container columns-{$block->context['displayLayout']['columns']}"; | |||
| if ( $block->context['displayLayout']['shrinkColumns'] ) { | |||
There was a problem hiding this comment.
Hi @kmanijak - I didn't catch this earlier but this can potentially be undefined and will cause a PHP warning. So perhaps use ! empty()check?
13 tasks
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
What
Add an option to "Shrink columns to fit" in Product Collection so the blocks is responsive.
Fixes #10827
Why
Product Collection has the option to set a number of columns but it's a fixed number which looks weird on smaller screens. That number of columns collapses to a single one on mobile devices ( check #9971).
This option allows to set a MAX number of columns but as the screen gets narrower, the number of columns decreases.
The minimal width of a product was chosen arbitrarily to
150pxand is a subject to change (I'm open to suggestion in this area).Testing Instructions
Please consider any edge cases this change may have, and also other areas of the product this may impact.
Screenshots or screencast
WooCommerce Visibility
Required:
Checklist
Required:
[type]label or a[skip-changelog]label.Conditional:
[skip-changelog]label is not present).Changelog