-
Notifications
You must be signed in to change notification settings - Fork 816
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
Jetpack button: fix width and alignment settings #41139
Changes from all commits
f6b6a18
5ae4e2d
131e43c
e26c2e2
d8e29f2
96f6304
5f70361
c4b781a
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
Significance: patch | ||
Type: fixed | ||
|
||
Fix submit button width and alignment |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
Significance: patch | ||
Type: other | ||
|
||
Jetpack button: fix width and alignment |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -166,7 +166,6 @@ function get_button_styles( $attributes ) { | |
$has_named_gradient = array_key_exists( 'gradient', $attributes ); | ||
$has_custom_gradient = array_key_exists( 'customGradient', $attributes ); | ||
$has_border_radius = array_key_exists( 'borderRadius', $attributes ); | ||
$has_width = array_key_exists( 'width', $attributes ); | ||
$has_font_family = array_key_exists( 'fontFamily', $attributes ); | ||
$has_typography_styles = array_key_exists( 'style', $attributes ) && array_key_exists( 'typography', $attributes['style'] ); | ||
$has_custom_font_size = $has_typography_styles && array_key_exists( 'fontSize', $attributes['style']['typography'] ); | ||
|
@@ -206,11 +205,6 @@ function get_button_styles( $attributes ) { | |
$styles[] = sprintf( 'border-radius: %spx;', $attributes['borderRadius'] ); | ||
} | ||
|
||
if ( $has_width ) { | ||
$styles[] = sprintf( 'width: %s;', $attributes['width'] ); | ||
$styles[] = 'max-width: 100%'; | ||
} | ||
|
||
return implode( ' ', $styles ); | ||
} | ||
|
||
|
@@ -226,7 +220,7 @@ function get_button_wrapper_styles( $attributes ) { | |
$has_width = array_key_exists( 'width', $attributes ); | ||
|
||
if ( $has_width ) { | ||
$styles[] = 'max-width: 100%'; | ||
$styles[] = sprintf( 'width: %s;', $attributes['width'] ); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Apply the width to the root of the |
||
} | ||
|
||
return implode( ' ', $styles ); | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -8,21 +8,16 @@ import { | |
import { compose } from '@wordpress/compose'; | ||
import { __ } from '@wordpress/i18n'; | ||
import clsx from 'clsx'; | ||
import useWidth from '../../shared/use-width'; | ||
import applyFallbackStyles from './apply-fallback-styles'; | ||
import { IS_GRADIENT_AVAILABLE } from './constants'; | ||
import ButtonControls from './controls'; | ||
import usePassthroughAttributes from './use-passthrough-attributes'; | ||
import './editor.scss'; | ||
|
||
export function ButtonEdit( props ) { | ||
const { attributes, backgroundColor, className, clientId, context, setAttributes, textColor } = | ||
props; | ||
const { attributes, backgroundColor, className, clientId, setAttributes, textColor } = props; | ||
const { borderRadius, element, placeholder, text, width, fontSize } = attributes; | ||
const isWidthSetOnParentBlock = 'jetpack/parentBlockWidth' in context; | ||
|
||
usePassthroughAttributes( { attributes, clientId, setAttributes } ); | ||
useWidth( { attributes, disableEffects: isWidthSetOnParentBlock, setAttributes } ); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Calling this hook results in resetting the button width when it is aligned left or right. I don't get the rationale behind that decision. In the current UI, from a user standpoint, this doesn't seem like something we'd want. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I've been testing and I also couldn't see the use case that the hook caters to. I saw this was implemented in #25394 by @mmtr, maybe Miguel remembers. If there's no apparent current use cases, I wonder if it can be removed completely from the codebase. It's also used by Payment Button, but that has no alignment tool on the toolbar, so perhaps it's not needed. edit: it just occurred to me, a case where it might makes sense is when the button is 100% width and an alignment is set. |
||
|
||
/* eslint-disable react-hooks/rules-of-hooks */ | ||
const { | ||
|
@@ -39,6 +34,7 @@ export function ButtonEdit( props ) { | |
|
||
const blockProps = useBlockProps( { | ||
className: clsx( 'wp-block-button', className ), | ||
style: { width }, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Set the |
||
} ); | ||
|
||
const buttonClasses = clsx( 'wp-block-button__link', { | ||
|
@@ -48,7 +44,6 @@ export function ButtonEdit( props ) { | |
[ textColor.class ]: textColor.class, | ||
[ gradientClass ]: gradientClass, | ||
'no-border-radius': 0 === borderRadius, | ||
'has-custom-width': !! width, | ||
[ `has-${ fontSize }-font-size` ]: !! fontSize, | ||
'has-custom-font-size': !! fontSize, | ||
} ); | ||
|
@@ -60,7 +55,6 @@ export function ButtonEdit( props ) { | |
fontSize: attributes.style?.typography?.fontSize, | ||
color: textColor.color, | ||
borderRadius: borderRadius ? borderRadius + 'px' : undefined, | ||
width, | ||
}; | ||
|
||
return ( | ||
|
@@ -90,6 +84,5 @@ export function ButtonEdit( props ) { | |
} | ||
|
||
export default compose( | ||
withColors( { backgroundColor: 'background-color' }, { textColor: 'color' } ), | ||
applyFallbackStyles | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
In the following discussion, not using There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
It's because the That said, I think it's pretty trivial to rewrite withFallbackStyles/applyFallbackStyles in a more modern react way that won't result in an extra wrapper, so I agree with removing it, and I'd be happy to work on getting the contrast checker working again in a follow up PR. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Here's a small PR that addresses that - #41294. I'll keep it as a draft until this or another fix for the styles is merged. |
||
withColors( { backgroundColor: 'background-color' }, { textColor: 'color' } ) | ||
)( ButtonEdit ); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,14 +1,22 @@ | ||
@import "../../shared/styles/align"; | ||
|
||
.amp-wp-article .wp-block-jetpack-button { | ||
color: #ffffff; | ||
} | ||
|
||
.wp-block-jetpack-button { | ||
@include align-block; | ||
max-width: 100%; | ||
width: fit-content; | ||
margin: 0; | ||
|
||
&.is-style-outline > .wp-block-button__link { | ||
background-color: transparent; | ||
border: solid 1px currentColor; | ||
color: currentColor; | ||
} | ||
|
||
&:not(.is-style-outline) button { | ||
border: none; | ||
} | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
@mixin align-block { | ||
&.aligncenter, | ||
&.alignleft, | ||
&.alignright { | ||
display: block; | ||
} | ||
|
||
&.aligncenter { | ||
margin-left: auto; | ||
margin-right: auto; | ||
} | ||
|
||
&.alignleft { | ||
margin-right: auto; | ||
} | ||
|
||
&.alignright { | ||
margin-left: auto; | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Overwrite the
100%
value. We want to be able to set the width through the button styling options in the editor.