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

Jetpack button: fix width and alignment settings #41139

Draft
wants to merge 3 commits into
base: trunk
Choose a base branch
from
Draft

Jetpack button: fix width and alignment settings #41139

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c0be81d
Jetpack button: fix width and alignment setting
monsieur-z Jan 16, 2025
41a9632
changelog
monsieur-z Jan 16, 2025
7b52adc
Update styles of components using jetpack/button
monsieur-z Jan 17, 2025
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
4 changes: 4 additions & 0 deletions projects/packages/forms/changelog/fix-jetpack-button-styling
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: fixed

Fix submit button width and alignment
4 changes: 4 additions & 0 deletions projects/packages/forms/src/blocks/contact-form/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,10 @@
flex: 0 0 100%;
margin: 0;

&.wp-block-jetpack-button {
flex-basis: auto;
Copy link
Contributor Author

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.

}

&.jetpack-field__width-25,
&.jetpack-field__width-50,
&.jetpack-field__width-75 {
Expand Down
25 changes: 22 additions & 3 deletions projects/packages/forms/src/contact-form/css/grunion.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,7 @@
gap: var(--wp--style--block-gap, 1.5rem);
}

.wp-block-jetpack-contact-form > * {
.wp-block-jetpack-contact-form > *:not(.wp-block-jetpack-button) {
flex: 0 0 100%;
box-sizing: border-box;
}
Expand All @@ -241,8 +241,27 @@
padding-left: 0;
}

.wp-block-jetpack-button.alignright button {
float: right;
.wp-block-jetpack-contact-form .wp-block-jetpack-button {
width: fit-content;
}

.wp-block-jetpack-contact-form .wp-block-jetpack-button.aligncenter {
display: block;

margin-left: auto;
margin-right: auto;
}

.wp-block-jetpack-contact-form .wp-block-jetpack-button.alignleft {
display: block;

margin-right: auto;
}

.wp-block-jetpack-contact-form .wp-block-jetpack-button.alignright {
display: block;

margin-left: auto;
}

.wp-block-jetpack-contact-form .grunion-field-wrap {
Expand Down
4 changes: 4 additions & 0 deletions projects/plugins/jetpack/changelog/fix-jetpack-button-styling
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: other

Jetpack button: fix width and alignment
8 changes: 1 addition & 7 deletions projects/plugins/jetpack/extensions/blocks/button/button.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'] );
Expand Down Expand Up @@ -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 );
}

Expand All @@ -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'] );
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Apply the width to the root of the jetpack/button, instead of its __link element that's now 100% wide.

}

return implode( ' ', $styles );
Expand Down
13 changes: 3 additions & 10 deletions projects/plugins/jetpack/extensions/blocks/button/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 } );
Copy link
Contributor Author

Choose a reason for hiding this comment

The 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.


