From 8e56b840367697ace8618f0c4e7d0eb5da67c739 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 13 Oct 2020 09:39:15 +1000
Subject: [PATCH 1/9] Add font style block support
---
lib/block-supports/typography.php | 7 +-
lib/experimental-default-theme.json | 10 ++
lib/global-styles.php | 21 +++--
.../components/font-style-control/index.js | 62 ++++++++++++
packages/block-editor/src/hooks/font-style.js | 94 +++++++++++++++++++
packages/block-editor/src/hooks/typography.js | 8 ++
packages/block-library/src/heading/block.json | 1 +
.../block-library/src/navigation/block.json | 1 +
.../block-library/src/navigation/index.php | 37 +++++++-
packages/blocks/src/api/constants.js | 1 +
.../edit-site/src/components/editor/utils.js | 1 +
11 files changed, 233 insertions(+), 10 deletions(-)
create mode 100644 packages/block-editor/src/components/font-style-control/index.js
create mode 100644 packages/block-editor/src/hooks/font-style.js
diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php
index ef33c3249ade1..b5aceb72ee0b8 100644
--- a/lib/block-supports/typography.php
+++ b/lib/block-supports/typography.php
@@ -16,6 +16,11 @@ function gutenberg_register_typography_support( $block_type ) {
$has_font_size_support = gutenberg_experimental_get( $block_type->supports, array( 'fontSize' ), false );
}
+ $has_font_style_support = false;
+ if ( property_exists( $block_type, 'supports' ) ) {
+ $has_font_style_support = gutenberg_experimental_get( $block_type->supports, array( '__experimentalFontStyle' ), false );
+ }
+
$has_line_height_support = false;
if ( property_exists( $block_type, 'supports' ) ) {
$has_line_height_support = gutenberg_experimental_get( $block_type->supports, array( 'lineHeight' ), false );
@@ -25,7 +30,7 @@ function gutenberg_register_typography_support( $block_type ) {
$block_type->attributes = array();
}
- if ( ( $has_font_size_support || $has_line_height_support ) && ! array_key_exists( 'style', $block_type->attributes ) ) {
+ if ( ( $has_font_size_support || $has_line_height_support || $has_font_style_support ) && ! array_key_exists( 'style', $block_type->attributes ) ) {
$block_type->attributes['style'] = array(
'type' => 'object',
);
diff --git a/lib/experimental-default-theme.json b/lib/experimental-default-theme.json
index 28a20292ff3f8..513c22e75cbfa 100644
--- a/lib/experimental-default-theme.json
+++ b/lib/experimental-default-theme.json
@@ -160,6 +160,16 @@
"slug": "huge",
"size": 42
}
+ ],
+ "fontStyles": [
+ {
+ "name": "Italic",
+ "slug": "italic"
+ },
+ {
+ "name": "Oblique",
+ "slug": "oblique"
+ }
]
},
"spacing": {
diff --git a/lib/global-styles.php b/lib/global-styles.php
index fb7d74d973e7b..c31d25bd0c58d 100644
--- a/lib/global-styles.php
+++ b/lib/global-styles.php
@@ -387,6 +387,8 @@ function gutenberg_experimental_global_styles_get_css_property( $style_property
return 'background-color';
case 'fontSize':
return 'font-size';
+ case 'fontStyle':
+ return 'font-style';
case 'lineHeight':
return 'line-height';
default:
@@ -406,6 +408,7 @@ function gutenberg_experimental_global_styles_get_style_property() {
'backgroundColor' => array( 'color', 'background' ),
'color' => array( 'color', 'text' ),
'fontSize' => array( 'typography', 'fontSize' ),
+ 'fontStyle' => array( 'typography', 'fontStyle' ),
'lineHeight' => array( 'typography', 'lineHeight' ),
);
}
@@ -422,6 +425,7 @@ function gutenberg_experimental_global_styles_get_support_keys() {
'backgroundColor' => array( 'color' ),
'color' => array( 'color' ),
'fontSize' => array( 'fontSize' ),
+ 'fontStyle' => array( '__experimentalFontStyle' ),
'lineHeight' => array( 'lineHeight' ),
);
}
@@ -433,18 +437,22 @@ function gutenberg_experimental_global_styles_get_support_keys() {
*/
function gutenberg_experimental_global_styles_get_presets_structure() {
return array(
- 'color' => array(
+ 'color' => array(
'path' => array( 'color', 'palette' ),
'key' => 'color',
),
- 'gradient' => array(
+ 'gradient' => array(
'path' => array( 'color', 'gradients' ),
'key' => 'gradient',
),
- 'fontSize' => array(
+ 'fontSize' => array(
'path' => array( 'typography', 'fontSizes' ),
'key' => 'size',
),
+ 'fontStyle' => array(
+ 'path' => array( 'typography', 'fontStyles' ),
+ 'key' => 'slug',
+ ),
);
}
@@ -483,9 +491,10 @@ function gutenberg_experimental_global_styles_get_block_data() {
'global',
array(
'supports' => array(
- '__experimentalSelector' => ':root',
- 'fontSize' => true,
- 'color' => array(
+ '__experimentalSelector' => ':root',
+ 'fontSize' => true,
+ '__experimentalFontStyle' => true,
+ 'color' => array(
'linkColor' => true,
'gradients' => true,
),
diff --git a/packages/block-editor/src/components/font-style-control/index.js b/packages/block-editor/src/components/font-style-control/index.js
new file mode 100644
index 0000000000000..1128d5e24a527
--- /dev/null
+++ b/packages/block-editor/src/components/font-style-control/index.js
@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, ButtonGroup } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Control to facilitate font style selections.
+ *
+ * @param {Object} props Component props.
+ * @param {string} props.value Currently selected font style.
+ * @param {Array} props.fontStyles Font styles available for selection.
+ * @param {Function} props.onChange Handles change in font style selection.
+ * @return {WPElement} Font style control.
+ */
+export default function FontStyleControl( {
+ value: fontStyle,
+ fontStyles,
+ onChange,
+} ) {
+ /**
+ * Determines the what the new font style is as a result of a user
+ * interaction with the control then passes this on to the supplied onChange
+ * handler.
+ *
+ * @param {string} newStyle Slug for selected style.
+ */
+ const handleOnChange = ( newStyle ) => {
+ // Check if we are toggling a style off.
+ const style = fontStyle === newStyle ? undefined : newStyle;
+
+ // Ensure only defined font styles are allowed.
+ const presetStyle = fontStyles.find( ( { slug } ) => slug === style );
+
+ // Create string that will be turned into CSS custom property
+ const newFontStyle = presetStyle
+ ? `var:preset|font-style|${ presetStyle.slug }`
+ : undefined;
+
+ onChange( newFontStyle );
+ };
+
+ return (
+ <>
+
{ __( 'Font Style' ) }
+
+ { fontStyles.map( ( presetStyle ) => {
+ return (
+
+ );
+ } ) }
+
+ >
+ );
+}
diff --git a/packages/block-editor/src/hooks/font-style.js b/packages/block-editor/src/hooks/font-style.js
new file mode 100644
index 0000000000000..0bbcdb30a7671
--- /dev/null
+++ b/packages/block-editor/src/hooks/font-style.js
@@ -0,0 +1,94 @@
+/**
+ * WordPress dependencies
+ */
+import { hasBlockSupport } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import FontStyleControl from '../components/font-style-control';
+import useEditorFeature from '../components/use-editor-feature';
+import { cleanEmptyObject } from './utils';
+
+/**
+ * Key within block settings' supports array indicating support for font styles.
+ * e.g. settings found in `block.json`.
+ */
+export const FONT_STYLE_SUPPORT_KEY = '__experimentalFontStyle';
+
+/**
+ * Inspector control panel containing the font style options.
+ *
+ * @param {Object} props Block properties.
+ * @return {WPElement} Font style edit element.
+ */
+export function FontStyleEdit( props ) {
+ const {
+ attributes: { style },
+ setAttributes,
+ } = props;
+ const fontStyles = useEditorFeature( 'typography.fontStyles' );
+ const isDisabled = useIsFontStyleDisabled( props );
+
+ if ( isDisabled ) {
+ return null;
+ }
+
+ const fontStyle = getFontStyleFromAttributeValue(
+ fontStyles,
+ style?.typography?.fontStyle
+ );
+
+ function onChange( newStyle ) {
+ setAttributes( {
+ style: cleanEmptyObject( {
+ ...style,
+ typography: {
+ ...style?.typography,
+ fontStyle: newStyle,
+ },
+ } ),
+ } );
+ }
+
+ return (
+
+ );
+}
+
+/**
+ * Checks if font-style settings have been disabled.
+ *
+ * @param {string} name Name of the block.
+ * @return {boolean} Whether or not the setting is disabled.
+ */
+export function useIsFontStyleDisabled( { name: blockName } = {} ) {
+ const notSupported = ! hasBlockSupport( blockName, FONT_STYLE_SUPPORT_KEY );
+ const fontStyles = useEditorFeature( 'typography.fontStyles' );
+ const hasFontStyles = !! fontStyles?.length;
+
+ return notSupported || ! hasFontStyles;
+}
+
+/**
+ * Extracts the current font style selection, if available, from the CSS
+ * variable set as the `styles.typography.fontStyle` attribute.
+ *
+ * @param {Array} fontStyles Available font styles as defined in theme.json.
+ * @param {string} value Attribute value in `styles.typography.fontStyle`
+ * @return {string} Actual font style value
+ */
+const getFontStyleFromAttributeValue = ( fontStyles, value ) => {
+ const attributeParsed = /var:preset\|font-style\|(.+)/.exec( value );
+
+ if ( attributeParsed && attributeParsed[ 1 ] ) {
+ return fontStyles.find( ( { slug } ) => slug === attributeParsed[ 1 ] )
+ ?.slug;
+ }
+
+ return value;
+};
diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js
index 49a281cb219ea..13857674c8bf7 100644
--- a/packages/block-editor/src/hooks/typography.js
+++ b/packages/block-editor/src/hooks/typography.js
@@ -21,10 +21,16 @@ import {
FontSizeEdit,
useIsFontSizeDisabled,
} from './font-size';
+import {
+ FONT_STYLE_SUPPORT_KEY,
+ FontStyleEdit,
+ useIsFontStyleDisabled,
+} from './font-style';
export const TYPOGRAPHY_SUPPORT_KEYS = [
LINE_HEIGHT_SUPPORT_KEY,
FONT_SIZE_SUPPORT_KEY,
+ FONT_STYLE_SUPPORT_KEY,
];
export function TypographyPanel( props ) {
@@ -38,6 +44,7 @@ export function TypographyPanel( props ) {
+
);
@@ -55,6 +62,7 @@ const hasTypographySupport = ( blockName ) => {
function useIsTypographyDisabled( props = {} ) {
const configs = [
useIsFontSizeDisabled( props ),
+ useIsFontStyleDisabled( props ),
useIsLineHeightDisabled( props ),
];
diff --git a/packages/block-library/src/heading/block.json b/packages/block-library/src/heading/block.json
index ca473d55eb1ad..0d477fc8f3c79 100644
--- a/packages/block-library/src/heading/block.json
+++ b/packages/block-library/src/heading/block.json
@@ -28,6 +28,7 @@
"link": true
},
"fontSize": true,
+ "__experimentalFontStyle": true,
"lineHeight": true,
"__experimentalSelector": {
"core/heading/h1": "h1",
diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json
index b22fdfad89a77..8a41dad3759bb 100644
--- a/packages/block-library/src/navigation/block.json
+++ b/packages/block-library/src/navigation/block.json
@@ -50,6 +50,7 @@
"html": false,
"inserter": true,
"fontSize": true,
+ "__experimentalFontStyle": true,
"color": {
"textColor": true,
"backgroundColor": true
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index 1db0297c23fd8..7b872c6fde5e4 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -134,11 +134,12 @@ function render_block_core_navigation( $attributes, $content, $block ) {
isset( $attributes['itemsJustification'] ) ? array( 'items-justified-' . $attributes['itemsJustification'] ) : array()
);
$class_attribute = sprintf( ' class="%s"', esc_attr( implode( ' ', $classes ) ) );
- $style_attribute = ( $colors['inline_styles'] || $font_sizes['inline_styles'] )
- ? sprintf( ' style="%s"', esc_attr( $colors['inline_styles'] ) . esc_attr( $font_sizes['inline_styles'] ) )
- : '';
+ $font_style = block_core_navigation_inline_font_style( $attributes );
+ $inline_styles = $colors['inline_styles'] . $font_sizes['inline_styles'] . $font_style;
+ $style_attribute = $inline_styles ? sprintf( ' style="%s"', esc_attr( $inline_styles ) ) : '';
$inner_blocks_html = '';
+
foreach ( $block->inner_blocks as $inner_block ) {
$inner_blocks_html .= $inner_block->render();
}
@@ -151,6 +152,36 @@ function render_block_core_navigation( $attributes, $content, $block ) {
);
}
+/**
+ * Generates inline style for any selected font style within the block's
+ * style typography attributes.
+ */
+function block_core_navigation_inline_font_style( $attributes ) {
+ $has_font_style = isset( $attributes['style']['typography']['fontStyle'] );
+
+ if ( ! $has_font_style ) {
+ return '';
+ }
+
+ $font_style = $attributes['style']['typography']['fontStyle'];
+
+ if ( ! $font_style ) {
+ return '';
+ }
+
+ // If we don't have a preset font style CSS variable, we'll assume it's a regular CSS value.
+ if ( strpos( $font_style, 'var:preset|font-style|' ) === false ) {
+ return sprintf( 'font-style:%s;', $font_style );
+ }
+
+ // We have a preset CSS variable as the style.
+ // Get the style value from the string and return CSS style.
+ $index_to_splice = strrpos( $font_style, '|' ) + 1;
+ $font_style_slug = substr( $font_style, $index_to_splice );
+
+ return sprintf( 'font-style:var(--wp--preset--font-style--%s);', $font_style_slug );
+}
+
/**
* Register the navigation block.
*
diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js
index 18488d1db55f7..c677646431f9f 100644
--- a/packages/blocks/src/api/constants.js
+++ b/packages/blocks/src/api/constants.js
@@ -18,6 +18,7 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
backgroundColor: [ 'color', 'background' ],
color: [ 'color', 'text' ],
fontSize: [ 'typography', 'fontSize' ],
+ fontStyle: [ 'typography', 'fontStyle' ],
lineHeight: [ 'typography', 'lineHeight' ],
paddingBottom: [ 'spacing', 'padding', 'bottom' ],
paddingLeft: [ 'spacing', 'padding', 'left' ],
diff --git a/packages/edit-site/src/components/editor/utils.js b/packages/edit-site/src/components/editor/utils.js
index 2655b5f86af48..cf118a10cd455 100644
--- a/packages/edit-site/src/components/editor/utils.js
+++ b/packages/edit-site/src/components/editor/utils.js
@@ -4,6 +4,7 @@ export const PRESET_CATEGORIES = {
color: { path: [ 'color', 'palette' ], key: 'color' },
gradient: { path: [ 'color', 'gradients' ], key: 'gradient' },
fontSize: { path: [ 'typography', 'fontSizes' ], key: 'size' },
+ fontStyle: { path: [ 'typography', 'fontStyles' ], key: 'slug' },
};
export const LINK_COLOR = '--wp--style--color--link';
export const LINK_COLOR_DECLARATION = `a { color: var(${ LINK_COLOR }, #00e); }`;
From 2809cb4156a034cacbd9c5535a951737a161f0ec Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 14 Oct 2020 13:01:38 +1000
Subject: [PATCH 2/9] Add config for block preset classes
---
lib/global-styles.php | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/lib/global-styles.php b/lib/global-styles.php
index c31d25bd0c58d..8aaa4db6341b8 100644
--- a/lib/global-styles.php
+++ b/lib/global-styles.php
@@ -620,6 +620,11 @@ function gutenberg_experimental_global_styles_get_preset_classes( $selector, $se
'key' => 'size',
'property' => 'font-size',
),
+ 'font-style' => array(
+ 'path' => array( 'typography', 'fontStyles' ),
+ 'key' => 'slug',
+ 'property' => 'font-style',
+ ),
);
foreach ( $classes_structure as $class_suffix => $preset_structure ) {
From 4a5f8c827b5941bbd3af33e84fe678222b9e7726 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Fri, 16 Oct 2020 13:44:24 +1000
Subject: [PATCH 3/9] Update font style controls
---
.../src/components/font-style-control/index.js | 16 ++++++++++++----
.../src/components/font-style-control/style.scss | 11 +++++++++++
packages/block-editor/src/hooks/typography.js | 2 +-
packages/block-editor/src/style.scss | 1 +
4 files changed, 25 insertions(+), 5 deletions(-)
create mode 100644 packages/block-editor/src/components/font-style-control/style.scss
diff --git a/packages/block-editor/src/components/font-style-control/index.js b/packages/block-editor/src/components/font-style-control/index.js
index 1128d5e24a527..56c76980b766b 100644
--- a/packages/block-editor/src/components/font-style-control/index.js
+++ b/packages/block-editor/src/components/font-style-control/index.js
@@ -2,6 +2,7 @@
* WordPress dependencies
*/
import { Button, ButtonGroup } from '@wordpress/components';
+import { formatItalic } from '@wordpress/icons';
import { __ } from '@wordpress/i18n';
/**
@@ -40,23 +41,30 @@ export default function FontStyleControl( {
onChange( newFontStyle );
};
+ // Font style icons to use.
+ const icons = {
+ italic: formatItalic,
+ underline: undefined, // Need an underline icon designed.
+ };
+
return (
- <>
- { __( 'Font Style' ) }
+
);
}
diff --git a/packages/block-editor/src/components/font-style-control/style.scss b/packages/block-editor/src/components/font-style-control/style.scss
new file mode 100644
index 0000000000000..7154b3d4ec500
--- /dev/null
+++ b/packages/block-editor/src/components/font-style-control/style.scss
@@ -0,0 +1,11 @@
+.block-editor-font-style-control {
+ margin-bottom: 24px;
+
+ legend {
+ margin-bottom: 8px;
+ }
+
+ .components-button-group {
+ display: inline-flex;
+ }
+}
diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js
index 13857674c8bf7..35d2d83b03e28 100644
--- a/packages/block-editor/src/hooks/typography.js
+++ b/packages/block-editor/src/hooks/typography.js
@@ -43,8 +43,8 @@ export function TypographyPanel( props ) {
-
+
);
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index 096eb3bacb796..a55d795f56b5b 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -30,6 +30,7 @@
@import "./components/colors-gradients/style.scss";
@import "./components/contrast-checker/style.scss";
@import "./components/default-block-appender/style.scss";
+@import "./components/font-style-control/style.scss";
@import "./components/link-control/style.scss";
@import "./components/line-height-control/style.scss";
@import "./components/image-size-control/style.scss";
From c9da9183e640c85bb86503b3782bff19dca609d4 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Fri, 16 Oct 2020 13:56:35 +1000
Subject: [PATCH 4/9] Tweak font style controls margin and fix doc block
---
.../block-editor/src/components/font-style-control/style.scss | 3 +--
packages/block-library/src/navigation/index.php | 3 +++
2 files changed, 4 insertions(+), 2 deletions(-)
diff --git a/packages/block-editor/src/components/font-style-control/style.scss b/packages/block-editor/src/components/font-style-control/style.scss
index 7154b3d4ec500..41e0237591ef8 100644
--- a/packages/block-editor/src/components/font-style-control/style.scss
+++ b/packages/block-editor/src/components/font-style-control/style.scss
@@ -1,11 +1,10 @@
.block-editor-font-style-control {
- margin-bottom: 24px;
-
legend {
margin-bottom: 8px;
}
.components-button-group {
display: inline-flex;
+ margin-bottom: 24px;
}
}
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index 7b872c6fde5e4..5f29feaf29abc 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -155,6 +155,9 @@ function render_block_core_navigation( $attributes, $content, $block ) {
/**
* Generates inline style for any selected font style within the block's
* style typography attributes.
+ *
+ * @param array $attributes Navigation block attributes.
+ * @return string Font style related inline styles for block.
*/
function block_core_navigation_inline_font_style( $attributes ) {
$has_font_style = isset( $attributes['style']['typography']['fontStyle'] );
From 9f2eb4559ae45c88afda82580c0fbc19ca506fcc Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Fri, 16 Oct 2020 14:15:08 +1000
Subject: [PATCH 5/9] Fix incorrect style slug
---
.../block-editor/src/components/font-style-control/index.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/block-editor/src/components/font-style-control/index.js b/packages/block-editor/src/components/font-style-control/index.js
index 56c76980b766b..3e2da30d72cbb 100644
--- a/packages/block-editor/src/components/font-style-control/index.js
+++ b/packages/block-editor/src/components/font-style-control/index.js
@@ -44,7 +44,7 @@ export default function FontStyleControl( {
// Font style icons to use.
const icons = {
italic: formatItalic,
- underline: undefined, // Need an underline icon designed.
+ oblique: undefined, // Need an underline icon designed.
};
return (
From 39a247fded696a4926dc454e43f720bf654a6a0b Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 20 Oct 2020 15:32:09 +1000
Subject: [PATCH 6/9] Switch font style controls to SelectControl
---
lib/experimental-default-theme.json | 4 ++
.../components/font-style-control/index.js | 55 +++++++++----------
.../components/font-style-control/style.scss | 16 +++---
3 files changed, 39 insertions(+), 36 deletions(-)
diff --git a/lib/experimental-default-theme.json b/lib/experimental-default-theme.json
index 513c22e75cbfa..6642429b48238 100644
--- a/lib/experimental-default-theme.json
+++ b/lib/experimental-default-theme.json
@@ -162,6 +162,10 @@
}
],
"fontStyles": [
+ {
+ "name": "Normal",
+ "slug": "normal"
+ },
{
"name": "Italic",
"slug": "italic"
diff --git a/packages/block-editor/src/components/font-style-control/index.js b/packages/block-editor/src/components/font-style-control/index.js
index 3e2da30d72cbb..e8f4e0cd2cbb2 100644
--- a/packages/block-editor/src/components/font-style-control/index.js
+++ b/packages/block-editor/src/components/font-style-control/index.js
@@ -1,8 +1,8 @@
/**
* WordPress dependencies
*/
-import { Button, ButtonGroup } from '@wordpress/components';
-import { formatItalic } from '@wordpress/icons';
+import { SelectControl } from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
/**
@@ -24,12 +24,9 @@ export default function FontStyleControl( {
* interaction with the control then passes this on to the supplied onChange
* handler.
*
- * @param {string} newStyle Slug for selected style.
+ * @param {string} style Slug for selected style.
*/
- const handleOnChange = ( newStyle ) => {
- // Check if we are toggling a style off.
- const style = fontStyle === newStyle ? undefined : newStyle;
-
+ const handleOnChange = ( style ) => {
// Ensure only defined font styles are allowed.
const presetStyle = fontStyles.find( ( { slug } ) => slug === style );
@@ -41,30 +38,30 @@ export default function FontStyleControl( {
onChange( newFontStyle );
};
- // Font style icons to use.
- const icons = {
- italic: formatItalic,
- oblique: undefined, // Need an underline icon designed.
- };
+ // Map styles to select options and inject a default for inheriting font style.
+ const options = useMemo(
+ () => [
+ { label: __( 'Default' ), value: '' },
+ ...fontStyles.map( ( { name, slug } ) => ( {
+ label: name,
+ value: slug,
+ } ) ),
+ ],
+ [ fontStyles ]
+ );
return (
-