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

Button Block: Set proper typography for inner elements #68023

Open
wants to merge 5 commits into
base: trunk
Choose a base branch
from
+396 −3
Open

Button Block: Set proper typography for inner elements #68023

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ed06ca9
Fixes #64662
shimotmk Dec 16, 2024
aaaa452
fix
shimotmk Dec 17, 2024
c5b5dee
fix writing-mode
shimotmk Dec 17, 2024
e0fbfd4
fix https://github.com/WordPress/gutenberg/pull/68023#discussion_r188…
shimotmk Dec 18, 2024
0f0013d
fix
shimotmk Dec 20, 2024
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
10 changes: 10 additions & 0 deletions packages/block-library/src/button/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,16 @@
}
},
"typography": {
"__experimentalSkipSerialization": [
"fontSize",
"lineHeight",
"__experimentalFontFamily",
"__experimentalFontWeight",
"__experimentalFontStyle",
"__experimentalTextTransform",
"__experimentalTextDecoration",
"__experimentalLetterSpacing"
],
ramonjd marked this conversation as resolved.
Show resolved Hide resolved
"fontSize": true,
"lineHeight": true,
"__experimentalFontFamily": true,
Expand Down
189 changes: 189 additions & 0 deletions packages/block-library/src/button/deprecated.js
View file
Open in desktop
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: {
aaronrobertshaw marked this conversation as resolved.
Show resolved Hide resolved
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
18 changes: 18 additions & 0 deletions packages/block-library/src/button/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,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 @@ -262,6 +264,19 @@ 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
Expand All @@ -288,6 +303,7 @@ 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
Expand All @@ -301,6 +317,8 @@ function ButtonEdit( props ) {
...colorProps.style,
...spacingProps.style,
...shadowProps.style,
...typographyProps.style,
Copy link
Member

Choose a reason for hiding this comment

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

Hmm I think the .wp-block-button__link height of 100% is interfering with the typography setting writing-mode: vertical-rl;

Screenshot 2024-12-17 at 11 07 42 am

I wonder if changing it to auto would break anything else 🤔

Copy link
Contributor

Choose a reason for hiding this comment

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

If writing-mode is best placed still on the wrapper, we could just change the __experimentalSkipSerialization value for typography to be an array of all the other typography features except writing mode.

Copy link
Member

Choose a reason for hiding this comment

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

Good call! I didn't think of that, thanks!

aaronrobertshaw marked this conversation as resolved.
Show resolved Hide resolved
writingMode: undefined,
} }
onReplace={ onReplace }
onMerge={ mergeBlocks }
Expand Down
5 changes: 5 additions & 0 deletions packages/block-library/src/button/save.js
View file
Open in desktop
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,10 +39,12 @@ export default function save( { attributes, className } ) {
const colorProps = getColorClassesAndStyles( attributes );
const spacingProps = getSpacingClassesAndStyles( attributes );
const shadowProps = getShadowClassesAndStyles( attributes );
const typographyProps = getTypographyClassesAndStyles( attributes );
aaronrobertshaw marked this conversation as resolved.
Show resolved Hide resolved
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
Expand All @@ -55,6 +58,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 Down
15 changes: 15 additions & 0 deletions test/integration/fixtures/blocks/core__button__deprecated-v12.html
View file
Open in desktop
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 -->
59 changes: 59 additions & 0 deletions test/integration/fixtures/blocks/core__button__deprecated-v12.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
[
{
"name": "core/button",
"isValid": true,
"attributes": {
"tagName": "a",
"type": "button",
"text": "My button 1",
"fontSize": "xx-large"
},
"innerBlocks": []
},
{
"name": "core/button",
"isValid": true,
"attributes": {
"tagName": "a",
"type": "button",
"text": "My button 2",
"style": {
"typography": {
"fontStyle": "normal",
"fontWeight": "800"
}
}
},
"innerBlocks": []
},
{
"name": "core/button",
"isValid": true,
"attributes": {
"tagName": "a",
"type": "button",
"text": "My button 3",
"style": {
"typography": {
"letterSpacing": "39px"
}
}
},
"innerBlocks": []
},
{
"name": "core/button",
"isValid": true,
"attributes": {
"tagName": "button",
"type": "button",
"text": "My button 4",
"style": {
"typography": {
"letterSpacing": "39px"
}
}
},
"innerBlocks": []
}
]
Loading
Loading