Skip to content

Commit

Permalink
Add colors and typography
Browse files Browse the repository at this point in the history
  • Loading branch information
@tellthemachines
tellthemachines committed Dec 19, 2022
1 parent 8f51e02 commit f86176c
Show file tree
Hide file tree
Showing 4 changed files with 88 additions and 27 deletions.
59 changes: 44 additions & 15 deletions packages/edit-site/src/components/global-styles/screen-colors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,19 @@ import { getSupportedGlobalStylesPanels, useStyle } from './hooks';
import Subtitle from './subtitle';
import ColorIndicatorWrapper from './color-indicator-wrapper';

function BackgroundColorItem( { name, parentMenu } ) {
function BackgroundColorItem( { name, parentMenu, variationPath = '' } ) {
const supports = getSupportedGlobalStylesPanels( name );
const hasSupport =
supports.includes( 'backgroundColor' ) ||
supports.includes( 'background' );
const [ backgroundColor ] = useStyle( 'color.background', name );
const [ gradientValue ] = useStyle( 'color.gradient', name );
const [ backgroundColor ] = useStyle(
variationPath + 'color.background',
name
);
const [ gradientValue ] = useStyle(
variationPath + 'color.gradient',
name
);

if ( ! hasSupport ) {
return null;
Expand All @@ -53,10 +59,10 @@ function BackgroundColorItem( { name, parentMenu } ) {
);
}

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

if ( ! hasSupport ) {
return null;
Expand All @@ -82,11 +88,17 @@ function TextColorItem( { name, parentMenu } ) {
);
}

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

if ( ! hasSupport ) {
return null;
Expand Down Expand Up @@ -114,11 +126,17 @@ function LinkColorItem( { name, parentMenu } ) {
);
}

function HeadingColorItem( { name, parentMenu } ) {
function HeadingColorItem( { name, parentMenu, variationPath = '' } ) {
const supports = getSupportedGlobalStylesPanels( name );
const hasSupport = supports.includes( 'color' );
const [ color ] = useStyle( 'elements.heading.color.text', name );
const [ bgColor ] = useStyle( 'elements.heading.color.background', name );
const [ color ] = useStyle(
variationPath + 'elements.heading.color.text',
name
);
const [ bgColor ] = useStyle(
variationPath + 'elements.heading.color.background',
name
);

if ( ! hasSupport ) {
return null;
Expand All @@ -144,11 +162,17 @@ function HeadingColorItem( { name, parentMenu } ) {
);
}

function ButtonColorItem( { name, parentMenu } ) {
function ButtonColorItem( { name, parentMenu, variationPath = '' } ) {
const supports = getSupportedGlobalStylesPanels( name );
const hasSupport = supports.includes( 'buttonColor' );
const [ color ] = useStyle( 'elements.button.color.text', name );
const [ bgColor ] = useStyle( 'elements.button.color.background', name );
const [ color ] = useStyle(
variationPath + 'elements.button.color.text',
name
);
const [ bgColor ] = useStyle(
variationPath + 'elements.button.color.background',
name
);

if ( ! hasSupport ) {
return null;
Expand All @@ -173,7 +197,7 @@ function ButtonColorItem( { name, parentMenu } ) {
);
}

function ScreenColors( { name } ) {
function ScreenColors( { name, variationPath = '' } ) {
const parentMenu =
name === undefined ? '' : '/blocks/' + encodeURIComponent( name );

Expand All @@ -196,22 +220,27 @@ function ScreenColors( { name } ) {
<BackgroundColorItem
name={ name }
parentMenu={ parentMenu }
variationPath={ variationPath }
/>
<TextColorItem
name={ name }
parentMenu={ parentMenu }
variationPath={ variationPath }
/>
<LinkColorItem
name={ name }
parentMenu={ parentMenu }
variationPath={ variationPath }
/>
<HeadingColorItem
name={ name }
parentMenu={ parentMenu }
variationPath={ variationPath }
/>
<ButtonColorItem
name={ name }
parentMenu={ parentMenu }
variationPath={ variationPath }
/>
</ItemGroup>
</VStack>
Expand Down
10 changes: 8 additions & 2 deletions packages/edit-site/src/components/global-styles/screen-typography.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ function Item( { name, parentMenu, element, label } ) {
);
}

function ScreenTypography( { name } ) {
function ScreenTypography( { name, variationPath = '' } ) {
const parentMenu = name === undefined ? '' : '/blocks/' + name;

return (
Expand Down Expand Up @@ -121,7 +121,13 @@ function ScreenTypography( { name } ) {
</div>
) }
{ /* No typography elements support yet for blocks. */ }
{ !! name && <TypographyPanel name={ name } element="text" /> }
{ !! name && (
<TypographyPanel
name={ name }
variationPath={ variationPath }
element="text"
/>
) }
</>
);
}
Expand Down
39 changes: 31 additions & 8 deletions packages/edit-site/src/components/global-styles/typography-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,12 @@ function useFontAppearance( prefix, name ) {
};
}

export default function TypographyPanel( { name, element, headingLevel } ) {
export default function TypographyPanel( {
name,
element,
headingLevel,
variationPath = '',
} ) {
const supports = getSupportedGlobalStylesPanels( name );
let prefix = '';
if ( element === 'heading' ) {
Expand Down Expand Up @@ -210,37 +215,55 @@ export default function TypographyPanel( { name, element, headingLevel } ) {
}

const [ fontFamily, setFontFamily, hasFontFamily, resetFontFamily ] =
useStyleWithReset( prefix + 'typography.fontFamily', name );
useStyleWithReset(
variationPath + prefix + 'typography.fontFamily',
name
);
const { fontSize, setFontSize, hasFontSize, resetFontSize } =
useFontSizeWithReset( prefix + 'typography.fontSize', name );
useFontSizeWithReset(
variationPath + prefix + 'typography.fontSize',
name
);
const {
fontStyle,
setFontStyle,
fontWeight,
setFontWeight,
hasFontAppearance,
resetFontAppearance,
} = useFontAppearance( prefix, name );
} = useFontAppearance( variationPath + prefix, name );
const [ lineHeight, setLineHeight, hasLineHeight, resetLineHeight ] =
useStyleWithReset( prefix + 'typography.lineHeight', name );
useStyleWithReset(
variationPath + prefix + 'typography.lineHeight',
name
);
const [
letterSpacing,
setLetterSpacing,
hasLetterSpacing,
resetLetterSpacing,
] = useStyleWithReset( prefix + 'typography.letterSpacing', name );
] = useStyleWithReset(
variationPath + prefix + 'typography.letterSpacing',
name
);
const [
textTransform,
setTextTransform,
hasTextTransform,
resetTextTransform,
] = useStyleWithReset( prefix + 'typography.textTransform', name );
] = useStyleWithReset(
variationPath + prefix + 'typography.textTransform',
name
);
const [
textDecoration,
setTextDecoration,
hasTextDecoration,
resetTextDecoration,
] = useStyleWithReset( prefix + 'typography.textDecoration', name );
] = useStyleWithReset(
variationPath + prefix + 'typography.textDecoration',
name
);

const resetAll = () => {
resetFontFamily();
Expand Down
7 changes: 5 additions & 2 deletions packages/edit-site/src/components/global-styles/ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,10 @@ function ContextScreens( { name, parentMenu = '' } ) {
return (
<>
<GlobalStylesNavigationScreen path={ parentMenu + '/typography' }>
<ScreenTypography name={ name } />
<ScreenTypography
name={ name }
variationPath={ variationPath }
/>
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen
Expand Down Expand Up @@ -108,7 +111,7 @@ function ContextScreens( { name, parentMenu = '' } ) {
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen path={ parentMenu + '/colors' }>
<ScreenColors name={ name } />
<ScreenColors name={ name } variationPath={ variationPath } />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen
Expand Down

1 comment on commit f86176c

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected.
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/3728655852
📝 Reported issues:

Please sign in to comment.