From 5283c7d6cbc3154a0f2bc7f0b9d3a98b941ea757 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 9 Sep 2022 12:15:00 +1000 Subject: [PATCH] Button/s: Add typography supports to button blocks (#43934) --- docs/reference-guides/core-blocks.md | 4 ++-- packages/block-library/src/button/block.json | 5 +++++ packages/block-library/src/button/editor.scss | 4 ++++ packages/block-library/src/button/style.scss | 4 ++++ packages/block-library/src/buttons/block.json | 13 +++++++++++++ packages/block-library/src/buttons/edit.js | 14 ++++++++++++-- packages/block-library/src/buttons/editor.scss | 6 ++++++ packages/block-library/src/buttons/save.js | 15 +++++++++++++-- packages/block-library/src/buttons/style.scss | 13 +++++++++++++ 9 files changed, 72 insertions(+), 6 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 80e215adacbf0..abd247003f9b6 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -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 @@ -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 diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json index d4a4f308721f8..6076db9b8feec 100644 --- a/packages/block-library/src/button/block.json +++ b/packages/block-library/src/button/block.json @@ -68,8 +68,13 @@ }, "typography": { "fontSize": true, + "lineHeight": true, "__experimentalFontFamily": true, + "__experimentalFontWeight": true, + "__experimentalFontStyle": true, "__experimentalTextTransform": true, + "__experimentalTextDecoration": true, + "__experimentalLetterSpacing": true, "__experimentalDefaultControls": { "fontSize": true } diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss index 7ea7a64972bb0..05c404a5d295f 100644 --- a/packages/block-library/src/button/editor.scss +++ b/packages/block-library/src/button/editor.scss @@ -75,3 +75,7 @@ div[data-type="core/button"] { display: table; } + +.editor-styles-wrapper .wp-block-button[style*="text-decoration"] .wp-block-button__link { + text-decoration: inherit; +} diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss index 58fe01e12e99f..cc553625f8ea3 100644 --- a/packages/block-library/src/button/style.scss +++ b/packages/block-library/src/button/style.scss @@ -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 { diff --git a/packages/block-library/src/buttons/block.json b/packages/block-library/src/buttons/block.json index d72cb426890a8..266646d96bcee 100644 --- a/packages/block-library/src/buttons/block.json +++ b/packages/block-library/src/buttons/block.json @@ -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, diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js index 37291f430024f..f60f65b372214 100644 --- a/packages/block-library/src/buttons/edit.js +++ b/packages/block-library/src/buttons/edit.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ @@ -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() diff --git a/packages/block-library/src/buttons/editor.scss b/packages/block-library/src/buttons/editor.scss index 1f964c32fa940..018ca3b7e2f8e 100644 --- a/packages/block-library/src/buttons/editor.scss +++ b/packages/block-library/src/buttons/editor.scss @@ -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 { diff --git a/packages/block-library/src/buttons/save.js b/packages/block-library/src/buttons/save.js index 6ed6c218d6769..77431ef98829c 100644 --- a/packages/block-library/src/buttons/save.js +++ b/packages/block-library/src/buttons/save.js @@ -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
; } diff --git a/packages/block-library/src/buttons/style.scss b/packages/block-library/src/buttons/style.scss index 6ba301ea7e25c..0f15bdab46fcf 100644 --- a/packages/block-library/src/buttons/style.scss +++ b/packages/block-library/src/buttons/style.scss @@ -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.