feat(access-control): tweaks to Access Control UI components

packages/components/src/card-settings-group/index.tsx

@@ -12,6 +12,7 @@ const CardSettingsGroup = ( {
 	actionType = 'none',
 	children,
 	icon = null,
+	headerAction,
 	title = '',
 	description = '',
 	isActive = false,
@@ -21,6 +22,16 @@ const CardSettingsGroup = ( {
 	children?: React.ReactNode;
 	icon?: React.ReactNode;
 	title: string;
+	headerAction?: {
+		label: string;
+		icon?: React.ReactNode;
+		href?: string;
+		onClick?: () => void;
+		disabled?: boolean;
+		destructive?: boolean;
+		tone?: 'primary' | 'secondary' | 'tertiary' | 'link';
+		variant?: 'primary' | 'secondary' | 'tertiary' | 'link';
+	};
 	description?: string;
 	isActive?: boolean;
 	onEnable?: () => void;
@@ -38,7 +49,8 @@ const CardSettingsGroup = ( {
 						{ description && <p>{ description }</p> }
 					</>
 				),
-				onHeaderClick: onEnable,
+				headerAction,
+				onToggle: onEnable,
 				icon,
 				iconBackgroundColor: true,
 				isActive,

packages/components/src/card/core-card.js

@@ -7,7 +7,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Button, Card as CardWrapper, CardHeader, CardFooter, DropdownMenu, MenuItem, ToggleControl } from '@wordpress/components';
+import { Button, Card as CardWrapper, CardHeader, CardFooter, DropdownMenu, MenuGroup, MenuItem, ToggleControl } from '@wordpress/components';
 import { Icon, chevronDown, chevronRight, chevronUp, dragHandle, moreVertical } from '@wordpress/icons';
 
 /**
@@ -28,6 +28,7 @@ const CoreCard = ( {
 	className,
 	footer,
 	header,
+	headerAction,
 	headerStyle,
 	childrenStyle,
 	footerStyle,
@@ -140,20 +141,58 @@ const CoreCard = ( {
 					{ actions?.length > 0 && (
 						<DropdownMenu icon={ moreVertical } label={ __( 'More', 'newspack-plugin' ) }>
 							{ () =>
-								actions.map( ( action, index ) => (
-									<MenuItem
-										key={ index }
-										icon={ action.icon }
-										onClick={ action.action }
-										disabled={ action.disabled || false }
-										isDestructive={ action.destructive || false }
-									>
-										{ action.label }
-									</MenuItem>
-								) )
+								actions.map( ( action, index ) => {
+									// Actions can be an array of sub-actions, which are rendered within a MenuGroup.
+									if ( Array.isArray( action ) ) {
+										return (
+											<MenuGroup key={ index }>
+												{ action.map( ( subAction, i ) => {
+													return (
+														<MenuItem
+															key={ i }
+															icon={ subAction.icon }
+															onClick={ subAction.action }
+															href={ subAction.href }
+															disabled={ subAction.disabled || false }
+															isDestructive={ subAction.destructive || false }
+														>
+															{ subAction.label }
+														</MenuItem>
+													);
+												} ) }
+											</MenuGroup>
+										);
+									}
+									return (
+										<MenuItem
+											key={ index }
+											icon={ action.icon }
+											onClick={ action.action }
+											href={ action.href }
+											disabled={ action.disabled || false }
+											isDestructive={ action.destructive || false }
+										>
+											{ action.label }
+										</MenuItem>
+									);
+								} )
 							}
 						</DropdownMenu>
 					) }
+					{ headerAction && (
+						<Button
+							className="newspack-card--core__header__action"
+							icon={ headerAction.icon }
+							href={ headerAction.href }
+							disabled={ headerAction.disabled || false }
+							isDestructive={ headerAction.destructive || false }
+							onClick={ headerAction.onClick }
+							tone={ headerAction.tone || 'primary' }
+							variant={ headerAction.variant || 'secondary' }
+						>
+							{ headerAction.label }
+						</Button>
+					) }
 				</CardHeader>
 			) }
 			{ children && (

packages/components/src/card/style-core.scss

@@ -52,6 +52,7 @@
 	}
 	&__header {
 		color: wp-colors.$gray-700;
+		flex-wrap: wrap;
 		position: relative;
 		.newspack-card--core__action {
 			margin: 0;
@@ -79,6 +80,11 @@
 			right: 0;
 			top: 0;
 		}
+		&__action {
+			background-color: wp-colors.$white;
+			flex: 1 100%;
+			justify-content: center !important;
+		}
 	}
 	&__header--is-draggable {
 		padding-left: 80px !important;
@@ -161,7 +167,7 @@
 	&__is-active:not(.newspack-card--core__is-draggable) {
 		border-color: var(--wp-admin-theme-color);
 		box-shadow: var(--wp-admin-theme-color) 0 0 0 1px;
-		button.newspack-card--core__header {
+		.newspack-card--core__header {
 			background-color: rgba( var(--wp-admin-theme-color--rgb), 0.04 );
 			color: var(--wp-admin-theme-color);
 			h1,
@@ -178,7 +184,7 @@
 		}
 
 		&.newspack-card--core__has-children {
-			button.newspack-card--core__header {
+			.newspack-card--core__header {
 				border-bottom-left-radius: 0;
 				border-bottom-right-radius: 0;
 			}
@@ -214,7 +220,7 @@
 		}
 	}
 	&.is-destructive {
-		button.newspack-card--core__header {
+		.newspack-card--core__header {
 			h1,
 			h2,
 			h3,

src/wizards/audience/views/content-gates/content-gate-settings.tsx

@@ -9,7 +9,7 @@ import { createInterpolateElement, useRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { Badge, Button, Card, Grid, Router, useConfirmDialog } from '../../../../../packages/components/src';
+import { Badge, Card, Grid, Router, useConfirmDialog } from '../../../../../packages/components/src';
 import { useWizardData } from '../../../../../packages/components/src/wizard/store/utils';
 import { useWizardApiFetch } from '../../../hooks/use-wizard-api-fetch';
 import { WIZARD_STORE_NAMESPACE } from '../../../../../packages/components/src/wizard/store';
@@ -118,6 +118,46 @@ export default function ContentGateSettings( {
 		);
 	};
 
+	const actions = [
+		[
+			{
+				label: __( 'Edit', 'newspack-plugin' ),
+				action: () => history.push( `/edit/${ gate.id }` ),
+				disabled: isFetching,
+			},
+			{
+				label: gate.status !== 'publish' ? __( 'Activate', 'newspack-plugin' ) : __( 'Deactivate', 'newspack-plugin' ),
+				action: () => updateStatus.current?.( gate.status === 'publish' ? 'draft' : 'publish' ),
+				disabled: isFetching,
+			},
+			{
+				label: __( 'Delete', 'newspack-plugin' ),
+				action: () => requestDelete( handleDelete ),
+				disabled: isFetching,
+				destructive: true,
+			},
+		],
+	];
+	const hasRegistrationLayout = ! isNewsletter && gate.registration?.active && gate.registration.gate_layout_id;
+	const hasCustomAccessLayout =
+		! isNewsletter && gate.custom_access?.active && gate.custom_access.access_rules?.length > 0 && gate.custom_access.gate_layout_id;
+	const layoutOptions: { label: string; action?: () => void; href?: string }[] = [];
+	if ( hasRegistrationLayout ) {
+		layoutOptions.push( {
+			label: __( 'Edit registered access layout', 'newspack-plugin' ),
+			href: getEditGateLayoutUrl( gate.id, 'registration' ),
+		} );
+	}
+	if ( hasCustomAccessLayout ) {
+		layoutOptions.push( {
+			label: __( 'Edit paid access layout', 'newspack-plugin' ),
+			href: getEditGateLayoutUrl( gate.id, 'custom_access' ),
+		} );
+	}
+	if ( layoutOptions.length > 0 ) {
+		actions.push( layoutOptions );
+	}
+
 	return (
 		<>
 			{ deleteDialog }
@@ -137,24 +177,7 @@ export default function ContentGateSettings( {
 							</h3>
 						</>
 					),
-					actions: [
-						{
-							label: __( 'Edit', 'newspack-plugin' ),
-							action: () => history.push( `/edit/${ gate.id }` ),
-							disabled: isFetching,
-						},
-						{
-							label: gate.status !== 'publish' ? __( 'Activate', 'newspack-plugin' ) : __( 'Deactivate', 'newspack-plugin' ),
-							action: () => updateStatus.current?.( gate.status === 'publish' ? 'draft' : 'publish' ),
-							disabled: isFetching,
-						},
-						{
-							label: __( 'Delete', 'newspack-plugin' ),
-							action: () => requestDelete( handleDelete ),
-							disabled: isFetching,
-							destructive: true,
-						},
-					],
+					actions,
 				} }
 			>
 				<CardBody>
@@ -198,11 +221,6 @@ export default function ContentGateSettings( {
 									</p>
 								) }
 								{ ! gate.registration?.active && <p>{ __( 'N/A', 'newspack-plugin' ) }</p> }
-								{ gate.registration?.active && gate.registration.gate_layout_id && (
-									<Button variant="secondary" href={ getEditGateLayoutUrl( gate.id, 'registration' ) } size="compact">
-										{ __( 'Customize registered access layout', 'newspack-plugin' ) }
-									</Button>
-								) }
 							</div>
 						) }
 						<div>
@@ -242,14 +260,6 @@ export default function ContentGateSettings( {
 							{ ( ! gate.custom_access?.active || gate.custom_access.access_rules?.length === 0 ) && (
 								<p>{ __( 'N/A', 'newspack-plugin' ) }</p>
 							) }
-							{ gate.custom_access?.active &&
-								gate.custom_access.access_rules?.length > 0 &&
-								gate.custom_access.gate_layout_id &&
-								! isNewsletter && (
-									<Button variant="secondary" href={ getEditGateLayoutUrl( gate.id, 'custom_access' ) } size="compact">
-										{ __( 'Customize paid access layout', 'newspack-plugin' ) }
-									</Button>
-								) }
 						</div>
 					</Grid>
 				</CardBody>

src/wizards/audience/views/content-gates/edit/custom-access.tsx

@@ -42,15 +42,15 @@ export default function CustomAccess( { customAccess, onChange, isNewsletter = f
 
 	return (
 		<>
-			<AccessRules rules={ currentRules } onChange={ handleRulesChange } />
 			{ ! isNewsletter && (
 				<>
-					<CardDivider />
 					<CardBody size="small">
 						<Metering metering={ customAccess.metering } onChange={ ( metering: Metering ) => handleChange( { metering } ) } />
 					</CardBody>
+					<CardDivider />
 				</>
 			) }
+			<AccessRules rules={ currentRules } onChange={ handleRulesChange } />
 		</>
 	);
 }