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
Color Block Support: Switch to ToolsPanel for displaying UI #34027
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,85 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import classnames from 'classnames'; | ||
|
||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { | ||
Button, | ||
ColorIndicator, | ||
Dropdown, | ||
FlexItem, | ||
__experimentalHStack as HStack, | ||
__experimentalToolsPanelItem as ToolsPanelItem, | ||
} from '@wordpress/components'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import ColorGradientControl from './control'; | ||
import useMultipleOriginColorsAndGradients from './use-multiple-origin-colors-and-gradients'; | ||
|
||
export default function ToolsPanelColorDropdown( { | ||
aaronrobertshaw marked this conversation as resolved.
Show resolved
Hide resolved
|
||
settings, | ||
enableAlpha, | ||
...otherProps | ||
} ) { | ||
const colorGradientSettings = useMultipleOriginColorsAndGradients(); | ||
const controlSettings = { | ||
...colorGradientSettings, | ||
clearable: false, | ||
enableAlpha, | ||
label: settings.label, | ||
onColorChange: settings.onColorChange, | ||
onGradientChange: settings.onGradientChange, | ||
colorValue: settings.colorValue, | ||
gradientValue: settings.gradientValue, | ||
}; | ||
const selectedColor = settings.gradientValue ?? settings.colorValue; | ||
|
||
return ( | ||
<ToolsPanelItem | ||
hasValue={ settings.hasValue } | ||
label={ settings.label } | ||
onDeselect={ settings.onDeselect } | ||
isShownByDefault={ settings.isShownByDefault } | ||
resetAllFilter={ settings.resetAllFilter } | ||
{ ...otherProps } | ||
className="block-editor-tools-panel-color-gradient-settings__item" | ||
> | ||
<Dropdown | ||
className="block-editor-tools-panel-color-dropdown" | ||
contentClassName="block-editor-panel-color-gradient-settings__dropdown-content" | ||
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. This is reusing a classname from another component potentially creating style conflicts. 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. Agreed. To maintain the visual consistency, are you okay with us duplicating all these styles? |
||
renderToggle={ ( { isOpen, onToggle } ) => ( | ||
<Button | ||
onClick={ onToggle } | ||
aria-expanded={ isOpen } | ||
className={ classnames( | ||
'block-editor-panel-color-gradient-settings__dropdown', | ||
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. This is reusing a classname from another component potentially creating style conflicts. |
||
{ 'is-open': isOpen } | ||
) } | ||
> | ||
<HStack justify="flex-start"> | ||
<ColorIndicator | ||
className="block-editor-panel-color-gradient-settings__color-indicator" | ||
colorValue={ selectedColor } | ||
/> | ||
<FlexItem>{ settings.label }</FlexItem> | ||
</HStack> | ||
</Button> | ||
) } | ||
renderContent={ () => ( | ||
<ColorGradientControl | ||
showTitle={ false } | ||
__experimentalHasMultipleOrigins | ||
__experimentalIsRenderedInSidebar | ||
enableAlpha | ||
{ ...controlSettings } | ||
/> | ||
) } | ||
/> | ||
</ToolsPanelItem> | ||
); | ||
} |
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.
This class doesn't seem to follow our naming guidelines. We should start with the package name followed by the component name and a modified, so something like
block-editor-block-inspector__color-slot
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 can create a PR to tidy this up.