Skip to content

Commit

Permalink
Remove the name and element props from the TypographyPanel component (#…
Browse files Browse the repository at this point in the history 
…47908)
  • Loading branch information
@youknowriad
youknowriad committed Feb 15, 2023
1 parent 55b0c38 commit 58cd891
Show file tree
Hide file tree
Showing 7 changed files with 168 additions and 139 deletions.
45 changes: 45 additions & 0 deletions packages/block-editor/src/components/global-styles/hooks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -218,3 +218,48 @@ export function useSupportedStyles( name, element ) {

return supportedPanels;
}

/**
* Given a settings object and a list of supported panels,
* returns a new settings object with the unsupported panels removed.
*
* @param {Object} settings Settings object.
* @param {string[]} supports Supported style panels.
*
* @return {Object} Merge of settings and supports.
*/
export function overrideSettingsWithSupports( settings, supports ) {
const updatedSettings = { ...settings };

if ( ! supports.includes( 'fontSize' ) ) {
updatedSettings.typography = {
...updatedSettings.typography,
fontSizes: {},
customFontSize: false,
};
}

if ( ! supports.includes( 'fontFamily' ) ) {
updatedSettings.typography = {
...updatedSettings.typography,
fontFamilies: {},
};
}

[
'lineHeight',
'fontStyle',
'fontWeight',
'letterSpacing',
'textTransform',
].forEach( ( key ) => {
if ( ! supports.includes( key ) ) {
updatedSettings.typography = {
...updatedSettings.typography,
[ key ]: false,
};
}
} );

return updatedSettings;
}
1 change: 1 addition & 0 deletions packages/block-editor/src/components/global-styles/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ export {
useGlobalStylesReset,
useGlobalSetting,
useGlobalStyle,
overrideSettingsWithSupports,
} from './hooks';
export { useGlobalStylesOutput } from './use-global-styles-output';
export { GlobalStylesContext } from './context';
Expand Down
135 changes: 34 additions & 101 deletions packages/block-editor/src/components/global-styles/typography-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,29 +17,16 @@ import LineHeightControl from '../line-height-control';
import LetterSpacingControl from '../letter-spacing-control';
import TextTransformControl from '../text-transform-control';
import TextDecorationControl from '../text-decoration-control';
import { useSupportedStyles } from './hooks';
import { getValueFromVariable } from './utils';

