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-option.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-choice/item/edit.js similarity index 51% rename from projects/packages/forms/src/blocks/contact-form/components/jetpack-field-option.js rename to projects/packages/forms/src/blocks/contact-form/components/jetpack-field-choice/item/edit.js index c96230db51222..ebd2d342f869c 100644 --- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-option.js +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-choice/item/edit.js @@ -1,20 +1,21 @@ -import { RichText, useBlockProps } from '@wordpress/block-editor'; +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 { supportsParagraphSplitting } from '../../../util/block-support'; +import { useParentAttributes } from '../../../util/use-parent-attributes'; +import { useJetpackFieldStyles } from '../../use-jetpack-field-styles'; -export const JetpackFieldOptionEdit = ( { +export default function JetpackFieldChoiceItemEdit( { attributes, clientId, name, onReplace, setAttributes, -} ) => { + type, +} ) { const { removeBlock } = useDispatch( 'core/block-editor' ); const parentAttributes = useParentAttributes( clientId ); const { optionStyle } = useJetpackFieldStyles( parentAttributes ); @@ -45,27 +46,31 @@ export const JetpackFieldOptionEdit = ( { }; const supportsSplitting = supportsParagraphSplitting(); - const type = name.replace( 'jetpack/field-option-', '' ); - const classes = clsx( 'jetpack-field-option', `field-option-${ type }` ); + const classes = clsx( 'jetpack-field-option', `field-option-${ type }`, blockProps.className ); + const innerBlocksProps = useInnerBlocksProps( blockProps, { + className: classes, + style: optionStyle, + } ); return ( -
    - - setAttributes( { label: val } ) } - onRemove={ handleDelete } - onReplace={ onReplace } - preserveWhiteSpace={ false } - withoutInteractiveFormatting - { ...( supportsSplitting ? {} : { onSplit: handleSplit } ) } - /> -
    + <> +
  • + + 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-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 */