feat: theme mod instead of acf options for preview mode url

website/src/components/PreviewModeBar.js

@@ -1,14 +1,19 @@
+import cx from 'classnames';
 import { WORDPRESS_DOMAIN } from 'lib/constants';
 import { useState, useEffect } from 'react';
 import styles from './PreviewModeBar.module.scss';
 
-
 const WORDPRESS_EDIT_URL =
   process.env.WORDPRESS_EDIT_URL ||
   `https://${WORDPRESS_DOMAIN}/wp-admin/post.php?action=edit`;
 
-export default function PreviewModeBar({ postId }) {
+export default function PreviewModeBar({ postId, position = 'top' }) {
   const [redirect, setRedirect] = useState('/api/exit-preview');
+  let positionClassName = styles['top'];
+
+  if ( position === 'bottom' ) {
+    positionClassName = styles['bottom'];
+  }
 
   useEffect(() => {
     if (typeof location !== 'undefined') {
@@ -21,7 +26,7 @@ export default function PreviewModeBar({ postId }) {
   }, []);
 
   return (
-    <section className={styles.bar}>
+    <section className={cx(styles.bar, positionClassName)}>
       <div className="container">
         <div className="row">
           <div className="col text-center">

website/src/components/PreviewModeBar.module.scss

@@ -1,7 +1,5 @@
 .bar {
-  position: sticky;
   z-index: 1000;
-  top: 0;
   width: 100%;
   padding: 15px 0;
   background-color: #000;
@@ -13,3 +11,13 @@
     color: #fff;
   }
 }
+
+.top {
+  position: sticky;
+  top: 0;
+}
+
+.bottom {
+  position: fixed;
+  bottom: 0;
+}

website/src/components/layouts/LayoutDefault.js

@@ -20,7 +20,7 @@ export default function LayoutDefault({
         image={image}
         seo={seo}
       />
-      {preview && <PreviewModeBar postId={postId} />}
+      {preview && <PreviewModeBar postId={postId} position="top" />}
       <Header />
       {children}
       <Footer />

wordpress/wp-content/themes/headless/functions.php

@@ -7,6 +7,7 @@
 // Load WP Config files
 //
 
+$site_name = '';
 $headless_domain = ''; // leave blank;
 $production_headless_domain = 'https://bubs-next.vercel.app';
 $staging_wp_host = 'bubsnexts.wpengine.com';
@@ -21,7 +22,7 @@
 } else if ( function_exists('is_wpe') ) {
   if ( strpos($_SERVER['HTTP_HOST'], $staging_wp_host) !== false ) {
     define('WP_HOST', 'staging');
-    $preview_domain = get_field('vercel_preview_url', 'option');
+    $preview_domain = get_theme_mod('headless_preview_url');
 
     if ($preview_domain) {
       $headless_domain = rtrim($preview_domain, '/');
@@ -37,39 +38,33 @@
 // Theme Options
 function bubs_theme_options($wp_customize)
 {
-    // include_once 'setup/theme-options/footer.php';
-    // include_once 'setup/theme-options/integrations.php';
-    // include_once 'setup/theme-options/social.php';
+    include_once 'setup/theme-options/headless.php';
     $wp_customize->remove_section('custom_css');
 }
 
 add_action('customize_register', 'bubs_theme_options');
 
 
 // Post Types
-//include_once 'setup/post-types/events.php';
-//include_once 'setup/post-types/heroes.php';
-//include_once 'setup/post-types/members.php';
+//include_once 'setup/post-types/press.php';
 
 
 // Taxonomies
 //include_once 'setup/taxonomies/issue-areas.php';
 
 
 // WP Helper Functions
-include_once 'setup/helpers/auth.php';
-include_once 'setup/helpers/acf-options.php';
 
+include_once 'setup/helpers/acf-options.php';
 include_once 'setup/helpers/admin.php';
 include_once 'setup/helpers/admin-env.php';
-//include_once 'setup/helpers/cloudinary.php';
+include_once 'setup/helpers/auth.php';
 #include_once 'setup/helpers/webhooks.php';
+include_once 'setup/helpers/headless-redirect.php';
 include_once 'setup/helpers/menus.php';
 include_once 'setup/helpers/wpgraphql.php';
 include_once 'setup/helpers/wysiwyg.php';
 
-include_once 'setup/helpers/headless-redirect.php';
-
 // Security Settings
 // include_once 'setup/helpers/google-login-force.php';
 // include_once 'setup/helpers/password-rotation-wpe.php';

wordpress/wp-content/themes/headless/setup/helpers/acf-options.php

@@ -1,22 +1,16 @@
 <?php
+add_action('acf/init', 'bubs_acf_op_init');
 
-    if( function_exists('acf_add_options_page') ) {
-        $parent = acf_add_options_page(array(
-            'page_title' 	=> 'Theme Settings',
-            'menu_title' 	=> 'Theme Settings',
-            'redirect' 		=> false,
-            'capability'      => 'edit_posts',
-            'show_in_graphql' => true,
-        ));
-
-        if ( WP_HOST !== 'production' ) {
-          // TODO only if dev or staging
-          acf_add_options_page(array(
-            'page_title' 	=> 'Headless Settings',
-            'menu_title'	=> 'Headless Settings',
-            'redirect'	=> false,
-          ));
-        }
-    }
-
+function bubs_acf_op_init() {
+  if( function_exists('acf_add_options_page') ) {
+    $parent = acf_add_options_page(array(
+        'page_title' 	=> 'Theme Settings',
+        'menu_title' 	=> 'Theme Settings',
+        'redirect' 		=> false,
+        'capability'      => 'edit_posts',
+        'show_in_graphql' => true,
+    ));
+  }
+}
+?>
 

wordpress/wp-content/themes/headless/setup/helpers/headless-redirect.php

@@ -38,7 +38,7 @@ function headless_redirect(){
       $auth_code = wpe_headless_generate_authentication_code(
         wp_get_current_user()
       );
-      $redirect = $headless_domain . '/api/preview/?code=' . rawurlencode($auth_code) . '&slug=' . $slug;
+      $redirect = $headless_domain . '/api/preview/?code=' . rawurlencode($auth_code) . '&slug=' . $slug . '&id=' . get_the_ID();
     } else {
       $redirect = $headless_domain . $slug;
     }
@@ -48,7 +48,7 @@ function headless_redirect(){
       $auth_code = wpe_headless_generate_authentication_code(
         wp_get_current_user()
       );
-      $redirect = $headless_domain . '/api/preview/?code=' . rawurlencode($auth_code) . '&path=' . $path;
+      $redirect = $headless_domain . '/api/preview/?code=' . rawurlencode($auth_code) . '&path=' . $path . '&id=' . get_the_ID();
     } else {
       $redirect = $headless_domain . $path;
     }

wordpress/wp-content/themes/headless/setup/theme-options/headless.php

@@ -0,0 +1,22 @@
+<?php
+
+//
+// Headless Theme Options
+//
+
+$wp_customize->add_section( 'headless', array(
+    'title'     =>  'Headless',
+    'priority'  =>  20
+));
+
+// Fields
+
+$wp_customize->add_setting( 'headless_preview_url', array(
+    'default' => ''
+));
+$wp_customize->add_control( 'headless_preview_url', array(
+    'label'     => 'Preview URL',
+    'section'   => 'headless',
+    'settings'  => 'headless_preview_url',
+    'type'      => 'text'
+));