From 37c3dc6e9c440d1f0195e4ac1e4a6a46a88a8671 Mon Sep 17 00:00:00 2001 From: ramon Date: Mon, 19 Feb 2024 11:20:56 +1100 Subject: [PATCH 01/11] Update filename First commit: Apply font size to icon dimensions for the search block In the case of presets, try fetching font size preset using slug from settings --- packages/block-editor/README.md | 12 ++++++++++++ packages/block-editor/src/hooks/font-size.js | 16 ++++++++++++++++ packages/block-editor/src/hooks/index.js | 1 + packages/block-editor/src/index.js | 1 + packages/block-library/src/search/edit.js | 9 ++++++++- packages/block-library/src/search/index.php | 19 +++++++++++++++++-- 6 files changed, 55 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 6fc51d84512122..98985a4f6e836b 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -958,6 +958,18 @@ _Returns_ - `any`: value +### useFontSizeFromPreset + +Given a font size slug preset, returns the matching preset. + +_Parameters_ + +- _slug_ `string`: The slug of the font size preset + +_Returns_ + +- `object|undefined`: The font size object, if found. + ### useHasRecursion A React hook for keeping track of blocks previously rendered up in the block tree. Blocks susceptible to recursion can use this hook in their `Edit` function to prevent said recursion. diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js index e9a7a81aafbdf0..8f2613da3f1fb7 100644 --- a/packages/block-editor/src/hooks/font-size.js +++ b/packages/block-editor/src/hooks/font-size.js @@ -150,6 +150,22 @@ export function useIsFontSizeDisabled( { name: blockName } = {} ) { ); } +/** + * Given a font size slug preset, returns the matching preset. + * + * @param {string} slug The slug of the font size preset + * @return {object|undefined} The font size object, if found. + */ +export function useFontSizeFromPreset( slug ) { + const [ fontSizes ] = useSettings( 'typography.fontSizes' ); + const hasFontSizes = !! fontSizes?.length; + if ( ! slug || ! hasFontSizes ) { + return; + } + + return fontSizes.find( ( fontSize ) => fontSize.slug === slug ); +} + function useBlockProps( { name, fontSize, style } ) { const [ fontSizes, fluidTypographySettings, layoutSettings ] = useSettings( 'typography.fontSizes', diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index e6227ea2b03e2e..e7ec95ce0be4f5 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/packages/block-editor/src/hooks/index.js @@ -77,3 +77,4 @@ export { getSpacingClassesAndStyles } from './use-spacing-props'; export { getTypographyClassesAndStyles } from './use-typography-props'; export { getGapCSSValue } from './gap'; export { useCachedTruthy } from './use-cached-truthy'; +export { useFontSizeFromPreset } from './font-size'; diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js index 10c1fb1077c561..2717fcd7680238 100644 --- a/packages/block-editor/src/index.js +++ b/packages/block-editor/src/index.js @@ -13,6 +13,7 @@ export { getGapCSSValue as __experimentalGetGapCSSValue, getShadowClassesAndStyles as __experimentalGetShadowClassesAndStyles, useCachedTruthy, + useFontSizeFromPreset, } from './hooks'; export * from './components'; export * from './elements'; diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 0123bdfd565698..6888a4b967e8dd 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -17,6 +17,7 @@ import { store as blockEditorStore, __experimentalGetElementClassName, useSettings, + useFontSizeFromPreset, } from '@wordpress/block-editor'; import { useDispatch, useSelect } from '@wordpress/data'; import { useEffect, useRef } from '@wordpress/element'; @@ -142,6 +143,7 @@ export default function SearchEdit( { const hasOnlyButton = 'button-only' === buttonPosition; const searchFieldRef = useRef(); const buttonRef = useRef(); + const fontSizeFromPreset = useFontSizeFromPreset( attributes?.fontSize ); const units = useCustomUnits( { availableUnits: [ '%', 'px' ], @@ -326,6 +328,11 @@ export default function SearchEdit( { } }; + const iconDimensions = + fontSizeFromPreset?.size || + attributes?.style?.typography?.fontSize || + undefined; + return ( <> { buttonUseIcon && ( @@ -341,7 +348,7 @@ export default function SearchEdit( { onClick={ handleButtonClick } ref={ buttonRef } > - + ) } diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index c368c2ab03dbf8..edfde90f1a81eb 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -131,9 +131,24 @@ function render_block_core_search( $attributes ) { $button_internal_markup = wp_kses_post( $attributes['buttonText'] ); } } else { - $button_classes[] = 'has-icon'; + $button_classes[] = 'has-icon'; + $icon_dimensions = '24'; + if ( ! empty( $attributes['style']['typography']['fontSize'] ) ) { + $icon_dimensions = $attributes['style']['typography']['fontSize']; + } else if ( ! empty( $attributes['fontSize'] ) ) { + $font_size_presets = wp_get_global_settings( array( 'typography', 'fontSizes' ) ); + if ( isset( $font_size_presets['default'] ) || isset( $font_size_presets['theme'] ) ) { + $font_size_presets = $font_size_presets['theme'] ?? $font_size_presets['default']; + $font_size_from_preset = array_filter( $font_size_presets, fn( $font_size ) => $font_size['slug'] === $attributes['fontSize'] ); + if ( ! empty( $font_size_from_preset ) ) { + $font_size_from_preset = array_shift($font_size_from_preset ); + $font_size_from_preset = $font_size_from_preset['size'] || '24'; + } + } + } + $button_internal_markup = - ' + ' '; } From 137c6d94140a195c92d3f5e8225b8db4318d1f5d Mon Sep 17 00:00:00 2001 From: ramon Date: Mon, 19 Feb 2024 16:32:10 +1100 Subject: [PATCH 02/11] Linting, refactor --- packages/block-library/src/search/index.php | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index edfde90f1a81eb..591f2ba64e77bd 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -135,14 +135,13 @@ function render_block_core_search( $attributes ) { $icon_dimensions = '24'; if ( ! empty( $attributes['style']['typography']['fontSize'] ) ) { $icon_dimensions = $attributes['style']['typography']['fontSize']; - } else if ( ! empty( $attributes['fontSize'] ) ) { + } elseif ( ! empty( $attributes['fontSize'] ) ) { $font_size_presets = wp_get_global_settings( array( 'typography', 'fontSizes' ) ); - if ( isset( $font_size_presets['default'] ) || isset( $font_size_presets['theme'] ) ) { + if ( isset( $font_size_presets['theme'] ) || isset( $font_size_presets['default'] ) ) { $font_size_presets = $font_size_presets['theme'] ?? $font_size_presets['default']; - $font_size_from_preset = array_filter( $font_size_presets, fn( $font_size ) => $font_size['slug'] === $attributes['fontSize'] ); - if ( ! empty( $font_size_from_preset ) ) { - $font_size_from_preset = array_shift($font_size_from_preset ); - $font_size_from_preset = $font_size_from_preset['size'] || '24'; + $font_size_from_preset = array_column( $font_size_presets, null, 'slug' )[ $attributes['fontSize'] ] ?? false; + if ( isset( $font_size_from_preset['size'] ) ) { + $icon_dimensions = $font_size_from_preset['size']; } } } From 4be26553841c0dfb94fc2f6d970939bc212a9ebe Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 20 Feb 2024 11:44:36 +1100 Subject: [PATCH 03/11] Moving useFontSizeFromPreset into block editor private APIs In the PHP file, take into account the custom origin as a priority to match editor behaviour. See: `getUniqueFontSizesBySlug()` --- packages/block-editor/README.md | 12 ------------ packages/block-editor/src/index.js | 1 - packages/block-editor/src/private-apis.js | 7 ++++++- packages/block-library/src/search/edit.js | 5 ++++- packages/block-library/src/search/index.php | 4 ++-- 5 files changed, 12 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 98985a4f6e836b..6fc51d84512122 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -958,18 +958,6 @@ _Returns_ - `any`: value -### useFontSizeFromPreset - -Given a font size slug preset, returns the matching preset. - -_Parameters_ - -- _slug_ `string`: The slug of the font size preset - -_Returns_ - -- `object|undefined`: The font size object, if found. - ### useHasRecursion A React hook for keeping track of blocks previously rendered up in the block tree. Blocks susceptible to recursion can use this hook in their `Edit` function to prevent said recursion. diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js index 2717fcd7680238..10c1fb1077c561 100644 --- a/packages/block-editor/src/index.js +++ b/packages/block-editor/src/index.js @@ -13,7 +13,6 @@ export { getGapCSSValue as __experimentalGetGapCSSValue, getShadowClassesAndStyles as __experimentalGetShadowClassesAndStyles, useCachedTruthy, - useFontSizeFromPreset, } from './hooks'; export * from './components'; export * from './elements'; diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js index ec6843ead24895..f690f206ab1a69 100644 --- a/packages/block-editor/src/private-apis.js +++ b/packages/block-editor/src/private-apis.js @@ -15,7 +15,11 @@ import { cleanEmptyObject, useStyleOverride } from './hooks/utils'; import BlockQuickNavigation from './components/block-quick-navigation'; import { LayoutStyle } from './components/block-list/layout'; import { BlockRemovalWarningModal } from './components/block-removal-warning-modal'; -import { useLayoutClasses, useLayoutStyles } from './hooks'; +import { + useLayoutClasses, + useLayoutStyles, + useFontSizeFromPreset, +} from './hooks'; import DimensionsTool from './components/dimensions-tool'; import ResolutionTool from './components/resolution-tool'; import { @@ -52,6 +56,7 @@ lock( privateApis, { BlockRemovalWarningModal, useLayoutClasses, useLayoutStyles, + useFontSizeFromPreset, DimensionsTool, ResolutionTool, ReusableBlocksRenameHint, diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 6888a4b967e8dd..49fc368e47e9f3 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -17,7 +17,7 @@ import { store as blockEditorStore, __experimentalGetElementClassName, useSettings, - useFontSizeFromPreset, + privateApis as blockEditorPrivateApis, } from '@wordpress/block-editor'; import { useDispatch, useSelect } from '@wordpress/data'; import { useEffect, useRef } from '@wordpress/element'; @@ -55,6 +55,9 @@ import { MIN_WIDTH, isPercentageUnit, } from './utils.js'; +import { unlock } from '../lock-unlock'; + +const { useFontSizeFromPreset } = unlock( blockEditorPrivateApis ); // Used to calculate border radius adjustment to avoid "fat" corners when // button is placed inside wrapper. diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 591f2ba64e77bd..eb1b0cee09edc9 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -137,8 +137,8 @@ function render_block_core_search( $attributes ) { $icon_dimensions = $attributes['style']['typography']['fontSize']; } elseif ( ! empty( $attributes['fontSize'] ) ) { $font_size_presets = wp_get_global_settings( array( 'typography', 'fontSizes' ) ); - if ( isset( $font_size_presets['theme'] ) || isset( $font_size_presets['default'] ) ) { - $font_size_presets = $font_size_presets['theme'] ?? $font_size_presets['default']; + if ( ! empty( $font_size_presets ) ) { + $font_size_presets = $font_size_presets['custom'] ?? $font_size_presets['theme'] ?? $font_size_presets['default']; $font_size_from_preset = array_column( $font_size_presets, null, 'slug' )[ $attributes['fontSize'] ] ?? false; if ( isset( $font_size_from_preset['size'] ) ) { $icon_dimensions = $font_size_from_preset['size']; From 46b3d1b911a9e0a37af4dc1f93054a04dd3f4f76 Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 20 Feb 2024 12:29:23 +1100 Subject: [PATCH 04/11] Made it clear where the origin prioritization comes from in the comments. Made it clear where the origin prioritization comes from in the comments. --- packages/block-editor/src/hooks/font-size.js | 3 +++ packages/block-library/src/search/index.php | 5 +++++ 2 files changed, 8 insertions(+) diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js index 8f2613da3f1fb7..b18fa85f0524e0 100644 --- a/packages/block-editor/src/hooks/font-size.js +++ b/packages/block-editor/src/hooks/font-size.js @@ -152,6 +152,9 @@ export function useIsFontSizeDisabled( { name: blockName } = {} ) { /** * Given a font size slug preset, returns the matching preset. + * The reference for the fontSizes preset array depends on the origin. + * Font sizes are sourced from either 'typography.fontSizes.custom' || 'typography.fontSizes.theme' || 'typography.fontSizes.default'. + * See: `useSettings() -> getBlockSettings() -> overrideOrigins()`. * * @param {string} slug The slug of the font size preset * @return {object|undefined} The font size object, if found. diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index eb1b0cee09edc9..0c89d324c56a65 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -138,6 +138,11 @@ function render_block_core_search( $attributes ) { } elseif ( ! empty( $attributes['fontSize'] ) ) { $font_size_presets = wp_get_global_settings( array( 'typography', 'fontSizes' ) ); if ( ! empty( $font_size_presets ) ) { + /* + * The prioritization of origins matches the order in which the block editor fetches settings. + * Font sizes are sourced from either 'typography.fontSizes.custom' || 'typography.fontSizes.theme' || 'typography.fontSizes.default'. + * See: `getBlockSettings()` packages/block-editor/src/store/get-block-settings.js + */ $font_size_presets = $font_size_presets['custom'] ?? $font_size_presets['theme'] ?? $font_size_presets['default']; $font_size_from_preset = array_column( $font_size_presets, null, 'slug' )[ $attributes['fontSize'] ] ?? false; if ( isset( $font_size_from_preset['size'] ) ) { From b0bbbfd448bf47680dc78a93fbb3a4560cf94b6e Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 20 Feb 2024 16:44:50 +1100 Subject: [PATCH 05/11] No null coalescing operator in Core yet. escaping incoming attributes --- packages/block-library/src/search/index.php | 33 ++++++++++++++------- 1 file changed, 22 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 0c89d324c56a65..5555acec502f70 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -134,19 +134,30 @@ function render_block_core_search( $attributes ) { $button_classes[] = 'has-icon'; $icon_dimensions = '24'; if ( ! empty( $attributes['style']['typography']['fontSize'] ) ) { - $icon_dimensions = $attributes['style']['typography']['fontSize']; + $icon_dimensions = esc_attr( $attributes['style']['typography']['fontSize'] ); } elseif ( ! empty( $attributes['fontSize'] ) ) { $font_size_presets = wp_get_global_settings( array( 'typography', 'fontSizes' ) ); - if ( ! empty( $font_size_presets ) ) { - /* - * The prioritization of origins matches the order in which the block editor fetches settings. - * Font sizes are sourced from either 'typography.fontSizes.custom' || 'typography.fontSizes.theme' || 'typography.fontSizes.default'. - * See: `getBlockSettings()` packages/block-editor/src/store/get-block-settings.js - */ - $font_size_presets = $font_size_presets['custom'] ?? $font_size_presets['theme'] ?? $font_size_presets['default']; - $font_size_from_preset = array_column( $font_size_presets, null, 'slug' )[ $attributes['fontSize'] ] ?? false; - if ( isset( $font_size_from_preset['size'] ) ) { - $icon_dimensions = $font_size_from_preset['size']; + /* + * The prioritization of origins matches the order in which the block editor fetches settings. + * Font sizes are sourced from either 'typography.fontSizes.custom' || 'typography.fontSizes.theme' || 'typography.fontSizes.default'. + * See: `getBlockSettings()` packages/block-editor/src/store/get-block-settings.js + * @TODO Abstract the logic to get presets from origin into a block-supports/typography.php helper function. + * @TODO Maybe update to use null coalescing operator when PHP 7.0 is the minimum version. + */ + $font_size_presets_from_origin = array(); + + if ( ! empty( $font_size_presets['custom'] ) ) { + $font_size_presets_from_origin = $font_size_presets['custom']; + } elseif ( ! empty( $font_size_presets['theme'] ) ) { + $font_size_presets_from_origin = $font_size_presets['theme']; + } elseif ( ! empty( $font_size_presets['default'] ) ) { + $font_size_presets_from_origin = $font_size_presets['default']; + } + + if ( ! empty( $font_size_presets_from_origin ) ) { + $font_size_preset_index = array_search( $attributes['fontSize'], array_column( $font_size_presets_from_origin, 'slug' ) ); + if ( isset( $font_size_presets_from_origin[ $font_size_preset_index ]['size'] ) ) { + $icon_dimensions = $font_size_presets_from_origin[ $font_size_preset_index ]['size']; } } } From 3ead67f3fa5e1632337af02bea7a9cdacd9c06d0 Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 21 Feb 2024 15:41:11 +1100 Subject: [PATCH 06/11] Revert getting font size from preset in the edit.js file. Use computed font size instead. This is so it works in global styles as well. Temporary bug fix for global styles, which should be done in another PR revert space --- lib/class-wp-theme-json-gutenberg.php | 4 ++++ packages/block-editor/src/hooks/font-size.js | 19 ------------------- packages/block-editor/src/hooks/index.js | 1 - packages/block-editor/src/private-apis.js | 7 +------ packages/block-library/src/search/edit.js | 14 +++++--------- packages/block-library/src/search/index.php | 10 +++++++--- 6 files changed, 17 insertions(+), 38 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 0d2520ff9682a4..79a6d94151243d 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -3818,6 +3818,10 @@ private static function convert_variables_to_value( $styles, $values ) { continue; } + if ( empty( $style ) ) { + continue; + } + if ( 0 <= strpos( $style, 'var(' ) ) { // find all the variables in the string in the form of var(--variable-name, fallback), with fallback in the second capture group. diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js index b18fa85f0524e0..e9a7a81aafbdf0 100644 --- a/packages/block-editor/src/hooks/font-size.js +++ b/packages/block-editor/src/hooks/font-size.js @@ -150,25 +150,6 @@ export function useIsFontSizeDisabled( { name: blockName } = {} ) { ); } -/** - * Given a font size slug preset, returns the matching preset. - * The reference for the fontSizes preset array depends on the origin. - * Font sizes are sourced from either 'typography.fontSizes.custom' || 'typography.fontSizes.theme' || 'typography.fontSizes.default'. - * See: `useSettings() -> getBlockSettings() -> overrideOrigins()`. - * - * @param {string} slug The slug of the font size preset - * @return {object|undefined} The font size object, if found. - */ -export function useFontSizeFromPreset( slug ) { - const [ fontSizes ] = useSettings( 'typography.fontSizes' ); - const hasFontSizes = !! fontSizes?.length; - if ( ! slug || ! hasFontSizes ) { - return; - } - - return fontSizes.find( ( fontSize ) => fontSize.slug === slug ); -} - function useBlockProps( { name, fontSize, style } ) { const [ fontSizes, fluidTypographySettings, layoutSettings ] = useSettings( 'typography.fontSizes', diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index e7ec95ce0be4f5..e6227ea2b03e2e 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/packages/block-editor/src/hooks/index.js @@ -77,4 +77,3 @@ export { getSpacingClassesAndStyles } from './use-spacing-props'; export { getTypographyClassesAndStyles } from './use-typography-props'; export { getGapCSSValue } from './gap'; export { useCachedTruthy } from './use-cached-truthy'; -export { useFontSizeFromPreset } from './font-size'; diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js index f690f206ab1a69..ec6843ead24895 100644 --- a/packages/block-editor/src/private-apis.js +++ b/packages/block-editor/src/private-apis.js @@ -15,11 +15,7 @@ import { cleanEmptyObject, useStyleOverride } from './hooks/utils'; import BlockQuickNavigation from './components/block-quick-navigation'; import { LayoutStyle } from './components/block-list/layout'; import { BlockRemovalWarningModal } from './components/block-removal-warning-modal'; -import { - useLayoutClasses, - useLayoutStyles, - useFontSizeFromPreset, -} from './hooks'; +import { useLayoutClasses, useLayoutStyles } from './hooks'; import DimensionsTool from './components/dimensions-tool'; import ResolutionTool from './components/resolution-tool'; import { @@ -56,7 +52,6 @@ lock( privateApis, { BlockRemovalWarningModal, useLayoutClasses, useLayoutStyles, - useFontSizeFromPreset, DimensionsTool, ResolutionTool, ReusableBlocksRenameHint, diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 49fc368e47e9f3..0665cfc88ed632 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -17,7 +17,6 @@ import { store as blockEditorStore, __experimentalGetElementClassName, useSettings, - privateApis as blockEditorPrivateApis, } from '@wordpress/block-editor'; import { useDispatch, useSelect } from '@wordpress/data'; import { useEffect, useRef } from '@wordpress/element'; @@ -55,9 +54,6 @@ import { MIN_WIDTH, isPercentageUnit, } from './utils.js'; -import { unlock } from '../lock-unlock'; - -const { useFontSizeFromPreset } = unlock( blockEditorPrivateApis ); // Used to calculate border radius adjustment to avoid "fat" corners when // button is placed inside wrapper. @@ -146,7 +142,6 @@ export default function SearchEdit( { const hasOnlyButton = 'button-only' === buttonPosition; const searchFieldRef = useRef(); const buttonRef = useRef(); - const fontSizeFromPreset = useFontSizeFromPreset( attributes?.fontSize ); const units = useCustomUnits( { availableUnits: [ '%', 'px' ], @@ -331,10 +326,11 @@ export default function SearchEdit( { } }; - const iconDimensions = - fontSizeFromPreset?.size || - attributes?.style?.typography?.fontSize || - undefined; + const iconDimensions = buttonRef?.current + ? buttonRef.current.ownerDocument.defaultView.getComputedStyle( + buttonRef.current + ).fontSize + : 24; return ( <> diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 5555acec502f70..d4e46426d1f8be 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -131,12 +131,14 @@ function render_block_core_search( $attributes ) { $button_internal_markup = wp_kses_post( $attributes['buttonText'] ); } } else { - $button_classes[] = 'has-icon'; - $icon_dimensions = '24'; + $button_classes[] = 'has-icon'; + $icon_dimensions = '24'; + $search_block_font_size = gutenberg_get_global_styles( array( 'typography', 'fontSize' ), array( 'block_name' => 'core/search', 'transforms' => array( 'resolve-variables' ) ) ); + if ( ! empty( $attributes['style']['typography']['fontSize'] ) ) { $icon_dimensions = esc_attr( $attributes['style']['typography']['fontSize'] ); } elseif ( ! empty( $attributes['fontSize'] ) ) { - $font_size_presets = wp_get_global_settings( array( 'typography', 'fontSizes' ) ); + $font_size_presets = gutenberg_get_global_settings( array( 'typography', 'fontSizes' ) ); /* * The prioritization of origins matches the order in which the block editor fetches settings. * Font sizes are sourced from either 'typography.fontSizes.custom' || 'typography.fontSizes.theme' || 'typography.fontSizes.default'. @@ -160,6 +162,8 @@ function render_block_core_search( $attributes ) { $icon_dimensions = $font_size_presets_from_origin[ $font_size_preset_index ]['size']; } } + } elseif ( $search_block_font_size ) { + $icon_dimensions = $search_block_font_size; } $button_internal_markup = From 87756ce83f351150fe4b0e6782318800b70eca65 Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 21 Feb 2024 15:54:06 +1100 Subject: [PATCH 07/11] wp --- 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 d4e46426d1f8be..484fbc248dc67c 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -133,12 +133,12 @@ function render_block_core_search( $attributes ) { } else { $button_classes[] = 'has-icon'; $icon_dimensions = '24'; - $search_block_font_size = gutenberg_get_global_styles( array( 'typography', 'fontSize' ), array( 'block_name' => 'core/search', 'transforms' => array( 'resolve-variables' ) ) ); + $search_block_font_size = wp_get_global_styles( array( 'typography', 'fontSize' ), array( 'block_name' => 'core/search', 'transforms' => array( 'resolve-variables' ) ) ); if ( ! empty( $attributes['style']['typography']['fontSize'] ) ) { $icon_dimensions = esc_attr( $attributes['style']['typography']['fontSize'] ); } elseif ( ! empty( $attributes['fontSize'] ) ) { - $font_size_presets = gutenberg_get_global_settings( array( 'typography', 'fontSizes' ) ); + $font_size_presets = wp_get_global_settings( array( 'typography', 'fontSizes' ) ); /* * The prioritization of origins matches the order in which the block editor fetches settings. * Font sizes are sourced from either 'typography.fontSizes.custom' || 'typography.fontSizes.theme' || 'typography.fontSizes.default'. From 223e32f30cde8f8c8b24b524cf09d3065d4e867e Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 21 Feb 2024 15:54:35 +1100 Subject: [PATCH 08/11] lint --- packages/block-library/src/search/index.php | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 484fbc248dc67c..583778fb5f1e63 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -133,7 +133,13 @@ function render_block_core_search( $attributes ) { } else { $button_classes[] = 'has-icon'; $icon_dimensions = '24'; - $search_block_font_size = wp_get_global_styles( array( 'typography', 'fontSize' ), array( 'block_name' => 'core/search', 'transforms' => array( 'resolve-variables' ) ) ); + $search_block_font_size = wp_get_global_styles( + array( 'typography', 'fontSize' ), + array( + 'block_name' => 'core/search', + 'transforms' => array( 'resolve-variables' ), + ) + ); if ( ! empty( $attributes['style']['typography']['fontSize'] ) ) { $icon_dimensions = esc_attr( $attributes['style']['typography']['fontSize'] ); From 08265530d31ef05c251b9794c253609057b13717 Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 21 Feb 2024 16:53:51 +1100 Subject: [PATCH 09/11] esc_attr --- 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 583778fb5f1e63..35777f3509cc94 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -165,11 +165,11 @@ function render_block_core_search( $attributes ) { if ( ! empty( $font_size_presets_from_origin ) ) { $font_size_preset_index = array_search( $attributes['fontSize'], array_column( $font_size_presets_from_origin, 'slug' ) ); if ( isset( $font_size_presets_from_origin[ $font_size_preset_index ]['size'] ) ) { - $icon_dimensions = $font_size_presets_from_origin[ $font_size_preset_index ]['size']; + $icon_dimensions = esc_attr( $font_size_presets_from_origin[ $font_size_preset_index ]['size'] ); } } } elseif ( $search_block_font_size ) { - $icon_dimensions = $search_block_font_size; + $icon_dimensions = esc_attr( $search_block_font_size ); } $button_internal_markup = From e7c0ff0f96f7209b4e2a090c3b3a5487f4d35536 Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 21 Feb 2024 16:57:03 +1100 Subject: [PATCH 10/11] strict me --- 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 35777f3509cc94..904f13b918d2d8 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -163,7 +163,7 @@ function render_block_core_search( $attributes ) { } if ( ! empty( $font_size_presets_from_origin ) ) { - $font_size_preset_index = array_search( $attributes['fontSize'], array_column( $font_size_presets_from_origin, 'slug' ) ); + $font_size_preset_index = array_search( $attributes['fontSize'], array_column( $font_size_presets_from_origin, 'slug' ), true ); if ( isset( $font_size_presets_from_origin[ $font_size_preset_index ]['size'] ) ) { $icon_dimensions = esc_attr( $font_size_presets_from_origin[ $font_size_preset_index ]['size'] ); } From 3f49b0438886e66c9b56dae32dbe918577862528 Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 22 Feb 2024 13:14:10 +1100 Subject: [PATCH 11/11] Revert other stuff. Use `em` for search icon. --- lib/class-wp-theme-json-gutenberg.php | 4 -- packages/block-library/src/search/edit.js | 8 +--- packages/block-library/src/search/index.php | 42 +------------------- packages/block-library/src/search/style.scss | 2 + 4 files changed, 4 insertions(+), 52 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 79a6d94151243d..0d2520ff9682a4 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -3818,10 +3818,6 @@ private static function convert_variables_to_value( $styles, $values ) { continue; } - if ( empty( $style ) ) { - continue; - } - if ( 0 <= strpos( $style, 'var(' ) ) { // find all the variables in the string in the form of var(--variable-name, fallback), with fallback in the second capture group. diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 0665cfc88ed632..0123bdfd565698 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -326,12 +326,6 @@ export default function SearchEdit( { } }; - const iconDimensions = buttonRef?.current - ? buttonRef.current.ownerDocument.defaultView.getComputedStyle( - buttonRef.current - ).fontSize - : 24; - return ( <> { buttonUseIcon && ( @@ -347,7 +341,7 @@ export default function SearchEdit( { onClick={ handleButtonClick } ref={ buttonRef } > - + ) } diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 904f13b918d2d8..c368c2ab03dbf8 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -132,48 +132,8 @@ function render_block_core_search( $attributes ) { } } else { $button_classes[] = 'has-icon'; - $icon_dimensions = '24'; - $search_block_font_size = wp_get_global_styles( - array( 'typography', 'fontSize' ), - array( - 'block_name' => 'core/search', - 'transforms' => array( 'resolve-variables' ), - ) - ); - - if ( ! empty( $attributes['style']['typography']['fontSize'] ) ) { - $icon_dimensions = esc_attr( $attributes['style']['typography']['fontSize'] ); - } elseif ( ! empty( $attributes['fontSize'] ) ) { - $font_size_presets = wp_get_global_settings( array( 'typography', 'fontSizes' ) ); - /* - * The prioritization of origins matches the order in which the block editor fetches settings. - * Font sizes are sourced from either 'typography.fontSizes.custom' || 'typography.fontSizes.theme' || 'typography.fontSizes.default'. - * See: `getBlockSettings()` packages/block-editor/src/store/get-block-settings.js - * @TODO Abstract the logic to get presets from origin into a block-supports/typography.php helper function. - * @TODO Maybe update to use null coalescing operator when PHP 7.0 is the minimum version. - */ - $font_size_presets_from_origin = array(); - - if ( ! empty( $font_size_presets['custom'] ) ) { - $font_size_presets_from_origin = $font_size_presets['custom']; - } elseif ( ! empty( $font_size_presets['theme'] ) ) { - $font_size_presets_from_origin = $font_size_presets['theme']; - } elseif ( ! empty( $font_size_presets['default'] ) ) { - $font_size_presets_from_origin = $font_size_presets['default']; - } - - if ( ! empty( $font_size_presets_from_origin ) ) { - $font_size_preset_index = array_search( $attributes['fontSize'], array_column( $font_size_presets_from_origin, 'slug' ), true ); - if ( isset( $font_size_presets_from_origin[ $font_size_preset_index ]['size'] ) ) { - $icon_dimensions = esc_attr( $font_size_presets_from_origin[ $font_size_preset_index ]['size'] ); - } - } - } elseif ( $search_block_font_size ) { - $icon_dimensions = esc_attr( $search_block_font_size ); - } - $button_internal_markup = - ' + ' '; } diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index 4e283530a0e277..1434f29de76810 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -12,6 +12,8 @@ $button-spacing-y: math.div($grid-unit-15, 2); // 6px svg { min-width: $grid-unit-30; min-height: $grid-unit-30; + width: 1.25em; + height: 1.25em; fill: currentColor; vertical-align: text-bottom; }