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.

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

Add elements support to the typography panel in global styles #36718

Merged
merged 6 commits into from
Nov 24, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/block-editor/src/hooks/typography.js
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,7 @@ export function TypographyPanel( props ) {
);
}

const hasTypographySupport = ( blockName ) => {
export const hasTypographySupport = ( blockName ) => {
ntsekouras marked this conversation as resolved.
Show resolved Hide resolved
return TYPOGRAPHY_SUPPORT_KEYS.some( ( key ) =>
hasBlockSupport( blockName, key )
);
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import TypographyPanel from './typography-panel';
import ScreenHeader from './header';

const elements = {
text: {
description: __( 'Manage the fonts used on the site.' ),
title: __( 'Text' ),
},
link: {
description: __( 'Manage the fonts and typography used on the links.' ),
Copy link
Contributor

Choose a reason for hiding this comment

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

I guess these descriptions should be more consistent and change only the part on the site|links, no?

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'm happy to use any proposed descriptions here :)

Copy link
Contributor

Choose a reason for hiding this comment

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

So I guess we should remove the export here?

title: __( 'Link' ),
Copy link
Member

Choose a reason for hiding this comment

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

This should probably be plural

Copy link
Contributor Author

Choose a reason for hiding this comment

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

},
};

function ScreenTypographyElement( { name, element } ) {
const parentMenu =
name === undefined ? '/typography' : '/blocks/' + name + '/typography';

return (
<>
<ScreenHeader
back={ parentMenu }
title={ elements[ element ].title }
description={ elements[ element ].description }
/>
<TypographyPanel name={ name } element={ element } />
</>
);
}

export default ScreenTypographyElement;
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,69 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import {
__experimentalItemGroup as ItemGroup,
__experimentalVStack as VStack,
__experimentalHStack as HStack,
FlexItem,
} from '@wordpress/components';

/**
* Internal dependencies
*/
import TypographyPanel from './typography-panel';
import ScreenHeader from './header';
import NavigationButton from './navigation-button';
import { useStyle } from './hooks';
import Subtitle from './subtitle';
import TypographyPanel from './typography-panel';

function Item( { name, parentMenu, element, label } ) {
const hasSupport = ! name;
const prefix =
element === 'text' || ! element ? '' : `elements.${ element }.`;
const extraStyles =
element === 'link'
? {
textDecoration: 'underline',
}
: {};
const [ fontFamily ] = useStyle( prefix + 'typography.fontFamily', name );
const [ fontStyle ] = useStyle( prefix + 'typography.fontStyle', name );
const [ fontWeight ] = useStyle( prefix + 'typography.fontWeight', name );
const [ letterSpacing ] = useStyle(
prefix + 'typography.letterSpacing',
name
);
const [ backgroundColor ] = useStyle( prefix + 'color.background', name );
const [ gradientValue ] = useStyle( prefix + 'color.gradient', name );
const [ color ] = useStyle( prefix + 'color.text', name );

if ( ! hasSupport ) {
return null;
}

return (
<NavigationButton path={ parentMenu + '/typography/' + element }>
<HStack justify="flex-start">
<FlexItem
className="edit-site-global-styles-screen-typography__indicator"
style={ {
fontFamily: fontFamily ?? 'serif',
background: gradientValue ?? backgroundColor,
color,
fontStyle,
fontWeight,
letterSpacing,
...extraStyles,
} }
>
{ __( 'Aa' ) }
</FlexItem>
<FlexItem>{ label }</FlexItem>
</HStack>
</NavigationButton>
);
}

function ScreenTypography( { name } ) {
const parentMenu = name === undefined ? '' : '/blocks/' + name;
Expand All @@ -18,10 +75,34 @@ function ScreenTypography( { name } ) {
back={ parentMenu ? parentMenu : '/' }
title={ __( 'Typography' ) }
description={ __(
'Manage the fonts used on the site and the default aspect of different global elements.'
'Manage the typography settings for different elements.'
) }
/>
<TypographyPanel name={ name } />

{ ! name && (
<div className="edit-site-global-styles-screen-typography">
<VStack spacing={ 3 }>
<Subtitle>{ __( 'Elements' ) }</Subtitle>
<ItemGroup isBordered isSeparated>
<Item
name={ name }
parentMenu={ parentMenu }
element="text"
label={ __( 'Text' ) }
/>
<Item
name={ name }
parentMenu={ parentMenu }
element="link"
label={ __( 'Link' ) }
/>
</ItemGroup>
</VStack>
</div>
) }

{ /* no typogrpahy elements support yet for blocks */ }
{ !! name && <TypographyPanel name={ name } element="text" /> }
</>
);
}
Expand Down
24 changes: 24 additions & 0 deletions packages/edit-site/src/components/global-styles/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,30 @@
}
}

