Skip to content

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

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

Merged
youknowriad merged 6 commits into from
Nov 24, 2021
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
37f05d2
Add elements support to the typography panel in global styles
youknowriad Nov 22, 2021
892a93b
Avoid elements for blocks
youknowriad Nov 22, 2021
c06bd79
Fix panel titles
youknowriad Nov 22, 2021
03bd30f
Add typography preview
youknowriad Nov 23, 2021
de4c4e6
Use a fixed size for the small typography previews
youknowriad Nov 24, 2021
7b2259d
Add colors to the typography previews
youknowriad Nov 24, 2021
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
View file
Open in desktop
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 ) => {
return TYPOGRAPHY_SUPPORT_KEYS.some( ( key ) =>
hasBlockSupport( blockName, key )
);
Expand Down
39 changes: 39 additions & 0 deletions packages/edit-site/src/components/global-styles/screen-typography-element.js
View file
Open in desktop
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

@ntsekouras ntsekouras Nov 22, 2021

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

@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.

I'm happy to use any proposed descriptions here :)

Copy link
Contributor

@ntsekouras ntsekouras Nov 24, 2021

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

@mtias mtias Nov 24, 2021

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

@youknowriad youknowriad Nov 24, 2021

Choose a reason for hiding this comment

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

#36819

},
};

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;
87 changes: 84 additions & 3 deletions packages/edit-site/src/components/global-styles/screen-typography.js
View file
Open in desktop
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
View file
Open in desktop
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
44 changes: 37 additions & 7 deletions packages/edit-site/src/components/global-styles/typography-panel.js
View file
Open in desktop
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

@oandregal oandregal Nov 22, 2021

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 •
edited
Loading

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
View file
Open in desktop
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