From f6b6a1879cb5f9062bdaca4eb4ad675cc5f3df51 Mon Sep 17 00:00:00 2001 From: Kevin Zoschke Date: Thu, 16 Jan 2025 15:23:10 -0500 Subject: [PATCH 1/8] Jetpack button: fix width and alignment setting --- .../forms/src/blocks/contact-form/editor.scss | 4 ++ .../forms/src/contact-form/css/grunion.css | 25 ++++++++-- .../extensions/blocks/button/button.php | 8 +-- .../jetpack/extensions/blocks/button/edit.js | 13 ++--- .../extensions/blocks/button/editor.scss | 50 ++++++------------- 5 files changed, 46 insertions(+), 54 deletions(-) diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss index 9c6c49186d55e..9e412e2fe5053 100644 --- a/projects/packages/forms/src/blocks/contact-form/editor.scss +++ b/projects/packages/forms/src/blocks/contact-form/editor.scss @@ -52,6 +52,10 @@ flex: 0 0 100%; margin: 0; + &.wp-block-jetpack-button { + flex-basis: auto; + } + &.jetpack-field__width-25, &.jetpack-field__width-50, &.jetpack-field__width-75 { 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/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..1797688123b84 100644 --- a/projects/plugins/jetpack/extensions/blocks/button/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/button/editor.scss @@ -1,42 +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; - &.is-style-outline > .wp-block-button__link { - background-color: transparent; - border: solid 1px currentColor; - color: currentColor; - } -} + &.aligncenter { + display: block; -.wp-block[data-align="center"] { - .wp-block-jetpack-button { - display: flex; - justify-content: center; + margin-left: auto; + margin-right: auto; } -} -.wp-block[data-align="right"] { - .wp-block-jetpack-button { - display: flex; - justify-content: flex-end; - } -} + &.alignleft { + display: block; -div[data-type="jetpack/button"]:not([data-align='left']):not([data-align='right']) { - width: 100%; -} + margin-right: auto; + } -div[data-type="jetpack/button"][data-align] { - z-index: 1; - width: 100%; + &.alignright { + display: block; - .wp-block > div { - max-width: 100%; + margin-left: auto; } -} - -.wp-block-jetpack-button, -.wp-block-button__link.has-custom-width { - max-width: 100%; -} +} \ No newline at end of file From 5ae4e2d285901d82e1dc56fd9d26ada9b6e81094 Mon Sep 17 00:00:00 2001 From: Kevin Zoschke Date: Thu, 16 Jan 2025 15:25:29 -0500 Subject: [PATCH 2/8] changelog --- projects/packages/forms/changelog/fix-jetpack-button-styling | 4 ++++ projects/plugins/jetpack/changelog/fix-jetpack-button-styling | 4 ++++ 2 files changed, 8 insertions(+) create mode 100644 projects/packages/forms/changelog/fix-jetpack-button-styling create mode 100644 projects/plugins/jetpack/changelog/fix-jetpack-button-styling 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/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 From 131e43caabb33f23836e77d02b4f4a9cade3b749 Mon Sep 17 00:00:00 2001 From: Kevin Zoschke Date: Fri, 17 Jan 2025 15:48:28 -0500 Subject: [PATCH 3/8] Update styles of components using jetpack/button --- .../extensions/blocks/calendly/view.scss | 19 +++++++++++++++ .../extensions/blocks/eventbrite/style.scss | 23 +++++++++++++++++++ .../extensions/blocks/mailchimp/view.scss | 19 +++++++++++++++ .../blocks/premium-content/editor.scss | 6 +++++ .../blocks/premium-content/view.scss | 2 ++ .../blocks/recurring-payments/editor.scss | 1 + 6 files changed, 70 insertions(+) diff --git a/projects/plugins/jetpack/extensions/blocks/calendly/view.scss b/projects/plugins/jetpack/extensions/blocks/calendly/view.scss index c5218066cbc18..2be865a8c4de8 100644 --- a/projects/plugins/jetpack/extensions/blocks/calendly/view.scss +++ b/projects/plugins/jetpack/extensions/blocks/calendly/view.scss @@ -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; + } } diff --git a/projects/plugins/jetpack/extensions/blocks/eventbrite/style.scss b/projects/plugins/jetpack/extensions/blocks/eventbrite/style.scss index baf34bb5e25e8..d134bb39143b1 100644 --- a/projects/plugins/jetpack/extensions/blocks/eventbrite/style.scss +++ b/projects/plugins/jetpack/extensions/blocks/eventbrite/style.scss @@ -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; + } + } +} \ 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..27f475a75c38f 100644 --- a/projects/plugins/jetpack/extensions/blocks/mailchimp/view.scss +++ b/projects/plugins/jetpack/extensions/blocks/mailchimp/view.scss @@ -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 { diff --git a/projects/plugins/jetpack/extensions/blocks/premium-content/editor.scss b/projects/plugins/jetpack/extensions/blocks/premium-content/editor.scss index 6dccbac43bfb9..231e73753c67e 100644 --- a/projects/plugins/jetpack/extensions/blocks/premium-content/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/premium-content/editor.scss @@ -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; @@ -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; 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..b92dab132041a 100644 --- a/projects/plugins/jetpack/extensions/blocks/recurring-payments/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/recurring-payments/editor.scss @@ -116,6 +116,7 @@ } .wp-block[data-type='jetpack/button'] { + width: 100%; margin-top: 0; margin-bottom: 0; } From e26c2e23156ae8aac594709e3ef663155e951ab5 Mon Sep 17 00:00:00 2001 From: Kevin Zoschke Date: Mon, 20 Jan 2025 16:49:23 -0500 Subject: [PATCH 4/8] Move align styles in mixin --- .../forms/src/blocks/contact-form/editor.scss | 3 ++- .../extensions/blocks/button/editor.scss | 22 +++--------------- .../extensions/blocks/button/view.scss | 12 +++++++++- .../extensions/blocks/calendly/view.scss | 23 ++++--------------- .../extensions/blocks/eventbrite/editor.scss | 6 +++++ .../extensions/blocks/eventbrite/style.scss | 20 ++-------------- .../extensions/blocks/mailchimp/view.scss | 22 +++--------------- .../blocks/premium-content/editor.scss | 4 ---- .../blocks/recurring-payments/view.scss | 6 +++++ .../extensions/shared/styles/align.scss | 20 ++++++++++++++++ 10 files changed, 57 insertions(+), 81 deletions(-) create mode 100644 projects/plugins/jetpack/extensions/shared/styles/align.scss diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss index 9e412e2fe5053..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,8 @@ .wp-block { flex: 0 0 100%; - margin: 0; + margin-top: 0; + margin-bottom: 0; &.wp-block-jetpack-button { flex-basis: auto; diff --git a/projects/plugins/jetpack/extensions/blocks/button/editor.scss b/projects/plugins/jetpack/extensions/blocks/button/editor.scss index 1797688123b84..fe846b0116258 100644 --- a/projects/plugins/jetpack/extensions/blocks/button/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/button/editor.scss @@ -1,24 +1,8 @@ +@import "../../shared/styles/align"; + .wp-block-jetpack-button { + @include align-block; max-width: 100%; width: fit-content; margin: 0; - - &.aligncenter { - display: block; - - margin-left: auto; - margin-right: auto; - } - - &.alignleft { - display: block; - - margin-right: auto; - } - - &.alignright { - display: block; - - 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..28a10150b9b06 100644 --- a/projects/plugins/jetpack/extensions/blocks/button/view.scss +++ b/projects/plugins/jetpack/extensions/blocks/button/view.scss @@ -1,14 +1,24 @@ +@import "../../shared/styles/align"; + .amp-wp-article .wp-block-jetpack-button { color: #ffffff; } .wp-block-jetpack-button { +<<<<<<< HEAD &.is-style-outline > .wp-block-button__link { background-color: transparent; border: solid 1px currentColor; color: currentColor; } +======= + @include align-block; + max-width: 100%; + width: fit-content; + margin: 0; + +>>>>>>> 27b3cb7cc9 (Move align styles in mixin) &: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 2be865a8c4de8..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,24 +18,7 @@ } .wp-block-jetpack-calendly .wp-block-jetpack-button { - color: #ffffff; - - &.aligncenter { - display: block; - - margin-left: auto; - margin-right: auto; - } + @include align-block; - &.alignleft { - display: block; - - margin-right: auto; - } - - &.alignright { - display: block; - - margin-left: auto; - } + 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 d134bb39143b1..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; @@ -68,23 +69,6 @@ .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; - } + @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 27f475a75c38f..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,26 +10,9 @@ } .wp-block-jetpack-button, p { - margin-bottom: 1em; - - &.aligncenter { - display: block; - - margin-left: auto; - margin-right: auto; - } - - &.alignleft { - display: block; + @include align-block; - margin-right: auto; - } - - &.alignright { - display: block; - - margin-left: auto; - } + margin-bottom: 1em; } input { diff --git a/projects/plugins/jetpack/extensions/blocks/premium-content/editor.scss b/projects/plugins/jetpack/extensions/blocks/premium-content/editor.scss index 231e73753c67e..af1b73dc8df85 100644 --- a/projects/plugins/jetpack/extensions/blocks/premium-content/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/premium-content/editor.scss @@ -1,9 +1,5 @@ @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; 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 From d8e29f2220680d6799c0df7858f72ebebcfb3b9c Mon Sep 17 00:00:00 2001 From: Kevin Zoschke Date: Wed, 29 Jan 2025 17:58:19 -0500 Subject: [PATCH 5/8] Add align support for older themes --- .../extensions/blocks/button/editor.scss | 26 ++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/projects/plugins/jetpack/extensions/blocks/button/editor.scss b/projects/plugins/jetpack/extensions/blocks/button/editor.scss index fe846b0116258..384f6cd398d69 100644 --- a/projects/plugins/jetpack/extensions/blocks/button/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/button/editor.scss @@ -1,8 +1,32 @@ @import "../../shared/styles/align"; -.wp-block-jetpack-button { +// 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; +} + +// 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] > .wp-block-jetpack-button { + display: block; +} + +.wp-block[data-align="center"] > .wp-block-jetpack-button { + margin-left: auto; + margin-right: auto; +} + +.wp-block[data-align="left"] > .wp-block-jetpack-button { + margin-right: auto; +} + +.wp-block[data-align="right"] > .wp-block-jetpack-button { + margin-left: auto; } \ No newline at end of file From 96f630484c726bd630186ad779f560f14f5a8557 Mon Sep 17 00:00:00 2001 From: Kevin Zoschke Date: Wed, 29 Jan 2025 18:03:48 -0500 Subject: [PATCH 6/8] Add missing code after rebase --- .../plugins/jetpack/extensions/blocks/button/editor.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/projects/plugins/jetpack/extensions/blocks/button/editor.scss b/projects/plugins/jetpack/extensions/blocks/button/editor.scss index 384f6cd398d69..124d209d529b0 100644 --- a/projects/plugins/jetpack/extensions/blocks/button/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/button/editor.scss @@ -6,6 +6,12 @@ max-width: 100%; width: fit-content; margin: 0; + + &.is-style-outline > .wp-block-button__link { + background-color: transparent; + border: solid 1px currentColor; + color: currentColor; + } } // Support align feature for older themes From 5f703611a6f683720af63d69d8ac957dd9ebadda Mon Sep 17 00:00:00 2001 From: Kevin Zoschke Date: Fri, 31 Jan 2025 12:51:54 -0500 Subject: [PATCH 7/8] Fix unmerged conflict --- .../jetpack/extensions/blocks/button/view.scss | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/projects/plugins/jetpack/extensions/blocks/button/view.scss b/projects/plugins/jetpack/extensions/blocks/button/view.scss index 28a10150b9b06..41394986df71f 100644 --- a/projects/plugins/jetpack/extensions/blocks/button/view.scss +++ b/projects/plugins/jetpack/extensions/blocks/button/view.scss @@ -5,19 +5,17 @@ } .wp-block-jetpack-button { -<<<<<<< HEAD + @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; } -======= - @include align-block; - max-width: 100%; - width: fit-content; - margin: 0; ->>>>>>> 27b3cb7cc9 (Move align styles in mixin) &:not(.is-style-outline) button { border: none; } From c4b781a1245a8ee4144b5f3cee6b71beff1e9c02 Mon Sep 17 00:00:00 2001 From: Kevin Zoschke Date: Fri, 31 Jan 2025 19:24:31 -0500 Subject: [PATCH 8/8] Fix alignment for payment buttons --- .../jetpack/extensions/blocks/recurring-payments/editor.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/plugins/jetpack/extensions/blocks/recurring-payments/editor.scss b/projects/plugins/jetpack/extensions/blocks/recurring-payments/editor.scss index b92dab132041a..d33e4b30ac743 100644 --- a/projects/plugins/jetpack/extensions/blocks/recurring-payments/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/recurring-payments/editor.scss @@ -115,6 +115,7 @@ display: block; } + .wp-block-jetpack-button, .wp-block[data-type='jetpack/button'] { width: 100%; margin-top: 0;