.edit-site-typography-panel__preview {
display: flex;
align-items: center;
justify-content: center;
min-height: 100px;
margin-bottom: $grid-unit-20;
background: $gray-100;
border-radius: $radius-block-ui;
}

.edit-site-global-styles-screen-typography {
margin: $grid-unit-20;
}

.edit-site-global-styles-screen-typography__indicator {
height: 24px;
width: 24px;
font-size: 14px;
display: flex !important;
align-items: center;
justify-content: center;
border-radius: $radius-block-ui;
}

.edit-site-global-styles-screen-colors {
margin: $grid-unit-20;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,10 @@ function useHasLetterSpacingControl( name ) {
);
}

export default function TypographyPanel( { name } ) {
export default function TypographyPanel( { name, element } ) {
Copy link
Member

Choose a reason for hiding this comment

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

Hey, I'd like us to revisit this conversation #35264 (comment)

What are your thoughts about passing the underlying functions useSetting, useStyle, and getSupportedGlobalStylesPanels the parameters path and context? The context would contain any extra metadata we need (source, block name, element, etc). I've recently introduced this change for the server-side API to be future-proof in regards to addressing different templates down the road #36610

Not a blocker for this PR, although I'm now more convinced we should do it for 5.9 than I was a few months ago when we first discussed it.

Copy link
Contributor Author

@youknowriad youknowriad Nov 22, 2021

Choose a reason for hiding this comment

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

yep, I'm fine with that change but this is an internal API for the moment, so there's no real urgency yet.

const supports = getSupportedGlobalStylesPanels( name );
const prefix =
element === 'text' || ! element ? '' : `elements.${ element }.`;
const [ fontSizes ] = useSetting( 'typography.fontSizes', name );
const disableCustomFontSizes = ! useSetting(
'typography.customFontSize',
Expand All @@ -73,30 +75,58 @@ export default function TypographyPanel( { name } ) {
const hasLetterSpacingControl = useHasLetterSpacingControl( name );

const [ fontFamily, setFontFamily ] = useStyle(
'typography.fontFamily',
prefix + 'typography.fontFamily',
name
);
const [ fontSize, setFontSize ] = useStyle(
prefix + 'typography.fontSize',
name
);
const [ fontSize, setFontSize ] = useStyle( 'typography.fontSize', name );

const [ fontStyle, setFontStyle ] = useStyle(
'typography.fontStyle',
prefix + 'typography.fontStyle',
name
);
const [ fontWeight, setFontWeight ] = useStyle(
'typography.fontWeight',
prefix + 'typography.fontWeight',
name
);
const [ lineHeight, setLineHeight ] = useStyle(
'typography.lineHeight',
prefix + 'typography.lineHeight',
name
);
const [ letterSpacing, setLetterSpacing ] = useStyle(
'typography.letterSpacing',
prefix + 'typography.letterSpacing',
name
);
const [ backgroundColor ] = useStyle( prefix + 'color.background', name );
const [ gradientValue ] = useStyle( prefix + 'color.gradient', name );
const [ color ] = useStyle( prefix + 'color.text', name );
const extraStyles =
element === 'link'
? {
textDecoration: 'underline',
}
: {};

return (
<PanelBody className="edit-site-typography-panel" initialOpen={ true }>
<div
className="edit-site-typography-panel__preview"
style={ {
fontFamily: fontFamily ?? 'serif',
background: gradientValue ?? backgroundColor,
color,
fontSize,
fontStyle,
fontWeight,
letterSpacing,
...extraStyles,
} }
>
Aa
</div>

{ supports.includes( 'fontFamily' ) && (
<FontFamilyControl
fontFamilies={ fontFamilies }
Expand Down
9 changes: 9 additions & 0 deletions packages/edit-site/src/components/global-styles/ui.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import ScreenRoot from './screen-root';
import ScreenBlockList from './screen-block-list';
import ScreenBlock from './screen-block';
import ScreenTypography from './screen-typography';
import ScreenTypographyElement from './screen-typography-element';
import ScreenColors from './screen-colors';
import ScreenColorPalette from './screen-color-palette';
import ScreenBackgroundColor from './screen-background-color';
Expand All @@ -30,6 +31,14 @@ function ContextScreens( { name } ) {
<ScreenTypography name={ name } />
</NavigatorScreen>

<NavigatorScreen path={ parentMenu + '/typography/text' }>
<ScreenTypographyElement name={ name } element="text" />
</NavigatorScreen>

<NavigatorScreen path={ parentMenu + '/typography/link' }>
<ScreenTypographyElement name={ name } element="link" />
</NavigatorScreen>

<NavigatorScreen path={ parentMenu + '/colors' }>
<ScreenColors name={ name } />
</NavigatorScreen>
Expand Down