diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss index 551770bb1..493eebe33 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss @@ -97,15 +97,6 @@ margin-left: 5px; } - .ppcp-r-settings-block__action { - display: flex; - align-items: center; - - .components-flex { - row-gap: 0; - } - } - + .ppcp-r-settings-block:not(.no-gap) { margin-top: var(--block-separator-gap, 32px); padding-top: var(--block-separator-gap, 32px); diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/InputSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/InputSettingsBlock.js index 3470e8b60..f43069973 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/InputSettingsBlock.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/InputSettingsBlock.js @@ -1,4 +1,5 @@ import { TextControl } from '@wordpress/components'; + import SettingsBlock from './SettingsBlock'; import { Title, @@ -7,55 +8,40 @@ import { SupplementaryLabel, } from './SettingsBlockElements'; -const DEFAULT_ELEMENT_ORDER = [ 'title', 'action', 'description' ]; - -const ELEMENT_RENDERERS = { - title: ( { title, supplementaryLabel } ) => ( - - { title } - { supplementaryLabel && ( - <SupplementaryLabel>{ supplementaryLabel }</SupplementaryLabel> - ) } - - ), - action: ( { actionProps } ) => ( - - - actionProps?.callback( actionProps?.key, newValue ) - } - /> - - ), - description: ( { description } ) => ( - { description } - ), -}; - const InputSettingsBlock = ( { title, description, supplementaryLabel, - order = DEFAULT_ELEMENT_ORDER, + showDescriptionFirst = false, + actionProps = {}, ...props -} ) => ( - - { order.map( ( elementKey ) => { - const RenderElement = ELEMENT_RENDERERS[ elementKey ]; - return RenderElement ? ( - { + const TheDescription = { description }; + + return ( + + + { title } + { supplementaryLabel && ( + <SupplementaryLabel> + { supplementaryLabel } + </SupplementaryLabel> + ) } + + { showDescriptionFirst && TheDescription } + + + actionProps.callback( actionProps.key, newValue ) + } /> - ) : null; - } ) } - -); + + { ! showDescriptionFirst && TheDescription } + + ); +}; export default InputSettingsBlock; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/PaypalSettings.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/PaypalSettings.js index f8d68881e..bc6ffc8c8 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/PaypalSettings.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/PaypalSettings.js @@ -87,6 +87,7 @@ const PaypalSettings = ( { updateFormValue, settings } ) => { 'What business name to show to your buyers during checkout and on receipts.', 'woocommerce-paypal-payments' ) } + showDescriptionFirst={ true } actionProps={ { value: settings.brandName, callback: updateFormValue, @@ -96,7 +97,6 @@ const PaypalSettings = ( { updateFormValue, settings } ) => { 'woocommerce-paypal-payments' ), } } - order={ [ 'title', 'description', 'action' ] } /> { "The dynamic text used to construct the statement descriptor that appears on a payer's card statement. Applies to PayPal and Credit Card transactions. Max value of 22 characters.", 'woocommerce-paypal-payments' ) } + showDescriptionFirst={ true } actionProps={ { value: settings.softDescriptor, callback: updateFormValue, @@ -114,7 +115,6 @@ const PaypalSettings = ( { updateFormValue, settings } ) => { 'woocommerce-paypal-payments' ), } } - order={ [ 'title', 'description', 'action' ] } />