Skip to content

Commit

Permalink
Update packages/block-editor/src/components/text-decoration-control/i…
Browse files Browse the repository at this point in the history 
…ndex.js

Co-authored-by: Aaron Robertshaw <[email protected]> (+4 squashed commits)
Squashed commits:
[84854a6ef8] Update packages/block-editor/src/components/text-transform-control/index.js

Co-authored-by: Aaron Robertshaw <[email protected]>
[c5ef934] Add deprecation fixtures
[a57bcb8] Backcompatibility
[8c5cc3e] Remove Font style, weight, decoration, and transform presets
  • Loading branch information
@jorgefilipecosta
jorgefilipecosta committed Dec 14, 2020
1 parent 06224c6 commit 8a32163
Show file tree
Hide file tree
Showing 18 changed files with 407 additions and 483 deletions.
2 changes: 2 additions & 0 deletions docs/designers-developers/developers/themes/theme-json.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,8 @@ The settings section has the following structure and default values:
},
"typography": {
"customFontSize": true, /* false to opt-out, as in add_theme_support( 'disable-custom-font-sizes' ) */
"customFontWeight": true, /* false to opt-out */
"customFontStyle": true, /* false to opt-out */
"customLineHeight": false, /* true to opt-in, as in add_theme_support( 'custom-line-height' ) */
"dropCap": true, /* false to opt-out */
"fontFamilies": [ ... ], /* font family presets */
Expand Down
62 changes: 9 additions & 53 deletions lib/class-wp-theme-json.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,15 +130,15 @@ class WP_Theme_JSON {
'units' => null,
),
'typography' => array(
'customFontSize' => null,
'customLineHeight' => null,
'dropCap' => null,
'fontFamilies' => null,
'fontSizes' => null,
'fontStyles' => null,
'fontWeights' => null,
'textDecorations' => null,
'textTransforms' => null,
'customFontSize' => null,
'customLineHeight' => null,
'dropCap' => null,
'fontFamilies' => null,
'fontSizes' => null,
'customFontStyle' => null,
'customFontWeight' => null,
'customTextDecorations' => null,
'customTextTransforms' => null,
),
'custom' => null,
),
Expand Down Expand Up @@ -221,50 +221,6 @@ class WP_Theme_JSON {
'css_var_infix' => 'font-family',
'classes' => array(),
),
array(
'path' => array( 'settings', 'typography', 'fontStyles' ),
'value_key' => 'value',
'css_var_infix' => 'font-style',
'classes' => array(
array(
'class_suffix' => 'font-style',
'property_name' => 'font-style',
),
),
),
array(
'path' => array( 'settings', 'typography', 'fontWeights' ),
'value_key' => 'value',
'css_var_infix' => 'font-weight',
'classes' => array(
array(
'class_suffix' => 'font-weight',
'property_name' => 'font-weight',
),
),
),
array(
'path' => array( 'settings', 'typography', 'textDecorations' ),
'value_key' => 'value',
'css_var_infix' => 'text-decoration',
'classes' => array(
array(
'class_suffix' => 'text-decoration',
'property_name' => 'text-decoration',
),
),
),
array(
'path' => array( 'settings', 'typography', 'textTransforms' ),
'value_key' => 'slug',
'css_var_infix' => 'text-transform',
'classes' => array(
array(
'class_suffix' => 'text-transform',
'property_name' => 'text-transform',
),
),
),
);

