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 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..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,5 +1,4 @@ -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'; @@ -9,11 +8,15 @@ 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 { JetpackFieldOptionEdit } from './components/jetpack-field-option'; +import JetpackFieldMultipleChoice from './components/jetpack-field-multiple-choice'; +import JetpackFieldMultipleChoiceItem from './components/jetpack-field-multiple-choice/item'; +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'; +import getFieldLabel from './util/get-field-label'; +import mergeSettings from './util/merge-settings'; import renderMaterialIcon from './util/render-material-icon'; const FieldDefaults = { @@ -229,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, @@ -274,10 +257,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 +264,7 @@ const editField = type => props => { props => { ); }; -const editMultiField = type => props => { - useFormWrapper( props ); - - return ( - - ); -}; - const EditTextarea = props => { useFormWrapper( props ); @@ -631,121 +589,21 @@ export const childBlocks = [ }, }, { - name: 'field-option-checkbox', - settings: { - ...OptionFieldDefaults, - parent: [ 'jetpack/field-checkbox-multiple' ], - title: __( 'Multiple Choice Option', 'jetpack-forms' ), - icon: renderMaterialIcon( - <> - - - ), - }, - }, - { - 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: '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' }, - ], + name: JetpackFieldMultipleChoice.name, + settings: mergeSettings( FieldDefaults, { + ...JetpackFieldMultipleChoice.settings, deprecated: [ multiFieldV1( 'checkbox' ) ], - }, - }, - { - 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 new file mode 100644 index 0000000000000..b539795b66a22 --- /dev/null +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/edit.js @@ -0,0 +1,5 @@ +import JetpackFieldChoiceEdit from '../jetpack-field-choice/edit'; + +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 new file mode 100644 index 0000000000000..acd80063a4dea --- /dev/null +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/index.js @@ -0,0 +1,38 @@ +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: __( + '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', + }, + }, +}; + +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..af18638c78dac --- /dev/null +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/item/edit.js @@ -0,0 +1,5 @@ +import JetpackFieldChoiceItemEdit from '../../jetpack-field-choice/item/edit'; + +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 new file mode 100644 index 0000000000000..0b7d33e3f512b --- /dev/null +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple-choice/item/index.js @@ -0,0 +1,27 @@ +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( + <> + + + ), + edit, +}; + +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/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 31f6d919b2456..f69b780dbcf02 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,15 +387,10 @@ &.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 { + .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); @@ -419,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 { @@ -443,7 +444,6 @@ } } - .jetpack-field-consent__checkbox + .jetpack-field-label { line-height: normal; } @@ -457,18 +457,20 @@ margin: 0 5px 0 0; } } + + .jetpack-field-option.field-option-checkbox, + .jetpack-field-option.field-option-radio, + .wp-block-jetpack-field-option-checkbox, + .wp-block-jetpack-field-option-radio { + 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 */ } @@ -499,7 +501,8 @@ padding-left: 0; display: flex; flex-direction: column; - gap: 0.25em; + align-items: flex-start; + gap: 12px; flex: 1; &:empty { @@ -814,8 +817,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..5758ed700fe5b --- /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 `attributes` + * 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, + }, + }; +}