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

Global Styles: Improve organisation of site background color and image #63216

Closed
wants to merge 21 commits into from
Closed

Global Styles: Improve organisation of site background color and image #63216

Changes from 1 commit
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
3401d45
Adds background icon
amitraj2203 Jul 6, 2024
70fc60f
Removes Background Panel from layout screen
amitraj2203 Jul 6, 2024
a555902
Improves organisation of site background image and color options in g…
amitraj2203 Jul 6, 2024
c78e9f0
Merge branch 'trunk' of github.com:WordPress/gutenberg into feat/add-…
amitraj2203 Jul 31, 2024
5caa672
Fix styling issue after merge conflict
amitraj2203 Jul 31, 2024
d6252d6
Resets border radius top and bottom for the first and last control
amitraj2203 Jul 31, 2024
4a99ca1
Refactor global styles to fix border focus issue for background panel
amitraj2203 Aug 1, 2024
c4a1706
Adds upload icon for background image and change it's shape to rounde…
amitraj2203 Aug 1, 2024
635c62e
Change the border-radius to 2px and fix the missing border-top when t…
amitraj2203 Aug 2, 2024
7f4951d
Move background panel to the top
mtias Aug 3, 2024
f3fc268
Makes use of ColorIndicator component
amitraj2203 Aug 5, 2024
9f2d715
Used $radius-small instead of $radius-block-ui
amitraj2203 Aug 5, 2024
267a62b
Refactor SVG attributes to adhere to camel case convention
amitraj2203 Aug 5, 2024
dba7140
Wraps "Image" and "Color" items with ItemGroup
amitraj2203 Aug 7, 2024
f27779e
Merge branch 'trunk' of github.com:WordPress/gutenberg into feat/add-…
amitraj2203 Aug 17, 2024
f4e3a7d
feat: Use ItemGroup to wrap the Color and Image item
amitraj2203 Aug 17, 2024
f2cc826
Merge branch 'trunk' of github.com:WordPress/gutenberg into feat/add-…
amitraj2203 Aug 19, 2024
4f83540
Merge branch 'trunk' of github.com:WordPress/gutenberg into feat/add-…
amitraj2203 Aug 29, 2024
98833df
Removed blank lines
amitraj2203 Aug 29, 2024
7b8110a
chore: Update showColorControl prop in BackgroundPanel component
amitraj2203 Aug 31, 2024
9cd986c
chore: Update use of hasBackgroundPanel in RootMenu component
amitraj2203 Aug 31, 2024
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
Prev Previous commit
Next Next commit
Refactor global styles to fix border focus issue for background panel
  • Loading branch information
@amitraj2203
amitraj2203 committed Aug 1, 2024
commit 4a99ca155340392abaab36094e214c6d88f33535
28 changes: 21 additions & 7 deletions packages/block-editor/src/components/global-styles/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,6 @@
border-top-left-radius: $radius-block-ui;
ciampo marked this conversation as resolved.
Show resolved Hide resolved
border-top-right-radius: $radius-block-ui;
border-top: 1px solid $gray-300;
border-bottom: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
Expand All @@ -95,18 +94,37 @@
&:nth-last-child(1 of &) {
border-bottom-left-radius: $radius-block-ui;
border-bottom-right-radius: $radius-block-ui;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}

> div,
> div > button {
> div > div,
> div > button,
> div > div > button {
border-radius: inherit;
}
}

&.is-open {
background-color: $gray-100;
.block-editor-global-styles-background-panel__dropdown-toggle {
background-color: $gray-100;
}
}

.block-editor-global-styles-background-panel__dropdown-toggle {
&:focus {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #3858e9);
outline: 3px solid transparent;
border-radius: inherit;
}
}

.block-editor-panel-color-gradient-settings__dropdown {
&.is-open {
background-color: $gray-100;
}
}

.block-editor-global-styles-background-panel__image-tools-panel-item {
Expand Down Expand Up @@ -155,10 +173,6 @@
&:hover {
color: var(--wp-admin-theme-color);
}

&:focus {
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
}
}
}

Expand Down
Loading