From 2fd66e1e3ad48e7c2f3395faaeb377b7f8bdf369 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Tue, 23 Aug 2022 15:26:28 +1000 Subject: [PATCH 01/18] Adding typography block supports to the search block Ensuring that letter spacing is inherited. --- docs/reference-guides/core-blocks.md | 2 +- packages/block-library/src/search/block.json | 13 +++++++++++++ packages/block-library/src/search/style.scss | 2 ++ 3 files changed, 16 insertions(+), 1 deletion(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index abd247003f9b6..0afd4dc411ccb 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -698,7 +698,7 @@ Help visitors find your content. ([Source](https://github.com/WordPress/gutenber - **Name:** core/search - **Category:** widgets -- **Supports:** align (center, left, right), color (background, gradients, text), ~~html~~ +- **Supports:** align (center, left, right), color (background, gradients, text), typography (fontSize, lineHeight), ~~html~~ - **Attributes:** buttonPosition, buttonText, buttonUseIcon, label, placeholder, query, showLabel, width, widthUnit ## Separator diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json index cb9ae01a648bc..b6310bf79d5a1 100644 --- a/packages/block-library/src/search/block.json +++ b/packages/block-library/src/search/block.json @@ -54,6 +54,19 @@ "text": true } }, + "typography": { + "fontSize": true, + "lineHeight": true, + "__experimentalFontFamily": true, + "__experimentalFontWeight": true, + "__experimentalFontStyle": true, + "__experimentalTextTransform": true, + "__experimentalTextDecoration": true, + "__experimentalLetterSpacing": true, + "__experimentalDefaultControls": { + "fontSize": true + } + }, "__experimentalBorder": { "color": true, "radius": true, diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index f6eb7ed287c5e..d6c8a2909612a 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -18,6 +18,7 @@ :where(.wp-block-search__button) { border: 1px solid #ccc; padding: 0.375em 0.625em; + letter-spacing: inherit; } .wp-block-search__inside-wrapper { @@ -41,6 +42,7 @@ font-size: inherit; font-family: inherit; line-height: inherit; + letter-spacing: inherit; } .wp-block-search.wp-block-search__button-only { From 26c25da9d34d32779e0ae2158b1962abe97c0d2b Mon Sep 17 00:00:00 2001 From: ramonjd Date: Wed, 24 Aug 2022 15:06:02 +1000 Subject: [PATCH 02/18] Opting into all typography supports for the search block (with the exception of text-decoration for the input element) so we can test and eliminate features we think aren't required. --- packages/block-editor/src/hooks/index.js | 1 + .../src/hooks/test/use-typography-props.js | 27 ++++++ .../src/hooks/use-typography-props.js | 34 +++++++ packages/block-editor/src/index.js | 1 + packages/block-library/src/search/block.json | 1 + packages/block-library/src/search/edit.js | 23 +++-- packages/block-library/src/search/index.php | 89 ++++++++++++++++++- packages/block-library/src/search/style.scss | 2 - 8 files changed, 169 insertions(+), 9 deletions(-) create mode 100644 packages/block-editor/src/hooks/test/use-typography-props.js create mode 100644 packages/block-editor/src/hooks/use-typography-props.js diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index 5a07d864beb62..3ed81af7cda60 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/packages/block-editor/src/hooks/index.js @@ -21,5 +21,6 @@ export { useCustomSides } from './dimensions'; export { getBorderClassesAndStyles, useBorderProps } from './use-border-props'; export { getColorClassesAndStyles, useColorProps } from './use-color-props'; export { getSpacingClassesAndStyles } from './use-spacing-props'; +export { getTypographyClassesAndStyles } from './use-typography-props'; export { getGapCSSValue } from './gap'; export { useCachedTruthy } from './use-cached-truthy'; diff --git a/packages/block-editor/src/hooks/test/use-typography-props.js b/packages/block-editor/src/hooks/test/use-typography-props.js new file mode 100644 index 0000000000000..0ebb887ca27e3 --- /dev/null +++ b/packages/block-editor/src/hooks/test/use-typography-props.js @@ -0,0 +1,27 @@ +/** + * Internal dependencies + */ +import { getTypographyClassesAndStyles } from '../use-typography-props'; + +describe( 'getTypographyClassesAndStyles', () => { + it( 'should return styles and classes', () => { + const attributes = { + fontFamily: 'tofu', + style: { + typography: { + letterSpacing: '22px', + fontSize: '2rem', + fontFamily: 'tahini', + }, + }, + }; + expect( getTypographyClassesAndStyles( attributes ) ).toEqual( { + className: 'has-tofu-font-family', + style: { + letterSpacing: '22px', + fontSize: '2rem', + fontFamily: 'tahini', + }, + } ); + } ); +} ); diff --git a/packages/block-editor/src/hooks/use-typography-props.js b/packages/block-editor/src/hooks/use-typography-props.js new file mode 100644 index 0000000000000..df39ccb02ae07 --- /dev/null +++ b/packages/block-editor/src/hooks/use-typography-props.js @@ -0,0 +1,34 @@ +/** + * External dependencies + */ +import { kebabCase } from 'lodash'; + +/** + * Internal dependencies + */ +import { getInlineStyles } from './style'; + +// This utility is intended to assist where the serialization of the typography +// block support is being skipped for a block but the spacing related CSS +// styles still need to be generated so they can be applied to inner elements. + +/** + * Provides the CSS class names and inline styles for a block's typography support + * attributes. + * + * @param {Object} attributes Block attributes. + * + * @return {Object} Typography block support derived CSS classes & styles. + */ +export function getTypographyClassesAndStyles( attributes ) { + // Collect inline styles for typography. + const typographyStyles = attributes?.style?.typography || {}; + const style = getInlineStyles( { typography: typographyStyles } ); + const className = !! attributes?.fontFamily + ? `has-${ kebabCase( attributes.fontFamily ) }-font-family` + : ''; + return { + className, + style, + }; +} diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js index c3d55ce8962c7..92216585bd272 100644 --- a/packages/block-editor/src/index.js +++ b/packages/block-editor/src/index.js @@ -6,6 +6,7 @@ export { getBorderClassesAndStyles as __experimentalGetBorderClassesAndStyles, useBorderProps as __experimentalUseBorderProps, getColorClassesAndStyles as __experimentalGetColorClassesAndStyles, + getTypographyClassesAndStyles as __experimentalGetTypographyClassesAndStyles, useColorProps as __experimentalUseColorProps, useCustomSides as __experimentalUseCustomSides, getSpacingClassesAndStyles as __experimentalGetSpacingClassesAndStyles, diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json index b6310bf79d5a1..62ea22c9ff962 100644 --- a/packages/block-library/src/search/block.json +++ b/packages/block-library/src/search/block.json @@ -55,6 +55,7 @@ } }, "typography": { + "__experimentalSkipSerialization": true, "fontSize": true, "lineHeight": true, "__experimentalFontFamily": true, diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 0206986961cef..9b8f38d2580a4 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -13,6 +13,7 @@ import { RichText, __experimentalUseBorderProps as useBorderProps, __experimentalUseColorProps as useColorProps, + __experimentalGetTypographyClassesAndStyles as useTypographyProps, store as blockEditorStore, __experimentalGetElementClassName, } from '@wordpress/block-editor'; @@ -112,6 +113,7 @@ export default function SearchEdit( { } const colorProps = useColorProps( attributes ); + const typographyProps = useTypographyProps( attributes ); const unitControlInstanceId = useInstanceId( UnitControl ); const unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`; const isButtonPositionInside = 'button-inside' === buttonPosition; @@ -208,11 +210,19 @@ export default function SearchEdit( { // If the input is inside the wrapper, the wrapper gets the border color styles/classes, not the input control. const textFieldClasses = classnames( 'wp-block-search__input', - isButtonPositionInside ? undefined : borderProps.className + isButtonPositionInside ? undefined : borderProps.className, + typographyProps.className ); - const textFieldStyles = isButtonPositionInside - ? { borderRadius } - : borderProps.style; + const textFieldStyles = { + ...{ + ...typographyProps.style, + // Input opts out of text decoration. + textDecoration: undefined, + }, + ...( isButtonPositionInside + ? { borderRadius } + : borderProps.style ), + }; return ( setAttributes( { label: html } ) } + style={ { ...typographyProps.style } } /> ) } diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index d056da16d958a..f4ae369672c2c 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -51,9 +51,10 @@ function render_block_core_search( $attributes ) { ); if ( $show_label && ! empty( $attributes['label'] ) ) { $label_markup = sprintf( - '', + '', $input_id, - $label_inner_html + $inline_styles['label'], + $label_inner_html, ); } @@ -270,8 +271,10 @@ function styles_for_block_core_search( $attributes ) { $wrapper_styles = array(); $button_styles = array(); $input_styles = array(); + $label_styles = array(); $is_button_inside = ! empty( $attributes['buttonPosition'] ) && 'button-inside' === $attributes['buttonPosition']; + $show_label = ( isset( $attributes['showLabel'] ) ) && false !== $attributes['showLabel']; // Add width styles. $has_width = ! empty( $attributes['width'] ) && ! empty( $attributes['widthUnit'] ); @@ -360,10 +363,92 @@ function styles_for_block_core_search( $attributes ) { $button_styles[] = sprintf( 'background: %s;', $attributes['style']['color']['gradient'] ); } + // Add typography styles. + $has_font_size = ! empty( $attributes['style']['typography']['fontSize'] ); + if ( $has_font_size ) { + $font_size_value = sprintf( 'font-size: %s;', esc_attr( $attributes['style']['typography']['fontSize'] ) ); + $button_styles[] = $font_size_value; + $input_styles[] = $font_size_value; + if ( $show_label ) { + $label_styles[] = $font_size_value; + } + } + + $has_font_family = ! empty( $attributes['style']['typography']['fontFamily'] ); + if ( $has_font_family ) { + $font_family_value = sprintf( 'font-family: %s;', esc_attr( $attributes['style']['typography']['fontFamily'] ) ); + $button_styles[] = $font_family_value; + $input_styles[] = $font_family_value; + if ( $show_label ) { + $label_styles[] = $font_family_value; + } + } + + $has_letter_spacing = ! empty( $attributes['style']['typography']['letterSpacing'] ); + if ( $has_letter_spacing ) { + $letter_spacing_value = sprintf( 'letter-spacing: %s;', esc_attr( $attributes['style']['typography']['letterSpacing'] ) ); + $button_styles[] = $letter_spacing_value; + $input_styles[] = $letter_spacing_value; + if ( $show_label ) { + $label_styles[] = $letter_spacing_value; + } + } + + $has_font_weight = ! empty( $attributes['style']['typography']['fontWeight'] ); + if ( $has_font_weight ) { + $font_weight_value = sprintf( 'font-weight: %s;', esc_attr( $attributes['style']['typography']['fontWeight'] ) ); + $button_styles[] = $font_weight_value; + $input_styles[] = $font_weight_value; + if ( $show_label ) { + $label_styles[] = $font_weight_value; + } + } + + $has_font_style = ! empty( $attributes['style']['typography']['fontStyle'] ); + if ( $has_font_style ) { + $font_style_value = sprintf( 'font-style: %s;', esc_attr( $attributes['style']['typography']['fontStyle'] ) ); + $button_styles[] = $font_style_value; + $input_styles[] = $font_style_value; + if ( $show_label ) { + $label_styles[] = $font_style_value; + } + } + + $has_line_height = ! empty( $attributes['style']['typography']['lineHeight'] ); + if ( $has_line_height ) { + $line_height_value = sprintf( 'line-height: %s;', esc_attr( $attributes['style']['typography']['lineHeight'] ) ); + $button_styles[] = $line_height_value; + $input_styles[] = $line_height_value; + if ( $show_label ) { + $label_styles[] = $line_height_value; + } + } + + $has_text_transform = ! empty( $attributes['style']['typography']['textTransform'] ); + if ( $has_text_transform ) { + $text_transform_value = sprintf( 'text-transform: %s;', esc_attr( $attributes['style']['typography']['textTransform'] ) ); + $button_styles[] = $text_transform_value; + $input_styles[] = $text_transform_value; + if ( $show_label ) { + $label_styles[] = $text_transform_value; + } + } + + $has_text_decoration = ! empty( $attributes['style']['typography']['textDecoration'] ); + if ( $has_text_decoration ) { + $text_decoration_value = sprintf( 'text-decoration: %s;', esc_attr( $attributes['style']['typography']['textDecoration'] ) ); + $button_styles[] = $text_decoration_value; + // Input opts out of text decoration. + if ( $show_label ) { + $label_styles[] = $text_decoration_value; + } + } + return array( 'input' => ! empty( $input_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $input_styles ) ) ) : '', 'button' => ! empty( $button_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $button_styles ) ) ) : '', 'wrapper' => ! empty( $wrapper_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $wrapper_styles ) ) ) : '', + 'label' => ! empty( $label_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $label_styles ) ) ) : '', ); } diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index d6c8a2909612a..f6eb7ed287c5e 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -18,7 +18,6 @@ :where(.wp-block-search__button) { border: 1px solid #ccc; padding: 0.375em 0.625em; - letter-spacing: inherit; } .wp-block-search__inside-wrapper { @@ -42,7 +41,6 @@ font-size: inherit; font-family: inherit; line-height: inherit; - letter-spacing: inherit; } .wp-block-search.wp-block-search__button-only { From 910aa4bd52407a8daabc0ea2923c958d4a06bb31 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Wed, 24 Aug 2022 15:52:25 +1000 Subject: [PATCH 03/18] There should be a classname for font presets Formatting --- .../src/hooks/test/use-typography-props.js | 3 ++- .../block-editor/src/hooks/use-typography-props.js | 10 ++++++++-- packages/block-library/src/search/block.json | 1 + packages/block-library/src/search/edit.js | 7 ++++++- packages/block-library/src/search/index.php | 2 +- 5 files changed, 18 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/hooks/test/use-typography-props.js b/packages/block-editor/src/hooks/test/use-typography-props.js index 0ebb887ca27e3..fe0291b18f8ed 100644 --- a/packages/block-editor/src/hooks/test/use-typography-props.js +++ b/packages/block-editor/src/hooks/test/use-typography-props.js @@ -7,6 +7,7 @@ describe( 'getTypographyClassesAndStyles', () => { it( 'should return styles and classes', () => { const attributes = { fontFamily: 'tofu', + fontSize: 'large', style: { typography: { letterSpacing: '22px', @@ -16,7 +17,7 @@ describe( 'getTypographyClassesAndStyles', () => { }, }; expect( getTypographyClassesAndStyles( attributes ) ).toEqual( { - className: 'has-tofu-font-family', + className: 'has-tofu-font-family has-large-font-size', style: { letterSpacing: '22px', fontSize: '2rem', diff --git a/packages/block-editor/src/hooks/use-typography-props.js b/packages/block-editor/src/hooks/use-typography-props.js index df39ccb02ae07..520192169d6b0 100644 --- a/packages/block-editor/src/hooks/use-typography-props.js +++ b/packages/block-editor/src/hooks/use-typography-props.js @@ -2,6 +2,7 @@ * External dependencies */ import { kebabCase } from 'lodash'; +import classnames from 'classnames'; /** * Internal dependencies @@ -21,12 +22,17 @@ import { getInlineStyles } from './style'; * @return {Object} Typography block support derived CSS classes & styles. */ export function getTypographyClassesAndStyles( attributes ) { - // Collect inline styles for typography. const typographyStyles = attributes?.style?.typography || {}; const style = getInlineStyles( { typography: typographyStyles } ); - const className = !! attributes?.fontFamily + const fontFamilyClassName = !! attributes?.fontFamily ? `has-${ kebabCase( attributes.fontFamily ) }-font-family` : ''; + + const fontSizeClassName = !! attributes?.fontSize + ? `has-${ kebabCase( attributes.fontSize ) }-font-size` + : ''; + const className = classnames( fontFamilyClassName, fontSizeClassName ); + return { className, style, diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json index 62ea22c9ff962..9b511dcc71807 100644 --- a/packages/block-library/src/search/block.json +++ b/packages/block-library/src/search/block.json @@ -55,6 +55,7 @@ } }, "typography": { + "__experimentalSelector": ".wp-block-search__label, input, button", "__experimentalSkipSerialization": true, "fontSize": true, "lineHeight": true, diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 9b8f38d2580a4..eb215e048218c 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -457,13 +457,18 @@ export default function SearchEdit( { className: getBlockClassNames(), } ); + const labelClassnames = classnames( + 'wp-block-search__label', + typographyProps.className + ); + return (
{ controls } { showLabel && ( %3$s', $input_id, $inline_styles['label'], - $label_inner_html, + $label_inner_html ); } From b05d36cfac6706d4512d09c5e27f2571674e50da Mon Sep 17 00:00:00 2001 From: ramonjd Date: Thu, 25 Aug 2022 16:04:05 +1000 Subject: [PATCH 04/18] Adding selectors for global styles. --- packages/block-library/src/search/block.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json index 9b511dcc71807..4216155fa538c 100644 --- a/packages/block-library/src/search/block.json +++ b/packages/block-library/src/search/block.json @@ -55,7 +55,7 @@ } }, "typography": { - "__experimentalSelector": ".wp-block-search__label, input, button", + "__experimentalSelector": ".wp-block-search__label, .wp-block-search__input, .wp-element-button", "__experimentalSkipSerialization": true, "fontSize": true, "lineHeight": true, From a6244530a8641ef127d7be01fc79d14dcc897127 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Thu, 25 Aug 2022 17:12:06 +1000 Subject: [PATCH 05/18] Adding typography classes in the back end --- packages/block-library/src/search/index.php | 50 ++++++++++++++++++--- 1 file changed, 44 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 4974cce677a45..e0f90cea09a36 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -37,6 +37,7 @@ function render_block_core_search( $attributes ) { $query_params_markup = ''; $inline_styles = styles_for_block_core_search( $attributes ); $color_classes = get_color_classes_for_block_core_search( $attributes ); + $typography_classes = get_typography_classes_for_block_core_search( $attributes ); $is_button_inside = ! empty( $attributes['buttonPosition'] ) && 'button-inside' === $attributes['buttonPosition']; // Border color classes need to be applied to the elements that have a border color. @@ -50,8 +51,13 @@ function render_block_core_search( $attributes ) { $label_inner_html ); if ( $show_label && ! empty( $attributes['label'] ) ) { + $label_classes = array( 'wp-block-search__label' ); + if ( ! empty( $typography_classes ) ) { + $label_classes[] = $typography_classes; + } $label_markup = sprintf( - '', + '', + esc_attr( implode( ' ', $label_classes ) ), $input_id, $inline_styles['label'], $label_inner_html @@ -59,11 +65,17 @@ function render_block_core_search( $attributes ) { } if ( $show_input ) { - $input_classes = ! $is_button_inside ? $border_color_classes : ''; - $input_markup = sprintf( + $input_classes = array( 'wp-block-search__input' ); + if ( $is_button_inside ) { + $input_classes[] = $border_color_classes; + } + if ( ! empty( $typography_classes ) ) { + $input_classes[] = $typography_classes; + } + $input_markup = sprintf( '', $input_id, - esc_attr( $input_classes ), + esc_attr( implode( ' ', $input_classes ) ), get_search_query(), esc_attr( $attributes['placeholder'] ), $inline_styles['input'] @@ -81,11 +93,14 @@ function render_block_core_search( $attributes ) { } if ( $show_button ) { - $button_classes = array(); + $button_classes = array( 'wp-block-search__button' ); $button_internal_markup = ''; if ( ! empty( $color_classes ) ) { $button_classes[] = $color_classes; } + if ( ! empty( $typography_classes ) ) { + $button_classes[] = $typography_classes; + } $aria_label = ''; if ( ! $is_button_inside && ! empty( $border_color_classes ) ) { @@ -108,7 +123,7 @@ function render_block_core_search( $attributes ) { // Include the button element class. $button_classes[] = WP_Theme_JSON_Gutenberg::get_element_class_name( 'button' ); $button_markup = sprintf( - '', + '', esc_attr( implode( ' ', $button_classes ) ), $inline_styles['button'], $aria_label, @@ -452,6 +467,29 @@ function styles_for_block_core_search( $attributes ) { ); } +/** + * Returns typography classnames depending on whether there are named font sizes/families . + * + * @param array $attributes The block attributes. + * + * @return string The typography color classnames to be applied to the block elements. + */ +function get_typography_classes_for_block_core_search( $attributes ) { + $typography_classes = array(); + $has_named_font_family = ! empty( $attributes['style']['typography']['fontFamily'] ); + $has_named_font_size = ! empty( $attributes['fontSize'] ); + + if ( $has_named_font_size ) { + $typography_classes[] = sprintf( 'has-%s-font-size', esc_attr( $attributes['fontSize'] ) ); + } + + if ( $has_named_font_family ) { + $typography_classes[] = sprintf( 'has-%s-font-family', esc_attr( $attributes['fontSize'] ) ); + } + + return implode( ' ', $typography_classes ); +} + /** * Returns border color classnames depending on whether there are named or custom border colors. * From a06e86c9285276f2322b78a18e925f7db7863160 Mon Sep 17 00:00:00 2001 From: Ramon Date: Mon, 29 Aug 2022 16:09:16 +1000 Subject: [PATCH 06/18] Update packages/block-editor/src/hooks/use-typography-props.js Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> --- packages/block-editor/src/hooks/use-typography-props.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/hooks/use-typography-props.js b/packages/block-editor/src/hooks/use-typography-props.js index 520192169d6b0..6a2aaee3eb909 100644 --- a/packages/block-editor/src/hooks/use-typography-props.js +++ b/packages/block-editor/src/hooks/use-typography-props.js @@ -10,7 +10,7 @@ import classnames from 'classnames'; import { getInlineStyles } from './style'; // This utility is intended to assist where the serialization of the typography -// block support is being skipped for a block but the spacing related CSS +// block support is being skipped for a block but the typography related CSS // styles still need to be generated so they can be applied to inner elements. /** From 2bd5d91dc046c4d9825e279598880332b088894b Mon Sep 17 00:00:00 2001 From: Ramon Date: Mon, 29 Aug 2022 16:09:26 +1000 Subject: [PATCH 07/18] Update packages/block-library/src/search/index.php Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> --- packages/block-library/src/search/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index e0f90cea09a36..39dce3446b91a 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -463,7 +463,7 @@ function styles_for_block_core_search( $attributes ) { 'input' => ! empty( $input_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $input_styles ) ) ) : '', 'button' => ! empty( $button_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $button_styles ) ) ) : '', 'wrapper' => ! empty( $wrapper_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $wrapper_styles ) ) ) : '', - 'label' => ! empty( $label_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $label_styles ) ) ) : '', + 'label' => ! empty( $label_styles ) ? sprintf( ' style="%s"', esc_attr( safecss_filter_attr( implode( ' ', $label_styles ) ) ) ) : '', ); } From 7146b68f433af37044c3f503331cf2564ea10784 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Thu, 8 Sep 2022 21:48:03 +1000 Subject: [PATCH 08/18] Apply text decoration only to label and button Apply all typography styles except text decoration to block wrapper Inherit block wrapper styles in CSS for each element Use getFontSizeClass() Remove __experimentalSelector Make getTypographyClassesAndStyles() stable --- packages/block-editor/README.md | 13 ++ .../src/hooks/use-typography-props.js | 9 +- packages/block-editor/src/index.js | 2 +- packages/block-library/src/search/block.json | 1 - packages/block-library/src/search/edit.js | 47 ++++--- packages/block-library/src/search/index.php | 125 +++++++----------- packages/block-library/src/search/style.scss | 16 ++- 7 files changed, 110 insertions(+), 103 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index c2b8ebc4efd71..ccdb5b9e37595 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -474,6 +474,19 @@ _Returns_ - `string`: returns the cssUnit value in a simple px format. +### getTypographyClassesAndStyles + +Provides the CSS class names and inline styles for a block's typography support +attributes. + +_Parameters_ + +- _attributes_ `Object`: Block attributes. + +_Returns_ + +- `Object`: Typography block support derived CSS classes & styles. + ### InnerBlocks _Related_ diff --git a/packages/block-editor/src/hooks/use-typography-props.js b/packages/block-editor/src/hooks/use-typography-props.js index 6a2aaee3eb909..d08105d8d90c1 100644 --- a/packages/block-editor/src/hooks/use-typography-props.js +++ b/packages/block-editor/src/hooks/use-typography-props.js @@ -8,6 +8,7 @@ import classnames from 'classnames'; * Internal dependencies */ import { getInlineStyles } from './style'; +import { getFontSizeClass } from '../components/font-sizes'; // This utility is intended to assist where the serialization of the typography // block support is being skipped for a block but the typography related CSS @@ -28,10 +29,10 @@ export function getTypographyClassesAndStyles( attributes ) { ? `has-${ kebabCase( attributes.fontFamily ) }-font-family` : ''; - const fontSizeClassName = !! attributes?.fontSize - ? `has-${ kebabCase( attributes.fontSize ) }-font-size` - : ''; - const className = classnames( fontFamilyClassName, fontSizeClassName ); + const className = classnames( + fontFamilyClassName, + getFontSizeClass( attributes?.fontSize ) + ); return { className, diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js index 92216585bd272..ec0f20a8f9c89 100644 --- a/packages/block-editor/src/index.js +++ b/packages/block-editor/src/index.js @@ -6,7 +6,7 @@ export { getBorderClassesAndStyles as __experimentalGetBorderClassesAndStyles, useBorderProps as __experimentalUseBorderProps, getColorClassesAndStyles as __experimentalGetColorClassesAndStyles, - getTypographyClassesAndStyles as __experimentalGetTypographyClassesAndStyles, + getTypographyClassesAndStyles, useColorProps as __experimentalUseColorProps, useCustomSides as __experimentalUseCustomSides, getSpacingClassesAndStyles as __experimentalGetSpacingClassesAndStyles, diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json index 4216155fa538c..62ea22c9ff962 100644 --- a/packages/block-library/src/search/block.json +++ b/packages/block-library/src/search/block.json @@ -55,7 +55,6 @@ } }, "typography": { - "__experimentalSelector": ".wp-block-search__label, .wp-block-search__input, .wp-element-button", "__experimentalSkipSerialization": true, "fontSize": true, "lineHeight": true, diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index eb215e048218c..3e058875c7edc 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -13,7 +13,7 @@ import { RichText, __experimentalUseBorderProps as useBorderProps, __experimentalUseColorProps as useColorProps, - __experimentalGetTypographyClassesAndStyles as useTypographyProps, + getTypographyClassesAndStyles as useTypographyProps, store as blockEditorStore, __experimentalGetElementClassName, } from '@wordpress/block-editor'; @@ -214,11 +214,6 @@ export default function SearchEdit( { typographyProps.className ); const textFieldStyles = { - ...{ - ...typographyProps.style, - // Input opts out of text decoration. - textDecoration: undefined, - }, ...( isButtonPositionInside ? { borderRadius } : borderProps.style ), @@ -256,7 +251,7 @@ export default function SearchEdit( { ); const buttonStyles = { ...colorProps.style, - ...typographyProps.style, + textDecoration: typographyProps.style?.textDecoration, ...( isButtonPositionInside ? { borderRadius } : borderProps.style ), @@ -403,18 +398,21 @@ export default function SearchEdit( { radius ? `calc(${ radius } + ${ DEFAULT_INNER_PADDING })` : undefined; const getWrapperStyles = () => { - const styles = isButtonPositionInside - ? borderProps.style - : { - borderRadius: borderProps.style?.borderRadius, - borderTopLeftRadius: borderProps.style?.borderTopLeftRadius, - borderTopRightRadius: - borderProps.style?.borderTopRightRadius, - borderBottomLeftRadius: - borderProps.style?.borderBottomLeftRadius, - borderBottomRightRadius: - borderProps.style?.borderBottomRightRadius, - }; + const styles = { + ...( isButtonPositionInside + ? borderProps.style + : { + borderRadius: borderProps.style?.borderRadius, + borderTopLeftRadius: + borderProps.style?.borderTopLeftRadius, + borderTopRightRadius: + borderProps.style?.borderTopRightRadius, + borderBottomLeftRadius: + borderProps.style?.borderBottomLeftRadius, + borderBottomRightRadius: + borderProps.style?.borderBottomRightRadius, + } ), + }; const isNonZeroBorderRadius = borderRadius !== undefined && parseInt( borderRadius, 10 ) !== 0; @@ -455,6 +453,13 @@ export default function SearchEdit( { const blockProps = useBlockProps( { className: getBlockClassNames(), + style: { + ...{ + ...typographyProps.style, + // Input opts out of text decoration. + textDecoration: undefined, + }, + }, } ); const labelClassnames = classnames( @@ -474,7 +479,9 @@ export default function SearchEdit( { withoutInteractiveFormatting value={ label } onChange={ ( html ) => setAttributes( { label: html } ) } - style={ { ...typographyProps.style } } + style={ { + textDecoration: typographyProps.style?.textDecoration, + } } /> ) } diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 39dce3446b91a..c381724ca3b31 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -138,7 +138,12 @@ function render_block_core_search( $attributes ) { $inline_styles['wrapper'], $input_markup . $query_params_markup . $button_markup ); - $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) ); + $wrapper_attributes = get_block_wrapper_attributes( + array( + 'class' => $classnames, + 'style' => get_typography_styles_for_block_core_search( $attributes ), + ) + ); return sprintf( '
%s
', @@ -378,79 +383,8 @@ function styles_for_block_core_search( $attributes ) { $button_styles[] = sprintf( 'background: %s;', $attributes['style']['color']['gradient'] ); } - // Add typography styles. - $has_font_size = ! empty( $attributes['style']['typography']['fontSize'] ); - if ( $has_font_size ) { - $font_size_value = sprintf( 'font-size: %s;', esc_attr( $attributes['style']['typography']['fontSize'] ) ); - $button_styles[] = $font_size_value; - $input_styles[] = $font_size_value; - if ( $show_label ) { - $label_styles[] = $font_size_value; - } - } - - $has_font_family = ! empty( $attributes['style']['typography']['fontFamily'] ); - if ( $has_font_family ) { - $font_family_value = sprintf( 'font-family: %s;', esc_attr( $attributes['style']['typography']['fontFamily'] ) ); - $button_styles[] = $font_family_value; - $input_styles[] = $font_family_value; - if ( $show_label ) { - $label_styles[] = $font_family_value; - } - } - - $has_letter_spacing = ! empty( $attributes['style']['typography']['letterSpacing'] ); - if ( $has_letter_spacing ) { - $letter_spacing_value = sprintf( 'letter-spacing: %s;', esc_attr( $attributes['style']['typography']['letterSpacing'] ) ); - $button_styles[] = $letter_spacing_value; - $input_styles[] = $letter_spacing_value; - if ( $show_label ) { - $label_styles[] = $letter_spacing_value; - } - } - - $has_font_weight = ! empty( $attributes['style']['typography']['fontWeight'] ); - if ( $has_font_weight ) { - $font_weight_value = sprintf( 'font-weight: %s;', esc_attr( $attributes['style']['typography']['fontWeight'] ) ); - $button_styles[] = $font_weight_value; - $input_styles[] = $font_weight_value; - if ( $show_label ) { - $label_styles[] = $font_weight_value; - } - } - - $has_font_style = ! empty( $attributes['style']['typography']['fontStyle'] ); - if ( $has_font_style ) { - $font_style_value = sprintf( 'font-style: %s;', esc_attr( $attributes['style']['typography']['fontStyle'] ) ); - $button_styles[] = $font_style_value; - $input_styles[] = $font_style_value; - if ( $show_label ) { - $label_styles[] = $font_style_value; - } - } - - $has_line_height = ! empty( $attributes['style']['typography']['lineHeight'] ); - if ( $has_line_height ) { - $line_height_value = sprintf( 'line-height: %s;', esc_attr( $attributes['style']['typography']['lineHeight'] ) ); - $button_styles[] = $line_height_value; - $input_styles[] = $line_height_value; - if ( $show_label ) { - $label_styles[] = $line_height_value; - } - } - - $has_text_transform = ! empty( $attributes['style']['typography']['textTransform'] ); - if ( $has_text_transform ) { - $text_transform_value = sprintf( 'text-transform: %s;', esc_attr( $attributes['style']['typography']['textTransform'] ) ); - $button_styles[] = $text_transform_value; - $input_styles[] = $text_transform_value; - if ( $show_label ) { - $label_styles[] = $text_transform_value; - } - } - - $has_text_decoration = ! empty( $attributes['style']['typography']['textDecoration'] ); - if ( $has_text_decoration ) { + // Typography text-decoration is only applied to the label and button. + if ( ! empty( $attributes['style']['typography']['textDecoration'] ) ) { $text_decoration_value = sprintf( 'text-decoration: %s;', esc_attr( $attributes['style']['typography']['textDecoration'] ) ); $button_styles[] = $text_decoration_value; // Input opts out of text decoration. @@ -490,6 +424,49 @@ function get_typography_classes_for_block_core_search( $attributes ) { return implode( ' ', $typography_classes ); } +/** + * Returns typography styles to be included in an HTML style tag. + * This excludes text-decoration, which is applied only to the label and button elements of the search block. + * + * @param array $attributes The block attributes. + * + * @return string A string of typography CSS declarations. + */ +function get_typography_styles_for_block_core_search( $attributes ) { + $typography_styles = array(); + + // Add typography styles. + if ( ! empty( $attributes['style']['typography']['fontSize'] ) ) { + $typography_styles[] = sprintf( 'font-size: %s;', esc_attr( $attributes['style']['typography']['fontSize'] ) ); + } + + if ( ! empty( $attributes['style']['typography']['fontFamily'] ) ) { + $typography_styles[] = sprintf( 'font-family: %s;', esc_attr( $attributes['style']['typography']['fontFamily'] ) ); + } + + if ( ! empty( $attributes['style']['typography']['letterSpacing'] ) ) { + $typography_styles[] = sprintf( 'letter-spacing: %s;', esc_attr( $attributes['style']['typography']['letterSpacing'] ) ); + } + + if ( ! empty( $attributes['style']['typography']['fontWeight'] ) ) { + $typography_styles[] = sprintf( 'font-weight: %s;', esc_attr( $attributes['style']['typography']['fontWeight'] ) ); + } + + if ( ! empty( $attributes['style']['typography']['fontStyle'] ) ) { + $typography_styles[] = sprintf( 'font-style: %s;', esc_attr( $attributes['style']['typography']['fontStyle'] ) ); + } + + if ( ! empty( $attributes['style']['typography']['lineHeight'] ) ) { + $typography_styles[] = sprintf( 'line-height: %s;', esc_attr( $attributes['style']['typography']['lineHeight'] ) ); + } + + if ( ! empty( $attributes['style']['typography']['textTransform'] ) ) { + $typography_styles[] = sprintf( 'text-transform: %s;', esc_attr( $attributes['style']['typography']['textTransform'] ) ); + } + + return implode( '', $typography_styles ); +} + /** * Returns border color classnames depending on whether there are named or custom border colors. * diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index f6eb7ed287c5e..fca42cd771095 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -1,3 +1,15 @@ +.wp-block-search__label, +.wp-block-search__input, +.wp-block-search__button { + font-size: inherit; + font-family: inherit; + line-height: inherit; + letter-spacing: inherit; + font-style: inherit; + text-transform: inherit; + text-decoration: inherit; +} + .wp-block-search__button { margin-left: 0.625em; word-break: normal; @@ -38,9 +50,7 @@ margin-right: 0; min-width: 3em; border: 1px solid #949494; - font-size: inherit; - font-family: inherit; - line-height: inherit; + text-decoration: unset; } .wp-block-search.wp-block-search__button-only { From 38659419f2e7ec07f3a6b4ba36197e0f782ba15e Mon Sep 17 00:00:00 2001 From: ramonjd Date: Fri, 9 Sep 2022 11:51:08 +1000 Subject: [PATCH 09/18] The attributes were in the wrong order! Who would have thunk it?! --- packages/block-library/src/search/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index c381724ca3b31..10e9980a6e18d 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -57,8 +57,8 @@ function render_block_core_search( $attributes ) { } $label_markup = sprintf( '', + esc_attr( $input_id ), esc_attr( implode( ' ', $label_classes ) ), - $input_id, $inline_styles['label'], $label_inner_html ); From 384ce7dadcafc3d44ff432257bab570fcd0498d9 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Fri, 9 Sep 2022 20:57:23 +1000 Subject: [PATCH 10/18] Ensure typography font size and family classnames appear on the wrapper, not on the individual elements. --- packages/block-library/src/search/edit.js | 23 +++----- packages/block-library/src/search/index.php | 58 +++++---------------- test/emptytheme/theme.json | 33 ++++++++++++ 3 files changed, 54 insertions(+), 60 deletions(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 3e058875c7edc..ea49e79d0dbc9 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -120,7 +120,6 @@ export default function SearchEdit( { const isButtonPositionOutside = 'button-outside' === buttonPosition; const hasNoButton = 'no-button' === buttonPosition; const hasOnlyButton = 'button-only' === buttonPosition; - const units = useCustomUnits( { availableUnits: [ '%', 'px' ], defaultValues: { '%': PC_WIDTH_DEFAULT, px: PX_WIDTH_DEFAULT }, @@ -142,7 +141,8 @@ export default function SearchEdit( { : undefined, buttonUseIcon && ! hasNoButton ? 'wp-block-search__icon-button' - : undefined + : undefined, + typographyProps.className ); }; @@ -210,14 +210,11 @@ export default function SearchEdit( { // If the input is inside the wrapper, the wrapper gets the border color styles/classes, not the input control. const textFieldClasses = classnames( 'wp-block-search__input', - isButtonPositionInside ? undefined : borderProps.className, - typographyProps.className + isButtonPositionInside ? undefined : borderProps.className ); - const textFieldStyles = { - ...( isButtonPositionInside - ? { borderRadius } - : borderProps.style ), - }; + const textFieldStyles = isButtonPositionInside + ? { borderRadius } + : borderProps.style; return ( { controls } { showLabel && ( %4$s', + '', esc_attr( $input_id ), - esc_attr( implode( ' ', $label_classes ) ), $inline_styles['label'], $label_inner_html ); } if ( $show_input ) { - $input_classes = array( 'wp-block-search__input' ); - if ( $is_button_inside ) { - $input_classes[] = $border_color_classes; - } - if ( ! empty( $typography_classes ) ) { - $input_classes[] = $typography_classes; - } - $input_markup = sprintf( + $input_classes = ! $is_button_inside ? $border_color_classes : ''; + $input_markup = sprintf( '', $input_id, - esc_attr( implode( ' ', $input_classes ) ), + esc_attr( $input_classes ), get_search_query(), esc_attr( $attributes['placeholder'] ), $inline_styles['input'] @@ -93,14 +81,11 @@ function render_block_core_search( $attributes ) { } if ( $show_button ) { - $button_classes = array( 'wp-block-search__button' ); + $button_classes = array(); $button_internal_markup = ''; if ( ! empty( $color_classes ) ) { $button_classes[] = $color_classes; } - if ( ! empty( $typography_classes ) ) { - $button_classes[] = $typography_classes; - } $aria_label = ''; if ( ! $is_button_inside && ! empty( $border_color_classes ) ) { @@ -123,7 +108,7 @@ function render_block_core_search( $attributes ) { // Include the button element class. $button_classes[] = WP_Theme_JSON_Gutenberg::get_element_class_name( 'button' ); $button_markup = sprintf( - '', + '', esc_attr( implode( ' ', $button_classes ) ), $inline_styles['button'], $aria_label, @@ -204,6 +189,14 @@ function classnames_for_block_core_search( $attributes ) { } } + if ( ! empty( $attributes['fontSize'] ) ) { + $classnames[] = sprintf( 'has-%s-font-size', esc_attr( $attributes['fontSize'] ) ); + } + + if ( ! empty( $attributes['fontFamily'] ) ) { + $classnames[] = sprintf( 'has-%s-font-family', esc_attr( $attributes['fontFamily'] ) ); + } + return implode( ' ', $classnames ); } @@ -401,29 +394,6 @@ function styles_for_block_core_search( $attributes ) { ); } -/** - * Returns typography classnames depending on whether there are named font sizes/families . - * - * @param array $attributes The block attributes. - * - * @return string The typography color classnames to be applied to the block elements. - */ -function get_typography_classes_for_block_core_search( $attributes ) { - $typography_classes = array(); - $has_named_font_family = ! empty( $attributes['style']['typography']['fontFamily'] ); - $has_named_font_size = ! empty( $attributes['fontSize'] ); - - if ( $has_named_font_size ) { - $typography_classes[] = sprintf( 'has-%s-font-size', esc_attr( $attributes['fontSize'] ) ); - } - - if ( $has_named_font_family ) { - $typography_classes[] = sprintf( 'has-%s-font-family', esc_attr( $attributes['fontSize'] ) ); - } - - return implode( ' ', $typography_classes ); -} - /** * Returns typography styles to be included in an HTML style tag. * This excludes text-decoration, which is applied only to the label and button elements of the search block. diff --git a/test/emptytheme/theme.json b/test/emptytheme/theme.json index ed2d7b8d0946a..5a03da2f95115 100644 --- a/test/emptytheme/theme.json +++ b/test/emptytheme/theme.json @@ -2,6 +2,39 @@ "version": 2, "settings": { "appearanceTools": true, + "typography": { + "dropCap": false, + "fontFamilies": [ + { + "fontFamily": "\"Helvetica Neue\",sans-serif", + "name": "System Font", + "slug": "system-font" + }, + { + "fontFamily": "Verdana, sans-serif", + "name": "Verdana", + "slug": "verdana" + } + ], + "fontSizes": [ + { + "size": "1rem", + "slug": "small" + }, + { + "size": "1.125rem", + "slug": "medium" + }, + { + "size": "1.75rem", + "slug": "large" + }, + { + "size": "clamp(1.75rem, 3vw, 2.25rem)", + "slug": "x-large" + } + ] + }, "layout": { "contentSize": "840px", "wideSize": "1100px" From f778d690a7799b4c3cb207d12ca8271eba69569e Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 12 Sep 2022 13:14:02 +1000 Subject: [PATCH 11/18] Clean up unnecessary destructuring --- packages/block-library/src/search/edit.js | 35 ++++++++++------------- 1 file changed, 15 insertions(+), 20 deletions(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index ea49e79d0dbc9..1d77d87d4a039 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -394,21 +394,18 @@ export default function SearchEdit( { radius ? `calc(${ radius } + ${ DEFAULT_INNER_PADDING })` : undefined; const getWrapperStyles = () => { - const styles = { - ...( isButtonPositionInside - ? borderProps.style - : { - borderRadius: borderProps.style?.borderRadius, - borderTopLeftRadius: - borderProps.style?.borderTopLeftRadius, - borderTopRightRadius: - borderProps.style?.borderTopRightRadius, - borderBottomLeftRadius: - borderProps.style?.borderBottomLeftRadius, - borderBottomRightRadius: - borderProps.style?.borderBottomRightRadius, - } ), - }; + const styles = isButtonPositionInside + ? borderProps.style + : { + borderRadius: borderProps.style?.borderRadius, + borderTopLeftRadius: borderProps.style?.borderTopLeftRadius, + borderTopRightRadius: + borderProps.style?.borderTopRightRadius, + borderBottomLeftRadius: + borderProps.style?.borderBottomLeftRadius, + borderBottomRightRadius: + borderProps.style?.borderBottomRightRadius, + }; const isNonZeroBorderRadius = borderRadius !== undefined && parseInt( borderRadius, 10 ) !== 0; @@ -450,11 +447,9 @@ export default function SearchEdit( { const blockProps = useBlockProps( { className: getBlockClassNames(), style: { - ...{ - ...typographyProps.style, - // Input opts out of text decoration. - textDecoration: undefined, - }, + ...typographyProps.style, + // Input opts out of text decoration. + textDecoration: undefined, }, } ); From baba42d83a875143e019fc15fafe485ec22fe29a Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 12 Sep 2022 13:56:39 +1000 Subject: [PATCH 12/18] Revert "Clean up unnecessary destructuring" This reverts commit f778d690a7799b4c3cb207d12ca8271eba69569e. --- packages/block-library/src/search/edit.js | 35 +++++++++++++---------- 1 file changed, 20 insertions(+), 15 deletions(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 1d77d87d4a039..ea49e79d0dbc9 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -394,18 +394,21 @@ export default function SearchEdit( { radius ? `calc(${ radius } + ${ DEFAULT_INNER_PADDING })` : undefined; const getWrapperStyles = () => { - const styles = isButtonPositionInside - ? borderProps.style - : { - borderRadius: borderProps.style?.borderRadius, - borderTopLeftRadius: borderProps.style?.borderTopLeftRadius, - borderTopRightRadius: - borderProps.style?.borderTopRightRadius, - borderBottomLeftRadius: - borderProps.style?.borderBottomLeftRadius, - borderBottomRightRadius: - borderProps.style?.borderBottomRightRadius, - }; + const styles = { + ...( isButtonPositionInside + ? borderProps.style + : { + borderRadius: borderProps.style?.borderRadius, + borderTopLeftRadius: + borderProps.style?.borderTopLeftRadius, + borderTopRightRadius: + borderProps.style?.borderTopRightRadius, + borderBottomLeftRadius: + borderProps.style?.borderBottomLeftRadius, + borderBottomRightRadius: + borderProps.style?.borderBottomRightRadius, + } ), + }; const isNonZeroBorderRadius = borderRadius !== undefined && parseInt( borderRadius, 10 ) !== 0; @@ -447,9 +450,11 @@ export default function SearchEdit( { const blockProps = useBlockProps( { className: getBlockClassNames(), style: { - ...typographyProps.style, - // Input opts out of text decoration. - textDecoration: undefined, + ...{ + ...typographyProps.style, + // Input opts out of text decoration. + textDecoration: undefined, + }, }, } ); From a0a201c2a766dd25c026d6d842db9a0a5b7e7f74 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 12 Sep 2022 13:56:43 +1000 Subject: [PATCH 13/18] Revert "Ensure typography font size and family classnames appear on the wrapper, not on the individual elements." This reverts commit 384ce7dadcafc3d44ff432257bab570fcd0498d9. --- packages/block-library/src/search/edit.js | 23 +++++--- packages/block-library/src/search/index.php | 58 ++++++++++++++++----- test/emptytheme/theme.json | 33 ------------ 3 files changed, 60 insertions(+), 54 deletions(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index ea49e79d0dbc9..3e058875c7edc 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -120,6 +120,7 @@ export default function SearchEdit( { const isButtonPositionOutside = 'button-outside' === buttonPosition; const hasNoButton = 'no-button' === buttonPosition; const hasOnlyButton = 'button-only' === buttonPosition; + const units = useCustomUnits( { availableUnits: [ '%', 'px' ], defaultValues: { '%': PC_WIDTH_DEFAULT, px: PX_WIDTH_DEFAULT }, @@ -141,8 +142,7 @@ export default function SearchEdit( { : undefined, buttonUseIcon && ! hasNoButton ? 'wp-block-search__icon-button' - : undefined, - typographyProps.className + : undefined ); }; @@ -210,11 +210,14 @@ export default function SearchEdit( { // If the input is inside the wrapper, the wrapper gets the border color styles/classes, not the input control. const textFieldClasses = classnames( 'wp-block-search__input', - isButtonPositionInside ? undefined : borderProps.className + isButtonPositionInside ? undefined : borderProps.className, + typographyProps.className ); - const textFieldStyles = isButtonPositionInside - ? { borderRadius } - : borderProps.style; + const textFieldStyles = { + ...( isButtonPositionInside + ? { borderRadius } + : borderProps.style ), + }; return ( { controls } { showLabel && ( %3$s', + '', esc_attr( $input_id ), + esc_attr( implode( ' ', $label_classes ) ), $inline_styles['label'], $label_inner_html ); } if ( $show_input ) { - $input_classes = ! $is_button_inside ? $border_color_classes : ''; - $input_markup = sprintf( + $input_classes = array( 'wp-block-search__input' ); + if ( $is_button_inside ) { + $input_classes[] = $border_color_classes; + } + if ( ! empty( $typography_classes ) ) { + $input_classes[] = $typography_classes; + } + $input_markup = sprintf( '', $input_id, - esc_attr( $input_classes ), + esc_attr( implode( ' ', $input_classes ) ), get_search_query(), esc_attr( $attributes['placeholder'] ), $inline_styles['input'] @@ -81,11 +93,14 @@ function render_block_core_search( $attributes ) { } if ( $show_button ) { - $button_classes = array(); + $button_classes = array( 'wp-block-search__button' ); $button_internal_markup = ''; if ( ! empty( $color_classes ) ) { $button_classes[] = $color_classes; } + if ( ! empty( $typography_classes ) ) { + $button_classes[] = $typography_classes; + } $aria_label = ''; if ( ! $is_button_inside && ! empty( $border_color_classes ) ) { @@ -108,7 +123,7 @@ function render_block_core_search( $attributes ) { // Include the button element class. $button_classes[] = WP_Theme_JSON_Gutenberg::get_element_class_name( 'button' ); $button_markup = sprintf( - '', + '', esc_attr( implode( ' ', $button_classes ) ), $inline_styles['button'], $aria_label, @@ -189,14 +204,6 @@ function classnames_for_block_core_search( $attributes ) { } } - if ( ! empty( $attributes['fontSize'] ) ) { - $classnames[] = sprintf( 'has-%s-font-size', esc_attr( $attributes['fontSize'] ) ); - } - - if ( ! empty( $attributes['fontFamily'] ) ) { - $classnames[] = sprintf( 'has-%s-font-family', esc_attr( $attributes['fontFamily'] ) ); - } - return implode( ' ', $classnames ); } @@ -394,6 +401,29 @@ function styles_for_block_core_search( $attributes ) { ); } +/** + * Returns typography classnames depending on whether there are named font sizes/families . + * + * @param array $attributes The block attributes. + * + * @return string The typography color classnames to be applied to the block elements. + */ +function get_typography_classes_for_block_core_search( $attributes ) { + $typography_classes = array(); + $has_named_font_family = ! empty( $attributes['style']['typography']['fontFamily'] ); + $has_named_font_size = ! empty( $attributes['fontSize'] ); + + if ( $has_named_font_size ) { + $typography_classes[] = sprintf( 'has-%s-font-size', esc_attr( $attributes['fontSize'] ) ); + } + + if ( $has_named_font_family ) { + $typography_classes[] = sprintf( 'has-%s-font-family', esc_attr( $attributes['fontSize'] ) ); + } + + return implode( ' ', $typography_classes ); +} + /** * Returns typography styles to be included in an HTML style tag. * This excludes text-decoration, which is applied only to the label and button elements of the search block. diff --git a/test/emptytheme/theme.json b/test/emptytheme/theme.json index 5a03da2f95115..ed2d7b8d0946a 100644 --- a/test/emptytheme/theme.json +++ b/test/emptytheme/theme.json @@ -2,39 +2,6 @@ "version": 2, "settings": { "appearanceTools": true, - "typography": { - "dropCap": false, - "fontFamilies": [ - { - "fontFamily": "\"Helvetica Neue\",sans-serif", - "name": "System Font", - "slug": "system-font" - }, - { - "fontFamily": "Verdana, sans-serif", - "name": "Verdana", - "slug": "verdana" - } - ], - "fontSizes": [ - { - "size": "1rem", - "slug": "small" - }, - { - "size": "1.125rem", - "slug": "medium" - }, - { - "size": "1.75rem", - "slug": "large" - }, - { - "size": "clamp(1.75rem, 3vw, 2.25rem)", - "slug": "x-large" - } - ] - }, "layout": { "contentSize": "840px", "wideSize": "1100px" From e62be9fad8c50f0e660ffff3c1b9375a733671b1 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 12 Sep 2022 14:30:59 +1000 Subject: [PATCH 14/18] Switch approach to target inner elements again This commit reverts the approach to an earlier option tried so we can more reliably apply user-made typography selections without simple theme styles overriding the previous inherit styles. This includes changes refining the previous approach so that text decoration isn't applied to the input by theme.json or global styles. It also fixes a bug around font family class generation in the render callback. --- packages/block-library/src/search/block.json | 1 + packages/block-library/src/search/edit.js | 8 ++++---- packages/block-library/src/search/index.php | 17 +++++++++++------ packages/block-library/src/search/style.scss | 17 +++++------------ 4 files changed, 21 insertions(+), 22 deletions(-) diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json index 62ea22c9ff962..fbd0fa874c408 100644 --- a/packages/block-library/src/search/block.json +++ b/packages/block-library/src/search/block.json @@ -56,6 +56,7 @@ }, "typography": { "__experimentalSkipSerialization": true, + "__experimentalSelector": ".wp-block-search__label, .wp-block-search__input, .wp-block-search__button", "fontSize": true, "lineHeight": true, "__experimentalFontFamily": true, diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 3e058875c7edc..f90b29c629bfa 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -217,6 +217,8 @@ export default function SearchEdit( { ...( isButtonPositionInside ? { borderRadius } : borderProps.style ), + ...typographyProps.style, + textDecoration: undefined, }; return ( @@ -251,7 +253,7 @@ export default function SearchEdit( { ); const buttonStyles = { ...colorProps.style, - textDecoration: typographyProps.style?.textDecoration, + ...typographyProps.style, ...( isButtonPositionInside ? { borderRadius } : borderProps.style ), @@ -479,9 +481,7 @@ export default function SearchEdit( { withoutInteractiveFormatting value={ label } onChange={ ( html ) => setAttributes( { label: html } ) } - style={ { - textDecoration: typographyProps.style?.textDecoration, - } } + style={ typographyProps.style } /> ) } diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 10e9980a6e18d..765ca83e59807 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -139,10 +139,7 @@ function render_block_core_search( $attributes ) { $input_markup . $query_params_markup . $button_markup ); $wrapper_attributes = get_block_wrapper_attributes( - array( - 'class' => $classnames, - 'style' => get_typography_styles_for_block_core_search( $attributes ), - ) + array( 'class' => $classnames ) ); return sprintf( @@ -383,6 +380,14 @@ function styles_for_block_core_search( $attributes ) { $button_styles[] = sprintf( 'background: %s;', $attributes['style']['color']['gradient'] ); } + // Get typography styles to be shared across inner elements. + $typography_styles = get_typography_styles_for_block_core_search( $attributes ); + if ( ! empty( $typography_styles ) ) { + $label_styles[] = $typography_styles; + $button_styles[] = $typography_styles; + $input_styles[] = $typography_styles; + } + // Typography text-decoration is only applied to the label and button. if ( ! empty( $attributes['style']['typography']['textDecoration'] ) ) { $text_decoration_value = sprintf( 'text-decoration: %s;', esc_attr( $attributes['style']['typography']['textDecoration'] ) ); @@ -410,7 +415,7 @@ function styles_for_block_core_search( $attributes ) { */ function get_typography_classes_for_block_core_search( $attributes ) { $typography_classes = array(); - $has_named_font_family = ! empty( $attributes['style']['typography']['fontFamily'] ); + $has_named_font_family = ! empty( $attributes['fontFamily'] ); $has_named_font_size = ! empty( $attributes['fontSize'] ); if ( $has_named_font_size ) { @@ -418,7 +423,7 @@ function get_typography_classes_for_block_core_search( $attributes ) { } if ( $has_named_font_family ) { - $typography_classes[] = sprintf( 'has-%s-font-family', esc_attr( $attributes['fontSize'] ) ); + $typography_classes[] = sprintf( 'has-%s-font-family', esc_attr( $attributes['fontFamily'] ) ); } return implode( ' ', $typography_classes ); diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index fca42cd771095..f36564bbf7118 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -1,15 +1,3 @@ -.wp-block-search__label, -.wp-block-search__input, -.wp-block-search__button { - font-size: inherit; - font-family: inherit; - line-height: inherit; - letter-spacing: inherit; - font-style: inherit; - text-transform: inherit; - text-decoration: inherit; -} - .wp-block-search__button { margin-left: 0.625em; word-break: normal; @@ -50,6 +38,11 @@ margin-right: 0; min-width: 3em; border: 1px solid #949494; +} + +// Higher specificity is required to prevent theme.json/global styles from +// applying undesired text-decoration styles to the input. +.wp-block-search input.wp-block-search__input { text-decoration: unset; } From fb523ca12f46c90bf872674b310e36a6c2a90f42 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 12 Sep 2022 14:42:26 +1000 Subject: [PATCH 15/18] Keep linter happy --- packages/block-library/src/search/index.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 765ca83e59807..8e2a158969acb 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -383,9 +383,9 @@ function styles_for_block_core_search( $attributes ) { // Get typography styles to be shared across inner elements. $typography_styles = get_typography_styles_for_block_core_search( $attributes ); if ( ! empty( $typography_styles ) ) { - $label_styles[] = $typography_styles; + $label_styles [] = $typography_styles; $button_styles[] = $typography_styles; - $input_styles[] = $typography_styles; + $input_styles [] = $typography_styles; } // Typography text-decoration is only applied to the label and button. From b32ab5f65e6edd81f00c1ba605fcfe8420af2b97 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 12 Sep 2022 16:10:30 +1000 Subject: [PATCH 16/18] Reapply clean up and force text-decoration unset --- packages/block-library/src/search/edit.js | 35 +++++++++----------- packages/block-library/src/search/style.scss | 9 ++--- 2 files changed, 18 insertions(+), 26 deletions(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index f90b29c629bfa..807dda04e743e 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -400,21 +400,18 @@ export default function SearchEdit( { radius ? `calc(${ radius } + ${ DEFAULT_INNER_PADDING })` : undefined; const getWrapperStyles = () => { - const styles = { - ...( isButtonPositionInside - ? borderProps.style - : { - borderRadius: borderProps.style?.borderRadius, - borderTopLeftRadius: - borderProps.style?.borderTopLeftRadius, - borderTopRightRadius: - borderProps.style?.borderTopRightRadius, - borderBottomLeftRadius: - borderProps.style?.borderBottomLeftRadius, - borderBottomRightRadius: - borderProps.style?.borderBottomRightRadius, - } ), - }; + const styles = isButtonPositionInside + ? borderProps.style + : { + borderRadius: borderProps.style?.borderRadius, + borderTopLeftRadius: borderProps.style?.borderTopLeftRadius, + borderTopRightRadius: + borderProps.style?.borderTopRightRadius, + borderBottomLeftRadius: + borderProps.style?.borderBottomLeftRadius, + borderBottomRightRadius: + borderProps.style?.borderBottomRightRadius, + }; const isNonZeroBorderRadius = borderRadius !== undefined && parseInt( borderRadius, 10 ) !== 0; @@ -456,11 +453,9 @@ export default function SearchEdit( { const blockProps = useBlockProps( { className: getBlockClassNames(), style: { - ...{ - ...typographyProps.style, - // Input opts out of text decoration. - textDecoration: undefined, - }, + ...typographyProps.style, + // Input opts out of text decoration. + textDecoration: undefined, }, } ); diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index f36564bbf7118..92caa99d00d49 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -38,12 +38,9 @@ margin-right: 0; min-width: 3em; border: 1px solid #949494; -} - -// Higher specificity is required to prevent theme.json/global styles from -// applying undesired text-decoration styles to the input. -.wp-block-search input.wp-block-search__input { - text-decoration: unset; + // !important used to forcibly prevent undesired application of + // text-decoration styles on the input field. + text-decoration: unset !important; } .wp-block-search.wp-block-search__button-only { From d0aa4a3cb6ebee75c3ec83cf2320f9e68bd2048e Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 12 Sep 2022 17:01:01 +1000 Subject: [PATCH 17/18] Avoid confusion over font-family being in classes and inline styles --- packages/block-editor/src/hooks/test/use-typography-props.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/hooks/test/use-typography-props.js b/packages/block-editor/src/hooks/test/use-typography-props.js index fe0291b18f8ed..93e4de29bc734 100644 --- a/packages/block-editor/src/hooks/test/use-typography-props.js +++ b/packages/block-editor/src/hooks/test/use-typography-props.js @@ -12,7 +12,7 @@ describe( 'getTypographyClassesAndStyles', () => { typography: { letterSpacing: '22px', fontSize: '2rem', - fontFamily: 'tahini', + textTransform: 'uppercase', }, }, }; @@ -21,7 +21,7 @@ describe( 'getTypographyClassesAndStyles', () => { style: { letterSpacing: '22px', fontSize: '2rem', - fontFamily: 'tahini', + textTransform: 'uppercase', }, } ); } ); From b2e2faa423cbd609978220b3989ccb1725d216b4 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 12 Sep 2022 17:11:16 +1000 Subject: [PATCH 18/18] Fix vertical alignment of icon only button This centres the icon for the icon only button on the frontend when it has a tall line-height. --- packages/block-library/src/search/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index 92caa99d00d49..9a713804603ba 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -10,6 +10,7 @@ min-width: 1.5em; min-height: 1.5em; fill: currentColor; + vertical-align: text-bottom; } }