diff --git a/includes/content-gate/class-content-gate.php b/includes/content-gate/class-content-gate.php
index 0bb9fed324..2f619d16b0 100644
--- a/includes/content-gate/class-content-gate.php
+++ b/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;
}
diff --git a/packages/components/src/utils/editor-toolbar-back-button.tsx b/packages/components/src/utils/editor-toolbar-back-button.tsx
new file mode 100644
index 0000000000..0951ea3679
--- /dev/null
+++ b/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 } ) => (
+
+
+
+);
+
+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( );
+ unsubscribe();
+ } );
+ } );
+};
diff --git a/packages/components/src/utils/index.js b/packages/components/src/utils/index.js
index 9a405962ea..d355c1af1f 100644
--- a/packages/components/src/utils/index.js
+++ b/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 } ) => (
{
export default {
InteractiveDiv,
confirmAction,
+ addToolbarBackButton,
};
diff --git a/packages/components/src/utils/style.scss b/packages/components/src/utils/style.scss
new file mode 100644
index 0000000000..4e0e9b9d40
--- /dev/null
+++ b/packages/components/src/utils/style.scss
@@ -0,0 +1,6 @@
+#newspack-editor-toolbar-wrapper {
+ margin-right: 24px;
+ .is-fullscreen-mode & {
+ display: none;
+ }
+}
diff --git a/src/content-gate/editor/editor.js b/src/content-gate/editor/editor.js
index bb370a8f40..f2461b7317 100644
--- a/src/content-gate/editor/editor.js
+++ b/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 ) {