WIP: Add view post button

package.json

@@ -20,10 +20,10 @@
     "plugin-zip": "wp-scripts plugin-zip"
   },
   "dependencies": {
-    "@wordpress/block-editor": "^8.0.11",
-    "@wordpress/blocks": "^11.1.4",
-    "@wordpress/i18n": "^4.2.4",
-    "@wordpress/element": "^4.1.0"
+    "@wordpress/block-editor": "^8.6.0",
+    "@wordpress/blocks": "^11.21.0",
+    "@wordpress/element": "^4.20.0",
+    "@wordpress/i18n": "^4.32.0"
   },
   "devDependencies": {
     "@wordpress/scripts": "^20.0.2",

quickpost.php

@@ -19,8 +19,8 @@
  */
 function createwithrani_quickpost_script() {
 
-	$dir = dirname( __FILE__ );
-	$index_js = 'build/index.js';
+	$dir       = dirname( __FILE__ );
+	$index_js  = 'build/index.js';
 	$index_css = '/build/index.css';
 
 	// automatically load dependencies and version
@@ -29,9 +29,10 @@ function createwithrani_quickpost_script() {
 		'createwithrani-quickpost-js',
 		plugins_url( $index_js, __FILE__ ),
 		$asset_file['dependencies'],
-		$asset_file['version']
+		$asset_file['version'],
+		true,
 	);
-	wp_set_script_translations( 'createwithrani-quickpost-js', 'createwithrani-quickpost', plugin_dir_path(__FILE__) . 'languages/' );
+	wp_set_script_translations( 'createwithrani-quickpost-js', 'createwithrani-quickpost', plugin_dir_path( __FILE__ ) . 'languages/' );
 	wp_enqueue_script(
 		'createwithrani-quickpost-js'
 	);

src/index.js

@@ -3,13 +3,20 @@
  */
 import { render } from "@wordpress/element";
 import { subscribe } from "@wordpress/data";
+import { registerPlugin } from "@wordpress/plugins";
 import domReady from "@wordpress/dom-ready";
 
 /**
  * Internal dependencies.
  */
 import QuickPostButton from "./quick-post";
-import { listenForKeyboardShortcut } from "./utils";
+import ViewPostButton from "./view-post-button";
+import { listenForKeyboardShortcut, insertAfter } from "./utils";
+import { QuickPostPreferences } from "./quickpost-preferences";
+
+registerPlugin("createwithrani/quickpost-preferences", {
+	render: QuickPostPreferences,
+});
 
 /**
  * Let's subscribe (because I finally understand what this does better)
@@ -19,36 +26,70 @@ subscribe(() => {
 	const quickpostbutton = document.querySelector(
 		"#createwithrani-quick-post-button-wrapper"
 	);
+	const viewpostbutton = document.querySelector(
+		"#createwithrani-view-post-button-wrapper"
+	);
 
 	// If the Quick Post Button already exists, skip render
 	if (quickpostbutton) {
 		return;
+	} else {
+		domReady(() => {
+			const editorToolbar = document.querySelector(
+				".edit-post-header__toolbar"
+			);
+
+			// If toolbar doesn't exist, we can't continue
+			if (!editorToolbar) {
+				return;
+			}
+
+			// So turns out you can't append to an existing container without
+			// using dangerouslySetInnerHTML, which..I don't want to use.
+			const buttonWrapper = document.createElement("div");
+			buttonWrapper.id = "createwithrani-quick-post-button-wrapper";
+			buttonWrapper.style.cssText = "display:flex;";
+
+			// add empty div to the toolbar so we can fill it.
+			editorToolbar.appendChild(buttonWrapper);
+
+			render(
+				<QuickPostButton visibility={true} />,
+				document.getElementById(
+					"createwithrani-quick-post-button-wrapper"
+				)
+			);
+		});
 	}
 
-	domReady(() => {
-		const editorToolbar = document.querySelector(
-			".edit-post-header__toolbar"
-		);
-
-		// If toolbar doesn't exist, we can't continue
-		if (!editorToolbar) {
-			return;
-		}
-
-		// So turns out you can't append to an existing container without
-		// using dangerouslySetInnerHTML, which..I don't want to use.
-		const buttonWrapper = document.createElement("div");
-		buttonWrapper.id = "createwithrani-quick-post-button-wrapper";
-		buttonWrapper.style.cssText = "display:flex;";
-
-		// add empty div to the toolbar so we can fill it.
-		editorToolbar.appendChild(buttonWrapper);
-
-		render(
-			<QuickPostButton visibility={true} />,
-			document.getElementById("createwithrani-quick-post-button-wrapper")
-		);
-	});
+	// If the View Post Button already exists, skip render
+	if (viewpostbutton) {
+		return;
+	} else {
+		domReady(() => {
+			const editorToolbarSettings = document.querySelector(
+				".edit-post-header__settings"
+			);
+			const viewButtonWrapper = document.createElement("div");
+			viewButtonWrapper.id = "createwithrani-view-post-button-wrapper";
+			viewButtonWrapper.style.cssText = "display:flex;";
+
+			// If toolbar doesn't exist, we can't continue
+			if (!editorToolbarSettings) {
+				return;
+			}
+
+			// add empty div to the toolbar so we can fill it.
+			insertAfter(editorToolbarSettings.children[1], viewButtonWrapper);
+
+			render(
+				<ViewPostButton />,
+				document.getElementById(
+					"createwithrani-view-post-button-wrapper"
+				)
+			);
+		});
+	}
 });
 
-document.addEventListener('keydown', listenForKeyboardShortcut);
+document.addEventListener("keydown", listenForKeyboardShortcut);

src/quickpost-preferences.js

@@ -0,0 +1,32 @@
+import { PluginMoreMenuItem } from "@wordpress/edit-post";
+import { CheckboxControl, Modal } from "@wordpress/components";
+import { useState } from "@wordpress/element";
+
+export const QuickPostPreferences = () => {
+	const [isOpen, setOpen] = useState(false);
+	const [isChecked, setChecked] = useState(true);
+	const openModal = () => setOpen(true);
+	const closeModal = () => setOpen(false);
+
+	return (
+		<>
+			<PluginMoreMenuItem onClick={openModal} icon="false">
+				QuickPost Preferences
+			</PluginMoreMenuItem>
+			{isOpen && (
+				<Modal
+					title="QuickPost Preferences"
+					onRequestClose={closeModal}
+				>
+					<div className="quickpost-preferences">
+						<CheckboxControl
+							label="Show View Post Button"
+							checked={isChecked}
+							onChange={setChecked}
+						/>
+					</div>
+				</Modal>
+			)}
+		</>
+	);
+};

src/utils.js

@@ -81,3 +81,7 @@ export function listenForKeyboardShortcut(event) {
 		document.querySelector("#createwithrani-quick-post-button").click();
 	}
 }
+
+export function insertAfter(referenceNode, newNode) {
+	referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
+}

src/view-post-button.js

@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies.
+ */
+import { __ } from "@wordpress/i18n";
+import { Tooltip, Spinner } from "@wordpress/components";
+import { addQueryArgs } from "@wordpress/url";
+import { useState } from "@wordpress/element";
+import { useSelect } from "@wordpress/data";
+
+import { getPostInfo, getPostLabels } from "./utils";
+
+function ViewPostButton() {
+	const { postType, newPost } = getPostInfo();
+
+	if (!postType) {
+		return null;
+	}
+	const { postData } = useSelect((select) => {
+		return {
+			postData: select("core/editor").getCurrentPost(),
+		};
+	});
+
+	const postPermalink =
+		"publish" === postData.status
+			? postData.link
+			: addQueryArgs(postData.link, { preview: true });
+
+	const ViewPostButton = () => {
+		return (
+			<a
+				className="components-button components-toolbar__control is-tertiary"
+				id="createwithrani-view-post-button"
+				style={{
+					textTransform: "capitalize",
+					display: "block",
+					maxHeight: "36px",
+					minHeight: "36px",
+					display: "flex",
+					borderTopRightRadius: "0px",
+					borderBottomRightRadius: "0px",
+				}}
+				role="link"
+				href={postPermalink}
+				target="_blank"
+			>
+				<span>{__("View", "createwithrani-quickpost")}</span>
+			</a>
+		);
+	};
+	return newPost && <ViewPostButton />;
+}
+
+export default ViewPostButton;