diff --git a/projects/packages/forms/changelog/fix-jetpack-button-styling b/projects/packages/forms/changelog/fix-jetpack-button-styling new file mode 100644 index 0000000000000..27fee2c68ac94 --- /dev/null +++ b/projects/packages/forms/changelog/fix-jetpack-button-styling @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Fix submit button width and alignment diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss index 9c6c49186d55e..1a3e6c9a54fff 100644 --- a/projects/packages/forms/src/blocks/contact-form/editor.scss +++ b/projects/packages/forms/src/blocks/contact-form/editor.scss @@ -50,7 +50,12 @@ .wp-block { flex: 0 0 100%; - margin: 0; + margin-top: 0; + margin-bottom: 0; + + &.wp-block-jetpack-button { + flex-basis: auto; + } &.jetpack-field__width-25, &.jetpack-field__width-50, diff --git a/projects/packages/forms/src/contact-form/css/grunion.css b/projects/packages/forms/src/contact-form/css/grunion.css index db3af87444d3e..d189111812244 100644 --- a/projects/packages/forms/src/contact-form/css/grunion.css +++ b/projects/packages/forms/src/contact-form/css/grunion.css @@ -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; } @@ -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 { diff --git a/projects/plugins/jetpack/changelog/fix-jetpack-button-styling b/projects/plugins/jetpack/changelog/fix-jetpack-button-styling new file mode 100644 index 0000000000000..e20ecbb410d9c --- /dev/null +++ b/projects/plugins/jetpack/changelog/fix-jetpack-button-styling @@ -0,0 +1,4 @@ +Significance: patch +Type: other + +Jetpack button: fix width and alignment diff --git a/projects/plugins/jetpack/extensions/blocks/button/button.php b/projects/plugins/jetpack/extensions/blocks/button/button.php index cca7a513bc229..a7794531c91f1 100644 --- a/projects/plugins/jetpack/extensions/blocks/button/button.php +++ b/projects/plugins/jetpack/extensions/blocks/button/button.php @@ -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'] ); } return implode( ' ', $styles ); diff --git a/projects/plugins/jetpack/extensions/blocks/button/edit.js b/projects/plugins/jetpack/extensions/blocks/button/edit.js index c1d57607b21c3..432fdb3522d0e 100644 --- a/projects/plugins/jetpack/extensions/blocks/button/edit.js +++ b/projects/plugins/jetpack/extensions/blocks/button/edit.js @@ -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 } ); /* 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 }, } ); 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 + withColors( { backgroundColor: 'background-color' }, { textColor: 'color' } ) )( ButtonEdit ); diff --git a/projects/plugins/jetpack/extensions/blocks/button/editor.scss b/projects/plugins/jetpack/extensions/blocks/button/editor.scss index aa0173e0a0635..124d209d529b0 100644 --- a/projects/plugins/jetpack/extensions/blocks/button/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/button/editor.scss @@ -1,6 +1,11 @@ -.wp-block[data-type='jetpack/button'] { - display: inline-block; - margin: 0 auto; +@import "../../shared/styles/align"; + +// This level of CSS specificity is required to overwrite existing styles +.editor-styles-wrapper .block-editor-block-list__block.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; @@ -9,34 +14,25 @@ } } -.wp-block[data-align="center"] { - .wp-block-jetpack-button { - display: flex; - justify-content: center; - } +// Support align feature for older themes +.wp-block[data-align]:has(> .wp-block-jetpack-button) { + margin-left: 0; + margin-right: 0; } -.wp-block[data-align="right"] { - .wp-block-jetpack-button { - display: flex; - justify-content: flex-end; - } +.wp-block[data-align] > .wp-block-jetpack-button { + display: block; } -div[data-type="jetpack/button"]:not([data-align='left']):not([data-align='right']) { - width: 100%; +.wp-block[data-align="center"] > .wp-block-jetpack-button { + margin-left: auto; + margin-right: auto; } -div[data-type="jetpack/button"][data-align] { - z-index: 1; - width: 100%; - - .wp-block > div { - max-width: 100%; - } +.wp-block[data-align="left"] > .wp-block-jetpack-button { + margin-right: auto; } -.wp-block-jetpack-button, -.wp-block-button__link.has-custom-width { - max-width: 100%; -} +.wp-block[data-align="right"] > .wp-block-jetpack-button { + margin-left: auto; +} \ No newline at end of file diff --git a/projects/plugins/jetpack/extensions/blocks/button/view.scss b/projects/plugins/jetpack/extensions/blocks/button/view.scss index 7db0bedb6403d..41394986df71f 100644 --- a/projects/plugins/jetpack/extensions/blocks/button/view.scss +++ b/projects/plugins/jetpack/extensions/blocks/button/view.scss @@ -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; } -} +} \ No newline at end of file diff --git a/projects/plugins/jetpack/extensions/blocks/calendly/view.scss b/projects/plugins/jetpack/extensions/blocks/calendly/view.scss index c5218066cbc18..b268084ec0a05 100644 --- a/projects/plugins/jetpack/extensions/blocks/calendly/view.scss +++ b/projects/plugins/jetpack/extensions/blocks/calendly/view.scss @@ -1,3 +1,5 @@ +@import "../../shared/styles/align"; + .admin-bar .calendly-overlay .calendly-popup-close { top: 47px; } @@ -16,5 +18,7 @@ } .wp-block-jetpack-calendly .wp-block-jetpack-button { + @include align-block; + color: #ffffff; } diff --git a/projects/plugins/jetpack/extensions/blocks/eventbrite/editor.scss b/projects/plugins/jetpack/extensions/blocks/eventbrite/editor.scss index de0b32985551f..85d958d7e8642 100644 --- a/projects/plugins/jetpack/extensions/blocks/eventbrite/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/eventbrite/editor.scss @@ -1,6 +1,12 @@ +@import '../../shared/styles/align'; + .wp-block-jetpack-eventbrite { position: relative; + .wp-block-jetpack-button { + @include align-block; + } + .components-placeholder__learn-more { margin-top: 1em; } diff --git a/projects/plugins/jetpack/extensions/blocks/eventbrite/style.scss b/projects/plugins/jetpack/extensions/blocks/eventbrite/style.scss index baf34bb5e25e8..778444a1021ac 100644 --- a/projects/plugins/jetpack/extensions/blocks/eventbrite/style.scss +++ b/projects/plugins/jetpack/extensions/blocks/eventbrite/style.scss @@ -1,3 +1,4 @@ +@import "../../shared/styles/align"; // Hide the link if an iframe got appended to the container. .eventbrite__direct-link:not(:only-child) { display: none; @@ -65,3 +66,9 @@ height: 40px; /* @todo More styling could be copied from Eventbrite */ } + +.wp-block-jetpack-eventbrite { + .wp-block-jetpack-button { + @include align-block; + } +} \ No newline at end of file diff --git a/projects/plugins/jetpack/extensions/blocks/mailchimp/view.scss b/projects/plugins/jetpack/extensions/blocks/mailchimp/view.scss index b99d84fdb8fa2..b3af767adb0fc 100644 --- a/projects/plugins/jetpack/extensions/blocks/mailchimp/view.scss +++ b/projects/plugins/jetpack/extensions/blocks/mailchimp/view.scss @@ -1,5 +1,6 @@ @import '@automattic/jetpack-base-styles/gutenberg-base-styles'; @import '../../shared/styles/jetpack-variables.scss'; +@import "../../shared/styles/align"; .wp-block-jetpack-mailchimp { &.is-processing { @@ -9,6 +10,8 @@ } .wp-block-jetpack-button, p { + @include align-block; + margin-bottom: 1em; } diff --git a/projects/plugins/jetpack/extensions/blocks/premium-content/editor.scss b/projects/plugins/jetpack/extensions/blocks/premium-content/editor.scss index 6dccbac43bfb9..af1b73dc8df85 100644 --- a/projects/plugins/jetpack/extensions/blocks/premium-content/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/premium-content/editor.scss @@ -49,6 +49,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; diff --git a/projects/plugins/jetpack/extensions/blocks/premium-content/view.scss b/projects/plugins/jetpack/extensions/blocks/premium-content/view.scss index d014f58bd8657..ce430df8f19eb 100644 --- a/projects/plugins/jetpack/extensions/blocks/premium-content/view.scss +++ b/projects/plugins/jetpack/extensions/blocks/premium-content/view.scss @@ -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; } diff --git a/projects/plugins/jetpack/extensions/blocks/recurring-payments/editor.scss b/projects/plugins/jetpack/extensions/blocks/recurring-payments/editor.scss index 0871222b61e46..d33e4b30ac743 100644 --- a/projects/plugins/jetpack/extensions/blocks/recurring-payments/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/recurring-payments/editor.scss @@ -115,7 +115,9 @@ display: block; } + .wp-block-jetpack-button, .wp-block[data-type='jetpack/button'] { + width: 100%; margin-top: 0; margin-bottom: 0; } diff --git a/projects/plugins/jetpack/extensions/blocks/recurring-payments/view.scss b/projects/plugins/jetpack/extensions/blocks/recurring-payments/view.scss index fb7c975e845ed..2f72936b8409b 100644 --- a/projects/plugins/jetpack/extensions/blocks/recurring-payments/view.scss +++ b/projects/plugins/jetpack/extensions/blocks/recurring-payments/view.scss @@ -3,3 +3,9 @@ .wp-block-jetpack-recurring-payments.aligncenter .wp-block-jetpack-button { text-align: center; } + +.wp-block-jetpack-recurring-payments { + .wp-block-jetpack-button { + width: 100%; + } +} diff --git a/projects/plugins/jetpack/extensions/shared/styles/align.scss b/projects/plugins/jetpack/extensions/shared/styles/align.scss new file mode 100644 index 0000000000000..b75c0fcf29b5f --- /dev/null +++ b/projects/plugins/jetpack/extensions/shared/styles/align.scss @@ -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; + } +} \ No newline at end of file