feat(content-gating): update content gates UI

includes/content-gate/class-content-gate.php

@@ -32,6 +32,13 @@ class Content_Gate {
 	 */
 	private static $is_gated = false;
 
+	/**
+	 * Valid gate post statuses.
+	 *
+	 * @var array
+	 */
+	public static $valid_gate_post_statuses = [ 'publish', 'draft', 'pending', 'future', 'private', 'trash' ];
+
 	/**
 	 * Initialize hooks and filters.
 	 */
@@ -764,13 +771,13 @@ public static function update_gate_settings( $id, $gate ) {
 			return new \WP_Error( 'newspack_content_gate_not_found', __( 'Gate not found.', 'newspack' ) );
 		}
 
-		// Update title and description.
+		// Update title, priority, and status.
 		wp_update_post(
 			[
-				'ID'           => $id,
-				'post_title'   => $gate['title'],
-				'post_excerpt' => $gate['description'],
-				'meta_input'   => [
+				'ID'          => $id,
+				'post_title'  => $gate['title'],
+				'post_status' => isset( $gate['status'] ) ? $gate['status'] : $post->post_status,
+				'meta_input'  => [
 					'gate_priority' => $gate['priority'],
 				],
 			]
@@ -788,18 +795,33 @@ public static function update_gate_settings( $id, $gate ) {
 		return self::get_gate( $id );
 	}
 
+	/**
+	 * Get the valid gate post statuses.
+	 *
+	 * @return array
+	 */
+	public static function get_post_statuses() {
+		/**
+		 * Filters the valid post statuses for content gates.
+		 *
+		 * @param array $valid_post_statuses Valid gate post statuses.
+		 */
+		return apply_filters( 'newspack_content_gate_valid_post_statuses', self::$valid_gate_post_statuses );
+	}
+
 	/**
 	 * Get all gates.
 	 *
-	 * @param string $post_type Post type.
+	 * @param string          $post_type Post type.
+	 * @param string|string[] $post_status Post status or array of statuses to fetch.
 	 *
 	 * @return array Array of content gates.
 	 */
-	public static function get_gates( $post_type = self::GATE_CPT ) {
+	public static function get_gates( $post_type = self::GATE_CPT, $post_status = null ) {
 		$posts = get_posts(
 			[
 				'post_type'      => $post_type,
-				'post_status'    => [ 'publish', 'draft', 'trash', 'pending', 'future' ],
+				'post_status'    => $post_status ? $post_status : self::get_post_statuses(),
 				'posts_per_page' => -1,
 			]
 		);

includes/content-gate/class-content-restriction-control.php

@@ -105,7 +105,7 @@ public static function get_post_gates( $post_id = null ) {
 			return [];
 		}
 
-		$gates = Content_Gate::get_gates();
+		$gates = Content_Gate::get_gates( Content_Gate::GATE_CPT, 'publish' );
 		if ( empty( $gates ) ) {
 			return [];
 		}

includes/wizards/audience/class-audience-content-gates.php

@@ -217,6 +217,7 @@ public function register_api_endpoints() {
 						'properties'        => [
 							'title'         => [ 'type' => 'string' ],
 							'description'   => [ 'type' => 'string' ],
+							'status'        => [ 'type' => 'string' ],
 							'metering'      => [
 								'type'       => 'object',
 								'properties' => [
@@ -269,6 +270,7 @@ public function sanitize_gate( $gate ) {
 			'access_rules'  => $this->sanitize_rules( $gate['access_rules'] ),
 			'content_rules' => $this->sanitize_rules( $gate['content_rules'], 'content' ),
 			'priority'      => intval( $gate['priority'] ),
+			'status'        => $this->sanitize_status( $gate['status'], $gate['id'] ),
 		];
 	}
 
@@ -394,6 +396,23 @@ public function sanitize_content_rule( $content_rule ) {
 		];
 	}
 
+	/**
+	 * Sanitize the gate post status.
+	 *
+	 * @param string $status Post status.
+	 * @param int    $gate_id Gate ID.
+	 *
+	 * @return string The sanitized post status.
+	 */
+	public function sanitize_status( $status, $gate_id ) {
+		$sanitized = sanitize_text_field( $status );
+		$valid = in_array( $sanitized, Content_Gate::get_post_statuses(), true );
+		if ( ! $valid ) {
+			$sanitized = $gate_id ? get_post_status( $gate_id ) : 'draft';
+		}
+		return $sanitized;
+	}
+
 	/**
 	 * Get the gates.
 	 *
@@ -434,7 +453,12 @@ public function delete_gate( $request ) {
 		if ( Content_Gate::GATE_CPT !== $gate->post_type ) {
 			return new \WP_Error( 'invalid_gate_type', __( 'Invalid gate type.', 'newspack-plugin' ), [ 'status' => 400 ] );
 		}
-		wp_delete_post( $id, true );
+		$force = $gate->post_status === 'trash';
+		if ( $force ) {
+			wp_delete_post( $id, $force );
+		} else {
+			wp_trash_post( $id );
+		}
 		return rest_ensure_response( true );
 	}
 

packages/components/src/action-card/action-card.d.ts

@@ -6,6 +6,7 @@ export interface ActionCardProps {
 	description?: string | React.ReactNode;
 	actionText?: React.ReactNode | string | null;
 	badge?: string;
+	badgeLevel?: 'success' | 'info' | 'warning' | 'error';
 	className?: string;
 	indent?: string;
 	notification?: string | Error | null;
@@ -14,7 +15,7 @@ export interface ActionCardProps {
 	disabled?: boolean | string;
 	hasGreyHeader?: boolean;
 	toggleChecked?: boolean;
-	toggleOnChange?: ( a: boolean ) => void;
+	toggleOnChange?: (a: boolean) => void;
 	togglePosition?: 'leading' | 'trailing';
 	actionContent?: boolean | React.ReactNode | null;
 	error?: Error | string | null;
@@ -34,8 +35,9 @@ export interface ActionCardProps {
 	noMargin?: boolean;
 	collapse?: boolean;
 	expandable?: boolean;
+	isExpanded?: boolean;
 	draggable?: boolean;
 	dragIndex?: number;
-	onDragCallback?: ( index: number ) => void;
-	dragWrapperRef?: React.MutableRefObject< HTMLDivElement | null >;
+	onDragCallback?: (index: number) => void;
+	dragWrapperRef?: React.MutableRefObject<HTMLDivElement | null>;
 }

packages/components/src/action-card/index.js

@@ -66,18 +66,25 @@ const ActionCard = ( {
 	noBorder,
 	isPending,
 	expandable = false,
+	isExpanded,
 	isButtonEnabled = false,
 	// Draggable props. All are required to enable drag sorting.
 	draggable = false,
 	dragIndex,
 	dragWrapperRef,
 	onDragCallback,
 } ) => {
-	const [ expanded, setExpanded ] = useState( false );
+	const [ expanded, setExpanded ] = useState( Boolean( isExpanded ) );
 	const [ dragging, setDragging ] = useState( false );
 	const [ targetIndex, setTargetIndex ] = useState( null );
 	const [ dragRef, setDragRef ] = useState( null );
 
+	useEffect( () => {
+		if ( typeof isExpanded === 'boolean' ) {
+			setExpanded( isExpanded );
+		}
+	}, [ isExpanded ] );
+
 	useEffect( () => {
 		if ( dragWrapperRef && ! dragRef ) {
 			setDragRef( dragWrapperRef );

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

@@ -444,12 +444,20 @@
 		}
 
 		> .newspack-action-card__region-children {
-			border-top: 1px solid wp-colors.$gray-100;
+			border-top: 1px solid wp-colors.$gray-300;
 			padding-top: 24px;
 
 			+ .newspack-action-card__region-children {
 				border-top: none;
 			}
+
+			> * + * {
+				margin-top: 24px !important;
+			}
+
+			.newspack-action-card__region-children:has(> div:not(:empty)) {
+				margin-top: 16px;
+			}
 		}
 
 		&.is-medium .newspack-action-card__region-children {
@@ -479,6 +487,11 @@
 			margin-left: 8px;
 		}
 	}
+
+	hr {
+		background: wp-colors.$gray-100;
+		margin: 0;
+	}
 }
 
 .newspack-card {

packages/components/src/form-token-field/style.scss

@@ -7,11 +7,6 @@
 .newspack-form-token-field {
 	width: 100%;
 
-	.components-form-token-field__input-container {
-		padding-bottom: 1px;
-		padding-top: 1px;
-	}
-
 	// Help
 
 	&__help {

packages/components/src/grid/style.scss

@@ -13,7 +13,7 @@
 
 	// No Margin
 	&--no-margin {
-		margin: 0;
+		margin: 0 !important;
 	}
 
 	// Gutter 0

src/wizards/audience/views/content-gates/access-rule-control.tsx

@@ -26,9 +26,10 @@ export default function AccessRuleControl( { slug, value, onChange }: GateAccess
 				value={ rule.options.filter( o => value.includes( o.value ) ).map( o => o.label ) }
 				onChange={ ( items: string[] ) => onChange( rule.options?.filter( o => items.includes( o.label ) ).map( o => o.value ) ?? [] ) }
 				suggestions={ rule.options.map( o => o.label ) }
-				__experimentalExpandOnFocus={ true }
+				__experimentalExpandOnFocus
+				__next40pxDefaultSize
 			/>
 		);
 	}
-	return <TextControl label={ rule.name } value={ value as string } onChange={ onChange } help={ rule.description } />;
+	return <TextControl label={ rule.name } value={ value as string } onChange={ onChange } help={ rule.description } __next40pxDefaultSize />;
 }

src/wizards/audience/views/content-gates/access-rules.tsx

@@ -3,7 +3,6 @@
  */
 import { __ } from '@wordpress/i18n';
 import { DropdownMenu } from '@wordpress/components';
-import { shield } from '@wordpress/icons';
 import { useCallback, useMemo } from '@wordpress/element';
 
 /**
@@ -72,12 +71,14 @@ export default function AccessRules( { rules, onChange }: AccessRulesProps ) {
 			noBorder={ true }
 			noMargin={ true }
 			actionContent={
-				<DropdownMenu icon={ shield } text={ __( 'Manage Rules', 'newspack-plugin' ) } label={ __( 'Manage Rules', 'newspack-plugin' ) }>
-					{ () => <RulesChoices choices={ choices } onSelect={ handleToggle } value={ rules.map( r => r.slug ) } /> }
-				</DropdownMenu>
+				<div style={ { background: 'var(--newspack-ui-color-neutral-5)' } }>
+					<DropdownMenu icon={ false } text={ __( 'Manage Rules', 'newspack-plugin' ) } label={ __( 'Manage Rules', 'newspack-plugin' ) }>
+						{ () => <RulesChoices choices={ choices } onSelect={ handleToggle } value={ rules.map( r => r.slug ) } /> }
+					</DropdownMenu>
+				</div>
 			}
 		>
-			<Grid columns={ Math.min( 3, rules.length ) } gutter={ 32 }>
+			<Grid columns={ 2 } gutter={ 32 } noMargin={ true }>
 				{ rules.map( ( rule: GateAccessRule ) => (
 					<AccessRuleControl key={ rule.slug } slug={ rule.slug } value={ rule.value } onChange={ handleChange( rule.slug ) } />
 				) ) }