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

Add Letter spacing and Letter case to Global Styles #43356

Closed
wants to merge 3 commits into from
Closed

Add Letter spacing and Letter case to Global Styles #43356

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
289fe71
Show Letter Spacing in Global Styles -> Typography -> Headings
noisysocks Aug 18, 2022
b06d515
Add Letter Case to Global Styles
noisysocks Aug 18, 2022
bb7341b
Show 'None' Letter Case option when in Global Styles
noisysocks Sep 9, 2022
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
72 changes: 37 additions & 35 deletions packages/block-editor/src/components/text-transform-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,58 +10,60 @@ import {
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import {
reset,
formatCapitalize,
formatLowercase,
formatUppercase,
} from '@wordpress/icons';

const TEXT_TRANSFORMS = [
{
name: __( 'Uppercase' ),
value: 'uppercase',
icon: formatUppercase,
},
{
name: __( 'Lowercase' ),
value: 'lowercase',
icon: formatLowercase,
},
{
name: __( 'Capitalize' ),
value: 'capitalize',
icon: formatCapitalize,
},
];

/**
* Control to facilitate text transform selections.
*
* @param {Object} props Component props.
* @param {string} props.value Currently selected text transform.
* @param {Function} props.onChange Handles change in text transform selection.
* @param {Object} props Component props.
* @param {string} props.value Currently selected text transform.
* @param {Function} props.onChange Handles change in text transform selection.
* @param {boolean} [props.showNone] Whether to display the 'None' option.
*
* @return {WPElement} Text transform control.
*/
export default function TextTransformControl( { value, onChange, ...props } ) {
export default function TextTransformControl( {
value,
onChange,
showNone,
...props
} ) {
return (
<ToggleGroupControl
{ ...props }
className="block-editor-text-transform-control"
__experimentalIsBorderless
label={ __( 'Letter case' ) }
value={ value }
onChange={ onChange }
value={ value ?? 'none' }
onChange={ ( nextValue ) => {
onChange( nextValue === 'none' ? undefined : nextValue );
} }
>
{ TEXT_TRANSFORMS.map( ( textTransform ) => {
return (
<ToggleGroupControlOptionIcon
key={ textTransform.value }
value={ textTransform.value }
icon={ textTransform.icon }
label={ textTransform.name }
/>
);
} ) }
{ showNone && (
<ToggleGroupControlOptionIcon
value="none"
icon={ reset }
label={ __( 'None' ) }
/>
) }
<ToggleGroupControlOptionIcon
value="uppercase"
icon={ formatUppercase }
label={ __( 'Uppercase' ) }
/>
<ToggleGroupControlOptionIcon
value="lowercase"
icon={ formatLowercase }
label={ __( 'Lowercase' ) }
/>
<ToggleGroupControlOptionIcon
value="capitalize"
icon={ formatCapitalize }
label={ __( 'Capitalize' ) }
/>
</ToggleGroupControl>
);
}
1 change: 0 additions & 1 deletion packages/edit-site/src/components/global-styles/hooks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,6 @@ const ROOT_BLOCK_SUPPORTS = [
'fontWeight',
'lineHeight',
'textDecoration',
'textTransform',
'padding',
'contentSize',
'wideSize',
Expand Down
51 changes: 44 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 @@ -6,6 +6,7 @@ import {
__experimentalFontFamilyControl as FontFamilyControl,
__experimentalFontAppearanceControl as FontAppearanceControl,
__experimentalLetterSpacingControl as LetterSpacingControl,
__experimentalTextTransformControl as TextTransformControl,
} from '@wordpress/block-editor';
import {
PanelBody,
Expand Down Expand Up @@ -53,12 +54,28 @@ function useHasAppearanceControl( name ) {
return hasFontStyles || hasFontWeights;
}

function useHasLetterSpacingControl( name ) {
function useHasLetterSpacingControl( name, element ) {
const setting = useSetting( 'typography.letterSpacing', name )[ 0 ];
if ( ! setting ) {
return false;
}
if ( ! name && element === 'heading' ) {
return true;
}
const supports = getSupportedGlobalStylesPanels( name );
return (
useSetting( 'typography.letterSpacing', name )[ 0 ] &&
supports.includes( 'letterSpacing' )
);
return supports.includes( 'letterSpacing' );
}

function useHasTextTransformControl( name, element ) {
const setting = useSetting( 'typography.textTransform', name )[ 0 ];
if ( ! setting ) {
return false;
}
if ( ! name && element === 'heading' ) {
return true;
}
const supports = getSupportedGlobalStylesPanels( name );
return supports.includes( 'textTransform' );
}

export default function TypographyPanel( { name, element } ) {
Expand All @@ -84,7 +101,8 @@ export default function TypographyPanel( { name, element } ) {
supports.includes( 'fontWeight' );
const hasLineHeightEnabled = useHasLineHeightControl( name );
const hasAppearanceControl = useHasAppearanceControl( name );
const hasLetterSpacingControl = useHasLetterSpacingControl( name );
const hasLetterSpacingControl = useHasLetterSpacingControl( name, element );
const hasTextTransformControl = useHasTextTransformControl( name, element );

/* Disable font size controls when the option to style all headings is selected. */
let hasFontSizeEnabled = supports.includes( 'fontSize' );
Expand Down Expand Up @@ -117,6 +135,10 @@ export default function TypographyPanel( { name, element } ) {
prefix + 'typography.letterSpacing',
name
);
const [ textTransform, setTextTransform ] = useStyle(
prefix + 'typography.textTransform',
name
);
const [ backgroundColor ] = useStyle( prefix + 'color.background', name );
const [ gradientValue ] = useStyle( prefix + 'color.gradient', name );
const [ color ] = useStyle( prefix + 'color.text', name );
Expand Down Expand Up @@ -144,7 +166,12 @@ export default function TypographyPanel( { name, element } ) {
>
Aa
</div>
<Grid columns={ 2 } rowGap={ 16 } columnGap={ 8 }>
<Grid
columns={ 2 }
rowGap={ 16 }
columnGap={ 8 }
templateColumns="repeat(2, minmax(0, 1fr))"
>
{ element === 'heading' && (
<div className="edit-site-typography-panel__full-width-control">
<ToggleGroupControl
Expand Down Expand Up @@ -248,6 +275,16 @@ export default function TypographyPanel( { name, element } ) {
__unstableInputWidth="auto"
/>
) }
{ hasTextTransformControl && (
<TextTransformControl
value={ textTransform }
onChange={ setTextTransform }
showNone
isBlock
size="__unstable-large"
__nextHasNoMarginBottom
/>
) }
</Grid>
</PanelBody>
);
Expand Down