From f86176cc1a6e8d23d45948d5e47637f77d29452c Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 15 Dec 2022 17:00:09 +1100 Subject: [PATCH] Add colors and typography --- .../components/global-styles/screen-colors.js | 59 ++++++++++++++----- .../global-styles/screen-typography.js | 10 +++- .../global-styles/typography-panel.js | 39 +++++++++--- .../src/components/global-styles/ui.js | 7 ++- 4 files changed, 88 insertions(+), 27 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js index c713cb5ee5818..80236788ca129 100644 --- a/packages/edit-site/src/components/global-styles/screen-colors.js +++ b/packages/edit-site/src/components/global-styles/screen-colors.js @@ -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; @@ -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; @@ -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; @@ -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; @@ -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; @@ -173,7 +197,7 @@ function ButtonColorItem( { name, parentMenu } ) { ); } -function ScreenColors( { name } ) { +function ScreenColors( { name, variationPath = '' } ) { const parentMenu = name === undefined ? '' : '/blocks/' + encodeURIComponent( name ); @@ -196,22 +220,27 @@ function ScreenColors( { name } ) { diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js index 3f7a5eb3eb867..d21b8057be104 100644 --- a/packages/edit-site/src/components/global-styles/screen-typography.js +++ b/packages/edit-site/src/components/global-styles/screen-typography.js @@ -75,7 +75,7 @@ function Item( { name, parentMenu, element, label } ) { ); } -function ScreenTypography( { name } ) { +function ScreenTypography( { name, variationPath = '' } ) { const parentMenu = name === undefined ? '' : '/blocks/' + name; return ( @@ -121,7 +121,13 @@ function ScreenTypography( { name } ) { ) } { /* No typography elements support yet for blocks. */ } - { !! name && } + { !! name && ( + + ) } ); } diff --git a/packages/edit-site/src/components/global-styles/typography-panel.js b/packages/edit-site/src/components/global-styles/typography-panel.js index 82f7dc796d92f..b793d81978ef2 100644 --- a/packages/edit-site/src/components/global-styles/typography-panel.js +++ b/packages/edit-site/src/components/global-styles/typography-panel.js @@ -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' ) { @@ -210,9 +215,15 @@ 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, @@ -220,27 +231,39 @@ export default function TypographyPanel( { name, element, headingLevel } ) { 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(); diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index cb65457575c1d..eb5ea9eda2126 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -80,7 +80,10 @@ function ContextScreens( { name, parentMenu = '' } ) { return ( <> - + - +