Add reaction links and RSVP block editor extensions

build/reaction-links/block.json

@@ -0,0 +1,14 @@
+{
+  "name": "webmention/reaction-links",
+  "title": "Reaction Links: Microformats2 reaction classes for links",
+  "category": "widgets",
+  "icon": "format-status",
+  "keywords": [
+    "reaction",
+    "microformats",
+    "indieweb",
+    "webmention"
+  ],
+  "editorScript": "file:./index.js",
+  "editorStyle": "file:./index.css"
+}

build/reaction-links/index.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('wp-data', 'wp-dom-ready', 'wp-i18n'), 'version' => '7cb8bf9f7714645e1a13');

build/rsvp/block.json

@@ -0,0 +1,15 @@
+{
+  "name": "webmention/rsvp",
+  "title": "RSVP: Microformats2 RSVP format for event responses",
+  "category": "widgets",
+  "icon": "calendar-alt",
+  "keywords": [
+    "rsvp",
+    "microformats",
+    "indieweb",
+    "webmention",
+    "event"
+  ],
+  "editorScript": "file:./index.js",
+  "editorStyle": "file:./index.css"
+}

build/rsvp/index.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives', 'wp-rich-text'), 'version' => 'a767f7b502cf0dee8b77');

includes/class-block.php

@@ -9,6 +9,9 @@ class Block {
 	public static function init() {
 		// Add editor plugin.
 		\add_action( 'enqueue_block_editor_assets', array( self::class, 'enqueue_editor_assets' ) );
+
+		// Add RSVP styles inside editor iframe.
+		\add_action( 'enqueue_block_assets', array( self::class, 'enqueue_block_assets' ) );
 	}
 
 	/**
@@ -21,8 +24,92 @@ public static function enqueue_editor_assets() {
 		if ( ! $current_screen || ! in_array( $current_screen->post_type, $ap_post_types, true ) ) {
 			return;
 		}
+
+		// Enqueue the main editor plugin.
 		$asset_data = include WEBMENTION_PLUGIN_DIR . 'build/editor-plugin/plugin.asset.php';
 		$plugin_url = plugins_url( 'build/editor-plugin/plugin.js', WEBMENTION_PLUGIN_FILE );
 		wp_enqueue_script( 'webmention-block-editor', $plugin_url, $asset_data['dependencies'], $asset_data['version'], true );
+
+		// Enqueue the reaction links extension.
+		self::enqueue_reaction_links_assets();
+
+		// Enqueue the RSVP format.
+		self::enqueue_rsvp_assets();
+	}
+
+	/**
+	 * Enqueue the reaction links extension assets.
+	 */
+	public static function enqueue_reaction_links_assets() {
+		$asset_file = WEBMENTION_PLUGIN_DIR . 'build/reaction-links/index.asset.php';
+
+		if ( ! file_exists( $asset_file ) ) {
+			return;
+		}
+
+		$asset_data = include $asset_file;
+
+		wp_enqueue_script(
+			'webmention-reaction-links',
+			plugins_url( 'build/reaction-links/index.js', WEBMENTION_PLUGIN_FILE ),
+			$asset_data['dependencies'],
+			$asset_data['version'],
+			true
+		);
+
+		wp_enqueue_style(
+			'webmention-reaction-links',
+			plugins_url( 'build/reaction-links/index.css', WEBMENTION_PLUGIN_FILE ),
+			array(),
+			$asset_data['version']
+		);
+	}
+
+	/**
+	 * Enqueue the RSVP format assets.
+	 */
+	public static function enqueue_rsvp_assets() {
+		$asset_file = WEBMENTION_PLUGIN_DIR . 'build/rsvp/index.asset.php';
+
+		if ( ! file_exists( $asset_file ) ) {
+			return;
+		}
+
+		$asset_data = include $asset_file;
+
+		wp_enqueue_script(
+			'webmention-rsvp',
+			plugins_url( 'build/rsvp/index.js', WEBMENTION_PLUGIN_FILE ),
+			$asset_data['dependencies'],
+			$asset_data['version'],
+			true
+		);
+	}
+
+	/**
+	 * Enqueue block assets for editor content area (inside iframe).
+	 *
+	 * RSVP styles need to load inside the editor iframe to style
+	 * the data.p-rsvp elements in the content.
+	 */
+	public static function enqueue_block_assets() {
+		if ( ! is_admin() ) {
+			return;
+		}
+
+		$asset_file = WEBMENTION_PLUGIN_DIR . 'build/rsvp/index.asset.php';
+
+		if ( ! file_exists( $asset_file ) ) {
+			return;
+		}
+
+		$asset_data = include $asset_file;
+
+		wp_enqueue_style(
+			'webmention-rsvp-editor',
+			plugins_url( 'build/rsvp/index.css', WEBMENTION_PLUGIN_FILE ),
+			array(),
+			$asset_data['version']
+		);
 	}
 }

src/reaction-links/block.json

@@ -0,0 +1,9 @@
+{
+	"name": "webmention/reaction-links",
+	"title": "Reaction Links: Microformats2 reaction classes for links",
+	"category": "widgets",
+	"icon": "format-status",
+	"keywords": [ "reaction", "microformats", "indieweb", "webmention" ],
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./index.css"
+}

src/reaction-links/editor.scss

@@ -0,0 +1,23 @@
+/**
+ * Microformats Reaction Links - Editor Styles
+ *
+ * Matches WordPress block-editor-link-control__setting design
+ */
+
+.webmention-reaction-setting.block-editor-link-control__setting {
+	flex-wrap: nowrap;
+	padding-top: 16px;
+	padding-bottom: 16px;
+	border-top: 1px solid #ddd;
+	margin-top: 0;
+
+	.webmention-reaction-setting__label {
+		flex-shrink: 0;
+		padding-right: 16px;
+	}
+
+	.webmention-reaction-setting__select {
+		flex: 1;
+		max-width: 180px;
+	}
+}