From 1335b9d49ec36693a588f4f4762bb278e2b9f024 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Thu, 27 Oct 2022 16:33:45 +1100 Subject: [PATCH] Removing filter Pulling across config changes to JS --- .../theme-json-reference/theme-json-living.md | 2 +- lib/block-supports/typography.php | 20 ---- packages/block-editor/src/hooks/font-size.js | 24 +++- .../global-styles/typography-utils.js | 32 +++++- phpunit/block-supports/typography-test.php | 36 ------ schemas/json/theme.json | 103 ++++++++++++------ 6 files changed, 118 insertions(+), 99 deletions(-) diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md index 915e8b1d963ee..085ce5e023c45 100644 --- a/docs/reference-guides/theme-json-reference/theme-json-living.md +++ b/docs/reference-guides/theme-json-reference/theme-json-living.md @@ -109,7 +109,7 @@ Settings related to typography. | customFontSize | boolean | true | | | fontStyle | boolean | true | | | fontWeight | boolean | true | | -| fluid | object | | | +| fluid | undefined | false | | | letterSpacing | boolean | true | | | lineHeight | boolean | false | | | textDecoration | boolean | true | | diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index 8d8165ba92cd0..0db08bc346d37 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -360,26 +360,6 @@ function gutenberg_get_typography_value_and_unit( $raw_value, $options = array() * @return string|null A font-size value using clamp(). */ function gutenberg_get_computed_fluid_font_size_value( $args = array() ) { - /** - * Filters the fluid font size arguments array before the internal calculations take place. - * - * Return a non-null value to bypass the WordPress internal calculations. - * - * @param string|null $fluid_typography_value Return a font-size value using the passed arguments to short-circuit the default calculations, - * or null to allow WordPress to calculate the font size value. - * @param array $args array( - * 'maximum_viewport_width' => (string) Maximum size up to which type will have fluidity. - * 'minimum_viewport_width' => (string) Minimum viewport size from which type will have fluidity. - * 'maximum_font_size' => (string) Maximum font size. - * 'minimum_font_size' => (string) Minimum font size. - * 'scale_factor' => (number) A scale factor to determine how fast a font scales within boundaries. - * );. - */ - $fluid_typography_value = apply_filters( 'pre_get_computed_fluid_font_size_value', null, $args ); - if ( ! is_null( $fluid_typography_value ) ) { - return $fluid_typography_value; - } - $maximum_viewport_width_raw = isset( $args['maximum_viewport_width'] ) ? $args['maximum_viewport_width'] : null; $minimum_viewport_width_raw = isset( $args['minimum_viewport_width'] ) ? $args['minimum_viewport_width'] : null; $maximum_font_size_raw = isset( $args['maximum_font_size'] ) ? $args['maximum_font_size'] : null; diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js index 6cb950afc4564..fcfefdb789267 100644 --- a/packages/block-editor/src/hooks/font-size.js +++ b/packages/block-editor/src/hooks/font-size.js @@ -324,13 +324,29 @@ function addEditPropsForFluidCustomFontSizes( blockType ) { // BlockListContext.Provider. If we set fontSize using editor. // BlockListBlock instead of using getEditWrapperProps then the value is // clobbered when the core/style/addEditProps filter runs. - const isFluidTypographyEnabled = - !! select( blockEditorStore ).getSettings().__experimentalFeatures + const fluidTypographyConfig = + select( blockEditorStore ).getSettings().__experimentalFeatures ?.typography?.fluid; + const fluidTypographySettings = + typeof fluidTypographyConfig?.fluid === 'object' + ? fluidTypographyConfig?.fluid + : {}; + const newFontSize = - fontSize && isFluidTypographyEnabled - ? getComputedFluidTypographyValue( { fontSize } ) + fontSize && !! fluidTypographyConfig + ? getComputedFluidTypographyValue( { + fontSize, + minimumViewPortWidth: + fluidTypographySettings?.minViewPortWidth, + maximumViewPortWidth: + fluidTypographySettings?.maxViewPortWidth, + scaleFactor: fluidTypographySettings?.scaleFactor, + minimumFontSizeFactor: + fluidTypographySettings?.minViewPortWidth, + maximumFontSizeFactor: + fluidTypographySettings?.maxFontSizeFactor, + } ) : null; if ( newFontSize === null ) { diff --git a/packages/edit-site/src/components/global-styles/typography-utils.js b/packages/edit-site/src/components/global-styles/typography-utils.js index a792d1875005c..3498d9057b273 100644 --- a/packages/edit-site/src/components/global-styles/typography-utils.js +++ b/packages/edit-site/src/components/global-styles/typography-utils.js @@ -23,13 +23,23 @@ import { getComputedFluidTypographyValue } from '@wordpress/block-editor'; * @property {boolean|FluidPreset|undefined} fluid A font size slug */ +/** + * @typedef {Object} TypographySettings + * @property {?string|?number} size A default font size. + * @property {?string} minViewPortWidth Minimum viewport size from which type will have fluidity. Optional if size is specified. + * @property {?string} maxViewPortWidth Maximum size up to which type will have fluidity. Optional if size is specified. + * @property {?number} scaleFactor A scale factor to determine how fast a font scales within boundaries. Optional. + * @property {?number} minFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional. + * @property {?number} maxFontSizeFactor How much to scale defaultFontSize by to derive maximumFontSize. Optional. + */ + /** * Returns a font-size value based on a given font-size preset. * Takes into account fluid typography parameters and attempts to return a css formula depending on available, valid values. * - * @param {Preset} preset - * @param {Object} typographySettings - * @param {boolean} typographySettings.fluid Whether fluid typography is enabled. + * @param {Preset} preset + * @param {Object} typographySettings + * @param {boolean|TypographySettings} typographySettings.fluid Whether fluid typography is enabled, and, optionally, fluid font size options. * * @return {string|*} A font-size value or the value of preset.size. */ @@ -44,7 +54,11 @@ export function getTypographyFontSizeValue( preset, typographySettings ) { return defaultSize; } - if ( true !== typographySettings?.fluid ) { + if ( + false === typographySettings?.fluid || + ( !! typographySettings?.fluid && + Object.keys( typographySettings.fluid ).length === 0 ) + ) { return defaultSize; } @@ -53,10 +67,20 @@ export function getTypographyFontSizeValue( preset, typographySettings ) { return defaultSize; } + const fluidTypographySettings = + typeof typographySettings?.fluid === 'object' + ? typographySettings?.fluid + : {}; + const fluidFontSizeValue = getComputedFluidTypographyValue( { minimumFontSize: preset?.fluid?.min, maximumFontSize: preset?.fluid?.max, fontSize: defaultSize, + minimumViewPortWidth: fluidTypographySettings?.minViewPortWidth, + maximumViewPortWidth: fluidTypographySettings?.maxViewPortWidth, + scaleFactor: fluidTypographySettings?.scaleFactor, + minimumFontSizeFactor: fluidTypographySettings?.minViewPortWidth, + maximumFontSizeFactor: fluidTypographySettings?.maxFontSizeFactor, } ); if ( !! fluidFontSizeValue ) { diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php index cd06b390e8244..6ecac215b0f61 100644 --- a/phpunit/block-supports/typography-test.php +++ b/phpunit/block-supports/typography-test.php @@ -833,40 +833,4 @@ public function data_invalid_size_wp_get_typography_value_and_unit() { 'size: array' => array( array( '10' ) ), ); } - - /** - * Tests bypassing WordPress font size calculations using the `pre_get_computed_fluid_typography_value` filter. - */ - public function test_gutenberg_get_computed_fluid_typography_value_filter() { - add_filter( 'pre_get_computed_fluid_font_size_value', array( $this, 'filter_fluid_font_size' ), 10, 2 ); - $filtered_fluid_font_size_value = gutenberg_get_computed_fluid_font_size_value( - array( - 'minimum_viewport_width' => '100px', - 'maximum_viewport_width' => '200px', - 'minimum_font_size' => '1em', - 'maximum_font_size' => '2em', - 'scale_factor' => '.9', - ) - ); - remove_filter( 'pre_get_computed_fluid_font_size_value', array( $this, 'filter_fluid_font_size' ) ); - $this->assertSame( 'clamp(1em, 0.818rem + .9vw, 2em)', $filtered_fluid_font_size_value ); - } - - /** - * Filters the fluid font size arguments array before the internal calculations take place. - * - * @param string|null $fluid_typography_value Return a font-size value using the passed arguments to short-circuit the default calculations, - * or null to allow WordPress to calculate the font size value. - * @param array $args array( - * 'maximum_viewport_width' => (string) Maximum size up to which type will have fluidity. - * 'minimum_viewport_width' => (string) Minimum viewport size from which type will have fluidity. - * 'maximum_font_size' => (string) Maximum font size. - * 'minimum_font_size' => (string) Minimum font size. - * 'scale_factor' => (number) A scale factor to determine how fast a font scales within boundaries. - * );. - * @return string A font-size value - */ - public function filter_fluid_font_size( $fluid_typography_value, $args ) { - return "clamp({$args['minimum_font_size']}, 0.818rem + {$args['scale_factor']}vw, {$args['maximum_font_size']})"; - } } diff --git a/schemas/json/theme.json b/schemas/json/theme.json index 2414bf54aae34..d0fa889b4d0c3 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -218,8 +218,12 @@ "blockGap": { "description": "Enables `--wp--style--block-gap` to be generated from styles.spacing.blockGap.\nA value of `null` instead of `false` further disables layout styles from being generated.", "oneOf": [ - { "type": "boolean" }, - { "type": "null" } + { + "type": "boolean" + }, + { + "type": "null" + } ], "default": null }, @@ -338,29 +342,38 @@ }, "fluid": { "description": "Enables fluid typography and allows users to set global fluid typography parameters.", - "type": "object", - "properties": { - "maxViewPortWidth": { - "description": "Allow users to set custom a max viewport width in px, rem or em, used to set the maximum size boundary of a fluid font.", - "type": "string" - }, - "minViewPortWidth": { - "description": "Allow users to set custom a min viewport width in px, rem or em, used to set the minimum size boundary of a fluid font", - "type": "string" - }, - "minFontSizeFactor": { - "description": "Used to calculate a minimum font size from a single size value, where `fluidSize.min` is not set.", - "type": "number" - }, - "maxFontSizeFactor": { - "description": "Used to calculate a maximum font size from a single size value, where `fluidSize.max` is not set.", - "type": "number" + "oneOf": [ + { + "type": "object", + "properties": { + "maxViewPortWidth": { + "description": "Allow users to set custom a max viewport width in px, rem or em, used to set the maximum size boundary of a fluid font.", + "type": "string" + }, + "minViewPortWidth": { + "description": "Allow users to set custom a min viewport width in px, rem or em, used to set the minimum size boundary of a fluid font", + "type": "string" + }, + "minFontSizeFactor": { + "description": "Used to calculate a minimum font size from a single size value, where `fluidSize.min` is not set.", + "type": "number" + }, + "maxFontSizeFactor": { + "description": "Used to calculate a maximum font size from a single size value, where `fluidSize.max` is not set.", + "type": "number" + }, + "scaleFactor": { + "description": "Determines the rate of font size change between the minimum and maximum font sizes. The higher the value the faster the change.", + "type": "number" + } + }, + "additionalProperties": false }, - "scaleFactor": { - "description": "Determines the rate of font size change between the minimum and maximum font sizes. The higher the value the faster the change.", - "type": "number" + { + "type": "boolean" } - } + ], + "default": false }, "letterSpacing": { "description": "Allow users to set custom letter spacing.", @@ -565,13 +578,27 @@ }, "settingsProperties": { "allOf": [ - { "$ref": "#/definitions/settingsPropertiesAppearanceTools" }, - { "$ref": "#/definitions/settingsPropertiesBorder" }, - { "$ref": "#/definitions/settingsPropertiesColor" }, - { "$ref": "#/definitions/settingsPropertiesLayout" }, - { "$ref": "#/definitions/settingsPropertiesSpacing" }, - { "$ref": "#/definitions/settingsPropertiesTypography" }, - { "$ref": "#/definitions/settingsPropertiesCustom" } + { + "$ref": "#/definitions/settingsPropertiesAppearanceTools" + }, + { + "$ref": "#/definitions/settingsPropertiesBorder" + }, + { + "$ref": "#/definitions/settingsPropertiesColor" + }, + { + "$ref": "#/definitions/settingsPropertiesLayout" + }, + { + "$ref": "#/definitions/settingsPropertiesSpacing" + }, + { + "$ref": "#/definitions/settingsPropertiesTypography" + }, + { + "$ref": "#/definitions/settingsPropertiesCustom" + } ] }, "settingsPropertiesComplete": { @@ -633,13 +660,21 @@ } } }, - { "$ref": "#/definitions/settingsPropertiesColor" }, - { "$ref": "#/definitions/settingsPropertiesLayout" }, - { "$ref": "#/definitions/settingsPropertiesSpacing" }, + { + "$ref": "#/definitions/settingsPropertiesColor" + }, + { + "$ref": "#/definitions/settingsPropertiesLayout" + }, + { + "$ref": "#/definitions/settingsPropertiesSpacing" + }, { "$ref": "#/definitions/settingsPropertiesTypography" }, - { "$ref": "#/definitions/settingsPropertiesCustom" } + { + "$ref": "#/definitions/settingsPropertiesCustom" + } ] }, "core/buttons": {