feat: load rcpt payload on remote fields editor

Author: orzocogorzo

posts-bridge/custom-blocks/remote-fields/src/edit.jsx

@@ -2,13 +2,57 @@ import "./editor.css";
 
 const { __ } = wp.i18n;
 const { useBlockProps, InspectorControls, InnerBlocks } = wp.blockEditor;
-const { useEntityProp } = wp.coreData;
+const { useState, useEffect, useRef } = wp.element;
 const { PanelBody } = wp.components;
+const apiFetch = wp.apiFetch;
 
 export default function Edit({ context: { postType, postId } }) {
   const blockProps = useBlockProps();
 
-  const [meta = {}] = useEntityProp("postType", postType, "meta", postId);
+  const remotesList = useRef();
+
+  const [remoteFields, setRemoteFields] = useState([]);
+
+  useEffect(() => {
+    if (!postId || !postType) return;
+
+    let done = false;
+    const abortController = new AbortController();
+    apiFetch({
+      path: `posts-bridge/v1/rcpt/${postType}/${postId}`,
+      method: "GET",
+      signal: abortController.signal,
+    })
+      .then((fields) => {
+        setRemoteFields(fields);
+      })
+      .catch(() => setRemoteFields([]))
+      .finally(() => (done = true));
+
+    return () => {
+      !done && abortController.abort();
+    };
+  }, [postId, postType]);
+
+  const copyFieldName = (index) => {
+    const field = remoteFields[index];
+    navigator.clipboard.writeText(`{{${field.name}}}`);
+
+    Array.from(remotesList.current.children).forEach((child, i) => {
+      child.children[0].style.display = index === i ? "block" : "none";
+      child.children[1].style.color =
+        index === i
+          ? "var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))"
+          : "inherit";
+    });
+
+    setTimeout(() => {
+      const child = remotesList.current.children[index];
+      if (!child) return;
+      child.children[0].style.display = "none";
+      child.children[1].style.color = "inherit";
+    }, 1500);
+  };
 
   return (
     <>
@@ -22,7 +66,7 @@ export default function Edit({ context: { postType, postId } }) {
           </p>
           <p>
             {__(
-              "There where do you want to place some remote value, use the `{{fieldName}}` marks. It doesn't matter where do you place marks, inside a paragraph, or maybe in a link, feel free to play with it.",
+              "There where you want to place some remote value, use the `{{fieldName}}` marks. It doesn't matter where do you place marks, inside a paragraph, or maybe in a link, feel free to play with it.",
               "posts-bridge"
             )}
           </p>
@@ -34,12 +78,40 @@ export default function Edit({ context: { postType, postId } }) {
           </p>
         </PanelBody>
         <PanelBody
-          title={__("Registered remote fields", "posts-bridge")}
+          title={__("Remote fields", "posts-bridge")}
           initialOpen={false}
         >
-          <ul>
-            {Object.keys(meta).map((remote) => (
-              <li>{remote}</li>
+          <ul ref={remotesList}>
+            {remoteFields.map((field, index) => (
+              <li className="remote-field" style={{ position: "relative" }}>
+                <span
+                  style={{
+                    display: "none",
+                    position: "absolute",
+                    top: "-2.5em",
+                    left: "-0.25em",
+                    background:
+                      "var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))",
+                    color: "var(--wp-components-color-accent-inverted,#fff)",
+                    padding: "0.35em 0.85em",
+                    borderRadius: "12px",
+                    boxShadow: "1px 1px 3px #0005",
+                  }}
+                >
+                  {__("Copied!", "posts-bridge")}
+                </span>
+                <span
+                  onClick={() => copyFieldName(index)}
+                  style={{
+                    cursor: "pointer",
+                    fontWeight: 600,
+                    transition: "color 300ms ease",
+                  }}
+                >
+                  {field.name}
+                </span>{" "}
+                | {field.schema.type}
+              </li>
             ))}
           </ul>
         </PanelBody>

posts-bridge/custom-blocks/remote-fields/src/render.php

@@ -5,17 +5,17 @@
  * @param   array $attributes - A clean associative array of block attributes.
  * @param   array $block - All the block settings and attributes.
  * @param   string $content - The block inner HTML (usually empty unless using inner blocks).
+ *
+ * @package postsbridge
  */
 
 if ( ! defined( 'ABSPATH' ) ) {
 	exit();
 }
 
-$is_remote_frontend = shortcode_exists( 'posts_bridge_remote_fields' );
-if ( $is_remote_frontend ) {
-	echo do_shortcode(
-		"[posts_bridge_remote_fields]{$content}[/posts_bridge_remote_fields]"
-	);
+$posts_bridge_is_remote_frontend = shortcode_exists( 'posts_bridge_remote_fields' );
+if ( $posts_bridge_is_remote_frontend ) {
+	echo do_shortcode( "[posts_bridge_remote_fields]{$content}[/posts_bridge_remote_fields]" );
 } else {
 	echo wp_kses_post( $content );
 }