Skip to content

Commit

Permalink
Removing filter
Browse files Browse the repository at this point in the history 
Pulling across config changes to JS
  • Loading branch information
@ramonjd
ramonjd committed Oct 27, 2022
1 parent 720d1ba commit 1335b9d
Show file tree
Hide file tree
Showing 6 changed files with 118 additions and 99 deletions.
2 changes: 1 addition & 1 deletion docs/reference-guides/theme-json-reference/theme-json-living.md
View file
Expand Up @@ -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 | |
Expand Down
20 changes: 0 additions & 20 deletions lib/block-supports/typography.php
View file
Expand Up @@ -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;
Expand Down
24 changes: 20 additions & 4 deletions packages/block-editor/src/hooks/font-size.js
View file
Expand Up @@ -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 ) {
Expand Down
32 changes: 28 additions & 4 deletions packages/edit-site/src/components/global-styles/typography-utils.js
View file
Expand Up @@ -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.
*/
Expand All @@ -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;
}

Expand All @@ -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 ) {
Expand Down
36 changes: 0 additions & 36 deletions phpunit/block-supports/typography-test.php
View file
Expand Up @@ -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']})";
}
}
103 changes: 69 additions & 34 deletions schemas/json/theme.json
View file
Expand Up @@ -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
},
Expand Down Expand Up @@ -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.",
Expand Down Expand Up @@ -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": {
Expand Down Expand Up @@ -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": {
Expand Down

0 comments on commit 1335b9d

Please sign in to comment.