-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Global Styles Color Palette editor default to theme/core paletts.
- Loading branch information
1 parent
5287a71
commit a4e5cef
Showing
1 changed file
with
11 additions
and
30 deletions.
There are no files selected for viewing
41 changes: 11 additions & 30 deletions
41
packages/edit-site/src/components/sidebar/color-palette-panel.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 |
---|---|---|
@@ -1,44 +1,25 @@ | ||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { | ||
Button, | ||
__experimentalColorEdit as ColorEdit, | ||
} from '@wordpress/components'; | ||
import { __experimentalColorEdit as ColorEdit } from '@wordpress/components'; | ||
import { __ } from '@wordpress/i18n'; | ||
|
||
export default function ColorPalettePanel( { | ||
contextName, | ||
getSetting, | ||
setSetting, | ||
} ) { | ||
const colors = getSetting( contextName, 'color.palette' ); | ||
let emptyUI; | ||
if ( colors === undefined ) { | ||
emptyUI = __( | ||
'Using theme or core default colors. Add some colors to create your own color palette instead.' | ||
); | ||
} else if ( colors && colors.length === 0 ) { | ||
emptyUI = ( | ||
<> | ||
<p>{ __( 'Using an empty color palette.' ) }</p> | ||
<Button | ||
isSmall | ||
isSecondary | ||
onClick={ () => setSetting( contextName, 'color.palette' ) } | ||
> | ||
{ __( 'Reset to theme/core defaults' ) } | ||
</Button> | ||
</> | ||
); | ||
} | ||
/** | ||
* Internal dependencies | ||
*/ | ||
import { useEditorFeature } from '../editor/utils'; | ||
|
||
export default function ColorPalettePanel( { contextName, setSetting } ) { | ||
const colors = useEditorFeature( 'color.palette', contextName ); | ||
return ( | ||
<ColorEdit | ||
colors={ colors } | ||
onChange={ ( newColors ) => { | ||
setSetting( contextName, 'color.palette', newColors ); | ||
} } | ||
emptyUI={ emptyUI } | ||
emptyUI={ __( | ||
'Colors are empty! Add some colors to create your own color palette.' | ||
) } | ||
/> | ||
); | ||
} |