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

Jump to bottom

Extract the three color panels to their own global styles view #35400

Merged
merged 2 commits into from Oct 7, 2021
Merged

Extract the three color panels to their own global styles view #35400

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8b277a8
Extract the three color panels to their own global styles view
youknowriad Oct 6, 2021
ef618f9
Use links as label
youknowriad Oct 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
15 changes: 15 additions & 0 deletions packages/edit-site/src/components/global-styles/color-utils.js
View file
Open in desktop
@@ -0,0 +1,15 @@
/**
* Internal dependencies
*/

import { getSupportedGlobalStylesPanels } from './hooks';

export function useHasColorPanel( name ) {
const supports = getSupportedGlobalStylesPanels( name );
return (
supports.includes( 'color' ) ||
supports.includes( 'backgroundColor' ) ||
supports.includes( 'background' ) ||
supports.includes( 'linkColor' )
);
}
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/global-styles/context-menu.js
View file
Open in desktop
Expand Up @@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n';
* Internal dependencies
*/
import { useHasBorderPanel } from './border-panel';
import { useHasColorPanel } from './color-panel';
import { useHasColorPanel } from './color-utils';
import { useHasDimensionsPanel } from './dimensions-panel';
import { useHasTypographyPanel } from './typography-panel';
import NavigationButton from './navigation-button';
Expand Down
60 changes: 26 additions & 34 deletions packages/edit-site/src/components/global-styles/palette.js
View file
Open in desktop
Expand Up @@ -26,40 +26,32 @@ function Palette( { name } ) {
: '/blocks/' + name + '/colors/palette';

return (
<div className="edit-site-global-style-palette">
<VStack spacing={ 1 }>
<Subtitle>{ __( 'Palette' ) }</Subtitle>
<ItemGroup isBordered isSeparated>
<NavigationButton path={ screenPath }>
<HStack>
<FlexBlock>
<ZStack isLayered={ false } offset={ -8 }>
{ colors
.slice( 0, 5 )
.map( ( { color } ) => (
<ColorIndicator
key={ color }
colorValue={ color }
/>
) ) }
</ZStack>
</FlexBlock>
<FlexItem>
{ sprintf(
// Translators: %d: Number of palette colors.
_n(
'%d color',
'%d colors',
colors.length
),
colors.length
) }
</FlexItem>
</HStack>
</NavigationButton>
</ItemGroup>
</VStack>
</div>
<VStack spacing={ 3 }>
<Subtitle>{ __( 'Palette' ) }</Subtitle>
<ItemGroup isBordered isSeparated>
<NavigationButton path={ screenPath }>
<HStack>
<FlexBlock>
<ZStack isLayered={ false } offset={ -8 }>
{ colors.slice( 0, 5 ).map( ( { color } ) => (
<ColorIndicator
key={ color }
colorValue={ color }
/>
) ) }
</ZStack>
</FlexBlock>
<FlexItem>
{ sprintf(
// Translators: %d: Number of palette colors.
_n( '%d color', '%d colors', colors.length ),
colors.length
) }
</FlexItem>
</HStack>
</NavigationButton>
</ItemGroup>
</VStack>
);
}

