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.

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: Add typography supports #43499

Merged
merged 18 commits into from
Sep 12, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
2fd66e1
Adding typography block supports to the search block
ramonjd Aug 23, 2022
26c25da
Opting into all typography supports for the search block (with the ex…
ramonjd Aug 24, 2022
910aa4b
There should be a classname for font presets
ramonjd Aug 24, 2022
b05d36c
Adding selectors for global styles.
ramonjd Aug 25, 2022
a624453
Adding typography classes in the back end
ramonjd Aug 25, 2022
a06e86c
Update packages/block-editor/src/hooks/use-typography-props.js
ramonjd Aug 29, 2022
2bd5d91
Update packages/block-library/src/search/index.php
ramonjd Aug 29, 2022
7146b68
Apply text decoration only to label and button
ramonjd Sep 8, 2022
3865941
The attributes were in the wrong order! Who would have thunk it?!
ramonjd Sep 9, 2022
384ce7d
Ensure typography font size and family classnames appear on the wrapp…
ramonjd Sep 9, 2022
f778d69
Clean up unnecessary destructuring
aaronrobertshaw Sep 12, 2022
baba42d
Revert "Clean up unnecessary destructuring"
aaronrobertshaw Sep 12, 2022
a0a201c
Revert "Ensure typography font size and family classnames appear on t…
aaronrobertshaw Sep 12, 2022
e62be9f
Switch approach to target inner elements again
aaronrobertshaw Sep 12, 2022
fb523ca
Keep linter happy
aaronrobertshaw Sep 12, 2022
b32ab5f
Reapply clean up and force text-decoration unset
aaronrobertshaw Sep 12, 2022
d0aa4a3
Avoid confusion over font-family being in classes and inline styles
aaronrobertshaw Sep 12, 2022
b2e2faa
Fix vertical alignment of icon only button
aaronrobertshaw Sep 12, 2022
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
2 changes: 1 addition & 1 deletion docs/reference-guides/core-blocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
13 changes: 13 additions & 0 deletions packages/block-editor/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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_
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/hooks/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
28 changes: 28 additions & 0 deletions packages/block-editor/src/hooks/test/use-typography-props.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
/**
* Internal dependencies
*/
import { getTypographyClassesAndStyles } from '../use-typography-props';

describe( 'getTypographyClassesAndStyles', () => {
it( 'should return styles and classes', () => {
const attributes = {
fontFamily: 'tofu',
fontSize: 'large',
style: {
typography: {
letterSpacing: '22px',
fontSize: '2rem',
textTransform: 'uppercase',
},
},
};
expect( getTypographyClassesAndStyles( attributes ) ).toEqual( {
className: 'has-tofu-font-family has-large-font-size',
style: {
letterSpacing: '22px',
fontSize: '2rem',
textTransform: 'uppercase',
},
} );
} );
} );
41 changes: 41 additions & 0 deletions packages/block-editor/src/hooks/use-typography-props.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
/**
* External dependencies
*/
import { kebabCase } from 'lodash';
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
// 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 ) {
const typographyStyles = attributes?.style?.typography || {};
const style = getInlineStyles( { typography: typographyStyles } );
const fontFamilyClassName = !! attributes?.fontFamily
? `has-${ kebabCase( attributes.fontFamily ) }-font-family`
: '';

const className = classnames(
fontFamilyClassName,
getFontSizeClass( attributes?.fontSize )
);

return {
className,
style,
};
}
1 change: 1 addition & 0 deletions packages/block-editor/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export {
getBorderClassesAndStyles as __experimentalGetBorderClassesAndStyles,
useBorderProps as __experimentalUseBorderProps,
getColorClassesAndStyles as __experimentalGetColorClassesAndStyles,
getTypographyClassesAndStyles,
Copy link
Contributor

Choose a reason for hiding this comment

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

Should we be marking this experimental?

Copy link
Contributor

Choose a reason for hiding this comment

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

@ramonjd initially had this as experimental until I suggested it be stabilized as we'll be stabilizing all experimental block support APIs post-6.1. This would just be another experimental API to process. Given it follows the same pattern as the other block supports, e.g. color and border, and they're due for stabilization. I figure we can save double handling this one.

We can change this if you have strong concerns.

Copy link
Contributor

Choose a reason for hiding this comment

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

That makes sense to me! If color/border are similar and we're not planning on making further changes before stabilising, I wouldn't be opposed to doing it pre-6.1 either. Or were we aiming to stabilise all block supports together? It might take a while to get layout up to spec 😬

Copy link
Contributor

Choose a reason for hiding this comment

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

To my knowledge, there are no plans for further changes to these util functions. I was under the impression that we'd stabilize each block support in full, e.g. all the typography support APIs, then color, and so on. Layout support has always been a special case, so I don't think there is a rush to stabilize it before it's ready.

Regarding stabilizing the others pre-6.1, I don't think that's on the cards. My focus has been on adopting the block supports more consistently within Gutenberg and then seeing if there is anything we should alter before stabilizating them.

That said, if there's a window in which we could actually get it all done, I wouldn't be against it.

useColorProps as __experimentalUseColorProps,
useCustomSides as __experimentalUseCustomSides,
getSpacingClassesAndStyles as __experimentalGetSpacingClassesAndStyles,
Expand Down
15 changes: 15 additions & 0 deletions packages/block-library/src/search/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,21 @@
"text": true
}
},
"typography": {
"__experimentalSkipSerialization": true,
"__experimentalSelector": ".wp-block-search__label, .wp-block-search__input, .wp-block-search__button",
"fontSize": true,
"lineHeight": true,
"__experimentalFontFamily": true,
"__experimentalFontWeight": true,
"__experimentalFontStyle": true,
"__experimentalTextTransform": true,
"__experimentalTextDecoration": true,
"__experimentalLetterSpacing": true,
"__experimentalDefaultControls": {
"fontSize": true
}
},
"__experimentalBorder": {
"color": true,
"radius": true,
Expand Down
30 changes: 25 additions & 5 deletions packages/block-library/src/search/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
RichText,
__experimentalUseBorderProps as useBorderProps,
__experimentalUseColorProps as useColorProps,
getTypographyClassesAndStyles as useTypographyProps,
store as blockEditorStore,
__experimentalGetElementClassName,
} from '@wordpress/block-editor';
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -208,11 +210,16 @@ 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 ),
...typographyProps.style,
textDecoration: undefined,
};

