Merge pull request #132 from alleyinteractive/feature/issue-124/open-…

…graph-tags-posts-pages

Issue-124: Add Support for Open Graph Tags on Posts & Pages (v2.0)

entries/open-graph/OpenGraphSlotfill.tsx

@@ -0,0 +1,45 @@
+import { TextareaControl, TextControl } from '@wordpress/components';
+import { PluginDocumentSettingPanel } from '@wordpress/editor';
+import { __ } from '@wordpress/i18n';
+
+import {
+  ImagePicker,
+  usePostMetaValue,
+} from '@alleyinteractive/block-editor-tools';
+
+function OpenGraphSlotfill() {
+  const [title, setTitle] = usePostMetaValue('wp_seo_open_graph_title');
+  const [description, setDescription] = usePostMetaValue('wp_seo_open_graph_description');
+  const [image, setImage] = usePostMetaValue('wp_seo_open_graph_image');
+
+  return (
+    <PluginDocumentSettingPanel
+      icon="share"
+      name="opengraph"
+      title={__('Open Graph', 'wp-seo')}
+    >
+      <TextControl
+        label={__('Title', 'wp-seo')}
+        onChange={(next) => setTitle(next)}
+        value={title}
+        __next40pxDefaultSize
+        __nextHasNoMarginBottom
+      />
+      <br />
+      <TextareaControl
+        label={__('Description', 'wp-seo')}
+        onChange={(next) => setDescription(next)}
+        value={description}
+        __nextHasNoMarginBottom
+      />
+      <br />
+      <ImagePicker
+        onReset={() => setImage(0)}
+        onUpdate={({ id: next }) => setImage(next)}
+        value={image}
+      />
+    </PluginDocumentSettingPanel>
+  );
+}
+
+export default OpenGraphSlotfill;

entries/open-graph/index.php

@@ -0,0 +1,42 @@
+<?php
+/**
+ * Open-graph slotfill script registration and enqueue.
+ *
+ * This file will be copied to the assets output directory
+ * with Webpack using wp-scripts build. The build command must
+ * be run before this file will be available.
+ *
+ * This file must be included from the build output directory in a project.
+ * and will be loaded from there.
+ *
+ * @package wp-seo
+ */
+
+/**
+ * Registers all open-graph slotfill assets so that they can be enqueued in
+ * the corresponding context.
+ *
+ * @return void
+ */
+function wp_seo_register_open_graph_scripts() {
+	/**
+	 * Asset file to automatically load dependencies and version.
+	 *
+	 * @var array{
+	 *      dependencies: string[],
+	 *      version: string,
+	 * } $asset_file
+	 * */
+	$asset_file = include __DIR__ . '/index.asset.php';
+
+	// Register the open-graph script.
+	wp_register_script(
+		'wp-seo-open-graph-js',
+		plugins_url( 'index.js', __FILE__ ),
+		$asset_file['dependencies'],
+		$asset_file['version'],
+		true
+	);
+	wp_set_script_translations( 'wp-seo-open-graph-js', 'wp-seo' );
+}
+add_action( 'init', 'wp_seo_register_open_graph_scripts' );

entries/open-graph/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Entry for open-graph slotfill.
+ *
+ * Register slotfills in child folders under the current directory and import
+ * them here.
+ */
+
+import { registerPlugin } from '@wordpress/plugins';
+import OpenGraphSlotfill from './OpenGraphSlotfill';
+
+registerPlugin('wp-seo-open-graph', { render: OpenGraphSlotfill });