-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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.
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
base: trunk
Are you sure you want to change the base?
Changes from all commits
3401d45
70fc60f
a555902
c78e9f0
5caa672
d6252d6
4a99ca1
c4a1706
635c62e
7f4951d
f3fc268
9f2d715
267a62b
dba7140
f27779e
f4e3a7d
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
@@ -39,7 +39,7 @@ | |||||||||||||||||||||||||||
.block-editor-global-styles__shadow-indicator { | ||||||||||||||||||||||||||||
color: $gray-800; | ||||||||||||||||||||||||||||
border: $gray-200 $border-width solid; | ||||||||||||||||||||||||||||
border-radius: $radius-block-ui; | ||||||||||||||||||||||||||||
border-radius: $radius-small; | ||||||||||||||||||||||||||||
cursor: pointer; | ||||||||||||||||||||||||||||
padding: 0; | ||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||
|
@@ -83,13 +83,18 @@ | |||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||
.block-editor-global-styles-background-panel__image-tools-panel-item { | ||||||||||||||||||||||||||||
padding: 0; | ||||||||||||||||||||||||||||
flex-grow: 1; | ||||||||||||||||||||||||||||
border: 0; | ||||||||||||||||||||||||||||
.components-dropdown { | ||||||||||||||||||||||||||||
display: block; | ||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||
.block-editor-global-styles-background-panel__color-tools-panel-item { | ||||||||||||||||||||||||||||
padding: 0; | ||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||
.block-editor-global-styles-background-panel__inspector-preview-inner { | ||||||||||||||||||||||||||||
height: 100%; | ||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||
|
@@ -131,7 +136,7 @@ | |||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||
&:focus { | ||||||||||||||||||||||||||||
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); | ||||||||||||||||||||||||||||
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); | ||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||
|
@@ -147,6 +152,14 @@ | |||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||
.block-editor-global-styles-background-panel__color-tools-panel-item { | ||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||
button.components-button { | ||||||||||||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. While style overrides are Instead of using Also, do we need to use a (These comments apply to all instances of style overrides for |
||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||
padding: 0; | ||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||
Comment on lines
+155
to
+162
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Leading/trailing new lines inside a section are not redundant:
Suggested change
|
||||||||||||||||||||||||||||
.block-editor-global-styles-background-panel__image-preview-content, | ||||||||||||||||||||||||||||
.block-editor-global-styles-background-panel__dropdown-toggle { | ||||||||||||||||||||||||||||
height: 100%; | ||||||||||||||||||||||||||||
|
@@ -158,6 +171,16 @@ | |||||||||||||||||||||||||||
cursor: pointer; | ||||||||||||||||||||||||||||
background: transparent; | ||||||||||||||||||||||||||||
border: none; | ||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||
Comment on lines
+174
to
+175
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Three consecutive empty new lines are not recommended, we usually go with two:
|
||||||||||||||||||||||||||||
&.is-open { | ||||||||||||||||||||||||||||
background-color: $gray-100; | ||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||
&:focus { | ||||||||||||||||||||||||||||
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); | ||||||||||||||||||||||||||||
outline: none; | ||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||
.block-editor-global-styles-background-panel__inspector-media-replace-title { | ||||||||||||||||||||||||||||
|
@@ -167,7 +190,6 @@ | |||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||
// Without this, the ellipsis can sometimes be partially hidden by the Button padding. | ||||||||||||||||||||||||||||
text-align: start; | ||||||||||||||||||||||||||||
text-align-last: center; | ||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||
.block-editor-global-styles-background-panel__inspector-preview-inner { | ||||||||||||||||||||||||||||
|
@@ -180,25 +202,11 @@ | |||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||
.block-editor-global-styles-background-panel__inspector-image-indicator { | ||||||||||||||||||||||||||||
background-size: cover; | ||||||||||||||||||||||||||||
border-radius: $radius-round; | ||||||||||||||||||||||||||||
width: 20px; | ||||||||||||||||||||||||||||
height: 20px; | ||||||||||||||||||||||||||||
display: block; | ||||||||||||||||||||||||||||
position: relative; | ||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||
border-radius: $radius-small; | ||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||
.block-editor-global-styles-background-panel__inspector-image-indicator::after { | ||||||||||||||||||||||||||||
content: ""; | ||||||||||||||||||||||||||||
position: absolute; | ||||||||||||||||||||||||||||
top: -1px; | ||||||||||||||||||||||||||||
left: -1px; | ||||||||||||||||||||||||||||
bottom: -1px; | ||||||||||||||||||||||||||||
right: -1px; | ||||||||||||||||||||||||||||
border-radius: $radius-round; | ||||||||||||||||||||||||||||
box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2); | ||||||||||||||||||||||||||||
// Show a thin outline in Windows high contrast mode, otherwise the button is invisible. | ||||||||||||||||||||||||||||
border: 1px solid transparent; | ||||||||||||||||||||||||||||
box-sizing: inherit; | ||||||||||||||||||||||||||||
&.has-image { | ||||||||||||||||||||||||||||
background-image: var(--image-url); | ||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||
.block-editor-global-styles-background-panel__dropdown-content-wrapper { | ||||||||||||||||||||||||||||
|
@@ -208,7 +216,7 @@ | |||||||||||||||||||||||||||
.components-focal-point-picker-wrapper { | ||||||||||||||||||||||||||||
background-color: $gray-100; | ||||||||||||||||||||||||||||
width: 100%; | ||||||||||||||||||||||||||||
border-radius: $radius-block-ui; | ||||||||||||||||||||||||||||
border-radius: $radius-small; | ||||||||||||||||||||||||||||
border: $border-width solid $gray-300; | ||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||
|
@@ -227,6 +235,12 @@ | |||||||||||||||||||||||||||
z-index: z-index(".block-editor-global-styles-background-panel__popover"); | ||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||
.block-editor-global-styles-background-panel__popover { | ||||||||||||||||||||||||||||
.block-editor-global-styles-background-panel__image-tools-panel-item { | ||||||||||||||||||||||||||||
padding: 0; | ||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||
.block-editor-global-styles-background-panel__media-replace-popover { | ||||||||||||||||||||||||||||
.components-popover__content { | ||||||||||||||||||||||||||||
// width of block-editor-global-styles-background-panel__dropdown-content-wrapper minus padding. | ||||||||||||||||||||||||||||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,6 +4,7 @@ | |
import { __experimentalItemGroup as ItemGroup } from '@wordpress/components'; | ||
import { | ||
typography, | ||
background, | ||
color, | ||
layout, | ||
shadow as shadowIcon, | ||
|
@@ -33,10 +34,20 @@ function RootMenu() { | |
const hasShadowPanel = true; // useHasShadowPanel( settings ); | ||
const hasDimensionsPanel = useHasDimensionsPanel( settings ); | ||
const hasLayoutPanel = hasDimensionsPanel; | ||
const hasBackgroundPanel = true; // useHasBackgroundPanel( settings ); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can you elaborate on why we are hardcoding this? |
||
|
||
return ( | ||
<> | ||
<ItemGroup> | ||
{ hasBackgroundPanel && ( | ||
<NavigationButtonAsItem | ||
icon={ background } | ||
path="/background" | ||
aria-label={ __( 'Background styles' ) } | ||
> | ||
{ __( 'Background' ) } | ||
</NavigationButtonAsItem> | ||
) } | ||
{ hasTypographyPanel && ( | ||
<NavigationButtonAsItem | ||
icon={ typography } | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { __ } from '@wordpress/i18n'; | ||
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import BackgroundPanel from './background-panel'; | ||
import ScreenHeader from './header'; | ||
import { unlock } from '../../lock-unlock'; | ||
|
||
const { useHasBackgroundPanel, useGlobalSetting } = unlock( | ||
blockEditorPrivateApis | ||
); | ||
|
||
function ScreenBackground() { | ||
const [ settings ] = useGlobalSetting( '' ); | ||
const hasBackgroundPanel = useHasBackgroundPanel( settings ); | ||
return ( | ||
<> | ||
<ScreenHeader | ||
title={ __( 'Background' ) } | ||
description={ __( | ||
'Edit the site background image and color.' | ||
) } | ||
/> | ||
{ hasBackgroundPanel && <BackgroundPanel /> } | ||
</> | ||
); | ||
} | ||
|
||
export default ScreenBackground; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { Path, SVG } from '@wordpress/primitives'; | ||
|
||
const background = ( | ||
<SVG width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
<Path | ||
fillRule="evenodd" | ||
clipRule="evenodd" | ||
d="M11.53 4.47a.75.75 0 1 0-1.06 1.06l8 8a.75.75 0 1 0 1.06-1.06l-8-8Zm5 1a.75.75 0 1 0-1.06 1.06l2 2a.75.75 0 1 0 1.06-1.06l-2-2Zm-11.06 10a.75.75 0 0 1 1.06 0l2 2a.75.75 0 1 1-1.06 1.06l-2-2a.75.75 0 0 1 0-1.06Zm.06-5a.75.75 0 0 0-1.06 1.06l8 8a.75.75 0 1 0 1.06-1.06l-8-8Zm-.06-3a.75.75 0 0 1 1.06 0l10 10a.75.75 0 1 1-1.06 1.06l-10-10a.75.75 0 0 1 0-1.06Zm3.06-2a.75.75 0 0 0-1.06 1.06l10 10a.75.75 0 1 0 1.06-1.06l-10-10Z" | ||
/> | ||
</SVG> | ||
); | ||
|
||
export default background; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I know it was not introduced by this PR, but — as also mentioned about
.components-button
—.components-*
classnames re not meant to be used outside of the components package. We can use custom classnames instead.