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

Jump to bottom

Clean up Gallery block move/remove UI #16793

Merged
merged 4 commits into from
Jul 30, 2019
Merged

Clean up Gallery block move/remove UI #16793

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
305d9ca
Use larger buttons when we can.
kjellr Jul 29, 2019
db05d10
Avoid adding selected border to the caption section of the image.
kjellr Jul 29, 2019
2a16378
Remove hover/focus box shadows because they clash with the blue backg…
kjellr Jul 29, 2019
694e5e0
Revise method of specifying the .is-selected class.
kjellr Jul 30, 2019
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
34 changes: 30 additions & 4 deletions packages/block-library/src/gallery/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@ ul.wp-block-gallery {
outline: none;
}

.is-selected {
figure.is-selected {
outline: 4px solid theme(primary);
}

.is-transient img {
figure.is-transient img {
opacity: 0.3;
}

Expand Down Expand Up @@ -60,12 +60,30 @@ ul.wp-block-gallery {

.components-button {
color: $white;
padding: 2px;
width: $icon-button-size-small;
height: $icon-button-size-small;

// Remove hover/focus box shadows, since they clash with the blue background.
&:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover,
&:focus:not(:disabled) {
box-shadow: none;
}

@include break-small() {
// Use smaller buttons to fit when there are many columns.
.columns-7 &,
.columns-8 & {
padding: 0;
width: inherit;
height: inherit;
}
}
}

.components-button:focus {
color: inherit;
}

}

.block-editor-rich-text figcaption {
Expand All @@ -80,13 +98,21 @@ ul.wp-block-gallery {

.block-library-gallery-item__move-menu,
.block-library-gallery-item__inline-menu {
padding: 2px;
padding: $grid-size-small;
display: inline-flex;
z-index: z-index(".block-library-gallery-item__inline-menu");

.components-button {
color: transparent;
}

@include break-small() {
// Use smaller buttons to fit when there are many columns.
.columns-7 &,
.columns-8 & {
padding: $grid-size-small / 2;
}
}
}

.block-library-gallery-item__inline-menu {
Expand Down