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 }
- ) }
-
- ),
- 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 }
+
+ ) }
+
+ { 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' ] }
/>