💄 Improvement UX for the “tagline” option

modules/ppcp-settings/resources/css/components/screens/settings/_tab-styling.scss

@@ -36,6 +36,11 @@
 		&.payment-methods {
 			--block-separator-gap: 28px;
 		}
+
+		// It has no header; adjusts the gap to the control right above the tagline.
+		&.tagline {
+			--block-header-gap: 24px;
+		}
 	}
 
 	/* The settings-panel (left side) */

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonLayout.js

@@ -2,6 +2,7 @@ import { __ } from '@wordpress/i18n';
 
 import { StylingHooks } from '../../../../../../data';
 import { RadiobuttonStylingSection } from '../Layout';
+import { Tagline } from './index';
 
 const SectionButtonLayout = ( { location } ) => {
 	const { isAvailable, layout, setLayout, choices } =
@@ -12,13 +13,16 @@ const SectionButtonLayout = ( { location } ) => {
 	}
 
 	return (
-		<RadiobuttonStylingSection
-			className="button-layout"
-			title={ __( 'Button Layout', 'woocommerce-paypal-payments' ) }
-			options={ choices }
-			selected={ layout }
-			onChange={ setLayout }
-		/>
+		<>
+			<RadiobuttonStylingSection
+				className="button-layout"
+				title={ __( 'Button Layout', 'woocommerce-paypal-payments' ) }
+				options={ choices }
+				selected={ layout }
+				onChange={ setLayout }
+			/>
+			<Tagline location={ location } />
+		</>
 	);
 };
 

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/TagLine.js

@@ -13,8 +13,8 @@ const SectionTagline = ( { location } ) => {
 
 	return (
 		<CheckboxStylingSection
-			title={ __( 'Tagline', 'woocommerce-paypal-payments' ) }
 			className="tagline"
+			separatorAndGap={ false }
 			options={ choices }
 			value={ tagline }
 			onChange={ setTagline }

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/SettingsPanel.js

@@ -6,7 +6,6 @@ import {
 	ButtonShape,
 	ButtonLabel,
 	ButtonColor,
-	Tagline,
 } from './Content';
 
 const SettingsPanel = () => {
@@ -23,7 +22,6 @@ const SettingsPanel = () => {
 			<ButtonShape location={ location } />
 			<ButtonLabel location={ location } />
 			<ButtonColor location={ location } />
-			<Tagline location={ location } />
 		</div>
 	);
 };

modules/ppcp-settings/resources/js/data/styling/hooks.js

@@ -156,7 +156,10 @@ export const useTaglineProps = ( location ) => {
 		choices: [
 			{
 				value: 'tagline',
-				label: __( 'Enable Tagline', 'woocommerce-paypal-payments' ),
+				label: __(
+					'Show tagline below buttons',
+					'woocommerce-paypal-payments'
+				),
 			},
 		],
 		isAvailable: