Skip to content
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

Try a simpler spacing setup for gallery items #10027

Merged
merged 8 commits into from
Sep 25, 2018
Merged

Try a simpler spacing setup for gallery items #10027

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ae7796e
Try a simpler spacing setup for gallery items
Sep 19, 2018
90d0808
Clean up the mess.
Sep 19, 2018
e87089c
Address feedback.
Sep 20, 2018
42d3e93
Address feedback.
Sep 21, 2018
8ea5725
Bugfix.
Sep 21, 2018
a620ead
Adjust gallery css layout math, and ensure margin is reset correctly …
talldan Sep 21, 2018
1c24a11
Fix odd rule
Sep 25, 2018
ec58508
Add fixed rule
Sep 25, 2018
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
2 changes: 0 additions & 2 deletions packages/block-library/src/cover-image/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
.wp-block-cover-image {
margin: 0;

.editor-rich-text__tinymce[data-is-empty="true"]::before {
position: inherit;
}
Expand Down
16 changes: 0 additions & 16 deletions packages/block-library/src/gallery/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,3 @@
.wp-block-gallery.components-placeholder {
margin: 0;
}

// Allow gallery items to go edge to edge.
.gutenberg .wp-block-gallery:not(.components-placeholder) {
margin-left: -8px;
margin-right: -8px;
}

// Don't use negative margins when full-wide.
.gutenberg [data-align="full"] .wp-block-gallery:not(.components-placeholder) {
margin-left: auto;
margin-right: auto;
}

.blocks-gallery-item {

// Hide the focus outline that otherwise briefly appears when selecting a block.
Expand Down
40 changes: 31 additions & 9 deletions packages/block-library/src/gallery/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,10 @@
list-style-type: none;
padding: 0;

// Allow gallery items to go edge to edge.
margin: 0 -8px 0 -8px;

.blocks-gallery-image,
.blocks-gallery-item {
margin: 8px;
// Add space between thumbnails, and unset right most thumbnails later.
margin: 0 $grid-size-large $grid-size-large 0;
Copy link
Contributor

@talldan talldan Sep 20, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we could take advantage of aliasing $grid-size-large to make things more readable. Maybe something like $item-margin.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would like to address/discuss this separately. We already have an $item-spacing variable of 10px that I'd like to retire in favor of a grid unit. But the overall idea is to introduce a visual grid to all of Gutenberg that should make things align better — so I would prefer we can keep the term "grid" as part of it.

display: flex;
flex-grow: 1;
flex-direction: column;
Expand Down Expand Up @@ -80,24 +78,48 @@
}
}

// Responsive fallback value, 2 columns
// On mobile and responsive viewports, we allow only 1 or 2 columns at the most.
& .blocks-gallery-image,
& .blocks-gallery-item {
width: calc(100% / 2 - 16px);
width: calc((100% - #{ $grid-size-large }) / 2);

&:nth-of-type(even) {
margin-right: 0;
}
}

&.columns-1 .blocks-gallery-image,
&.columns-1 .blocks-gallery-item {
width: calc(100% / 1 - 16px);
width: 100%;
margin-right: 0;
}

// Beyond mobile viewports, we allow up to 8 columns.
@include break-small {
@for $i from 3 through 8 {
&.columns-#{ $i } .blocks-gallery-image,
&.columns-#{ $i } .blocks-gallery-item {
width: calc(100% / #{ $i } - 16px);
width: calc((100% - #{ $grid-size-large } * #{ $i - 1 }) / #{ $i });
margin-right: 16px;
}
}

// Unset the right margin on every rightmost gallery item to ensure center balance.
@for $column-count from 1 through 8 {
&.columns-#{ $column-count } .blocks-gallery-image:nth-of-type(#{ $column-count }n),
&.columns-#{ $column-count } .blocks-gallery-item:nth-of-type(#{ $column-count }n) {
margin-right: 0;
}
}
}

// Last item always needs margins reset.
// When block is selected, only reset the right margin of the 2nd to last item.
.blocks-gallery-image:last-child,
.blocks-gallery-item:last-child,
.is-selected & .blocks-gallery-image:nth-last-child(2),
.is-selected & .blocks-gallery-item:nth-last-child(2) {
margin-right: 0;
}

// Make the "Add new Gallery item" button full-width (so it always appears
Expand All @@ -108,7 +130,7 @@
}
}

// Apply max-width to floated items that have no intrinsic width
// Apply max-width to floated items that have no intrinsic width.
[data-align="left"] &,
[data-align="right"] &,
&.alignleft,
Expand Down
1 change: 0 additions & 1 deletion packages/block-library/src/image/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
.wp-block-image {
position: relative;
margin: 0;

&.is-transient img {
@include loading_fade;
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/placeholder/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
.components-placeholder {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
Expand Down