MERL-1712: custom toolbar v2 (#1745)

* Custom Toolbar example project

examples/next/custom-toolbar/.env.local.sample

@@ -0,0 +1,5 @@
+# Your WordPress site URL
+NEXT_PUBLIC_WORDPRESS_URL=https://faustexample.wpengine.com
+
+# Plugin secret found in WordPress Settings->Headless
+# FAUST_SECRET_KEY=YOUR_PLUGIN_SECRET

examples/next/custom-toolbar/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

examples/next/custom-toolbar/README.md

@@ -0,0 +1,23 @@
+# Custom Toolbar
+
+This repository uses a starter scaffolding to get you up and running quickly on [WP Engine's Atlas platform](https://wpengine.com/atlas/) with a WordPress site skeleton for more advanced developers and also includes the Custom Toolbar Example.
+
+## For more information
+
+For more information on this Blueprint please check out the following sources:
+
+- [WP Engine's Atlas Platform](https://wpengine.com/atlas/)
+- [Faust.js](https://faustjs.org)
+- [WPGraphQL](https://www.wpgraphql.com)
+- [Atlas Content Modeler](https://wordpress.org/plugins/atlas-content-modeler/)
+- [WP Engine's Atlas developer community](https://developers.wpengine.com)
+
+### Contributor License Agreement
+
+All external contributors to WP Engine products must have a signed Contributor License Agreement (CLA) in place before the contribution may be accepted into any WP Engine codebase.
+
+1. [Submit your name and email](https://wpeng.in/cla/)
+2. 📝 Sign the CLA emailed to you
+3. 📥 Receive copy of signed CLA
+
+❤️ Thank you for helping us fulfill our legal obligations in order to continue empowering builders through headless WordPress.

examples/next/custom-toolbar/faust.config.js

@@ -0,0 +1,14 @@
+import { setConfig } from "@faustwp/core";
+import templates from "./wp-templates";
+import possibleTypes from "./possibleTypes.json";
+import { CustomToolbar } from "./plugins/CustomToolbar";
+
+/**
+ * @type {import('@faustwp/core').FaustConfig}
+ **/
+export default setConfig({
+  templates,
+  experimentalPlugins: [new CustomToolbar()],
+  experimentalToolbar: true,
+  possibleTypes,
+});

examples/next/custom-toolbar/next.config.js

@@ -0,0 +1,6 @@
+const { withFaust, getWpHostname } = require('@faustwp/core');
+
+/**
+ * @type {import('next').NextConfig}
+ **/
+module.exports = withFaust({});

examples/next/custom-toolbar/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@faustwp/custom-toolbar",
+  "private": true,
+  "scripts": {
+    "dev": "faust dev",
+    "build": "faust build",
+    "generate": "faust generatePossibleTypes",
+    "start": "faust start"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.7.7",
+    "@faustwp/cli": "^1.0.0",
+    "@faustwp/core": "^1.0.0",
+    "graphql": "^16.6.0",
+    "next": "^13.1.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

examples/next/custom-toolbar/pages/[...wordpressNode].js

@@ -0,0 +1,16 @@
+import { getWordPressProps, WordPressTemplate } from '@faustwp/core';
+
+export default function Page(props) {
+  return <WordPressTemplate {...props} />;
+}
+
+export function getStaticProps(ctx) {
+  return getWordPressProps({ ctx });
+}
+
+export async function getStaticPaths() {
+  return {
+    paths: [],
+    fallback: 'blocking',
+  };
+}

examples/next/custom-toolbar/pages/_app.js

@@ -0,0 +1,16 @@
+import "../faust.config";
+import React from "react";
+import { useRouter } from "next/router";
+import { FaustProvider } from "@faustwp/core";
+import '@faustwp/core/dist/css/toolbar.css';
+import "../styles/globals.css";
+
+export default function MyApp({ Component, pageProps }) {
+  const router = useRouter();
+
+  return (
+    <FaustProvider pageProps={pageProps}>
+      <Component {...pageProps} key={router.asPath} />
+    </FaustProvider>
+  );
+}

examples/next/custom-toolbar/pages/api/faust/[[...route]].js

@@ -0,0 +1,4 @@
+import '../../../faust.config';
+import { apiRouter } from '@faustwp/core';
+
+export default apiRouter;

examples/next/custom-toolbar/pages/example.js

@@ -0,0 +1,51 @@
+import { gql, useQuery } from "@apollo/client";
+import Head from "next/head";
+import Header from "../components/header";
+import EntryHeader from "../components/entry-header";
+import Footer from "../components/footer";
+import { getNextStaticProps } from "@faustwp/core";
+
+/**
+ * Next.js file based page example with Faust helpers.
+ */
+export default function Page() {
+  const { data } = useQuery(Page.query);
+
+  const { title: siteTitle, description: siteDescription } =
+    data.generalSettings;
+  const menuItems = data.primaryMenuItems.nodes;
+
+  return (
+    <>
+      <Head>
+        <title>{siteTitle}</title>
+      </Head>
+
+      <Header
+        siteTitle={siteTitle}
+        siteDescription={siteDescription}
+        menuItems={menuItems}
+      />
+
+      <main className="container">
+        <EntryHeader title="Next.js Page Example" />
+        <p>Next.js pages are still supported!</p>
+      </main>
+
+      <Footer />
+    </>
+  );
+}
+
+Page.query = gql`
+  ${Header.fragments.entry}
+  query GetHomePage {
+    ...HeaderFragment
+  }
+`;
+
+export function getStaticProps(ctx) {
+  return getNextStaticProps(ctx, {
+    Page,
+  });
+}

examples/next/custom-toolbar/pages/index.js

@@ -0,0 +1,9 @@
+import { getWordPressProps, WordPressTemplate } from '@faustwp/core';
+
+export default function Page(props) {
+  return <WordPressTemplate {...props} />;
+}
+
+export function getStaticProps(ctx) {
+  return getWordPressProps({ ctx });
+}

examples/next/custom-toolbar/pages/preview.js

@@ -0,0 +1,5 @@
+import { WordPressTemplate } from '@faustwp/core';
+
+export default function Preview(props) {
+  return <WordPressTemplate {...props} />;
+}

examples/next/custom-toolbar/plugins/CustomToolbar.js

@@ -0,0 +1,88 @@
+//plugins/CustomPlugin.js
+
+import React from "react"
+import {
+  ToolbarItem,
+  ToolbarSubmenu,
+  ToolbarSubmenuWrapper
+} from "@faustwp/core"
+
+/**
+ * Example Custom Toolbar Plugin.
+ */
+export class CustomToolbar {
+  apply(hooks) {
+    /**
+     * This example demonstrates how to filter on the core Toolbar nodes
+     * in order to add your own custom nodes!
+     */
+    hooks.addFilter("toolbarNodes", "faust", (toolbarNodes, context) => {
+      const customToolbarNodes = [
+        {
+          id: "custom-node",
+          location: "primary",
+          component: <CustomNode />
+        },
+        {
+          id: "custom-node-with-submenu",
+          location: "primary",
+          component: <CustomNodeWithSubmenu />
+        }
+      ]
+
+      return [...toolbarNodes, ...customToolbarNodes]
+    })
+  }
+}
+
+/**
+ * A simple link.
+ */
+export function CustomNode() {
+  return (
+    <ToolbarItem href="https://wpengine.com/headless-wordpress/" rel="nofollow">
+      Headless WordPress
+    </ToolbarItem>
+  )
+}
+
+/**
+ * A simple link with a submenu that displays on hover.
+ */
+export function CustomNodeWithSubmenu() {
+  return (
+    <>
+      <ToolbarItem
+        href="https://faustjs.org/tutorial/get-started-with-faust"
+        rel="nofollow"
+      >
+        Documentation
+      </ToolbarItem>
+      <ToolbarSubmenuWrapper>
+        <ToolbarSubmenu>
+          <li>
+            <ToolbarItem href="https://faustjs.org" rel="nofollow">
+              Faustjs.org
+            </ToolbarItem>
+          </li>
+          <li>
+            <ToolbarItem
+              href="https://faustjs.org/guide/how-to-customize-the-toolbar"
+              rel="nofollow"
+            >
+              Customizing the Toolbar
+            </ToolbarItem>
+          </li>
+          <li>
+            <ToolbarItem
+              href="https://faustjs.org/guide/how-to-handle-authentication"
+              rel="nofollow"
+            >
+              How to Handle Authentication
+            </ToolbarItem>
+          </li>
+        </ToolbarSubmenu>
+      </ToolbarSubmenuWrapper>
+    </>
+  )
+}

examples/next/custom-toolbar/possibleTypes.json

@@ -0,0 +1 @@
+{"Node":["Category","EnqueuedScript","EnqueuedStylesheet","ContentType","Taxonomy","User","Comment","MediaItem","Page","Post","PostFormat","Tag","UserRole","Menu","MenuItem","Plugin","Theme","CommentAuthor"],"TermNode":["Category","PostFormat","Tag"],"UniformResourceIdentifiable":["Category","ContentType","User","MediaItem","Page","Post","PostFormat","Tag"],"EnqueuedAsset":["EnqueuedScript","EnqueuedStylesheet"],"DatabaseIdentifier":["Category","User","Comment","MediaItem","Page","Post","PostFormat","Tag","Menu","MenuItem"],"HierarchicalTermNode":["Category"],"MenuItemLinkable":["Category","Page","Post","Tag"],"ContentNode":["MediaItem","Page","Post"],"Commenter":["User","CommentAuthor"],"NodeWithTemplate":["MediaItem","Page","Post"],"ContentTemplate":["DefaultTemplate","Template_Blank","Template_BlogAlternative"],"NodeWithTitle":["MediaItem","Page","Post"],"NodeWithAuthor":["MediaItem","Page","Post"],"NodeWithComments":["MediaItem","Page","Post"],"HierarchicalContentNode":["MediaItem","Page"],"NodeWithContentEditor":["Page","Post"],"NodeWithFeaturedImage":["Page","Post"],"NodeWithRevisions":["Page","Post"],"NodeWithPageAttributes":["Page"],"NodeWithExcerpt":["Post"],"NodeWithTrackbacks":["Post"],"ContentRevisionUnion":["Post","Page"],"MenuItemObjectUnion":["Post","Page","Category","Tag"]}

examples/next/custom-toolbar/styles/front-page.module.css

@@ -0,0 +1,34 @@
+.cardGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+}
+
+.card {
+  padding: 1.5rem;
+  border: 1px solid #e1e1e1;
+  border-radius: 0.5rem;
+  line-height: 1.5;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .card {
+    transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
+  }
+}
+
+.card:hover {
+  border-color: royalblue;
+  color: royalblue;
+}
+
+.card h3 {
+  font-size: 1.75rem;
+  margin: 0;
+  margin-bottom: 0.5rem;
+}
+
+.card p {
+  font-size: 1.25rem;
+  margin: 0;
+}

examples/next/custom-toolbar/styles/globals.css

@@ -0,0 +1,29 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+#__next {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.container {
+  width: 100%;
+  max-width: 60rem;
+  margin-left: auto;
+  margin-right: auto;
+}