Expand Down
3 changes: 2 additions & 1 deletion packages/edit-site/src/components/global-styles/preview.js
View file
Open in desktop
Expand Up @@ -18,11 +18,12 @@ const StylesPreview = () => {
const [ textColor = 'black' ] = useStyle( 'color.text' );
const [ linkColor = 'blue' ] = useStyle( 'elements.link.color.text' );
const [ backgroundColor = 'white' ] = useStyle( 'color.background' );
const [ gradientValue ] = useStyle( 'color.gradient' );

return (
<Card
className="edit-site-global-styles-preview"
style={ { background: backgroundColor } }
style={ { background: gradientValue ?? backgroundColor } }
>
<HStack spacing={ 5 }>
<div style={ { fontFamily, fontSize: '80px' } }>Aa</div>
Expand Down
83 changes: 22 additions & 61 deletions ...c/components/global-styles/color-panel.js → .../global-styles/screen-background-color.js
View file
Open in desktop
@@ -1,27 +1,17 @@
/**
* WordPress dependencies
*/
import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';

/**
* Internal dependencies
*/

import ScreenHeader from './header';
import { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';
import Palette from './palette';

export function useHasColorPanel( name ) {
const supports = getSupportedGlobalStylesPanels( name );
return (
supports.includes( 'color' ) ||
supports.includes( 'backgroundColor' ) ||
supports.includes( 'background' ) ||
supports.includes( 'linkColor' )
);
}

export default function ColorPanel( { name } ) {
function ScreenBackgroundColor( { name } ) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have considered merging the three screens (background, text and link) into a single screen with a colorType prop to change its behavior but the code felt less readable and full with if/else. So I thought for now it's better to have separate screen (even with some code duplication).

const parentMenu = name === undefined ? '' : '/blocks/' + name;
const supports = getSupportedGlobalStylesPanels( name );
const [ solids ] = useSetting( 'color.palette', name );
const [ gradients ] = useSetting( 'color.gradients', name );
Expand All @@ -31,28 +21,15 @@ export default function ColorPanel( { name } ) {
name
);

const [ isLinkEnabled ] = useSetting( 'color.link', name );
const [ isTextEnabled ] = useSetting( 'color.text', name );
const [ isBackgroundEnabled ] = useSetting( 'color.background', name );

const hasLinkColor =
supports.includes( 'linkColor' ) &&
isLinkEnabled &&
( solids.length > 0 || areCustomSolidsEnabled );
const hasTextColor =
supports.includes( 'color' ) &&
isTextEnabled &&
( solids.length > 0 || areCustomSolidsEnabled );
const hasBackgroundColor =
supports.includes( 'backgroundColor' ) &&
isBackgroundEnabled &&
( solids.length > 0 || areCustomSolidsEnabled );
const hasGradientColor =
supports.includes( 'background' ) &&
( gradients.length > 0 || areCustomGradientsEnabled );

const [ color, setColor ] = useStyle( 'color.text', name );
const [ userColor ] = useStyle( 'color.text', name, 'user' );
const [ backgroundColor, setBackgroundColor ] = useStyle(
'color.background',
name
Expand All @@ -64,26 +41,12 @@ export default function ColorPanel( { name } ) {
);
const [ gradient, setGradient ] = useStyle( 'color.gradient', name );
const [ userGradient ] = useStyle( 'color.gradient', name, 'user' );
const [ linkColor, setLinkColor ] = useStyle(
'elements.link.color.text',
name
);
const [ userLinkColor ] = useStyle(
'elements.link.color.text',
name,
'user'
);

const settings = [];
if ( hasTextColor ) {
settings.push( {
colorValue: color,
onColorChange: setColor,
label: __( 'Text color' ),
clearable: color === userColor,
} );
if ( ! hasBackgroundColor && ! hasGradientColor ) {
return null;
}

const settings = [];
let backgroundSettings = {};
if ( hasBackgroundColor ) {
backgroundSettings = {
Expand All @@ -107,26 +70,22 @@ export default function ColorPanel( { name } ) {
}
}

if ( hasBackgroundColor || hasGradientColor ) {
settings.push( {
...backgroundSettings,
...gradientSettings,
label: __( 'Background color' ),
} );
}

if ( hasLinkColor ) {
settings.push( {
colorValue: linkColor,
onColorChange: setLinkColor,
label: __( 'Link color' ),
clearable: linkColor === userLinkColor,
} );
}
settings.push( {
...backgroundSettings,
...gradientSettings,
label: __( 'Background color' ),
} );

return (
<>
<Palette contextName={ name } />
<ScreenHeader
back={ parentMenu + '/colors' }
title={ __( 'Background' ) }
description={ __(
'Set the background color choosing from the palette or pick your own'
) }
/>

<PanelColorGradientSettings
title={ __( 'Color' ) }
settings={ settings }
Expand All @@ -139,3 +98,5 @@ export default function ColorPanel( { name } ) {
</>
);
}

export default ScreenBackgroundColor;
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/global-styles/screen-block-list.js
View file
Open in desktop
Expand Up @@ -8,7 +8,7 @@ import { __ } from '@wordpress/i18n';
* Internal dependencies
*/
import { useHasBorderPanel } from './border-panel';
import { useHasColorPanel } from './color-panel';
import { useHasColorPanel } from './color-utils';
import { useHasDimensionsPanel } from './dimensions-panel';
import { useHasTypographyPanel } from './typography-panel';
import ScreenHeader from './header';
Expand Down
105 changes: 103 additions & 2 deletions packages/edit-site/src/components/global-styles/screen-colors.js
View file
Open in desktop
Expand Up @@ -2,12 +2,90 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import {
__experimentalItemGroup as ItemGroup,
__experimentalHStack as HStack,
__experimentalVStack as VStack,
FlexItem,
ColorIndicator,
} from '@wordpress/components';

/**
* Internal dependencies
*/
import ColorPanel from './color-panel';
import ScreenHeader from './header';
import Palette from './palette';
import NavigationButton from './navigation-button';
import { getSupportedGlobalStylesPanels, useStyle } from './hooks';
import Subtitle from './subtitle';

function BackgroundColorItem( { name, parentMenu } ) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have considered merging the three items (background, text and link) into a single component with a colorType prop to change its behavior but the code felt less readable and full with if/else. So I thought for now it's better to have separate screen (even with some code duplication).

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems fine to me. We might want to create a "BlockElement" higher level component eventually, but we need to see how the typography ones evolve, and how we want to render this in the block inspector where it doesn't "navigate".

const supports = getSupportedGlobalStylesPanels( name );
const hasSupport =
supports.includes( 'backgroundColor' ) ||
supports.includes( 'background' );
const [ backgroundColor ] = useStyle( 'color.background', name );
const [ gradientValue ] = useStyle( 'color.gradient', name );

if ( ! hasSupport ) {
return null;
}

return (
<NavigationButton path={ parentMenu + '/colors/background' }>
<HStack justify="flex-start">
<FlexItem>
<ColorIndicator
colorValue={ gradientValue ?? backgroundColor }
/>
</FlexItem>
<FlexItem>{ __( 'Background' ) }</FlexItem>
</HStack>
</NavigationButton>
);
}

function TextColorItem( { name, parentMenu } ) {
const supports = getSupportedGlobalStylesPanels( name );
const hasSupport = supports.includes( 'color' );
const [ color ] = useStyle( 'color.text', name );

if ( ! hasSupport ) {
return null;
}

return (
<NavigationButton path={ parentMenu + '/colors/text' }>
<HStack justify="flex-start">
<FlexItem>
<ColorIndicator colorValue={ color } />
</FlexItem>
<FlexItem>{ __( 'Text' ) }</FlexItem>
</HStack>
</NavigationButton>
);
}

function LinkColorItem( { name, parentMenu } ) {
const supports = getSupportedGlobalStylesPanels( name );
const hasSupport = supports.includes( 'linkColor' );
const [ color ] = useStyle( 'elements.link.color.text', name );

if ( ! hasSupport ) {
return null;
}

return (
<NavigationButton path={ parentMenu + '/colors/link' }>
<HStack justify="flex-start">
<FlexItem>
<ColorIndicator colorValue={ color } />
</FlexItem>
<FlexItem>{ __( 'Links' ) }</FlexItem>
</HStack>
</NavigationButton>
);
}

function ScreenColors( { name } ) {
const parentMenu = name === undefined ? '' : '/blocks/' + name;
Expand All @@ -21,7 +99,30 @@ function ScreenColors( { name } ) {
'Manage color palettes and how they affect the different elements of the site.'
) }
/>
<ColorPanel name={ name } />

<div className="edit-site-global-styles-screen-colors">
<VStack spacing={ 10 }>
<Palette contextName={ name } />

<VStack spacing={ 3 }>
<Subtitle>{ __( 'Elements' ) }</Subtitle>
<ItemGroup isBordered isSeparated>
<BackgroundColorItem
name={ name }
parentMenu={ parentMenu }
/>
<TextColorItem
name={ name }
parentMenu={ parentMenu }
/>
<LinkColorItem
name={ name }
parentMenu={ parentMenu }
/>
</ItemGroup>
</VStack>
</VStack>
</div>
</>
);
}
Expand Down