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

Jump to bottom

Buttons: Add typography supports to button/s blocks #43934

Merged
merged 1 commit into from Sep 9, 2022
Merged

Buttons: Add typography supports to button/s blocks #43934

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.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/reference-guides/core-blocks.md
View file
Open in desktop
Expand Up @@ -50,7 +50,7 @@ Prompt visitors to take action with a button-style link. ([Source](https://githu

- **Name:** core/button
- **Category:** design
- **Supports:** align, anchor, color (background, gradients, text), spacing (padding), typography (fontSize), ~~alignWide~~, ~~reusable~~
- **Supports:** align, anchor, color (background, gradients, text), spacing (padding), typography (fontSize, lineHeight), ~~alignWide~~, ~~reusable~~
- **Attributes:** backgroundColor, gradient, linkTarget, placeholder, rel, text, textColor, title, url, width

## Buttons
Expand All @@ -59,7 +59,7 @@ Prompt visitors to take action with a group of button-style links. ([Source](htt

- **Name:** core/buttons
- **Category:** design
- **Supports:** align (full, wide), anchor, spacing (blockGap, margin)
- **Supports:** align (full, wide), anchor, spacing (blockGap, margin), typography (fontSize, lineHeight)
- **Attributes:**

## Calendar
Expand Down
5 changes: 5 additions & 0 deletions packages/block-library/src/button/block.json
View file
Open in desktop
Expand Up @@ -68,8 +68,13 @@
},
"typography": {
"fontSize": true,
"lineHeight": true,
"__experimentalFontFamily": true,
"__experimentalFontWeight": true,
"__experimentalFontStyle": true,
"__experimentalTextTransform": true,
"__experimentalTextDecoration": true,
"__experimentalLetterSpacing": true,
"__experimentalDefaultControls": {
"fontSize": true
}
Expand Down
4 changes: 4 additions & 0 deletions packages/block-library/src/button/editor.scss
View file
Open in desktop
Expand Up @@ -75,3 +75,7 @@
div[data-type="core/button"] {
display: table;
}

.editor-styles-wrapper .wp-block-button[style*="text-decoration"] .wp-block-button__link {
Copy link
Member

Choose a reason for hiding this comment

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

Why was .editor-styles-wrapper needed here? What breaks if it's removed?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

At the time of this PR, I believe it was required for custom typography settings to be applied properly when set on a block instance. From memory, that might have been related to Global Styles getting scoped to under that editor styles wrapper class.

If we want to clean this up, we'd just need to re-test following the PR test instructions. If the button styles all behave we should be safe to remove these editor styles.

I've run out of time today but a quick test shows it should be ok to remove the editor styles. I might have also found a secondary minor issue with text transform styles.

A draft PR is up in #56630 but I'll need to give it a more thorough test before it is ready.

Thanks for flagging this @ellatrix 👍

Copy link
Member

Choose a reason for hiding this comment

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

This might help to avoid it for the non iframed editor: #56649

text-decoration: inherit;
}
4 changes: 4 additions & 0 deletions packages/block-library/src/button/style.scss
View file
Open in desktop
Expand Up @@ -34,6 +34,10 @@ $blocks-block__margin: 0.5em;
padding: calc(0.667em + 2px) calc(1.333em + 2px);
}

.wp-block-button[style*="text-decoration"] .wp-block-button__link {
text-decoration: inherit;
}

// Increased specificity needed to override margins.
.wp-block-buttons > .wp-block-button {
&.has-custom-width {
Expand Down
13 changes: 13 additions & 0 deletions packages/block-library/src/buttons/block.json
View file
Open in desktop
Expand Up @@ -18,6 +18,19 @@
"blockGap": true
}
},
"typography": {
"fontSize": true,
"lineHeight": true,
"__experimentalFontFamily": true,
"__experimentalFontWeight": true,
"__experimentalFontStyle": true,
"__experimentalTextTransform": true,
"__experimentalTextDecoration": true,
"__experimentalLetterSpacing": true,
"__experimentalDefaultControls": {
"fontSize": true
}
},
"__experimentalLayout": {
"allowSwitching": false,
"allowInheriting": false,
Expand Down
14 changes: 12 additions & 2 deletions packages/block-library/src/buttons/edit.js
View file
Open in desktop
@@ -1,3 +1,8 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
Expand Down Expand Up @@ -30,8 +35,13 @@ const DEFAULT_BLOCK = {
],
};

function ButtonsEdit( { attributes: { layout = {} } } ) {
const blockProps = useBlockProps();
function ButtonsEdit( { attributes, className } ) {
const { fontSize, layout = {}, style } = attributes;
const blockProps = useBlockProps( {
className: classnames( className, {
'has-custom-font-size': fontSize || style?.typography?.fontSize,
} ),
} );
const preferredStyle = useSelect( ( select ) => {
const preferredStyleVariations =
select( blockEditorStore ).getSettings()
Expand Down
6 changes: 6 additions & 0 deletions packages/block-library/src/buttons/editor.scss
View file
Open in desktop
Expand Up @@ -54,6 +54,12 @@ $blocks-block__margin: 0.5em;
margin-bottom: 0;
}
}

.editor-styles-wrapper &.has-custom-font-size {
.wp-block-button__link {
font-size: inherit;
}
}
}

.wp-block[data-align="center"] > .wp-block-buttons {
Expand Down
15 changes: 13 additions & 2 deletions packages/block-library/src/buttons/save.js
View file
Open in desktop
@@ -1,9 +1,20 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';

export default function save() {
const innerBlocksProps = useInnerBlocksProps.save( useBlockProps.save() );
export default function save( { attributes, className } ) {
const { fontSize, style } = attributes;
const blockProps = useBlockProps.save( {
className: classnames( className, {
'has-custom-font-size': fontSize || style?.typography?.fontSize,
} ),
} );
const innerBlocksProps = useInnerBlocksProps.save( blockProps );
return <div { ...innerBlocksProps } />;
}
13 changes: 13 additions & 0 deletions packages/block-library/src/buttons/style.scss
View file
Open in desktop
Expand Up @@ -69,6 +69,19 @@ $blocks-block__margin: 0.5em;
margin-right: auto;
width: 100%;
}

&[style*="text-decoration"] {
.wp-block-button,
.wp-block-button__link {
text-decoration: inherit;
}
}

&.has-custom-font-size {
.wp-block-button__link {
font-size: inherit;
}
}
}

// Legacy buttons that did not come in a wrapping container.
Expand Down