Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Search block: ensure font sizes values are converted to fluid in the editor #44852

Merged
merged 1 commit into from
Oct 11, 2022
Merged

Search block: ensure font sizes values are converted to fluid in the editor #44852

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/block-editor/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@

### Bug Fix

- `FontSizePicker`: Update fluid utils so that only string, floats and integers are treated as valid font sizes for the purposes of fluid typography.([#44847](https://github.com/WordPress/gutenberg/pull/44847))
- `FontSizePicker`: Update fluid utils so that only string, floats and integers are treated as valid font sizes for the purposes of fluid typography ([#44847](https://github.com/WordPress/gutenberg/pull/44847))
- `getTypographyClassesAndStyles()`: Ensure that font sizes are transformed into fluid values if fluid typography is activated ([#44852](https://github.com/WordPress/gutenberg/pull/44852))

## 10.2.0 (2022-10-05)

Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -521,6 +521,7 @@ attributes.
_Parameters_

- _attributes_ `Object`: Block attributes.
- _isFluidFontSizeActive_ `boolean`: Whether the function should try to convert font sizes to fluid values.

_Returns_

Expand Down
22 changes: 22 additions & 0 deletions packages/block-editor/src/hooks/test/use-typography-props.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,4 +25,26 @@ describe( 'getTypographyClassesAndStyles', () => {
},
} );
} );

it( 'should return fluid font size styles', () => {
const attributes = {
fontFamily: 'tofu',
style: {
typography: {
letterSpacing: '22px',
fontSize: '2rem',
textTransform: 'uppercase',
},
},
};
expect( getTypographyClassesAndStyles( attributes, true ) ).toEqual( {
className: 'has-tofu-font-family',
style: {
letterSpacing: '22px',
fontSize:
'clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 2.885), 3rem)',
textTransform: 'uppercase',
},
} );
} );
} );
21 changes: 18 additions & 3 deletions packages/block-editor/src/hooks/use-typography-props.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import classnames from 'classnames';
*/
import { getInlineStyles } from './style';
import { getFontSizeClass } from '../components/font-sizes';
import { getComputedFluidTypographyValue } from '../components/font-sizes/fluid-utils';

// 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
Expand All @@ -18,12 +19,26 @@ import { getFontSizeClass } from '../components/font-sizes';
* Provides the CSS class names and inline styles for a block's typography support
* attributes.
*
* @param {Object} attributes Block attributes.
* @param {Object} attributes Block attributes.
* @param {boolean} isFluidFontSizeActive Whether the function should try to convert font sizes to fluid values.
*
* @return {Object} Typography block support derived CSS classes & styles.
*/
export function getTypographyClassesAndStyles( attributes ) {
const typographyStyles = attributes?.style?.typography || {};
export function getTypographyClassesAndStyles(
attributes,
isFluidFontSizeActive
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking at use-color-props.js in the same directory as this file, it seems the other files have a function like getColorClassesAndStyles( attributes ) signature, and then provide a hook (useColorProps) that is responsible for doing its own settings look-up.

In a follow-up, we might also look to adding a hook like that to use-typography-props.js so that we don't need to do the check for fluid support in the Search block's edit function.

However, even if we were to do that, we'd still need to tell getTypographyClassesAndStyles about the state of fluid typography, so we'd still need the change to this signature in that case, I think.

All of which is a long way to say, the change to this function signature sounds good to me!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cheers for thinking about this. I will add a note to follow up on this if we don't decide to change it.

) {
let typographyStyles = attributes?.style?.typography || {};

if ( isFluidFontSizeActive ) {
typographyStyles = {
...typographyStyles,
fontSize: getComputedFluidTypographyValue( {
fontSize: attributes?.style?.typography?.fontSize,
} ),
};
}

const style = getInlineStyles( { typography: typographyStyles } );
const fontFamilyClassName = !! attributes?.fontFamily
? `has-${ kebabCase( attributes.fontFamily ) }-font-family`
Expand Down
7 changes: 6 additions & 1 deletion packages/block-library/src/search/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
getTypographyClassesAndStyles as useTypographyProps,
store as blockEditorStore,
__experimentalGetElementClassName,
useSetting,
} from '@wordpress/block-editor';
import { useDispatch, useSelect } from '@wordpress/data';
import { useEffect } from '@wordpress/element';
Expand Down Expand Up @@ -113,7 +114,11 @@ export default function SearchEdit( {
}

const colorProps = useColorProps( attributes );
const typographyProps = useTypographyProps( attributes );
const fluidTypographyEnabled = useSetting( 'typography.fluid' );
const typographyProps = useTypographyProps(
attributes,
fluidTypographyEnabled
);
const unitControlInstanceId = useInstanceId( UnitControl );
const unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`;
const isButtonPositionInside = 'button-inside' === buttonPosition;
Expand Down