Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add Letter Case to Global Styles
Browse files Browse the repository at this point in the history
noisysocks committed Sep 9, 2022
1 parent 289fe71 commit b06d515
Showing 2 changed files with 26 additions and 1 deletion.
1 change: 0 additions & 1 deletion packages/edit-site/src/components/global-styles/hooks.js
Original file line number Diff line number Diff line change
@@ -168,7 +168,6 @@ const ROOT_BLOCK_SUPPORTS = [
'fontWeight',
'lineHeight',
'textDecoration',
'textTransform',
'padding',
'contentSize',
'wideSize',
Original file line number Diff line number Diff line change
@@ -6,6 +6,7 @@ import {
__experimentalFontFamilyControl as FontFamilyControl,
__experimentalFontAppearanceControl as FontAppearanceControl,
__experimentalLetterSpacingControl as LetterSpacingControl,
__experimentalTextTransformControl as TextTransformControl,
} from '@wordpress/block-editor';
import {
PanelBody,
@@ -65,6 +66,18 @@ function useHasLetterSpacingControl( name, element ) {
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 } ) {
const [ selectedLevel, setCurrentTab ] = useState( 'heading' );
const supports = getSupportedGlobalStylesPanels( name );
@@ -89,6 +102,7 @@ export default function TypographyPanel( { name, element } ) {
const hasLineHeightEnabled = useHasLineHeightControl( name );
const hasAppearanceControl = useHasAppearanceControl( 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' );
@@ -121,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 );
@@ -252,6 +270,14 @@ export default function TypographyPanel( { name, element } ) {
__unstableInputWidth="auto"
/>
) }
{ hasTextTransformControl && (
<TextTransformControl
value={ textTransform }
onChange={ setTextTransform }
size="__unstable-large"
__nextHasNoMarginBottom
/>
) }
</Grid>
</PanelBody>
);

0 comments on commit b06d515

Please sign in to comment.