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' ) }

+
+ { __( 'Font Style' ) } { fontStyles.map( ( presetStyle ) => { return ( ); } ) } - +
); } 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 ( -
- { __( 'Font Style' ) } - - { fontStyles.map( ( presetStyle ) => { - return ( - - ); - } ) } - +
+
+ { fontStyles.length > 0 && ( + + ) } +
); } 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 41e0237591ef8..3724f9e04f441 100644 --- a/packages/block-editor/src/components/font-style-control/style.scss +++ b/packages/block-editor/src/components/font-style-control/style.scss @@ -1,10 +1,12 @@ -.block-editor-font-style-control { - legend { - margin-bottom: 8px; - } +.components-font-style-control { + .components-font-style-control__select { + label { + padding-bottom: 0; + margin-bottom: 8px; + } - .components-button-group { - display: inline-flex; - margin-bottom: 24px; + .components-base-control { + margin-bottom: 24px; + } } } From d12248eecc0d7f7937af12dfa60e205f1f094afb Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 20 Oct 2020 17:41:01 +1000 Subject: [PATCH 7/9] Remove oblique from font style presets --- lib/experimental-default-theme.json | 4 ---- 1 file changed, 4 deletions(-) diff --git a/lib/experimental-default-theme.json b/lib/experimental-default-theme.json index 6642429b48238..2d4a21456f9db 100644 --- a/lib/experimental-default-theme.json +++ b/lib/experimental-default-theme.json @@ -169,10 +169,6 @@ { "name": "Italic", "slug": "italic" - }, - { - "name": "Oblique", - "slug": "oblique" } ] }, From 9f22598a8c39199f464a11369cd429f3647e3ad0 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 22 Oct 2020 16:07:29 +1000 Subject: [PATCH 8/9] Remove font style support from heading block. --- packages/block-library/src/heading/block.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/heading/block.json b/packages/block-library/src/heading/block.json index 0d477fc8f3c79..ca473d55eb1ad 100644 --- a/packages/block-library/src/heading/block.json +++ b/packages/block-library/src/heading/block.json @@ -28,7 +28,6 @@ "link": true }, "fontSize": true, - "__experimentalFontStyle": true, "lineHeight": true, "__experimentalSelector": { "core/heading/h1": "h1", From bbcac72dbace8d6b2f1b5ab4aa75e53de6eb55a3 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 22 Oct 2020 16:11:34 +1000 Subject: [PATCH 9/9] Apply font styles for dynamic blocks within typography --- lib/block-supports/typography.php | 51 ++++++++++++++++--- .../block-library/src/navigation/index.php | 41 +++------------ 2 files changed, 50 insertions(+), 42 deletions(-) diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index b5aceb72ee0b8..807649b7614b1 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -54,15 +54,13 @@ function gutenberg_register_typography_support( $block_type ) { * @return array Font size CSS classes and inline styles. */ function gutenberg_apply_typography_support( $attributes, $block_attributes, $block_type ) { - $has_font_size_support = false; - if ( property_exists( $block_type, 'supports' ) ) { - $has_font_size_support = gutenberg_experimental_get( $block_type->supports, array( 'fontSize' ), false ); + if ( ! property_exists( $block_type, 'supports' ) ) { + return $attributes; } - $has_line_height_support = false; - if ( property_exists( $block_type, 'supports' ) ) { - $has_line_height_support = gutenberg_experimental_get( $block_type->supports, array( 'lineHeight' ), false ); - } + $has_font_size_support = gutenberg_experimental_get( $block_type->supports, array( 'fontSize' ), false ); + $has_font_style_support = gutenberg_experimental_get( $block_type->supports, array( '__experimentalFontStyle' ), false ); + $has_line_height_support = gutenberg_experimental_get( $block_type->supports, array( 'lineHeight' ), false ); // Font Size. if ( $has_font_size_support ) { @@ -77,6 +75,14 @@ function gutenberg_apply_typography_support( $attributes, $block_attributes, $bl } } + // Font Style. + if ( $has_font_style_support ) { + $font_style = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'fontStyle', 'font-style' ); + if ( $font_style ) { + $attributes['inline_styles'][] = $font_style; + } + } + // Line Height. if ( $has_line_height_support ) { $has_line_height = isset( $block_attributes['style']['typography']['lineHeight'] ); @@ -88,3 +94,34 @@ function gutenberg_apply_typography_support( $attributes, $block_attributes, $bl return $attributes; } + +/** + * Generates an inline style for a typography feature e.g. text decoration, + * text transform, and font style. + * + * @param array $attributes Block's attributes. + * @param string $feature Key for the feature within the typography styles. + * @param string $css_property Slug for the CSS property the inline style sets. + * + * @return string CSS inline style. + */ +function gutenberg_typography_get_css_variable_inline_style( $attributes, $feature, $css_property ) { + // Retrieve current attribute value or skip if not found. + $style_value = gutenberg_experimental_get( $attributes, array( 'style', 'typography', $feature ), false ); + if ( ! $style_value ) { + return; + } + + // If we don't have a preset CSS variable, we'll assume it's a regular CSS value. + if ( strpos( $style_value, "var:preset|{$css_property}|" ) === false ) { + return sprintf( '%s:%s;', $css_property, $style_value ); + } + + // We have a preset CSS variable as the style. + // Get the style value from the string and return CSS style. + $index_to_splice = strrpos( $style_value, '|' ) + 1; + $slug = substr( $style_value, $index_to_splice ); + + // Return the actual CSS inline style e.g. `text-decoration:var(--wp--preset--text-decoration--underline);`. + return sprintf( '%s:var(--wp--preset--%s--%s);', $css_property, $css_property, $slug ); +} diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 5f29feaf29abc..fc5533291a6e1 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -135,8 +135,12 @@ function render_block_core_navigation( $attributes, $content, $block ) { ); $class_attribute = sprintf( ' class="%s"', esc_attr( implode( ' ', $classes ) ) ); - $font_style = block_core_navigation_inline_font_style( $attributes ); - $inline_styles = $colors['inline_styles'] . $font_sizes['inline_styles'] . $font_style; + $block_inline_styles = ''; + if ( isset( $attributes['inline_styles'] ) && is_array( $attributes['inline_styles'] ) ) { + $block_inline_styles = implode( '', $attributes['inline_styles'] ); + } + + $inline_styles = $colors['inline_styles'] . $font_sizes['inline_styles'] . $block_inline_styles; $style_attribute = $inline_styles ? sprintf( ' style="%s"', esc_attr( $inline_styles ) ) : ''; $inner_blocks_html = ''; @@ -152,39 +156,6 @@ 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'] ); - - 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. *