-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Global Styles: Caption element UI controls for color and typography (#…
…49141) * abstract the button color screen into a generic element one * use screen color element with the text element * added color and typography controls for caption element * hide caption color control on blocks that don't support it * copypaste fail * removed background controls
- Loading branch information
1 parent
c23706e
commit 9612e1c
Showing
13 changed files
with
227 additions
and
170 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
104 changes: 0 additions & 104 deletions
104
packages/edit-site/src/components/global-styles/screen-button-color.js
This file was deleted.
Oops, something went wrong.
143 changes: 143 additions & 0 deletions
143
packages/edit-site/src/components/global-styles/screen-color-element.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,143 @@ | ||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { __ } from '@wordpress/i18n'; | ||
import { | ||
__experimentalColorGradientControl as ColorGradientControl, | ||
privateApis as blockEditorPrivateApis, | ||
} from '@wordpress/block-editor'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import ScreenHeader from './header'; | ||
import { useSupportedStyles, useColorsPerOrigin } from './hooks'; | ||
import { unlock } from '../../private-apis'; | ||
|
||
const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis ); | ||
|
||
const elements = { | ||
text: { | ||
description: __( | ||
'Set the default color used for text accross the site.' | ||
), | ||
title: __( 'Text' ), | ||
}, | ||
caption: { | ||
description: __( | ||
'Set the default color used for captions accross the site.' | ||
), | ||
title: __( 'Captions' ), | ||
}, | ||
button: { | ||
description: __( | ||
'Set the default color used for buttons accross the site.' | ||
), | ||
title: __( 'Buttons' ), | ||
}, | ||
}; | ||
|
||
function ScreenColorElement( { name, element, variation = '' } ) { | ||
const prefix = variation ? `variations.${ variation }.` : ''; | ||
const supports = useSupportedStyles( name ); | ||
const colorsPerOrigin = useColorsPerOrigin( name ); | ||
const [ isTextEnabled ] = useGlobalSetting( 'color.text', name ); | ||
const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name ); | ||
let [ isBackgroundEnabled ] = useGlobalSetting( 'color.background', name ); | ||
|
||
let textColorElementSelector = 'elements.' + element + '.color.text'; | ||
const backgroundColorElementSelector = | ||
'elements.' + element + '.color.background'; | ||
|
||
let hasElementColor = | ||
supports.includes( 'buttonColor' ) && | ||
( colorsPerOrigin.length > 0 || areCustomSolidsEnabled ); | ||
|
||
if ( element === 'text' ) { | ||
isBackgroundEnabled = false; | ||
textColorElementSelector = 'color.text'; | ||
hasElementColor = | ||
supports.includes( 'color' ) && | ||
isTextEnabled && | ||
( colorsPerOrigin.length > 0 || areCustomSolidsEnabled ); | ||
} else if ( element === 'button' ) { | ||
hasElementColor = | ||
supports.includes( 'buttonColor' ) && | ||
isBackgroundEnabled && | ||
( colorsPerOrigin.length > 0 || areCustomSolidsEnabled ); | ||
} else if ( element === 'caption' ) { | ||
isBackgroundEnabled = false; | ||
} | ||
|
||
const [ elementTextColor, setElementTextColor ] = useGlobalStyle( | ||
prefix + textColorElementSelector, | ||
name | ||
); | ||
const [ userElementTextColor ] = useGlobalStyle( | ||
textColorElementSelector, | ||
name, | ||
'user' | ||
); | ||
|
||
const [ elementBgColor, setElementBgColor ] = useGlobalStyle( | ||
backgroundColorElementSelector, | ||
name | ||
); | ||
const [ userElementBgColor ] = useGlobalStyle( | ||
backgroundColorElementSelector, | ||
name, | ||
'user' | ||
); | ||
|
||
if ( ! hasElementColor ) { | ||
return null; | ||
} | ||
|
||
return ( | ||
<> | ||
<ScreenHeader | ||
title={ elements[ element ].title } | ||
description={ elements[ element ].description } | ||
/> | ||
|
||
<h3 className="edit-site-global-styles-section-title"> | ||
{ __( 'Text color' ) } | ||
</h3> | ||
|
||
<ColorGradientControl | ||
className="edit-site-screen-element-color__control" | ||
colors={ colorsPerOrigin } | ||
disableCustomColors={ ! areCustomSolidsEnabled } | ||
showTitle={ false } | ||
enableAlpha | ||
__experimentalIsRenderedInSidebar | ||
colorValue={ elementTextColor } | ||
onColorChange={ setElementTextColor } | ||
clearable={ elementTextColor === userElementTextColor } | ||
headingLevel={ 4 } | ||
/> | ||
{ isBackgroundEnabled && ( | ||
<> | ||
<h3 className="edit-site-global-styles-section-title"> | ||
{ __( 'Background color' ) } | ||
</h3> | ||
|
||
<ColorGradientControl | ||
className="edit-site-screen-element-color__control" | ||
colors={ colorsPerOrigin } | ||
disableCustomColors={ ! areCustomSolidsEnabled } | ||
showTitle={ false } | ||
enableAlpha | ||
__experimentalIsRenderedInSidebar | ||
colorValue={ elementBgColor } | ||
onColorChange={ setElementBgColor } | ||
clearable={ elementBgColor === userElementBgColor } | ||
headingLevel={ 4 } | ||
/> | ||
</> | ||
) } | ||
</> | ||
); | ||
} | ||
|
||
export default ScreenColorElement; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
9612e1c
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.
Flaky tests detected in 9612e1c.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.
🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4467793804
📝 Reported issues:
/test/e2e/specs/site-editor/title.spec.js