💄 Resolve the nested “button > a” structure

modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js

@@ -20,30 +20,30 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => {
 		);
 	};
 
-	const renderButton = ( button ) => {
-		const buttonElement = (
-			<Button
-				className={ button.class ? button.class : '' }
-				key={ button.text }
-				isBusy={ props.actionProps?.isBusy }
-				variant={ button.type }
-				onClick={ button.onClick }
-			>
-				{ button.text }
-			</Button>
-		);
+	const FeatureButton = ( {
+		className,
+		variant,
+		text,
+		isBusy,
+		url,
+		urls,
+		onClick,
+	} ) => {
+		const buttonProps = {
+			className,
+			isBusy,
+			variant,
+		};
 
-		// If there's a URL (either direct or in urls object), wrap in anchor tag
-		if ( button.url || button.urls ) {
-			const href = button.urls ? button.urls.live : button.url;
-			return (
-				<a href={ href } key={ button.text }>
-					{ buttonElement }
-				</a>
-			);
+		if ( url || urls ) {
+			buttonProps.href = urls ? urls.live : url;
+			buttonProps.target = '_blank';
+		}
+		if ( ! buttonProps.href ) {
+			buttonProps.onClick = onClick;
 		}
 
-		return buttonElement;
+		return <Button { ...buttonProps }>{ text }</Button>;
 	};
 
 	return (
@@ -62,7 +62,27 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => {
 			</Header>
 			<Action>
 				<div className="ppcp-r-feature-item__buttons">
-					{ props.actionProps?.buttons.map( renderButton ) }
+					{ props.actionProps?.buttons.map(
+						( {
+							class: className,
+							type,
+							text,
+							url,
+							urls,
+							onClick,
+						} ) => (
+							<FeatureButton
+								key={ text }
+								className={ className }
+								variant={ type }
+								text={ text }
+								isBusy={ props.actionProps.isBusy }
+								url={ url }
+								urls={ urls }
+								onClick={ onClick }
+							/>
+						)
+					) }
 				</div>
 			</Action>
 		</SettingsBlock>