export function useHasTypographyPanel( name, element, settings ) {
const hasFontFamily = useHasFontFamilyControl( name, element, settings );
const hasLineHeight = useHasLineHeightControl( name, element, settings );
const hasFontAppearance = useHasAppearanceControl(
name,
element,
settings
);
const hasLetterSpacing = useHasLetterSpacingControl(
name,
element,
settings
);
const hasTextTransform = useHasTextTransformControl(
name,
element,
settings
);
const hasTextDecoration = useHasTextDecorationControl( name, element );
const hasFontSize = useHasFontSizeControl( name, element, settings );
export function useHasTypographyPanel( settings ) {
const hasFontFamily = useHasFontFamilyControl( settings );
const hasLineHeight = useHasLineHeightControl( settings );
const hasFontAppearance = useHasAppearanceControl( settings );
const hasLetterSpacing = useHasLetterSpacingControl( settings );
const hasTextTransform = useHasTextTransformControl( settings );
const hasTextDecoration = useHasTextDecorationControl( settings );
const hasFontSize = useHasFontSizeControl( settings );

return (
hasFontFamily ||
Expand All @@ -52,52 +39,38 @@ export function useHasTypographyPanel( name, element, settings ) {
);
}

function useHasFontSizeControl( name, element, settings ) {
const supports = useSupportedStyles( name, element );
function useHasFontSizeControl( settings ) {
const disableCustomFontSizes = ! settings?.typography?.customFontSize;
const fontSizesPerOrigin = settings?.typography?.fontSizes ?? {};
const fontSizes =
fontSizesPerOrigin?.custom ??
fontSizesPerOrigin?.theme ??
fontSizesPerOrigin.default;
return (
supports.includes( 'fontSize' ) &&
( !! fontSizes?.length || ! disableCustomFontSizes )
);
return !! fontSizes?.length || ! disableCustomFontSizes;
}

function useHasFontFamilyControl( name, element, settings ) {
const supports = useSupportedStyles( name, element );
function useHasFontFamilyControl( settings ) {
const fontFamiliesPerOrigin = settings?.typography?.fontFamilies;
const fontFamilies =
fontFamiliesPerOrigin?.custom ??
fontFamiliesPerOrigin?.theme ??
fontFamiliesPerOrigin?.default;
return supports.includes( 'fontFamily' ) && !! fontFamilies?.length;
return !! fontFamilies?.length;
}

function useHasLineHeightControl( name, element, settings ) {
const supports = useSupportedStyles( name, element );
return (
settings?.typography?.lineHeight && supports.includes( 'lineHeight' )
);
function useHasLineHeightControl( settings ) {
return settings?.typography?.lineHeight;
}

function useHasAppearanceControl( name, element, settings ) {
const supports = useSupportedStyles( name, element );
const hasFontStyles =
settings?.typography?.fontStyle && supports.includes( 'fontStyle' );
const hasFontWeights =
settings?.typography?.fontWeight && supports.includes( 'fontWeight' );
function useHasAppearanceControl( settings ) {
const hasFontStyles = settings?.typography?.fontStyle;
const hasFontWeights = settings?.typography?.fontWeight;
return hasFontStyles || hasFontWeights;
}

function useAppearanceControlLabel( name, element, settings ) {
const supports = useSupportedStyles( name, element );
const hasFontStyles =
settings?.typography?.fontStyle && supports.includes( 'fontStyle' );
const hasFontWeights =
settings?.typography?.fontWeight && supports.includes( 'fontWeight' );
function useAppearanceControlLabel( settings ) {
const hasFontStyles = settings?.typography?.fontStyle;
const hasFontWeights = settings?.typography?.fontWeight;
if ( ! hasFontStyles ) {
return __( 'Font weight' );
}
Expand All @@ -107,27 +80,16 @@ function useAppearanceControlLabel( name, element, settings ) {
return __( 'Appearance' );
}

function useHasLetterSpacingControl( name, element, settings ) {
const setting = settings?.typography?.letterSpacing;
const supports = useSupportedStyles( name, element );
if ( ! setting ) {
return false;
}
return supports.includes( 'letterSpacing' );
function useHasLetterSpacingControl( settings ) {
return settings?.typography?.letterSpacing;
}

function useHasTextTransformControl( name, element, settings ) {
const setting = settings?.typography?.textTransform;
const supports = useSupportedStyles( name, element );
if ( ! setting ) {
return false;
}
return supports.includes( 'textTransform' );
function useHasTextTransformControl( settings ) {
return settings?.typography?.textTransform;
}

function useHasTextDecorationControl( name, element ) {
const supports = useSupportedStyles( name, element );
return supports.includes( 'textDecoration' );
function useHasTextDecorationControl( settings ) {
return settings?.typography?.textDecoration;
}

function TypographyToolsPanel( { ...props } ) {
Expand All @@ -146,8 +108,6 @@ const DEFAULT_CONTROLS = {

export default function TypographyPanel( {
as: Wrapper = TypographyToolsPanel,
name,
element,
value,
onChange,
inheritedValue = value,
Expand All @@ -159,11 +119,7 @@ export default function TypographyPanel( {
getValueFromVariable( { settings }, '', rawValue );

// Font Family
const hasFontFamilyEnabled = useHasFontFamilyControl(
name,
element,
settings
);
const hasFontFamilyEnabled = useHasFontFamilyControl( settings );
const fontFamiliesPerOrigin = settings?.typography?.fontFamilies;
const fontFamilies =
fontFamiliesPerOrigin?.custom ??
Expand All @@ -188,7 +144,7 @@ export default function TypographyPanel( {
const resetFontFamily = () => setFontFamily( undefined );

// Font Size
const hasFontSizeEnabled = useHasFontSizeControl( name, element, settings );
const hasFontSizeEnabled = useHasFontSizeControl( settings );
const disableCustomFontSizes = ! settings?.typography?.customFontSize;
const fontSizesPerOrigin = settings?.typography?.fontSizes ?? {};
const fontSizes =
Expand All @@ -213,16 +169,8 @@ export default function TypographyPanel( {
const resetFontSize = () => setFontSize( undefined );

// Appearance
const hasAppearanceControl = useHasAppearanceControl(
name,
element,
settings
);
const appearanceControlLabel = useAppearanceControlLabel(
name,
element,
settings
);
const hasAppearanceControl = useHasAppearanceControl( settings );
const appearanceControlLabel = useAppearanceControlLabel( settings );
const hasFontStyles = settings?.typography?.fontStyle;
const hasFontWeights = settings?.typography?.fontWeight;
const fontStyle = decodeValue( inheritedValue?.typography?.fontStyle );
Expand All @@ -247,11 +195,7 @@ export default function TypographyPanel( {
};

// Line Height
const hasLineHeightEnabled = useHasLineHeightControl(
name,
element,
settings
);
const hasLineHeightEnabled = useHasLineHeightControl( settings );
const lineHeight = decodeValue( inheritedValue?.typography?.lineHeight );
const setLineHeight = ( newValue ) => {
onChange( {
Expand All @@ -266,11 +210,7 @@ export default function TypographyPanel( {
const resetLineHeight = () => setLineHeight( undefined );

// Letter Spacing
const hasLetterSpacingControl = useHasLetterSpacingControl(
name,
element,
settings
);
const hasLetterSpacingControl = useHasLetterSpacingControl( settings );
const letterSpacing = decodeValue(
inheritedValue?.typography?.letterSpacing
);
Expand All @@ -287,11 +227,7 @@ export default function TypographyPanel( {
const resetLetterSpacing = () => setLetterSpacing( undefined );

// Text Transform
const hasTextTransformControl = useHasTextTransformControl(
name,
element,
settings
);
const hasTextTransformControl = useHasTextTransformControl( settings );
const textTransform = decodeValue(
inheritedValue?.typography?.textTransform
);
Expand All @@ -308,10 +244,7 @@ export default function TypographyPanel( {
const resetTextTransform = () => setTextTransform( undefined );

// Text Decoration
const hasTextDecorationControl = useHasTextDecorationControl(
name,
element
);
const hasTextDecorationControl = useHasTextDecorationControl( settings );
const textDecoration = decodeValue(
inheritedValue?.typography?.textDecoration
);
Expand Down
74 changes: 52 additions & 22 deletions packages/block-editor/src/hooks/typography.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@ import { FONT_FAMILY_SUPPORT_KEY } from './font-family';
import { FONT_SIZE_SUPPORT_KEY } from './font-size';
import { useSetting } from '../components';
import { cleanEmptyObject } from './utils';
import {
overrideSettingsWithSupports,
useSupportedStyles,
} from '../components/global-styles/hooks';

function omit( object, keys ) {
return Object.fromEntries(
Expand Down Expand Up @@ -48,33 +52,59 @@ function TypographyInspectorControl( { children } ) {
);
}

function useBlockSettings( name ) {
const fontFamilies = useSetting( 'typography.fontFamilies' );
const fontSizes = useSetting( 'typography.fontSizes' );
const customFontSize = useSetting( 'typography.customFontSize' );
const fontStyle = useSetting( 'typography.fontStyle' );
const fontWeight = useSetting( 'typography.fontWeight' );
const lineHeight = useSetting( 'typography.lineHeight' );
const textDecoration = useSetting( 'typography.textDecoration' );
const textTransform = useSetting( 'typography.textTransform' );
const letterSpacing = useSetting( 'typography.letterSpacing' );
const supports = useSupportedStyles( name, null );

return useMemo( () => {
const rawSettings = {
typography: {
fontFamilies: {
custom: fontFamilies,
},
fontSizes: {
custom: fontSizes,
},
customFontSize,
fontStyle,
fontWeight,
lineHeight,
textDecoration,
textTransform,
letterSpacing,
},
};
return overrideSettingsWithSupports( rawSettings, supports );
}, [
fontFamilies,
fontSizes,
customFontSize,
fontStyle,
fontWeight,
lineHeight,
textDecoration,
textTransform,
letterSpacing,
supports,
] );
}

export function TypographyPanel( {
clientId,
name,
attributes,
setAttributes,
} ) {
const settings = {
typography: {
fontFamilies: {
custom: useSetting( 'typography.fontFamilies' ),
},
fontSizes: {
custom: useSetting( 'typography.fontSizes' ),
},
customFontSize: useSetting( 'typography.customFontSize' ),
fontStyle: useSetting( 'typography.fontStyle' ),
fontWeight: useSetting( 'typography.fontWeight' ),
lineHeight: useSetting( 'typography.lineHeight' ),
textDecoration: useSetting( 'typography.textDecoration' ),
textTransform: useSetting( 'typography.textTransform' ),
letterSpacing: useSetting( 'typography.letterSpacing' ),
},
};

const isSupported = hasTypographySupport( name );
const isEnabled = useHasTypographyPanel( name, null, settings );

const settings = useBlockSettings( name );
const isEnabled = useHasTypographyPanel( settings );
const value = useMemo( () => {
return {
...attributes.style,
Expand Down Expand Up @@ -115,7 +145,7 @@ export function TypographyPanel( {
} );
};

if ( ! isEnabled || ! isSupported ) {
if ( ! isEnabled ) {
return null;
}

Expand Down
Loading

1 comment on commit 58cd891

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in 58cd891.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4182988834
📝 Reported issues:

Please sign in to comment.