/* eslint-disable react-hooks/rules-of-hooks */
const {
Expand All @@ -39,6 +34,7 @@ export function ButtonEdit( props ) {

const blockProps = useBlockProps( {
className: clsx( 'wp-block-button', className ),
style: { width },
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Set the width to the root instead of the __link element.

} );

const buttonClasses = clsx( 'wp-block-button__link', {
Expand All @@ -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,
} );
Expand All @@ -60,7 +55,6 @@ export function ButtonEdit( props ) {
fontSize: attributes.style?.typography?.fontSize,
color: textColor.color,
borderRadius: borderRadius ? borderRadius + 'px' : undefined,
width,
};

return (
Expand Down Expand Up @@ -90,6 +84,5 @@ export function ButtonEdit( props ) {
}

export default compose(
withColors( { backgroundColor: 'background-color' }, { textColor: 'color' } ),
applyFallbackStyles
Copy link
Contributor Author

Choose a reason for hiding this comment

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

applyFallbackStyles uses the withFallbackStyles high order component from @wordpress/components, which renders the unwanted extra div (at this line). The code suggests we could get rid of that extra div by specifying a node prop, but it's unclear to me what node we could pass at that stage.

In the following discussion, not using applyFallbackStyles was hinted by several persons: p1736773641027939/1736360651.812989-slack-C052XEUUBL4. I do think it's the way to go as well. As far as I can tell, what applyFallbackStyles does is make the default background and text colors available to ButtonEdit. Yet eventually, those two colors are passed to the ContrastChecker component, which doesn't render a warning when the contrast ratio is too low to be deemed accessible.

withColors( { backgroundColor: 'background-color' }, { textColor: 'color' } )
)( ButtonEdit );
46 changes: 17 additions & 29 deletions projects/plugins/jetpack/extensions/blocks/button/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,24 @@
.wp-block[data-type='jetpack/button'] {
display: inline-block;
margin: 0 auto;
}
.wp-block-jetpack-button {
max-width: 100%;
width: fit-content;
margin: 0;

.wp-block[data-align="center"] {
.wp-block-jetpack-button {
display: flex;
justify-content: center;
}
}
&.aligncenter {
display: block;

.wp-block[data-align="right"] {
.wp-block-jetpack-button {
display: flex;
justify-content: flex-end;
margin-left: auto;
margin-right: auto;
}
}

div[data-type="jetpack/button"]:not([data-align='left']):not([data-align='right']) {
width: 100%;
}

div[data-type="jetpack/button"][data-align] {
z-index: 1;
width: 100%;
&.alignleft {
display: block;

.wp-block > div {
max-width: 100%;
margin-right: auto;
}
}

.wp-block-jetpack-button,
.wp-block-button__link.has-custom-width {
max-width: 100%;
}
&.alignright {
display: block;

margin-left: auto;
}
}
19 changes: 19 additions & 0 deletions projects/plugins/jetpack/extensions/blocks/calendly/view.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,23 @@

.wp-block-jetpack-calendly .wp-block-jetpack-button {
color: #ffffff;

&.aligncenter {
display: block;

margin-left: auto;
margin-right: auto;
}

&.alignleft {
display: block;

margin-right: auto;
}

&.alignright {
display: block;

margin-left: auto;
}
}
23 changes: 23 additions & 0 deletions projects/plugins/jetpack/extensions/blocks/eventbrite/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,3 +65,26 @@
height: 40px;
/* @todo More styling could be copied from Eventbrite */
}

.wp-block-jetpack-eventbrite {
.wp-block-jetpack-button {
&.aligncenter {
display: block;

margin-left: auto;
margin-right: auto;
}

&.alignleft {
display: block;

margin-right: auto;
}

&.alignright {
display: block;

margin-left: auto;
}
}
}
19 changes: 19 additions & 0 deletions projects/plugins/jetpack/extensions/blocks/mailchimp/view.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,25 @@

.wp-block-jetpack-button, p {
margin-bottom: 1em;

&.aligncenter {
display: block;

margin-left: auto;
margin-right: auto;
}

&.alignleft {
display: block;

margin-right: auto;
}

&.alignright {
display: block;

margin-left: auto;
}
}

input {
Expand Down
6 changes: 6 additions & 0 deletions projects/plugins/jetpack/extensions/blocks/premium-content/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
@import '@automattic/jetpack-base-styles/gutenberg-base-styles';

.editor-styles-wrapper .wp-block-jetpack-payment-buttons {
--jetpack-payment-buttons-gap: 0.5em;
}

.wp-block-premium-content-container .premium-content-tabs {
align-items: center;
background: $white;
Expand Down Expand Up @@ -49,6 +53,8 @@
/* Subscribe/Login buttons */

.wp-block-buttons .wp-block[data-type='jetpack/recurring-payments'] {
--jetpack-payment-buttons-gap: 0.5em;

display: inline-block;
margin: 0 0.5em 0 0;
width: auto;
Expand Down
2 changes: 2 additions & 0 deletions projects/plugins/jetpack/extensions/blocks/premium-content/view.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@

/** Subscribe button **/
.wp-block-premium-content-logged-out-view .wp-block-jetpack-recurring-payments {
--jetpack-payment-buttons-gap: 0.5em;

display: inline-block;
margin-inline-end: 0.5em;
}
Expand Down
1 change: 1 addition & 0 deletions projects/plugins/jetpack/extensions/blocks/recurring-payments/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,7 @@
}

.wp-block[data-type='jetpack/button'] {
width: 100%;
margin-top: 0;
margin-bottom: 0;
}
Expand Down
Loading