From b75f9a562bd42da2502aaad9460cbeada2e27078 Mon Sep 17 00:00:00 2001 From: Kevin Zoschke Date: Thu, 29 Aug 2024 10:59:21 -0400 Subject: [PATCH 1/7] Forms: Refactor Multiple Choice field --- .../src/blocks/contact-form/child-blocks.js | 74 +++------------- .../jetpack-field-multiple-choice/edit.js | 86 +++++++++++++++++++ .../jetpack-field-multiple-choice/index.js | 40 +++++++++ .../item/edit.js | 69 +++++++++++++++ .../item/index.js | 33 +++++++ .../jetpack-field-multiple-choice/save.js | 9 ++ .../forms/src/blocks/contact-form/editor.scss | 32 +++---- .../contact-form/util/get-field-label.js | 12 +++ .../contact-form/util/merge-settings.js | 25 ++++++ 9 files changed, 299 insertions(+), 81 deletions(-) create mode 100644 projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/edit.js create mode 100644 projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/index.js create mode 100644 projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/item/edit.js create mode 100644 projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/item/index.js create mode 100644 projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/save.js create mode 100644 projects/packages/forms/src/blocks/contact-form/util/get-field-label.js create mode 100644 projects/packages/forms/src/blocks/contact-form/util/merge-settings.js diff --git a/projects/packages/forms/src/blocks/contact-form/child-blocks.js b/projects/packages/forms/src/blocks/contact-form/child-blocks.js index 30db4224f093d..2136be6f3a4ba 100644 --- a/projects/packages/forms/src/blocks/contact-form/child-blocks.js +++ b/projects/packages/forms/src/blocks/contact-form/child-blocks.js @@ -1,5 +1,5 @@ import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; -import { createBlock, getBlockType } from '@wordpress/blocks'; +import { createBlock } from '@wordpress/blocks'; import { Path } from '@wordpress/components'; import { Fragment } from '@wordpress/element'; import { __, _x } from '@wordpress/i18n'; @@ -10,10 +10,14 @@ import JetpackFieldConsent from './components/jetpack-field-consent'; import JetpackDatePicker from './components/jetpack-field-datepicker'; import JetpackDropdown from './components/jetpack-field-dropdown'; import JetpackFieldMultiple from './components/jetpack-field-multiple'; +import JetpackFieldMultipleChoice from './components/jetpack-field-multiple-choice'; +import JetpackFieldMultipleChoiceItem from './components/jetpack-field-multiple-choice/item'; import { JetpackFieldOptionEdit } from './components/jetpack-field-option'; import JetpackFieldTextarea from './components/jetpack-field-textarea'; import { getIconColor } from './util/block-icons'; import { useFormWrapper } from './util/form'; +import getFieldLabel from './util/get-field-label'; +import mergeSettings from './util/merge-settings'; import renderMaterialIcon from './util/render-material-icon'; const FieldDefaults = { @@ -274,10 +278,6 @@ const multiFieldV1 = fieldType => ( { save: () => null, } ); -const getFieldLabel = ( { attributes, name: blockName } ) => { - return null === attributes.label ? getBlockType( blockName ).title : attributes.label; -}; - const editField = type => props => { useFormWrapper( props ); @@ -285,7 +285,7 @@ const editField = type => props => { props => { - - - ), - }, - }, { name: 'field-option-radio', settings: { @@ -661,44 +645,12 @@ export const childBlocks = [ }, }, { - name: 'field-checkbox-multiple', - settings: { - ...FieldDefaults, - title: __( 'Multiple Choice (Checkbox)', 'jetpack-forms' ), - keywords: [ __( 'Choose Multiple', 'jetpack-forms' ), __( 'Option', 'jetpack-forms' ) ], - description: __( - 'Offer users a list of choices, and allow them to select multiple options.', - 'jetpack-forms' - ), - icon: renderMaterialIcon( - - ), - edit: editMultiField( 'checkbox' ), - save: () => { - const blockProps = useBlockProps.save(); - - return ( -
- -
- ); - }, - attributes: { - ...FieldDefaults.attributes, - label: { - type: 'string', - default: 'Choose several options', - }, - }, - styles: [ - { name: 'list', label: 'List', isDefault: true }, - { name: 'button', label: 'Button' }, - ], - deprecated: [ multiFieldV1( 'checkbox' ) ], - }, + name: JetpackFieldMultipleChoice.name, + settings: mergeSettings( FieldDefaults, JetpackFieldMultipleChoice.settings ), + }, + { + name: JetpackFieldMultipleChoiceItem.name, + settings: mergeSettings( OptionFieldDefaults, JetpackFieldMultipleChoiceItem.settings ), }, { name: 'field-radio', diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/edit.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/edit.js new file mode 100644 index 0000000000000..08698bef08ac2 --- /dev/null +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/edit.js @@ -0,0 +1,86 @@ +import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor'; +import { compose, withInstanceId } from '@wordpress/compose'; +import { useSelect } from '@wordpress/data'; +import clsx from 'clsx'; +import { useFormStyle, useFormWrapper } from '../../util/form'; +import getFieldLabel from '../../util/get-field-label'; +import { withSharedFieldAttributes } from '../../util/with-shared-field-attributes'; +import JetpackFieldControls from '../jetpack-field-controls'; +import JetpackFieldLabel from '../jetpack-field-label'; +import { useJetpackFieldStyles } from '../use-jetpack-field-styles'; + +const JetpackFieldMultipleChoice = props => { + const { name, className, clientId, instanceId, setAttributes, isSelected, attributes } = props; + const { required, requiredText, options, id, width } = attributes; + + useFormWrapper( props ); + + const innerBlocks = useSelect( + select => select( 'core/block-editor' ).getBlock( clientId ).innerBlocks, + [ clientId ] + ); + const classes = clsx( className, 'jetpack-field jetpack-field-multiple', { + 'is-selected': isSelected, + 'has-placeholder': ( options && options.length ) || innerBlocks.length, + } ); + const formStyle = useFormStyle( clientId ); + const { blockStyle } = useJetpackFieldStyles( attributes ); + const blockProps = useBlockProps( { + id: `jetpack-field-multiple-${ instanceId }`, + style: blockStyle, + className: classes, + } ); + const innerBlocksProps = useInnerBlocksProps( blockProps, { + defaultBlock: 'jetpack/field-option-checkbox', + template: [ [ 'jetpack/field-option-checkbox' ] ], + templateInsertUpdatesSelection: true, + } ); + + return ( + <> +
+ +
    +
+ + + + ); +}; + +export default compose( + withSharedFieldAttributes( [ + 'borderRadius', + 'borderWidth', + 'labelFontSize', + 'fieldFontSize', + 'lineHeight', + 'labelLineHeight', + 'inputColor', + 'labelColor', + 'fieldBackgroundColor', + 'buttonBackgroundColor', + 'buttonBorderRadius', + 'buttonBorderWidth', + 'borderColor', + ] ), + withInstanceId +)( JetpackFieldMultipleChoice ); diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/index.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/index.js new file mode 100644 index 0000000000000..71f39750dd2c4 --- /dev/null +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/index.js @@ -0,0 +1,40 @@ +import { Path } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { getIconColor } from '../../util/block-icons'; +import renderMaterialIcon from '../../util/render-material-icon'; +import edit from './edit'; +import save from './save'; + +const name = 'field-checkbox-multiple'; +const settings = { + title: __( 'Multiple Choice (Checkbox)', 'jetpack-forms' ), + keywords: [ __( 'Choose Multiple', 'jetpack-forms' ), __( 'Option', 'jetpack-forms' ) ], + description: __( + 'Offer users a list of choices, and allow them to select multiple options.', + 'jetpack-forms' + ), + icon: renderMaterialIcon( + + ), + edit, + save, + allowedBlocks: [ 'jetpack/field-option-checkbox' ], + attributes: { + label: { + type: 'string', + default: 'Choose several options', + }, + }, + styles: [ + { name: 'list', label: 'List', isDefault: true }, + { name: 'button', label: 'Button' }, + ], +}; + +export default { + name, + settings, +}; diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/item/edit.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/item/edit.js new file mode 100644 index 0000000000000..8f0a7eddf9838 --- /dev/null +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/item/edit.js @@ -0,0 +1,69 @@ +import { RichText, useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor'; +import { createBlock } from '@wordpress/blocks'; +import { useDispatch, useSelect } from '@wordpress/data'; +import { __ } from '@wordpress/i18n'; +import clsx from 'clsx'; +import { first } from 'lodash'; +import { supportsParagraphSplitting } from '../../../util/block-support'; +import { useParentAttributes } from '../../../util/use-parent-attributes'; +import { useJetpackFieldStyles } from '../../use-jetpack-field-styles'; + +export default ( { attributes, clientId, name, onReplace, setAttributes } ) => { + const { removeBlock } = useDispatch( 'core/block-editor' ); + const parentAttributes = useParentAttributes( clientId ); + const { optionStyle } = useJetpackFieldStyles( parentAttributes ); + const siblingsCount = useSelect( + select => { + const blockEditor = select( 'core/block-editor' ); + const parentBlockId = first( blockEditor.getBlockParents( clientId, true ) ); + return blockEditor.getBlock( parentBlockId ).innerBlocks.length; + }, + [ clientId ] + ); + const blockProps = useBlockProps(); + + const handleSplit = label => { + return createBlock( name, { + ...attributes, + clientId: label && attributes.label.indexOf( label ) === 0 ? attributes.clientId : undefined, + label, + } ); + }; + + const handleDelete = () => { + if ( siblingsCount <= 1 ) { + return; + } + + removeBlock( clientId ); + }; + + const supportsSplitting = supportsParagraphSplitting(); + const classes = clsx( 'jetpack-field-option', `field-option-checkbox`, blockProps.className ); + const innerBlocksProps = useInnerBlocksProps( blockProps, { + className: classes, + style: optionStyle, + } ); + + return ( + <> +
  • + + setAttributes( { label: newLabel } ) } + preserveWhiteSpace={ false } + withoutInteractiveFormatting + onRemove={ handleDelete } + onReplace={ onReplace } + { ...( supportsSplitting ? {} : { onSplit: handleSplit } ) } + /> +
    • + + ); +}; diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/item/index.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/item/index.js new file mode 100644 index 0000000000000..3db180146dbda --- /dev/null +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/item/index.js @@ -0,0 +1,33 @@ +import { Path } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { getIconColor } from '../../../util/block-icons'; +import renderMaterialIcon from '../../../util/render-material-icon'; +import edit from './edit'; + +const name = 'field-option-checkbox'; +const settings = { + title: __( 'Multiple Choice Option', 'jetpack-forms' ), + parent: [ 'jetpack/field-checkbox-multiple' ], + icon: renderMaterialIcon( + <> + + + ), + edit, + attributes: { + placeholder: { + type: 'string', + }, + }, + supports: { + splitting: true, + }, +}; + +export default { + name, + settings, +}; diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/save.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/save.js new file mode 100644 index 0000000000000..a47f78a413c0b --- /dev/null +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/save.js @@ -0,0 +1,9 @@ +import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; + +export default () => { + return ( +
    + +
    + ); +}; diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss index 31f6d919b2456..c408451f523ee 100644 --- a/projects/packages/forms/src/blocks/contact-form/editor.scss +++ b/projects/packages/forms/src/blocks/contact-form/editor.scss @@ -41,7 +41,7 @@ } } - .block-editor-inner-blocks .block-editor-block-list__layout { + .block-editor-inner-blocks > .block-editor-block-list__layout { display: flex; flex-wrap: wrap; justify-content: flex-start; @@ -387,13 +387,6 @@ &.jetpack-field-multiple { - .block-editor-block-list__layout { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 12px; - } - &.is-style-button { .jetpack-field-option { background: var(--jetpack--contact-form--button-outline--background-color); @@ -443,7 +436,6 @@ } } - .jetpack-field-consent__checkbox + .jetpack-field-label { line-height: normal; } @@ -457,18 +449,19 @@ margin: 0 5px 0 0; } } + + .jetpack-field-option.field-option-checkbox, + .jetpack-field-option.field-option-radio, + .wp-block-jetpack-field-option-checkbox { + display: flex; + align-items: baseline; /* Align input with first label line */ - .jetpack-field-option { - &.field-option-checkbox, - &.field-option-radio { - display: flex; - align-items: baseline; /* Align input with first label line */ - - .jetpack-option__type:before { - display: block; /* display: flex causes baselines to not align */ - } + .jetpack-option__type:before { + display: block; /* display: flex causes baselines to not align */ } + } + .jetpack-field-option { &.field-option-radio .jetpack-option__type { transform: translateY(15%); /* Small offset to compensate the slightly odd perceived alignment that's due to the circular shape */ } @@ -814,8 +807,7 @@ border-top-color: transparent; } - .notched-label__label, - { + .notched-label__label { top: calc(var(--jetpack--contact-form--border-size) * -1); transform: translateY(-50%); font-size: 0.8em; diff --git a/projects/packages/forms/src/blocks/contact-form/util/get-field-label.js b/projects/packages/forms/src/blocks/contact-form/util/get-field-label.js new file mode 100644 index 0000000000000..8e949dbfebfff --- /dev/null +++ b/projects/packages/forms/src/blocks/contact-form/util/get-field-label.js @@ -0,0 +1,12 @@ +import { getBlockType } from '@wordpress/blocks'; + +/** + * Return the label of a block field from its attributes. Default to the block title. + * + * @param {object} attributes - Block attributes + * @param {string} name - Block name + * @return {string} Field label + */ +export default function getFieldLabel( attributes, name ) { + return attributes.label || getBlockType( name ).title; +} diff --git a/projects/packages/forms/src/blocks/contact-form/util/merge-settings.js b/projects/packages/forms/src/blocks/contact-form/util/merge-settings.js new file mode 100644 index 0000000000000..c54410fc810a3 --- /dev/null +++ b/projects/packages/forms/src/blocks/contact-form/util/merge-settings.js @@ -0,0 +1,25 @@ +/** + * Merge the settings (or metadata) of two blocks. The settings of the second parameter + * take precedence over the first parameter. In the case of the `supports` and a`ttributes` + * keys, a new object is created with the merged values. + * + * See https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/ + * + * @param {object} defaultSettings - Default block settings + * @param {object} settings - Block settings + * @return {object} Merged settings + */ +export default function mergeSettings( defaultSettings, settings ) { + return { + ...defaultSettings, + ...settings, + supports: { + ...defaultSettings.supports, + ...settings.supports, + }, + attributes: { + ...defaultSettings.attributes, + ...settings.attributes, + }, + }; +} From 3d54e676f2835784a21c0a6d1ac76b6f5fc8ba55 Mon Sep 17 00:00:00 2001 From: Kevin Zoschke Date: Thu, 29 Aug 2024 11:11:54 -0400 Subject: [PATCH 2/7] changelog --- projects/packages/forms/changelog/refactor-form-choice-fields | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/packages/forms/changelog/refactor-form-choice-fields diff --git a/projects/packages/forms/changelog/refactor-form-choice-fields b/projects/packages/forms/changelog/refactor-form-choice-fields new file mode 100644 index 0000000000000..5225e62b64824 --- /dev/null +++ b/projects/packages/forms/changelog/refactor-form-choice-fields @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Refactor Choice fields From f2eca3aa3c558a5787664ca3c1fa8ed37f7e0004 Mon Sep 17 00:00:00 2001 From: Kevin Zoschke Date: Thu, 29 Aug 2024 11:19:23 -0400 Subject: [PATCH 3/7] Add back deprecated version --- .../packages/forms/src/blocks/contact-form/child-blocks.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/projects/packages/forms/src/blocks/contact-form/child-blocks.js b/projects/packages/forms/src/blocks/contact-form/child-blocks.js index 2136be6f3a4ba..0323da6cade6d 100644 --- a/projects/packages/forms/src/blocks/contact-form/child-blocks.js +++ b/projects/packages/forms/src/blocks/contact-form/child-blocks.js @@ -646,7 +646,10 @@ export const childBlocks = [ }, { name: JetpackFieldMultipleChoice.name, - settings: mergeSettings( FieldDefaults, JetpackFieldMultipleChoice.settings ), + settings: mergeSettings( FieldDefaults, { + ...JetpackFieldMultipleChoice.settings, + deprecated: [ multiFieldV1( 'checkbox' ) ], + } ), }, { name: JetpackFieldMultipleChoiceItem.name, From 9e64f38e9212bae9e13f73c1d221bf87afb24e1e Mon Sep 17 00:00:00 2001 From: Kevin Zoschke Date: Tue, 3 Sep 2024 14:26:39 -0400 Subject: [PATCH 4/7] Refactor Single Choice field --- .../src/blocks/contact-form/child-blocks.js | 115 ++---------------- .../edit.js} | 64 ++++------ .../jetpack-field-choice/item/edit.js | 76 ++++++++++++ .../jetpack-field-choice/item/settings.js | 18 +++ .../jetpack-field-choice/settings.js | 6 + .../jetpack-field-multiple-choice/edit.js | 89 +------------- .../jetpack-field-multiple-choice/index.js | 6 +- .../item/edit.js | 72 +---------- .../item/index.js | 10 +- .../components/jetpack-field-option.js | 85 ------------- .../jetpack-field-single-choice/edit.js | 5 + .../jetpack-field-single-choice/index.js | 45 +++++++ .../jetpack-field-single-choice/item/edit.js | 5 + .../jetpack-field-single-choice/item/index.js | 25 ++++ .../jetpack-field-single-choice/save.js | 9 ++ .../forms/src/blocks/contact-form/editor.scss | 3 +- 16 files changed, 236 insertions(+), 397 deletions(-) rename projects/packages/forms/src/blocks/contact-form/components/{jetpack-field-multiple.js => jetpack-field-choice/edit.js} (56%) create mode 100644 projects/packages/forms/src/blocks/contact-form/components/jetpack-field-choice/item/edit.js create mode 100644 projects/packages/forms/src/blocks/contact-form/components/jetpack-field-choice/item/settings.js create mode 100644 projects/packages/forms/src/blocks/contact-form/components/jetpack-field-choice/settings.js delete mode 100644 projects/packages/forms/src/blocks/contact-form/components/jetpack-field-option.js create mode 100644 projects/packages/forms/src/blocks/contact-form/components/jetpack-field-single-choice/edit.js create mode 100644 projects/packages/forms/src/blocks/contact-form/components/jetpack-field-single-choice/index.js create mode 100644 projects/packages/forms/src/blocks/contact-form/components/jetpack-field-single-choice/item/edit.js create mode 100644 projects/packages/forms/src/blocks/contact-form/components/jetpack-field-single-choice/item/index.js create mode 100644 projects/packages/forms/src/blocks/contact-form/components/jetpack-field-single-choice/save.js diff --git a/projects/packages/forms/src/blocks/contact-form/child-blocks.js b/projects/packages/forms/src/blocks/contact-form/child-blocks.js index 0323da6cade6d..1c33e75cb7a81 100644 --- a/projects/packages/forms/src/blocks/contact-form/child-blocks.js +++ b/projects/packages/forms/src/blocks/contact-form/child-blocks.js @@ -1,4 +1,3 @@ -import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; import { createBlock } from '@wordpress/blocks'; import { Path } from '@wordpress/components'; import { Fragment } from '@wordpress/element'; @@ -9,10 +8,10 @@ import JetpackFieldCheckbox from './components/jetpack-field-checkbox'; import JetpackFieldConsent from './components/jetpack-field-consent'; import JetpackDatePicker from './components/jetpack-field-datepicker'; import JetpackDropdown from './components/jetpack-field-dropdown'; -import JetpackFieldMultiple from './components/jetpack-field-multiple'; import JetpackFieldMultipleChoice from './components/jetpack-field-multiple-choice'; import JetpackFieldMultipleChoiceItem from './components/jetpack-field-multiple-choice/item'; -import { JetpackFieldOptionEdit } from './components/jetpack-field-option'; +import JetpackFieldSingleChoice from './components/jetpack-field-single-choice'; +import JetpackFieldSingleChoiceItem from './components/jetpack-field-single-choice/item'; import JetpackFieldTextarea from './components/jetpack-field-textarea'; import { getIconColor } from './util/block-icons'; import { useFormWrapper } from './util/form'; @@ -233,26 +232,6 @@ const FieldDefaults = { example: {}, }; -const OptionFieldDefaults = { - apiVersion: 3, - category: 'contact-form', - edit: JetpackFieldOptionEdit, - attributes: { - label: { - type: 'string', - }, - fieldType: { - enum: [ 'checkbox', 'radio' ], - default: 'checkbox', - }, - }, - supports: { - reusable: false, - html: false, - splitting: true, - }, -}; - const multiFieldV1 = fieldType => ( { attributes: { ...FieldDefaults.attributes, @@ -299,27 +278,6 @@ const editField = type => props => { ); }; -const editMultiField = type => props => { - useFormWrapper( props ); - - return ( - - ); -}; - const EditTextarea = props => { useFormWrapper( props ); @@ -631,19 +589,13 @@ export const childBlocks = [ }, }, { - name: 'field-option-radio', - settings: { - ...OptionFieldDefaults, - parent: [ 'jetpack/field-radio' ], - title: __( 'Single Choice Option', 'jetpack-forms' ), - icon: renderMaterialIcon( - - ), - }, + name: JetpackFieldSingleChoice.name, + settings: mergeSettings( FieldDefaults, { + ...JetpackFieldSingleChoice.settings, + deprecated: [ multiFieldV1( 'radio' ) ], + } ), }, + JetpackFieldSingleChoiceItem, { name: JetpackFieldMultipleChoice.name, settings: mergeSettings( FieldDefaults, { @@ -651,56 +603,7 @@ export const childBlocks = [ deprecated: [ multiFieldV1( 'checkbox' ) ], } ), }, - { - name: JetpackFieldMultipleChoiceItem.name, - settings: mergeSettings( OptionFieldDefaults, JetpackFieldMultipleChoiceItem.settings ), - }, - { - name: 'field-radio', - settings: { - ...FieldDefaults, - title: __( 'Single Choice (Radio)', 'jetpack-forms' ), - keywords: [ - __( 'Choose', 'jetpack-forms' ), - __( 'Select', 'jetpack-forms' ), - __( 'Option', 'jetpack-forms' ), - ], - description: __( - 'Offer users a list of choices, and allow them to select a single option.', - 'jetpack-forms' - ), - icon: renderMaterialIcon( - - - - ), - edit: editMultiField( 'radio' ), - save: () => { - const blockProps = useBlockProps.save(); - - return ( -
    - -
    - ); - }, - attributes: { - ...FieldDefaults.attributes, - label: { - type: 'string', - default: 'Choose one option', - }, - }, - styles: [ - { name: 'list', label: 'List', isDefault: true }, - { name: 'button', label: 'Button' }, - ], - deprecated: [ multiFieldV1( 'radio' ) ], - }, - }, + JetpackFieldMultipleChoiceItem, { name: 'field-select', settings: { diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-choice/edit.js similarity index 56% rename from projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple.js rename to projects/packages/forms/src/blocks/contact-form/components/jetpack-field-choice/edit.js index 26b23af3f40e8..b9d0e2d25acda 100644 --- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple.js +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-choice/edit.js @@ -1,50 +1,40 @@ -import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; +import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor'; import { compose, withInstanceId } from '@wordpress/compose'; import { useSelect } from '@wordpress/data'; import clsx from 'clsx'; -import { useFormStyle } from '../util/form'; -import { withSharedFieldAttributes } from '../util/with-shared-field-attributes'; -import JetpackFieldControls from './jetpack-field-controls'; -import JetpackFieldLabel from './jetpack-field-label'; -import { useJetpackFieldStyles } from './use-jetpack-field-styles'; +import { useFormStyle, useFormWrapper } from '../../util/form'; +import getFieldLabel from '../../util/get-field-label'; +import { withSharedFieldAttributes } from '../../util/with-shared-field-attributes'; +import JetpackFieldControls from '../jetpack-field-controls'; +import JetpackFieldLabel from '../jetpack-field-label'; +import { useJetpackFieldStyles } from '../use-jetpack-field-styles'; -const ALLOWED_BLOCKS = [ 'jetpack/field-option' ]; +const JetpackFieldChoiceEdit = props => { + const { name, className, clientId, instanceId, setAttributes, isSelected, attributes, type } = + props; + const { required, requiredText, options, id, width } = attributes; -function JetpackFieldMultiple( props ) { - const { - className, - clientId, - id, - type, - instanceId, - required, - requiredText, - label, - setAttributes, - isSelected, - width, - options, - attributes, - } = props; - const formStyle = useFormStyle( clientId ); + useFormWrapper( props ); const innerBlocks = useSelect( - select => { - return select( 'core/block-editor' ).getBlock( clientId ).innerBlocks; - }, + select => select( 'core/block-editor' ).getBlock( clientId ).innerBlocks, [ clientId ] ); - const classes = clsx( className, 'jetpack-field jetpack-field-multiple', { 'is-selected': isSelected, 'has-placeholder': ( options && options.length ) || innerBlocks.length, } ); - + const formStyle = useFormStyle( clientId ); const { blockStyle } = useJetpackFieldStyles( attributes ); const blockProps = useBlockProps( { id: `jetpack-field-multiple-${ instanceId }`, - className: classes, style: blockStyle, + className: classes, + } ); + const innerBlocksProps = useInnerBlocksProps( blockProps, { + defaultBlock: `jetpack/field-option-${ type }`, + template: [ [ `jetpack/field-option-${ type }` ] ], + templateInsertUpdatesSelection: true, } ); return ( @@ -53,19 +43,13 @@ function JetpackFieldMultiple( props ) { -
    - -
    +
      ); -} +}; export default compose( withSharedFieldAttributes( [ @@ -100,4 +84,4 @@ export default compose( 'borderColor', ] ), withInstanceId -)( JetpackFieldMultiple ); +)( JetpackFieldChoiceEdit ); diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-choice/item/edit.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-choice/item/edit.js new file mode 100644 index 0000000000000..ebd2d342f869c --- /dev/null +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-choice/item/edit.js @@ -0,0 +1,76 @@ +import { RichText, useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor'; +import { createBlock } from '@wordpress/blocks'; +import { useDispatch, useSelect } from '@wordpress/data'; +import { __ } from '@wordpress/i18n'; +import clsx from 'clsx'; +import { first } from 'lodash'; +import { supportsParagraphSplitting } from '../../../util/block-support'; +import { useParentAttributes } from '../../../util/use-parent-attributes'; +import { useJetpackFieldStyles } from '../../use-jetpack-field-styles'; + +export default function JetpackFieldChoiceItemEdit( { + attributes, + clientId, + name, + onReplace, + setAttributes, + type, +} ) { + const { removeBlock } = useDispatch( 'core/block-editor' ); + const parentAttributes = useParentAttributes( clientId ); + const { optionStyle } = useJetpackFieldStyles( parentAttributes ); + const siblingsCount = useSelect( + select => { + const blockEditor = select( 'core/block-editor' ); + const parentBlockId = first( blockEditor.getBlockParents( clientId, true ) ); + return blockEditor.getBlock( parentBlockId ).innerBlocks.length; + }, + [ clientId ] + ); + const blockProps = useBlockProps(); + + const handleSplit = label => { + return createBlock( name, { + ...attributes, + clientId: label && attributes.label.indexOf( label ) === 0 ? attributes.clientId : undefined, + label, + } ); + }; + + const handleDelete = () => { + if ( siblingsCount <= 1 ) { + return; + } + + removeBlock( clientId ); + }; + + const supportsSplitting = supportsParagraphSplitting(); + const classes = clsx( 'jetpack-field-option', `field-option-${ type }`, blockProps.className ); + const innerBlocksProps = useInnerBlocksProps( blockProps, { + className: classes, + style: optionStyle, + } ); + + return ( + <> +
    • + + setAttributes( { label: newLabel } ) } + preserveWhiteSpace={ false } + withoutInteractiveFormatting + onRemove={ handleDelete } + onReplace={ onReplace } + { ...( supportsSplitting ? {} : { onSplit: handleSplit } ) } + /> +
      • + + ); +} diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-choice/item/settings.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-choice/item/settings.js new file mode 100644 index 0000000000000..8793ef3060dc5 --- /dev/null +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-choice/item/settings.js @@ -0,0 +1,18 @@ +export default { + apiVersion: 3, + category: 'contact-form', + attributes: { + label: { + type: 'string', + }, + fieldType: { + enum: [ 'checkbox', 'radio' ], + default: 'checkbox', + }, + }, + supports: { + reusable: false, + html: false, + splitting: true, + }, +}; diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-choice/settings.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-choice/settings.js new file mode 100644 index 0000000000000..10e3dbc39f70f --- /dev/null +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-choice/settings.js @@ -0,0 +1,6 @@ +export default { + styles: [ + { name: 'list', label: 'List', isDefault: true }, + { name: 'button', label: 'Button' }, + ], +}; diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/edit.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/edit.js index 08698bef08ac2..0706e979b097b 100644 --- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/edit.js +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/edit.js @@ -1,86 +1,5 @@ -import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor'; -import { compose, withInstanceId } from '@wordpress/compose'; -import { useSelect } from '@wordpress/data'; -import clsx from 'clsx'; -import { useFormStyle, useFormWrapper } from '../../util/form'; -import getFieldLabel from '../../util/get-field-label'; -import { withSharedFieldAttributes } from '../../util/with-shared-field-attributes'; -import JetpackFieldControls from '../jetpack-field-controls'; -import JetpackFieldLabel from '../jetpack-field-label'; -import { useJetpackFieldStyles } from '../use-jetpack-field-styles'; +import JetpackFieldChoiceEdit from '../jetpack-field-choice/edit'; -const JetpackFieldMultipleChoice = props => { - const { name, className, clientId, instanceId, setAttributes, isSelected, attributes } = props; - const { required, requiredText, options, id, width } = attributes; - - useFormWrapper( props ); - - const innerBlocks = useSelect( - select => select( 'core/block-editor' ).getBlock( clientId ).innerBlocks, - [ clientId ] - ); - const classes = clsx( className, 'jetpack-field jetpack-field-multiple', { - 'is-selected': isSelected, - 'has-placeholder': ( options && options.length ) || innerBlocks.length, - } ); - const formStyle = useFormStyle( clientId ); - const { blockStyle } = useJetpackFieldStyles( attributes ); - const blockProps = useBlockProps( { - id: `jetpack-field-multiple-${ instanceId }`, - style: blockStyle, - className: classes, - } ); - const innerBlocksProps = useInnerBlocksProps( blockProps, { - defaultBlock: 'jetpack/field-option-checkbox', - template: [ [ 'jetpack/field-option-checkbox' ] ], - templateInsertUpdatesSelection: true, - } ); - - return ( - <> -
      - -
        -
      - - - - ); -}; - -export default compose( - withSharedFieldAttributes( [ - 'borderRadius', - 'borderWidth', - 'labelFontSize', - 'fieldFontSize', - 'lineHeight', - 'labelLineHeight', - 'inputColor', - 'labelColor', - 'fieldBackgroundColor', - 'buttonBackgroundColor', - 'buttonBorderRadius', - 'buttonBorderWidth', - 'borderColor', - ] ), - withInstanceId -)( JetpackFieldMultipleChoice ); +export default function JetpackFieldMultipleChoiceEdit( props ) { + return ; +} diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/index.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/index.js index 71f39750dd2c4..acd80063a4dea 100644 --- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/index.js +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/index.js @@ -2,11 +2,13 @@ import { Path } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { getIconColor } from '../../util/block-icons'; import renderMaterialIcon from '../../util/render-material-icon'; +import choiceSettings from '../jetpack-field-choice/settings'; import edit from './edit'; import save from './save'; const name = 'field-checkbox-multiple'; const settings = { + ...choiceSettings, title: __( 'Multiple Choice (Checkbox)', 'jetpack-forms' ), keywords: [ __( 'Choose Multiple', 'jetpack-forms' ), __( 'Option', 'jetpack-forms' ) ], description: __( @@ -28,10 +30,6 @@ const settings = { default: 'Choose several options', }, }, - styles: [ - { name: 'list', label: 'List', isDefault: true }, - { name: 'button', label: 'Button' }, - ], }; export default { diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/item/edit.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/item/edit.js index 8f0a7eddf9838..af18638c78dac 100644 --- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/item/edit.js +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/item/edit.js @@ -1,69 +1,5 @@ -import { RichText, useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor'; -import { createBlock } from '@wordpress/blocks'; -import { useDispatch, useSelect } from '@wordpress/data'; -import { __ } from '@wordpress/i18n'; -import clsx from 'clsx'; -import { first } from 'lodash'; -import { supportsParagraphSplitting } from '../../../util/block-support'; -import { useParentAttributes } from '../../../util/use-parent-attributes'; -import { useJetpackFieldStyles } from '../../use-jetpack-field-styles'; +import JetpackFieldChoiceItemEdit from '../../jetpack-field-choice/item/edit'; -export default ( { attributes, clientId, name, onReplace, setAttributes } ) => { - const { removeBlock } = useDispatch( 'core/block-editor' ); - const parentAttributes = useParentAttributes( clientId ); - const { optionStyle } = useJetpackFieldStyles( parentAttributes ); - const siblingsCount = useSelect( - select => { - const blockEditor = select( 'core/block-editor' ); - const parentBlockId = first( blockEditor.getBlockParents( clientId, true ) ); - return blockEditor.getBlock( parentBlockId ).innerBlocks.length; - }, - [ clientId ] - ); - const blockProps = useBlockProps(); - - const handleSplit = label => { - return createBlock( name, { - ...attributes, - clientId: label && attributes.label.indexOf( label ) === 0 ? attributes.clientId : undefined, - label, - } ); - }; - - const handleDelete = () => { - if ( siblingsCount <= 1 ) { - return; - } - - removeBlock( clientId ); - }; - - const supportsSplitting = supportsParagraphSplitting(); - const classes = clsx( 'jetpack-field-option', `field-option-checkbox`, blockProps.className ); - const innerBlocksProps = useInnerBlocksProps( blockProps, { - className: classes, - style: optionStyle, - } ); - - return ( - <> -
    • - - setAttributes( { label: newLabel } ) } - preserveWhiteSpace={ false } - withoutInteractiveFormatting - onRemove={ handleDelete } - onReplace={ onReplace } - { ...( supportsSplitting ? {} : { onSplit: handleSplit } ) } - /> -
      • - - ); -}; +export default function JetpackFieldMultipleChoiceItemEdit( props ) { + return ; +} diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/item/index.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/item/index.js index 3db180146dbda..0b7d33e3f512b 100644 --- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/item/index.js +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/item/index.js @@ -2,10 +2,12 @@ import { Path } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { getIconColor } from '../../../util/block-icons'; import renderMaterialIcon from '../../../util/render-material-icon'; +import choiceItemSettings from '../../jetpack-field-choice/item/settings'; import edit from './edit'; const name = 'field-option-checkbox'; const settings = { + ...choiceItemSettings, title: __( 'Multiple Choice Option', 'jetpack-forms' ), parent: [ 'jetpack/field-checkbox-multiple' ], icon: renderMaterialIcon( @@ -17,14 +19,6 @@ const settings = { ), edit, - attributes: { - placeholder: { - type: 'string', - }, - }, - supports: { - splitting: true, - }, }; export default { diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-option.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-option.js deleted file mode 100644 index 9ba0c4477d69c..0000000000000 --- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-option.js +++ /dev/null @@ -1,85 +0,0 @@ -import { RichText, useBlockProps } from '@wordpress/block-editor'; -import { createBlock } from '@wordpress/blocks'; -import { useDispatch, useSelect } from '@wordpress/data'; -import { useEffect } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; -import clsx from 'clsx'; -import { first } from 'lodash'; -import { supportsParagraphSplitting } from '../util/block-support'; -import { moveCaretToEnd } from '../util/caret'; -import { useParentAttributes } from '../util/use-parent-attributes'; -import { useJetpackFieldStyles } from './use-jetpack-field-styles'; - -export const JetpackFieldOptionEdit = ( { - attributes, - clientId, - name, - onReplace, - setAttributes, -} ) => { - const { removeBlock } = useDispatch( 'core/block-editor' ); - const parentAttributes = useParentAttributes( clientId ); - const { optionStyle } = useJetpackFieldStyles( parentAttributes ); - const siblingsCount = useSelect( - select => { - const blockEditor = select( 'core/block-editor' ); - const parentBlockId = first( blockEditor.getBlockParents( clientId, true ) ); - return blockEditor.getBlock( parentBlockId ).innerBlocks.length; - }, - [ clientId ] - ); - const blockProps = useBlockProps(); - - const handleSplit = label => { - return createBlock( name, { - ...attributes, - clientId: label && attributes.label.indexOf( label ) === 0 ? attributes.clientId : undefined, - label, - } ); - }; - - const handleDelete = () => { - if ( siblingsCount <= 1 ) { - return; - } - - removeBlock( clientId ); - }; - - const handleFocus = e => moveCaretToEnd( e.target ); - - const supportsSplitting = supportsParagraphSplitting(); - const type = name.replace( 'jetpack/field-option-', '' ); - const classes = clsx( 'jetpack-field-option', `field-option-${ type }` ); - - useEffect( () => { - const input = document.getElementById( blockProps.id ); - - input?.addEventListener( 'focus', handleFocus ); - - return () => { - input?.removeEventListener( 'focus', handleFocus ); - }; - }, [ blockProps.id ] ); - - return ( -
      - - setAttributes( { label: val } ) } - onRemove={ handleDelete } - onReplace={ onReplace } - preserveWhiteSpace={ false } - withoutInteractiveFormatting - { ...( supportsSplitting ? {} : { onSplit: handleSplit } ) } - /> -
      - ); -}; diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-single-choice/edit.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-single-choice/edit.js new file mode 100644 index 0000000000000..6b2f028410ebe --- /dev/null +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-single-choice/edit.js @@ -0,0 +1,5 @@ +import JetpackFieldChoiceEdit from '../jetpack-field-choice/edit'; + +export default function JetpackFieldSingleChoiceEdit( props ) { + return ; +} diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-single-choice/index.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-single-choice/index.js new file mode 100644 index 0000000000000..f4fc2d7312448 --- /dev/null +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-single-choice/index.js @@ -0,0 +1,45 @@ +import { Path } from '@wordpress/components'; +import { Fragment } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { getIconColor } from '../../util/block-icons'; +import renderMaterialIcon from '../../util/render-material-icon'; +import choiceSettings from '../jetpack-field-choice/settings'; +import edit from './edit'; +import save from './save'; + +const name = 'field-radio'; +const settings = { + ...choiceSettings, + title: __( 'Single Choice (Radio)', 'jetpack-forms' ), + keywords: [ + __( 'Choose', 'jetpack-forms' ), + __( 'Select', 'jetpack-forms' ), + __( 'Option', 'jetpack-forms' ), + ], + description: __( + 'Offer users a list of choices, and allow them to select a single option.', + 'jetpack-forms' + ), + icon: renderMaterialIcon( + + + + ), + edit, + save, + allowedBlocks: [ 'jetpack/field-option-radio' ], + attributes: { + label: { + type: 'string', + default: 'Choose one option', + }, + }, +}; + +export default { + name, + settings, +}; diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-single-choice/item/edit.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-single-choice/item/edit.js new file mode 100644 index 0000000000000..6cf5cba7a07e1 --- /dev/null +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-single-choice/item/edit.js @@ -0,0 +1,5 @@ +import JetpackFieldChoiceItemEdit from '../../jetpack-field-choice/item/edit'; + +export default function JetpackFieldSingleChoiceItemEdit( props ) { + return ; +} diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-single-choice/item/index.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-single-choice/item/index.js new file mode 100644 index 0000000000000..2959346acdf79 --- /dev/null +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-single-choice/item/index.js @@ -0,0 +1,25 @@ +import { Path } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { getIconColor } from '../../../util/block-icons'; +import renderMaterialIcon from '../../../util/render-material-icon'; +import choiceItemSettings from '../../jetpack-field-choice/item/settings'; +import edit from './edit'; + +const name = 'field-option-radio'; +const settings = { + ...choiceItemSettings, + title: __( 'Single Choice Option', 'jetpack-forms' ), + parent: [ 'jetpack/field-radio' ], + icon: renderMaterialIcon( + + ), + edit, +}; + +export default { + name, + settings, +}; diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-single-choice/save.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-single-choice/save.js new file mode 100644 index 0000000000000..a47f78a413c0b --- /dev/null +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-single-choice/save.js @@ -0,0 +1,9 @@ +import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; + +export default () => { + return ( +
      + +
      + ); +}; diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss index c408451f523ee..c0d315f899073 100644 --- a/projects/packages/forms/src/blocks/contact-form/editor.scss +++ b/projects/packages/forms/src/blocks/contact-form/editor.scss @@ -452,7 +452,8 @@ .jetpack-field-option.field-option-checkbox, .jetpack-field-option.field-option-radio, - .wp-block-jetpack-field-option-checkbox { + .wp-block-jetpack-field-option-checkbox, + .wp-block-jetpack-field-option-radio { display: flex; align-items: baseline; /* Align input with first label line */ From 2533b5d9f011247e33fdecce5eb1889160a33e76 Mon Sep 17 00:00:00 2001 From: Kevin Zoschke Date: Tue, 3 Sep 2024 15:56:26 -0400 Subject: [PATCH 5/7] Fix wrong prop value for Multiple field --- .../components/jetpack-field-multiple-choice/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/edit.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/edit.js index 0706e979b097b..b539795b66a22 100644 --- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/edit.js +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/edit.js @@ -1,5 +1,5 @@ import JetpackFieldChoiceEdit from '../jetpack-field-choice/edit'; export default function JetpackFieldMultipleChoiceEdit( props ) { - return ; + return ; } From 43942622a1f99323a0baab0d18aa80e6f2625c5c Mon Sep 17 00:00:00 2001 From: Kevin Zoschke Date: Thu, 12 Sep 2024 14:57:44 -0400 Subject: [PATCH 6/7] Fix Button style --- .../forms/src/blocks/contact-form/editor.scss | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss index c0d315f899073..f69b780dbcf02 100644 --- a/projects/packages/forms/src/blocks/contact-form/editor.scss +++ b/projects/packages/forms/src/blocks/contact-form/editor.scss @@ -388,7 +388,9 @@ &.jetpack-field-multiple { &.is-style-button { - .jetpack-field-option { + .jetpack-field-option, + .wp-block-jetpack-field-option-checkbox, + .wp-block-jetpack-field-option-radio { background: var(--jetpack--contact-form--button-outline--background-color); color: var(--jetpack--contact-form--button-outline--text-color); border: var(--jetpack--contact-form--button-outline--border); @@ -412,6 +414,12 @@ color: var(--jetpack--contact-form--button-outline--color); } } + + .wp-block-jetpack-field-option-radio { + .jetpack-option__type { + display: none; + } + } } .jetpack-field-multiple__add-option { @@ -493,7 +501,8 @@ padding-left: 0; display: flex; flex-direction: column; - gap: 0.25em; + align-items: flex-start; + gap: 12px; flex: 1; &:empty { From 157fb2937b97f0c825bee3b542b03281ce9aa0a1 Mon Sep 17 00:00:00 2001 From: Kev Date: Mon, 16 Sep 2024 10:16:10 -0400 Subject: [PATCH 7/7] Update projects/packages/forms/src/blocks/contact-form/util/merge-settings.js Co-authored-by: Karen Attfield --- .../forms/src/blocks/contact-form/util/merge-settings.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/packages/forms/src/blocks/contact-form/util/merge-settings.js b/projects/packages/forms/src/blocks/contact-form/util/merge-settings.js index c54410fc810a3..5758ed700fe5b 100644 --- a/projects/packages/forms/src/blocks/contact-form/util/merge-settings.js +++ b/projects/packages/forms/src/blocks/contact-form/util/merge-settings.js @@ -1,6 +1,6 @@ /** * Merge the settings (or metadata) of two blocks. The settings of the second parameter - * take precedence over the first parameter. In the case of the `supports` and a`ttributes` + * take precedence over the first parameter. In the case of the `supports` and `attributes` * keys, a new object is created with the merged values. * * See https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/