/**
Expand Down
89 changes: 4 additions & 85 deletions lib/experimental-default-theme.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,10 @@
"dropCap": true,
"customFontSize": true,
"customLineHeight": false,
"customFontStyle": true,
"customFontWeight": true,
"customTextTransforms": true,
"customTextDecorations": true,
"fontSizes": [
{
"name": "Small",
Expand All @@ -160,91 +164,6 @@
"slug": "huge",
"size": "42px"
}
],
"fontStyles": [
{
"name": "Regular",
"slug": "normal",
"value": "normal"
},
{
"name": "Italic",
"slug": "italic",
"value": "italic"
}
],
"fontWeights": [
{
"name": "Ultralight",
"slug": "100",
"value": "100"
},
{
"name": "Thin",
"slug": "200",
"value": "200"
},
{
"name": "Light",
"slug": "300",
"value": "300"
},
{
"name": "Regular",
"slug": "400",
"value": "400"
},
{
"name": "Medium",
"slug": "500",
"value": "500"
},
{
"name": "Semibold",
"slug": "600",
"value": "600"
},
{
"name": "Bold",
"slug": "700",
"value": "700"
},
{
"name": "Heavy",
"slug": "800",
"value": "800"
},
{
"name": "Black",
"slug": "900",
"value": "900"
}
],
"textTransforms": [
{
"name": "AB",
"slug": "uppercase"
},
{
"name": "ab",
"slug": "lowercase"
},
{
"name": "Ab",
"slug": "capitalize"
}
],
"textDecorations": [
{
"name": "Underline",
"slug": "underline",
"value": "underline"
},
{
"name": "Strikethrough",
"slug": "strikethrough",
"value": "line-through"
}
]
},
"spacing": {
Expand Down
118 changes: 86 additions & 32 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 @@ -5,6 +5,56 @@ import { CustomSelectControl } from '@wordpress/components';
import { useMemo } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';

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

const FONT_WEIGHTS = [
{
name: __( 'Ultralight' ),
value: '100',
},
{
name: __( 'Thin' ),
value: '200',
},
{
name: __( 'Light' ),
value: '300',
},
{
name: __( 'Regular' ),
value: '400',
},
{
name: __( 'Medium' ),
value: '500',
},
{
name: __( 'Semibold' ),
value: '600',
},
{
name: __( 'Bold' ),
value: '700',
},
{
name: __( 'Heavy' ),
value: '800',
},
{
name: __( 'Black' ),
value: '900',
},
];

/**
* Control to display unified font style and weight options.
*
Expand All @@ -14,12 +64,11 @@ import { __, sprintf } from '@wordpress/i18n';
export default function FontAppearanceControl( props ) {
const {
onChange,
options: { fontStyles = [], fontWeights = [] },
hasFontStyles = true,
hasFontWeights = true,
value: { fontStyle, fontWeight },
} = props;
const hasStyles = !! fontStyles.length;
const hasWeights = !! fontWeights.length;
const hasStylesOrWeights = hasStyles || hasWeights;
const hasStylesOrWeights = hasFontStyles || hasFontWeights;
const defaultOption = {
key: 'default',
name: __( 'Default' ),
Expand All @@ -30,24 +79,29 @@ export default function FontAppearanceControl( props ) {
const combineOptions = () => {
const combinedOptions = [ defaultOption ];

fontStyles.forEach( ( { name: styleName, slug: styleSlug } ) => {
fontWeights.forEach( ( { name: weightName, slug: weightSlug } ) => {
const optionName =
styleSlug === 'normal'
? weightName
: sprintf(
/* translators: 1: Font weight name. 2: Font style name. */
__( '%1$s %2$s' ),
weightName,
styleName
);

combinedOptions.push( {
key: `${ weightSlug }-${ styleSlug }`,
name: optionName,
style: { fontStyle: styleSlug, fontWeight: weightSlug },
} );
} );
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,
},
} );
}
);
} );

return combinedOptions;
Expand All @@ -56,11 +110,11 @@ export default function FontAppearanceControl( props ) {
// Generates select options for font styles only.
const styleOptions = () => {
const combinedOptions = [ defaultOption ];
fontStyles.forEach( ( { name, slug } ) => {
FONT_STYLES.forEach( ( { name, value } ) => {
combinedOptions.push( {
key: slug,
key: value,
name,
style: { fontStyle: slug, fontWeight: undefined },
style: { fontStyle: value, fontWeight: undefined },
} );
} );
return combinedOptions;
Expand All @@ -69,23 +123,23 @@ export default function FontAppearanceControl( props ) {
// Generates select options for font weights only.
const weightOptions = () => {
const combinedOptions = [ defaultOption ];
fontWeights.forEach( ( { name, slug } ) => {
FONT_WEIGHTS.forEach( ( { name, value } ) => {
combinedOptions.push( {
key: slug,
key: value,
name,
style: { fontStyle: undefined, fontWeight: slug },
style: { fontStyle: undefined, fontWeight: value },
} );
} );
return combinedOptions;
};

// Map font styles and weights to select options.
const selectOptions = useMemo( () => {
if ( hasStyles && hasWeights ) {
if ( hasFontStyles && hasFontWeights ) {
return combineOptions();
}

return hasStyles ? styleOptions() : weightOptions();
return hasFontStyles ? styleOptions() : weightOptions();
}, [ props.options ] );

// Find current selection by comparing font style & weight against options.
Expand All @@ -97,11 +151,11 @@ export default function FontAppearanceControl( props ) {

// Adjusts field label in case either styles or weights are disabled.
const getLabel = () => {
if ( ! hasStyles ) {
if ( ! hasFontStyles ) {
return __( 'Font weight' );
}

if ( ! hasWeights ) {
if ( ! hasFontWeights ) {
return __( 'Font style' );
}

Expand Down
Loading

0 comments on commit 8a32163

Please sign in to comment.