feat(content-gating): enable content rule exclusions (#4346)

* refactor(content-gating): separate Newspack & Memberships content gate CPTs

* fix: update Content Gates UI

* fix: allow Memberships sidebar to appear in editor

* feat: allow content gates to be trashed and restored

* feat: implement gate status controls

* perf: only fetch published gates on the front-end

* test: add unit tests for content gate methods

* feat: content rule exclusion logic and tests

* fix: remove unnecessary props from ContentRuleControlTaxonomy

* fix: remove unnecessary meta fields and taxonomy support

* test: add unit test for post with no categories

Author: dkoo

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

@@ -121,9 +121,10 @@ public static function get_post_gates( $post_id = null ) {
 			}
 
 			foreach ( $content_rules as $content_rule ) {
+				$is_exclusion = isset( $content_rule['exclusion'] ) && $content_rule['exclusion'];
 				if ( $content_rule['slug'] === 'post_types' ) {
 					$post_type = get_post_type( $post_id );
-					if ( ! in_array( $post_type, $content_rule['value'], true ) ) {
+					if ( $is_exclusion ? in_array( $post_type, $content_rule['value'], true ) : ! in_array( $post_type, $content_rule['value'], true ) ) {
 						continue 2;
 					}
 				} else {
@@ -132,10 +133,10 @@ public static function get_post_gates( $post_id = null ) {
 						continue 2;
 					}
 					$terms = wp_get_post_terms( $post_id, $content_rule['slug'], [ 'fields' => 'ids' ] );
-					if ( ! $terms || is_wp_error( $terms ) ) {
+					if ( ( ! $is_exclusion && ! $terms ) || is_wp_error( $terms ) ) {
 						continue 2;
 					}
-					if ( empty( array_intersect( $terms, $content_rule['value'] ) ) ) {
+					if ( $is_exclusion ? ! empty( array_intersect( $terms, $content_rule['value'] ) ) : empty( array_intersect( $terms, $content_rule['value'] ) ) ) {
 						continue 2;
 					}
 				}

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

@@ -242,8 +242,9 @@ public function register_api_endpoints() {
 								'items' => [
 									'type'       => 'object',
 									'properties' => [
-										'slug'  => [ 'type' => 'string' ],
-										'value' => [ 'type' => 'mixed' ],
+										'slug'      => [ 'type' => 'string' ],
+										'value'     => [ 'type' => 'mixed' ],
+										'exclusion' => [ 'type' => 'boolean' ],
 									],
 								],
 							],
@@ -388,12 +389,18 @@ public function sanitize_content_rule( $content_rule ) {
 			}
 		}
 
-		$value = array_values( array_filter( array_map( 'sanitize_text_field', $content_rule['value'] ) ) );
+		$value     = array_values( array_filter( array_map( 'sanitize_text_field', $content_rule['value'] ) ) );
+		$exclusion = isset( $content_rule['exclusion'] ) ? boolval( $content_rule['exclusion'] ) : false;
 
-		return [
+		$sanitized_rule = [
 			'slug'  => $slug,
 			'value' => $value,
 		];
+		if ( $exclusion ) {
+			$sanitized_rule['exclusion'] = $exclusion;
+		}
+
+		return $sanitized_rule;
 	}
 
 	/**

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

@@ -14,18 +14,16 @@ import { CheckboxControl } from '@wordpress/components';
 import ContentRuleControlTaxonomy from './content-rule-control-taxonomy';
 import { FormTokenField } from '../../../../../packages/components/src';
 
-const noop = () => {};
-
-export default function ContentRuleControl( { slug, value, onChange }: GateContentRuleControlProps ) {
+export default function ContentRuleControl( { slug, value, exclusion, onChange, onChangeExclusion }: GateContentRuleControlProps ) {
 	const rule = window.newspackAudienceContentGates.available_content_rules[ slug ];
 
 	if ( ! rule || ! Array.isArray( value ) ) {
 		return null;
 	}
 
-	if ( rule.options && rule.options.length > 0 ) {
-		return (
-			<div className="newspack-content-gates__content-rule-control">
+	return (
+		<div className="newspack-content-gates__content-rule-control">
+			{ rule.options && rule.options.length > 0 ? (
 				<FormTokenField
 					label={ rule.name }
 					value={ rule.options.filter( o => value.includes( o.value ) ).map( o => o.label ) }
@@ -34,15 +32,15 @@ export default function ContentRuleControl( { slug, value, onChange }: GateConte
 					__experimentalExpandOnFocus
 					__next40pxDefaultSize
 				/>
-				<CheckboxControl
-					label={ __( 'Exclusion rule', 'newspack-plugin' ) }
-					help={ __( 'Apply this rule to everything EXCEPT the items matching the above.', 'newspack-plugin' ) }
-					checked={ false }
-					onChange={ noop }
-				/>
-			</div>
-		);
-	}
-
-	return <ContentRuleControlTaxonomy slug={ slug } value={ value } onChange={ onChange } />;
+			) : (
+				<ContentRuleControlTaxonomy slug={ slug } value={ value } onChange={ onChange } />
+			) }
+			<CheckboxControl
+				label={ __( 'Exclusion rule', 'newspack-plugin' ) }
+				help={ __( 'Apply this rule to everything EXCEPT the items matching the above.', 'newspack-plugin' ) }
+				checked={ exclusion ?? false }
+				onChange={ e => onChangeExclusion?.( e ) }
+			/>
+		</div>
+	);
 }

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

@@ -50,6 +50,13 @@ export default function ContentRules( { rules, onChange }: ContentRulesProps ) {
 		[ onChange, rules ]
 	);
 
+	const handleChangeExclusion = useCallback(
+		( slug: string ) => ( e: boolean ) => {
+			onChange( rules.map( r => ( r.slug === slug ? { ...r, exclusion: e } : r ) ) );
+		},
+		[ onChange, rules ]
+	);
+
 	return (
 		<ActionCard
 			title={ __( 'Content Rules', 'newspack-plugin' ) }
@@ -67,7 +74,14 @@ export default function ContentRules( { rules, onChange }: ContentRulesProps ) {
 		>
 			<Grid columns={ 2 } gutter={ 32 } noMargin={ true }>
 				{ rules.map( ( rule: GateContentRule ) => (
-					<ContentRuleControl key={ rule.slug } slug={ rule.slug } value={ rule.value } onChange={ handleChange( rule.slug ) } />
+					<ContentRuleControl
+						key={ rule.slug }
+						slug={ rule.slug }
+						value={ rule.value }
+						exclusion={ rule.exclusion }
+						onChange={ handleChange( rule.slug ) }
+						onChangeExclusion={ handleChangeExclusion( rule.slug ) }
+					/>
 				) ) }
 			</Grid>
 		</ActionCard>

src/wizards/audience/views/content-gates/types/index.d.ts

@@ -50,12 +50,15 @@ type GateAccessRuleControlProps = {
 type GateContentRule = {
 	slug: string;
 	value: string[];
+	exclusion?: boolean;
 };
 
 type GateContentRuleControlProps = {
 	slug: string;
 	value: GateContentRuleValue;
+	exclusion?: boolean;
 	onChange: (value: GateContentRuleValue) => void;
+	onChangeExclusion?: (value: boolean) => void;
 };
 
 type GateStatus = 'publish' | 'draft' | 'pending' | 'future' | 'private' | 'trash';