From 0f66939aab70efbcb4c927ec48aaa8f224c902b0 Mon Sep 17 00:00:00 2001 From: Douglas Date: Thu, 28 Aug 2025 14:47:36 -0300 Subject: [PATCH 1/4] fix warning when accessing undefined option styles and classes --- .../contact-form/class-contact-form-field.php | 26 ++++++++++--------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/projects/packages/forms/src/contact-form/class-contact-form-field.php b/projects/packages/forms/src/contact-form/class-contact-form-field.php index d56b401645ff5..21b73d579408e 100644 --- a/projects/packages/forms/src/contact-form/class-contact-form-field.php +++ b/projects/packages/forms/src/contact-form/class-contact-form-field.php @@ -1930,24 +1930,26 @@ public function render_image_select_field( $id, $label, $value, $class, $require // To be able to apply the backdrop-filter for the hover effect, we need to separate the background into an outer div. // This outer div needs the color styles separately, and also the border radius to match the inner div without sticking out. - $option_outer_classes = "jetpack-input-image-option__outer {$option['classcolor']}"; + $option_outer_classes = 'jetpack-input-image-option__outer ' . ( isset( $option['classcolor'] ) ? $option['classcolor'] : '' ); if ( $is_supersized ) { $option_outer_classes .= ' is-supersized'; } $border_styles = ''; - preg_match( '/border-radius:([^;]+)/', $option['style'], $radius_match ); - preg_match( '/border-width:([^;]+)/', $option['style'], $width_match ); - - if ( ! empty( $radius_match[1] ) ) { - $radius_value = trim( $radius_match[1] ); - - if ( ! empty( $width_match[1] ) ) { - $width_value = trim( $width_match[1] ); - $border_styles = "border-radius:calc({$radius_value} + {$width_value});"; - } else { - $border_styles = "border-radius:{$radius_value};"; + if ( ! empty( $option['style'] ) ) { + preg_match( '/border-radius:([^;]+)/', $option['style'], $radius_match ); + preg_match( '/border-width:([^;]+)/', $option['style'], $width_match ); + + if ( ! empty( $radius_match[1] ) ) { + $radius_value = trim( $radius_match[1] ); + + if ( ! empty( $width_match[1] ) ) { + $width_value = trim( $width_match[1] ); + $border_styles = "border-radius:calc({$radius_value} + {$width_value});"; + } else { + $border_styles = "border-radius:{$radius_value};"; + } } } From b6fe98bd0adf1417f62abc537a7e9ad3758e1a52 Mon Sep 17 00:00:00 2001 From: Douglas Date: Thu, 28 Aug 2025 14:50:31 -0300 Subject: [PATCH 2/4] fix block inserter --- .../src/blocks/field-image-select/edit.tsx | 1 + .../src/blocks/field-image-select/editor.scss | 22 +++++++++++++ .../src/blocks/field-image-select/style.scss | 11 +------ .../src/blocks/input-image-option/edit.tsx | 33 ++++++++----------- 4 files changed, 37 insertions(+), 30 deletions(-) create mode 100644 projects/packages/forms/src/blocks/field-image-select/editor.scss diff --git a/projects/packages/forms/src/blocks/field-image-select/edit.tsx b/projects/packages/forms/src/blocks/field-image-select/edit.tsx index 41761c7df21ba..69452326f6376 100644 --- a/projects/packages/forms/src/blocks/field-image-select/edit.tsx +++ b/projects/packages/forms/src/blocks/field-image-select/edit.tsx @@ -20,6 +20,7 @@ import useAddImageOption from '../shared/hooks/use-add-image-option'; import useFormWrapper from '../shared/hooks/use-form-wrapper'; import useJetpackFieldStyles from '../shared/hooks/use-jetpack-field-styles'; import './style.scss'; +import './editor.scss'; /** * Types */ diff --git a/projects/packages/forms/src/blocks/field-image-select/editor.scss b/projects/packages/forms/src/blocks/field-image-select/editor.scss new file mode 100644 index 0000000000000..61c790191e72f --- /dev/null +++ b/projects/packages/forms/src/blocks/field-image-select/editor.scss @@ -0,0 +1,22 @@ +// Editor-only styles. + +// There is a high specificity flex rule for form fields +// that we need to override to show the image options +// in a grid. +.wp-block-jetpack-contact-form +.jetpack-contact-form +.jetpack-fieldset-image-options__wrapper +.jetpack-input-image-option { + flex-basis: unset; +} + +// There is no outer block in the editor, so we apply +// the styles directly to the input image option. +.jetpack-input-image-option { + display: flex; + width: calc(( 1 / 4 ) * 100% - var(--jetpack-field-image-options-gap) * ( 3 / 4 )); + + &.is-supersized { + width: calc(( 1 / 2 ) * 100% - var(--jetpack-field-image-options-gap) * ( 1 / 2 )); + } +} diff --git a/projects/packages/forms/src/blocks/field-image-select/style.scss b/projects/packages/forms/src/blocks/field-image-select/style.scss index 0ee8da610ff2e..4fc9489f196d2 100644 --- a/projects/packages/forms/src/blocks/field-image-select/style.scss +++ b/projects/packages/forms/src/blocks/field-image-select/style.scss @@ -1,14 +1,5 @@ @use "../shared/styles/visually-hidden" as *; -// There is a high specificity flex rule that we -// need to override in the block editor only. -.wp-block-jetpack-contact-form -.jetpack-contact-form -.jetpack-fieldset-image-options__wrapper -.jetpack-input-image-option { - flex-basis: unset; -} - // Themes target the image block directly to fit their needs, // not expecting it to be inside an image select field. .wp-block-jetpack-input-image-option @@ -33,6 +24,7 @@ figure.wp-block-image { flex-wrap: wrap; gap: var(--jetpack-field-image-options-gap); + // Frontend-only wrapper element for background color change on hover. .jetpack-input-image-option__outer { display: flex; width: calc(( 1 / 4 ) * 100% - var(--jetpack-field-image-options-gap) * ( 3 / 4 )); @@ -46,7 +38,6 @@ figure.wp-block-image { box-sizing: border-box; display: flex; flex-direction: column; - width: 100%; overflow: hidden; &:not(.wp-block):hover { diff --git a/projects/packages/forms/src/blocks/input-image-option/edit.tsx b/projects/packages/forms/src/blocks/input-image-option/edit.tsx index b35dae3041af5..ea5341c1b5402 100644 --- a/projects/packages/forms/src/blocks/input-image-option/edit.tsx +++ b/projects/packages/forms/src/blocks/input-image-option/edit.tsx @@ -73,17 +73,12 @@ export default function ImageOptionInputEdit( props ) { // Use the block's own synced attributes for styling const { blockStyle } = useJetpackFieldStyles( attributes ); - const outerClassName = useMemo( () => { - return clsx( 'jetpack-input-image-option__outer', { - 'is-supersized': isSupersized, - } ); - }, [ isSupersized ] ); - const blockProps = useBlockProps( { className: clsx( 'jetpack-field jetpack-input-image-option', { 'is-selected': isSelected || isInnerBlockSelected, 'has-image': !! imageBlockAttributes?.url, [ `is-${ selectionType }` ]: !! selectionType, + 'is-supersized': isSupersized, } ), style: blockStyle, } ); @@ -116,20 +111,18 @@ export default function ImageOptionInputEdit( props ) { ); return ( -
-
-
-
-
{ positionLetter }
- setAttributes( { label: newLabel } ) } - /> -
+
+
+
+
{ positionLetter }
+ setAttributes( { label: newLabel } ) } + />
); From fd71f9155951bf03c7b8d874331e0aaf9e11ce9a Mon Sep 17 00:00:00 2001 From: Douglas Date: Thu, 28 Aug 2025 21:18:42 -0300 Subject: [PATCH 3/4] add input styles --- .../src/blocks/field-image-select/style.scss | 31 ++++++++++++++++++- .../packages/forms/src/modules/form/view.js | 18 +++++++++-- 2 files changed, 46 insertions(+), 3 deletions(-) diff --git a/projects/packages/forms/src/blocks/field-image-select/style.scss b/projects/packages/forms/src/blocks/field-image-select/style.scss index 4fc9489f196d2..b2bd16bdb2c79 100644 --- a/projects/packages/forms/src/blocks/field-image-select/style.scss +++ b/projects/packages/forms/src/blocks/field-image-select/style.scss @@ -40,7 +40,8 @@ figure.wp-block-image { flex-direction: column; overflow: hidden; - &:not(.wp-block):hover { + &:not(.wp-block):hover, + &.is-checked { backdrop-filter: contrast(0.9) saturate(1.2); cursor: pointer; } @@ -50,6 +51,34 @@ figure.wp-block-image { overflow: hidden; position: relative; + .jetpack-input-image-option__input[type="checkbox"], + .jetpack-input-image-option__input[type="radio"] { + font-size: inherit; + padding: 0; + appearance: none; + border: solid 1px currentColor; + color: currentColor; + outline-offset: 1px; + border-radius: 4px; + + &:checked { + background-color: currentColor; + } + + &::before { + width: 0.25em; + height: 0.5em; + content: ""; + display: block; + margin-left: 50%; + margin-top: 50%; + border: solid currentColor; + border-width: 0 2px 2px 0; + transform: translate(-50%, -60%) rotate(40deg); + filter: invert(1) contrast(2) brightness(1.5); + } + } + .jetpack-input-image-option__input { position: absolute; top: 4px; diff --git a/projects/packages/forms/src/modules/form/view.js b/projects/packages/forms/src/modules/form/view.js index 0cc0af8fc1847..ae42c5ca329fd 100644 --- a/projects/packages/forms/src/modules/form/view.js +++ b/projects/packages/forms/src/modules/form/view.js @@ -305,8 +305,9 @@ const { state, actions } = store( NAMESPACE, { }, onImageOptionClick: event => { - // Find the parent container that has the data-wp-on--click attribute + // Find the block container let target = event.target; + while ( target && ! target.classList.contains( 'jetpack-input-image-option' ) ) { target = target.parentElement; } @@ -314,12 +315,25 @@ const { state, actions } = store( NAMESPACE, { if ( target ) { // Find the input inside this container const input = target.querySelector( '.jetpack-input-image-option__input' ); + if ( input ) { - // Toggle the input state if ( input.type === 'checkbox' ) { input.checked = ! input.checked; + target.classList.toggle( 'is-checked', input.checked ); } else if ( input.type === 'radio' ) { input.checked = true; + + // Find all image options in the same fieldset and toggle the checked class + const fieldset = target.closest( '.jetpack-fieldset-image-options__wrapper' ); + + if ( fieldset ) { + const imageOptions = fieldset.querySelectorAll( '.jetpack-input-image-option' ); + + imageOptions.forEach( imageOption => { + const imageOptionInput = imageOption.querySelector( 'input' ); + imageOption.classList.toggle( 'is-checked', imageOptionInput.id === input.id ); + } ); + } } // Dispatch change event to trigger any change handlers From 06451bfd436896b1ff19f17075c34c6b91b97c80 Mon Sep 17 00:00:00 2001 From: Douglas Date: Thu, 28 Aug 2025 21:20:14 -0300 Subject: [PATCH 4/4] changelog --- .../forms/changelog/update-forms-image-select-input-style | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/packages/forms/changelog/update-forms-image-select-input-style diff --git a/projects/packages/forms/changelog/update-forms-image-select-input-style b/projects/packages/forms/changelog/update-forms-image-select-input-style new file mode 100644 index 0000000000000..c5795a98dd6f1 --- /dev/null +++ b/projects/packages/forms/changelog/update-forms-image-select-input-style @@ -0,0 +1,4 @@ +Significance: patch +Type: added + +Forms: Add input styles to image select field