Skip to content

Commit

Permalink
Button Block: Set proper typography for inner elements (#68023)
Browse files Browse the repository at this point in the history 
Fixes #64662. The current typography does not work correctly with the given Core Button block styles. This fix forces inner elements to inherit the styles with the exception of `writingMode` which is set on the block wrapper.

Co-authored-by: shimotmk <[email protected]>
Co-authored-by: ramonjd <[email protected]>
Co-authored-by: aaronrobertshaw <[email protected]>
Co-authored-by: talldan <[email protected]>
  • Loading branch information
@shimotmk @ramonjd
@aaronrobertshaw @talldan
5 people authored Dec 31, 2024
1 parent 3c716cf commit e5dca54
Show file tree
Hide file tree
Showing 10 changed files with 404 additions and 5 deletions.
1 change: 1 addition & 0 deletions packages/block-editor/src/hooks/index.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,4 @@ export { getColorClassesAndStyles, useColorProps } from './use-color-props';
export { getSpacingClassesAndStyles } from './use-spacing-props';
export { useCachedTruthy } from './use-cached-truthy';
export { useEditorWrapperStyles } from './use-editor-wrapper-styles';
export { getTypographyClassesAndStyles } from './use-typography-props';
19 changes: 17 additions & 2 deletions packages/block-library/src/button/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,16 @@
}
},
"typography": {
"__experimentalSkipSerialization": [
"fontSize",
"lineHeight",
"fontFamily",
"fontWeight",
"fontStyle",
"textTransform",
"textDecoration",
"letterSpacing"
],
"fontSize": true,
"lineHeight": true,
"__experimentalFontFamily": true,
Expand Down Expand Up @@ -122,7 +132,6 @@
"width": true
}
},
"__experimentalSelector": ".wp-block-button .wp-block-button__link",
"interactivity": {
"clientNavigation": true
}
Expand All @@ -132,5 +141,11 @@
{ "name": "outline", "label": "Outline" }
],
"editorStyle": "wp-block-button-editor",
"style": "wp-block-button"
"style": "wp-block-button",
"selectors": {
"root": ".wp-block-button .wp-block-button__link",
"typography": {
"writingMode": ".wp-block-button"
}
}
}
189 changes: 189 additions & 0 deletions packages/block-library/src/button/deprecated.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ import {
__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
__experimentalGetElementClassName,
} from '@wordpress/block-editor';
import { compose } from '@wordpress/compose';

Expand Down Expand Up @@ -132,6 +134,192 @@ const blockAttributes = {
},
};

