Skip to content

Commit

Permalink
Use available font weights and styles in FontAppearanceControl (#61915)
Browse files Browse the repository at this point in the history 
* Pass active font faces to appearance control component

* Add formatFontWeight function

* Use only available font weights in FontAppearanceControl

* Refactor weight and style array fallbacks

* Rename normal to regular in styles list

* Make font weight labels translatable

* Handle system fonts

* Add comment for font weight and style options

* Check against fontFamily rather than name

* Handle font style names and values similar to font weights

* Use some() rather than findIndex()

* Add getMergedFontFamiliesAndFontFamilyFaces function

* Add tests for getMergedFontFamiliesAndFontFamilyFaces

* Merge common case statements

* Remove toUpperCase() on font style names

* Attempt to fix variable fonts options

* Fix formatFontStyle test

* Trim any surrounding whitespace from fontweight string

* Add tests for normal and bold font weights

* Trim font weight before checking for spaces

* Create getFontStylesAndWeights function

* Move trim into if statement and improve comment

* Allow all uncombined weights and styles to be returned from getFontStylesAndWeights

* Make option key consistent with combined result

* Move combined option logic into getFontStylesAndWeights()

* Swap ABeeZee test for Piazzolla example

Co-Authored-By: Vicente Canales <1157901+vcanales@users.noreply.github.com>

* Fix isSystemFont logic

* Apply available font styles and weights when fontFamily changes

* Swap isSystemFont logic around

* Export isSystemFont and isVariableFont from getFontStylesAndWeights

* Use getFontStylesAndWeights to compare font face values

* Improve comments for getFontStylesAndWeights

* Improve test wording

* Add todo item

* Include faux bold and italic as options

* Handle variable font weights

* Try to set the nearest available font weight

* Only adds faux bold if a weight of 600 or above is not already available

* Updates tests with new faux bold logic

---------

Co-authored-by: Vicente Canales <1157901+vcanales@users.noreply.github.com>
Co-authored-by: Grant Kinney <hi@grant.mk>
Co-authored-by: mikachan <mikachan@git.wordpress.org>
Co-authored-by: creativecoder <grantmkin@git.wordpress.org>
Co-authored-by: vcanales <vcanales@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: matiasbenedetto <mmaattiiaass@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: cbirdsong <cbirdsong@git.wordpress.org>
Co-authored-by: hanneslsm <hanneslsm@git.wordpress.org>
Co-authored-by: colorful-tones <colorful-tones@git.wordpress.org>
Co-authored-by: jffng <jffng@git.wordpress.org>
  • Loading branch information
@mikachan @vcanales
@creativecoder @t-hamano @colorful-tones @jffng
13 people authored Jul 1, 2024
1 parent 8a97255 commit d1987d0
Show file tree
Hide file tree
Showing 10 changed files with 1,309 additions and 91 deletions.
106 changes: 24 additions & 82 deletions packages/block-editor/src/components/font-appearance-control/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,57 +3,12 @@
*/
import { CustomSelectControl } from '@wordpress/components';
import { useMemo } from '@wordpress/element';
import { __, _x, sprintf } from '@wordpress/i18n';

const FONT_STYLES = [
{
name: _x( 'Regular', 'font style' ),
value: 'normal',
},
{
name: _x( 'Italic', 'font style' ),
value: 'italic',
},
];

const FONT_WEIGHTS = [
{
name: _x( 'Thin', 'font weight' ),
value: '100',
},
{
name: _x( 'Extra Light', 'font weight' ),
value: '200',
},
{
name: _x( 'Light', 'font weight' ),
value: '300',
},
{
name: _x( 'Regular', 'font weight' ),
value: '400',
},
{
name: _x( 'Medium', 'font weight' ),
value: '500',
},
{
name: _x( 'Semi Bold', 'font weight' ),
value: '600',
},
{
name: _x( 'Bold', 'font weight' ),
value: '700',
},
{
name: _x( 'Extra Bold', 'font weight' ),
value: '800',
},
{
name: _x( 'Black', 'font weight' ),
value: '900',
},
];
import { __, sprintf } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights';

/**
* Adjusts font appearance field label in case either font styles or weights
Expand All @@ -76,7 +31,7 @@ const getFontAppearanceLabel = ( hasFontStyles, hasFontWeights ) => {
};

/**
* Control to display unified font style and weight options.
* Control to display font style and weight options of the active font.
*
* @param {Object} props Component props.
*
Expand All @@ -87,6 +42,7 @@ export default function FontAppearanceControl( props ) {
onChange,
hasFontStyles = true,
hasFontWeights = true,
fontFamilyFaces,
value: { fontStyle, fontWeight },
...otherProps
} = props;
Expand All @@ -97,43 +53,22 @@ export default function FontAppearanceControl( props ) {
name: __( 'Default' ),
style: { fontStyle: undefined, fontWeight: undefined },
};
const { fontStyles, fontWeights, combinedStyleAndWeightOptions } =
getFontStylesAndWeights( fontFamilyFaces );

// Combines both font style and weight options into a single dropdown.
// Generates select options for combined font styles and weights.
const combineOptions = () => {
const combinedOptions = [ defaultOption ];

FONT_STYLES.forEach( ( { name: styleName, value: styleValue } ) => {
FONT_WEIGHTS.forEach(
( { name: weightName, value: weightValue } ) => {
const optionName =
styleValue === 'normal'
? weightName
: sprintf(
/* translators: 1: Font weight name. 2: Font style name. */
__( '%1$s %2$s' ),
weightName,
styleName
);

combinedOptions.push( {
key: `${ styleValue }-${ weightValue }`,
name: optionName,
style: {
fontStyle: styleValue,
fontWeight: weightValue,
},
} );
}
);
} );

if ( combinedStyleAndWeightOptions ) {
combinedOptions.push( ...combinedStyleAndWeightOptions );
}
return combinedOptions;
};

// Generates select options for font styles only.
const styleOptions = () => {
const combinedOptions = [ defaultOption ];
FONT_STYLES.forEach( ( { name, value } ) => {
fontStyles.forEach( ( { name, value } ) => {
combinedOptions.push( {
key: value,
name,
Expand All @@ -146,7 +81,7 @@ export default function FontAppearanceControl( props ) {
// Generates select options for font weights only.
const weightOptions = () => {
const combinedOptions = [ defaultOption ];
FONT_WEIGHTS.forEach( ( { name, value } ) => {
fontWeights.forEach( ( { name, value } ) => {
combinedOptions.push( {
key: value,
name,
Expand All @@ -158,12 +93,19 @@ export default function FontAppearanceControl( props ) {

// Map font styles and weights to select options.
const selectOptions = useMemo( () => {
// Display combined available font style and weight options.
if ( hasFontStyles && hasFontWeights ) {
return combineOptions();
}

// Display only font style options or font weight options.
return hasFontStyles ? styleOptions() : weightOptions();
}, [ props.options ] );
}, [
props.options,
fontStyles,
fontWeights,
combinedStyleAndWeightOptions,
] );

// Find current selection by comparing font style & weight against options,
// and fall back to the Default option if there is no matching option.
Expand Down
Loading

0 comments on commit d1987d0

Please sign in to comment.