Skip to content

Commit

Permalink
Add font size
Browse files Browse the repository at this point in the history
  • Loading branch information
@ellatrix
ellatrix committed Dec 8, 2023
1 parent 19550d3 commit 2b286ff
Showing 1 changed file with 50 additions and 115 deletions.
165 changes: 50 additions & 115 deletions packages/block-editor/src/hooks/font-size.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,19 +58,23 @@ function addAttributes( settings ) {
/**
* Override props assigned to save component to inject font size.
*
* @param {Object} props Additional props applied to save element.
* @param {Object} blockType Block type.
* @param {Object} attributes Block attributes.
* @param {Object} props Additional props applied to save element.
* @param {Object} blockNameOrType Block type.
* @param {Object} attributes Block attributes.
*
* @return {Object} Filtered props applied to save element.
*/
function addSaveProps( props, blockType, attributes ) {
if ( ! hasBlockSupport( blockType, FONT_SIZE_SUPPORT_KEY ) ) {
function addSaveProps( props, blockNameOrType, attributes ) {
if ( ! hasBlockSupport( blockNameOrType, FONT_SIZE_SUPPORT_KEY ) ) {
return props;
}

if (
shouldSkipSerialization( blockType, TYPOGRAPHY_SUPPORT_KEY, 'fontSize' )
shouldSkipSerialization(
blockNameOrType,
TYPOGRAPHY_SUPPORT_KEY,
'fontSize'
)
) {
return props;
}
Expand All @@ -79,36 +83,11 @@ function addSaveProps( props, blockType, attributes ) {
const classes = new TokenList( props.className );
classes.add( getFontSizeClass( attributes.fontSize ) );
const newClassName = classes.value;
props.className = newClassName ? newClassName : props.className;
props.className = newClassName ? newClassName : undefined;

return props;
}

/**
* Filters registered block settings to expand the block edit wrapper
* by applying the desired styles and classnames.
*
* @param {Object} settings Original block settings.
*
* @return {Object} Filtered block settings.
*/
function addEditProps( settings ) {
if ( ! hasBlockSupport( settings, FONT_SIZE_SUPPORT_KEY ) ) {
return settings;
}

const existingGetEditWrapperProps = settings.getEditWrapperProps;
settings.getEditWrapperProps = ( attributes ) => {
let props = {};
if ( existingGetEditWrapperProps ) {
props = existingGetEditWrapperProps( attributes );
}
return addSaveProps( props, settings, attributes );
};

return settings;
}

/**
* Inspector control panel containing the font size related configuration
*
Expand Down Expand Up @@ -184,19 +163,50 @@ function useBlockProps( { name, fontSize, style } ) {
if (
! hasBlockSupport( name, FONT_SIZE_SUPPORT_KEY ) ||
shouldSkipSerialization( name, TYPOGRAPHY_SUPPORT_KEY, 'fontSize' ) ||
! fontSize ||
style?.typography?.fontSize
! fontSize
) {
return;
}

const fontSizeValue = getFontSize(
fontSizes,
fontSize,
style?.typography?.fontSize
).size;
let props = {};

if ( ! style?.typography?.fontSize ) {
props = {
style: {
fontSize: getFontSize(
fontSizes,
fontSize,
style?.typography?.fontSize
).size,
},
};
}

return { style: { fontSize: fontSizeValue } };
// TODO: This sucks! We should be using useSetting( 'typography.fluid' )
// or even useSelect( blockEditorStore ). We can't do either here
// because getEditWrapperProps is a plain JavaScript function called by
// BlockListBlock and not a React component rendered within
// BlockListContext.Provider. If we set fontSize using editor.
// BlockListBlock instead of using getEditWrapperProps then the value is
// clobbered when the core/style/addEditProps filter runs.

// TODO: We can do the thing above now.
const fluidTypographySettings = getFluidTypographyOptionsFromSettings(
select( blockEditorStore ).getSettings().__experimentalFeatures
);

if ( fontSize ) {
props = {
style: {
fontSize: getTypographyFontSizeValue(
{ size: fontSize },
fluidTypographySettings
),
},
};
}

return addSaveProps( props, name, { fontSize } );
}

export default {
Expand Down Expand Up @@ -229,70 +239,6 @@ function addTransforms( result, source, index, results ) {
);
}

/**
* Allow custom font sizes to appear fluid when fluid typography is enabled at
* the theme level.
*
* Adds a custom getEditWrapperProps() callback to all block types that support
* font sizes. Then, if fluid typography is enabled, this callback will swap any
* custom font size in style.fontSize with a fluid font size (i.e. one that uses
* clamp()).
*
* It's important that this hook runs after 'core/style/addEditProps' sets
* style.fontSize as otherwise fontSize will be overwritten.
*
* @param {Object} blockType Block settings object.
*/
function addEditPropsForFluidCustomFontSizes( blockType ) {
if (
! hasBlockSupport( blockType, FONT_SIZE_SUPPORT_KEY ) ||
shouldSkipSerialization( blockType, TYPOGRAPHY_SUPPORT_KEY, 'fontSize' )
) {
return blockType;
}

const existingGetEditWrapperProps = blockType.getEditWrapperProps;

blockType.getEditWrapperProps = ( attributes ) => {
const wrapperProps = existingGetEditWrapperProps
? existingGetEditWrapperProps( attributes )
: {};

const fontSize = wrapperProps?.style?.fontSize;

// TODO: This sucks! We should be using useSetting( 'typography.fluid' )
// or even useSelect( blockEditorStore ). We can't do either here
// because getEditWrapperProps is a plain JavaScript function called by
// BlockListBlock and not a React component rendered within
// BlockListContext.Provider. If we set fontSize using editor.
// BlockListBlock instead of using getEditWrapperProps then the value is
// clobbered when the core/style/addEditProps filter runs.
const fluidTypographySettings = getFluidTypographyOptionsFromSettings(
select( blockEditorStore ).getSettings().__experimentalFeatures
);
const newFontSize = fontSize
? getTypographyFontSizeValue(
{ size: fontSize },
fluidTypographySettings
)
: null;

if ( newFontSize === null ) {
return wrapperProps;
}

return {
...wrapperProps,
style: {
...wrapperProps?.style,
fontSize: newFontSize,
},
};
};

return blockType;
}

addFilter(
'blocks.registerBlockType',
'core/font/addAttribute',
Expand All @@ -305,19 +251,8 @@ addFilter(
addSaveProps
);

addFilter( 'blocks.registerBlockType', 'core/font/addEditProps', addEditProps );

addFilter(
'blocks.switchToBlockType.transformedBlock',
'core/font-size/addTransforms',
addTransforms
);

addFilter(
'blocks.registerBlockType',
'core/font-size/addEditPropsForFluidCustomFontSizes',
addEditPropsForFluidCustomFontSizes,
// Run after 'core/style/addEditProps' so that the style object has already
// been translated into inline CSS.
11
);

0 comments on commit 2b286ff

Please sign in to comment.