const v12 = {
attributes: {
tagName: {
type: 'string',
enum: [ 'a', 'button' ],
default: 'a',
},
type: {
type: 'string',
default: 'button',
},
textAlign: {
type: 'string',
},
url: {
type: 'string',
source: 'attribute',
selector: 'a',
attribute: 'href',
},
title: {
type: 'string',
source: 'attribute',
selector: 'a,button',
attribute: 'title',
role: 'content',
},
text: {
type: 'rich-text',
source: 'rich-text',
selector: 'a,button',
role: 'content',
},
linkTarget: {
type: 'string',
source: 'attribute',
selector: 'a',
attribute: 'target',
role: 'content',
},
rel: {
type: 'string',
source: 'attribute',
selector: 'a',
attribute: 'rel',
role: 'content',
},
placeholder: {
type: 'string',
},
backgroundColor: {
type: 'string',
},
textColor: {
type: 'string',
},
gradient: {
type: 'string',
},
width: {
type: 'number',
},
},
supports: {
anchor: true,
align: true,
alignWide: false,
color: {
__experimentalSkipSerialization: true,
gradients: true,
__experimentalDefaultControls: {
background: true,
text: true,
},
},
typography: {
fontSize: true,
lineHeight: true,
__experimentalFontFamily: true,
__experimentalFontWeight: true,
__experimentalFontStyle: true,
__experimentalTextTransform: true,
__experimentalTextDecoration: true,
__experimentalLetterSpacing: true,
__experimentalWritingMode: true,
__experimentalDefaultControls: {
fontSize: true,
},
},
reusable: false,
shadow: {
__experimentalSkipSerialization: true,
},
spacing: {
__experimentalSkipSerialization: true,
padding: [ 'horizontal', 'vertical' ],
__experimentalDefaultControls: {
padding: true,
},
},
__experimentalBorder: {
color: true,
radius: true,
style: true,
width: true,
__experimentalSkipSerialization: true,
__experimentalDefaultControls: {
color: true,
radius: true,
style: true,
width: true,
},
},
__experimentalSelector: '.wp-block-button__link',
interactivity: {
clientNavigation: true,
},
},
save( { attributes, className } ) {
const {
tagName,
type,
textAlign,
fontSize,
linkTarget,
rel,
style,
text,
title,
url,
width,
} = attributes;

const TagName = tagName || 'a';
const isButtonTag = 'button' === TagName;
const buttonType = type || 'button';
const borderProps = getBorderClassesAndStyles( attributes );
const colorProps = getColorClassesAndStyles( attributes );
const spacingProps = getSpacingClassesAndStyles( attributes );
const shadowProps = getShadowClassesAndStyles( attributes );
const buttonClasses = clsx(
'wp-block-button__link',
colorProps.className,
borderProps.className,
{
[ `has-text-align-${ textAlign }` ]: textAlign,
// For backwards compatibility add style that isn't provided via
// block support.
'no-border-radius': style?.border?.radius === 0,
},
__experimentalGetElementClassName( 'button' )
);
const buttonStyle = {
...borderProps.style,
...colorProps.style,
...spacingProps.style,
...shadowProps.style,
};

// The use of a `title` attribute here is soft-deprecated, but still applied
// if it had already been assigned, for the sake of backward-compatibility.
// A title will no longer be assigned for new or updated button block links.

const wrapperClasses = clsx( className, {
[ `has-custom-width wp-block-button__width-${ width }` ]: width,
[ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize,
} );

return (
<div { ...useBlockProps.save( { className: wrapperClasses } ) }>
<RichText.Content
tagName={ TagName }
type={ isButtonTag ? buttonType : null }
className={ buttonClasses }
href={ isButtonTag ? null : url }
title={ title }
style={ buttonStyle }
value={ text }
target={ isButtonTag ? null : linkTarget }
rel={ isButtonTag ? null : rel }
/>
</div>
);
},
};

const v11 = {
attributes: {
url: {
Expand Down Expand Up @@ -399,6 +587,7 @@ const v10 = {
};

const deprecated = [
v12,
v11,
v10,
{
Expand Down
21 changes: 20 additions & 1 deletion packages/block-library/src/button/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ import {
__experimentalGetElementClassName,
store as blockEditorStore,
useBlockEditingMode,
getTypographyClassesAndStyles as useTypographyProps,
useSettings,
} from '@wordpress/block-editor';
import { displayShortcut, isKeyboardEvent, ENTER } from '@wordpress/keycodes';
import { link, linkOff } from '@wordpress/icons';
Expand Down Expand Up @@ -266,14 +268,26 @@ function ButtonEdit( props ) {
[ context, isSelected, metadata?.bindings?.url ]
);

const [ fluidTypographySettings, layout ] = useSettings(
'typography.fluid',
'layout'
);
const typographyProps = useTypographyProps( attributes, {
typography: {
fluid: fluidTypographySettings,
},
layout: {
wideSize: layout?.wideSize,
},
} );

return (
<>
<div
{ ...blockProps }
className={ clsx( blockProps.className, {
[ `has-custom-width wp-block-button__width-${ width }` ]:
width,
[ `has-custom-font-size` ]: blockProps.style.fontSize,
} ) }
>
<RichText
Expand All @@ -292,11 +306,14 @@ function ButtonEdit( props ) {
'wp-block-button__link',
colorProps.className,
borderProps.className,
typographyProps.className,
{
[ `has-text-align-${ textAlign }` ]: textAlign,
// For backwards compatibility add style that isn't
// provided via block support.
'no-border-radius': style?.border?.radius === 0,
[ `has-custom-font-size` ]:
blockProps.style.fontSize,
},
__experimentalGetElementClassName( 'button' )
) }
Expand All @@ -305,6 +322,8 @@ function ButtonEdit( props ) {
...colorProps.style,
...spacingProps.style,
...shadowProps.style,
...typographyProps.style,
writingMode: undefined,
} }
onReplace={ onReplace }
onMerge={ mergeBlocks }
Expand Down
7 changes: 6 additions & 1 deletion packages/block-library/src/button/save.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
__experimentalGetElementClassName,
getTypographyClassesAndStyles,
} from '@wordpress/block-editor';

export default function save( { attributes, className } ) {
Expand All @@ -38,15 +39,18 @@ export default function save( { attributes, className } ) {
const colorProps = getColorClassesAndStyles( attributes );
const spacingProps = getSpacingClassesAndStyles( attributes );
const shadowProps = getShadowClassesAndStyles( attributes );
const typographyProps = getTypographyClassesAndStyles( attributes );
const buttonClasses = clsx(
'wp-block-button__link',
colorProps.className,
borderProps.className,
typographyProps.className,
{
[ `has-text-align-${ textAlign }` ]: textAlign,
// For backwards compatibility add style that isn't provided via
// block support.
'no-border-radius': style?.border?.radius === 0,
[ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize,
},
__experimentalGetElementClassName( 'button' )
);
Expand All @@ -55,6 +59,8 @@ export default function save( { attributes, className } ) {
...colorProps.style,
...spacingProps.style,
...shadowProps.style,
...typographyProps.style,
writingMode: undefined,
};

// The use of a `title` attribute here is soft-deprecated, but still applied
Expand All @@ -63,7 +69,6 @@ export default function save( { attributes, className } ) {

const wrapperClasses = clsx( className, {
[ `has-custom-width wp-block-button__width-${ width }` ]: width,
[ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize,
} );

return (
Expand Down
2 changes: 1 addition & 1 deletion test/integration/fixtures/blocks/core__button__deprecated-v10.serialized.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<!-- wp:button {"fontFamily":"cambria-georgia"} -->
<div class="wp-block-button has-cambria-georgia-font-family"><a class="wp-block-button__link wp-element-button">My button</a></div>
<div class="wp-block-button"><a class="wp-block-button__link has-cambria-georgia-font-family wp-element-button">My button</a></div>
<!-- /wp:button -->
15 changes: 15 additions & 0 deletions test/integration/fixtures/blocks/core__button__deprecated-v12.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!-- wp:button {"fontSize":"xx-large"} -->
<div class="wp-block-button has-custom-font-size has-xx-large-font-size"><a class="wp-block-button__link wp-element-button">My button 1</a></div>
<!-- /wp:button -->

<!-- wp:button {"style":{"typography":{"fontStyle":"normal","fontWeight":"800"}}} -->
<div class="wp-block-button" style="font-style:normal;font-weight:800"><a class="wp-block-button__link wp-element-button">My button 2</a></div>
<!-- /wp:button -->

<!-- wp:button {"style":{"typography":{"letterSpacing":"39px"}}} -->
<div class="wp-block-button" style="letter-spacing:39px"><a class="wp-block-button__link wp-element-button">My button 3</a></div>
<!-- /wp:button -->

<!-- wp:button {"tagName":"button","style":{"typography":{"letterSpacing":"39px"}}} -->
<div class="wp-block-button" style="letter-spacing:39px"><button type="button" class="wp-block-button__link wp-element-button">My button 4</button></div>
<!-- /wp:button -->
Loading

1 comment on commit e5dca54

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in e5dca54.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/12553575807
📝 Reported issues:

Please sign in to comment.