Skip to content

[WC-3096] Gallery: fix divider gap spacing #1901

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

[WC-3096] Gallery: fix divider gap spacing #1901

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7a5d31f
chore: update changelog to include fix for gallery gap offset issue
yordan-st Sep 16, 2025
67fe004
fix: add fallback value
yordan-st Sep 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 8 additions & 15 deletions ...ages/modules/data-widgets/src/themesource/datawidgets/web/_gallery-design-properties.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
left: 0;
right: 0;
border-bottom: 1px solid var(--grid-border-color, $grid-border-color);
margin-top: calc(var(--spacing-small, $spacing-small) / 2);
margin-top: calc(var(--gallery-gap, var(--spacing-small, $spacing-small)) / 2 - 1px);
}
}
}
Expand All @@ -69,30 +69,22 @@

// Grid spacing none
.widget-gallery.widget-gallery-gridgap-none {
.widget-gallery-items {
gap: 0;
}
--gallery-gap: 0px;
}

// Grid spacing small
.widget-gallery.widget-gallery-gridgap-small {
.widget-gallery-items {
gap: var(--spacing-small, $spacing-small);
}
--gallery-gap: var(--spacing-small, $spacing-small);
}

// Grid spacing medium
.widget-gallery.widget-gallery-gridgap-medium {
.widget-gallery-items {
gap: var(--spacing-medium, $spacing-medium);
}
--gallery-gap: var(--spacing-medium, $spacing-medium);
}

// Grid spacing large
.widget-gallery.widget-gallery-gridgap-large {
.widget-gallery-items {
gap: var(--spacing-large, $spacing-large);
}
--gallery-gap: var(--spacing-large, $spacing-large);
}

// Pagination left
Expand All @@ -114,6 +106,7 @@
}

.widget-gallery-disable-selected-items-highlight {
// placeholder
// this class in needed to disable standard styles of highlighted items
// This class is needed to disable standard styles of highlighted items
// Currently no specific styles need to be overridden
/* stylelint-disable-line no-empty-rules */
}
4 changes: 3 additions & 1 deletion packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,11 @@ $gallery-screen-md: $screen-md;
}

.widget-gallery {
--gallery-gap: var(--spacing-small, $gallery-gap);

.widget-gallery-items {
display: grid;
grid-gap: var(--spacing-small, $spacing-small);
grid-gap: var(--gallery-gap);

/*
Desktop widths
Expand Down
3 changes: 3 additions & 0 deletions packages/modules/data-widgets/src/themesource/datawidgets/web/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,9 @@ $spacing-medium: 16px !default;
$spacing-large: 24px !default;
$spacing-larger: 32px !default;

// Gallery specific spacing
$gallery-gap: $spacing-small !default;

// Effects and animations
$dragging-color-effect: rgba(10, 19, 37, 0.8) !default;
$skeleton-background: linear-gradient(90deg, rgba(194, 194, 194, 0.2) 0%, #d2d2d2 100%) !default;
Expand Down
4 changes: 4 additions & 0 deletions packages/pluggableWidgets/gallery-web/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),

## [Unreleased]

### Fixed

- We fixed an issue where setting the gallery gap to 0 caused an offset, which made the bottom border of items to dissapear.

## [3.4.0] - 2025-09-12

### Fixed
Expand Down
Loading