return (
<input
Expand All @@ -239,12 +246,14 @@ export default function SearchEdit( {
const buttonClasses = classnames(
'wp-block-search__button',
colorProps.className,
typographyProps.className,
isButtonPositionInside ? undefined : borderProps.className,
buttonUseIcon ? 'has-icon' : undefined,
__experimentalGetElementClassName( 'button' )
);
const buttonStyles = {
...colorProps.style,
...typographyProps.style,
...( isButtonPositionInside
? { borderRadius }
: borderProps.style ),
Expand Down Expand Up @@ -443,20 +452,31 @@ export default function SearchEdit( {

const blockProps = useBlockProps( {
className: getBlockClassNames(),
style: {
...typographyProps.style,
// Input opts out of text decoration.
textDecoration: undefined,
},
} );

const labelClassnames = classnames(
'wp-block-search__label',
typographyProps.className
);

return (
<div { ...blockProps }>
{ controls }

{ showLabel && (
<RichText
className="wp-block-search__label"
className={ labelClassnames }
aria-label={ __( 'Label text' ) }
placeholder={ __( 'Add label…' ) }
withoutInteractiveFormatting
value={ label }
onChange={ ( html ) => setAttributes( { label: html } ) }
style={ typographyProps.style }
/>
) }

Expand Down
Loading