feat(components): addToolbarBackButton util in newspack-components

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

@@ -395,8 +395,8 @@ public static function redirect_cpt() {
 			return;
 		}
 		global $pagenow;
-		if ( 'edit.php' === $pagenow && isset( $_GET['post_type'] ) && self::GATE_CPT === $_GET['post_type'] ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
-			$redirect = \admin_url( 'admin.php?page=newspack-audience#/content-gating' );
+		if ( 'edit.php' === $pagenow && isset( $_GET['post_type'] ) && in_array( $_GET['post_type'], [ self::GATE_CPT, self::GATE_LAYOUT_CPT ], true ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
+			$redirect = Memberships::is_active() ? \admin_url( 'admin.php?page=newspack-audience#/content-gating' ) : \admin_url( 'admin.php?page=newspack-audience-access-control#/' );
 			\wp_safe_redirect( $redirect );
 			exit;
 		}

packages/components/src/utils/editor-toolbar-back-button.tsx

@@ -0,0 +1,48 @@
+/**
+ * A utility to add a back button to the editor toolbar.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button, Tooltip } from '@wordpress/components';
+import { subscribe } from '@wordpress/data';
+import domReady from '@wordpress/dom-ready';
+import { createRoot } from '@wordpress/element';
+import { arrowUpLeft } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+const WRAPPER_ID = 'newspack-editor-toolbar-wrapper';
+
+const ToolbarButton = ( { href }: { href: string } ) => (
+	<Tooltip text={ __( 'Go back', 'newspack-plugin' ) }>
+		<Button icon={ arrowUpLeft } label={ __( 'Go back', 'newspack-plugin' ) } href={ href } />
+	</Tooltip>
+);
+
+export const addToolbarBackButton = ( href: string = '' ) => {
+	const unsubscribe = subscribe( () => {
+		domReady( () => {
+			if ( document.getElementById( WRAPPER_ID ) ) {
+				return;
+			}
+			const toolbar = document.querySelector( '.editor-header__toolbar' );
+			if ( ! toolbar ) {
+				return;
+			}
+
+			const wrapper = document.createElement( 'div' );
+			wrapper.id = WRAPPER_ID;
+			toolbar.prepend( wrapper );
+
+			const root = createRoot( wrapper );
+			root.render( <ToolbarButton href={ href } /> );
+			unsubscribe();
+		} );
+	} );
+};

packages/components/src/utils/index.js

@@ -3,6 +3,11 @@
  */
 import { ENTER } from '@wordpress/keycodes';
 
+/**
+ * Internal dependencies
+ */
+import { addToolbarBackButton } from './editor-toolbar-back-button';
+
 const InteractiveDiv = ( { style = {}, ...props } ) => (
 	<div
 		tabIndex="0"
@@ -24,4 +29,5 @@ const confirmAction = message => {
 export default {
 	InteractiveDiv,
 	confirmAction,
+	addToolbarBackButton,
 };

packages/components/src/utils/style.scss

@@ -0,0 +1,6 @@
+#newspack-editor-toolbar-wrapper {
+	margin-right: 24px;
+	.is-fullscreen-mode & {
+		display: none;
+	}
+}

src/content-gate/editor/editor.js

@@ -14,8 +14,11 @@ import { registerPlugin } from '@wordpress/plugins';
  * Internal dependencies
  */
 import PositionControl from '../../../packages/components/src/position-control';
+import utils from '../../../packages/components/src/utils';
 import './editor.scss';
 
+const { addToolbarBackButton } = utils;
+
 const styles = [
 	{ value: 'inline', label: __( 'Inline', 'newspack-plugin' ) },
 	{ value: 'overlay', label: __( 'Overlay', 'newspack-plugin' ) },
@@ -42,6 +45,9 @@ function GateEdit() {
 		};
 	} );
 	const { editPost } = useDispatch( 'core/editor' );
+	useEffect( () => {
+		addToolbarBackButton( 'admin.php?page=newspack-audience-access-control#/' );
+	}, [] );
 	useEffect( () => {
 		const wrapper = document.querySelector( '.editor-styles-wrapper' );
 		if ( ! wrapper ) {