A very quick demo of potential IndieWeb support for gutenberg blocks

indieweb-blocks.js

// Basic in-reply-to block mvp

/**
 * BLOCK: indieweb-blocks
 *
 * Registering a basic block with Gutenberg.
 * Simple block, renders and saves the same content without any interactivity.
 */

//  Import CSS.
import "./editor.scss";
import "./style.scss";

const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
const { BaseControl } = wp.components;
const { URLInput } = wp.blockEditor;

/**
 * Register: aa Gutenberg Block.
 *
 * Registers a new block provided a unique name and an object defining its
 * behavior. Once registered, the block is made editor as an option to any
 * editor interface where blocks are implemented.
 *
 * @link https://wordpress.org/gutenberg/handbook/block-api/
 * @param  {string}   name     Block name.
 * @param  {Object}   settings Block settings.
 * @return {?WPBlock}          The block, if it has been successfully
 *                             registered; otherwise `undefined`.
 */
registerBlockType("indieweb-blocks/in-reply-to", {
	// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
	title: __("in-reply-to"), // Block title.
	icon: "editor-break", // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
	category: "common", // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
	keywords: [__("reply"), __("response"), __("in reply")],
	attributes: {
		value: {
			type: "string",
			source: "attribute",
			selector: ".u-in-reply-to",
			attribute: "href",
			default: ""
		}
	},

	/**
	 * The edit function describes the structure of your block in the context of the editor.
	 * This represents what the editor will render when the block is used.
	 *
	 * The "edit" property must be a valid function.
	 *
	 * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
	 *
	 * @param {Object} props Props.
	 * @returns {Mixed} JSX Component.
	 */
	edit: ({ className, attributes, setAttributes, isSelected, instanceId }) => {
		// Creates a <p class='wp-block-cgb-block-indieweb-blocks'></p>.
		const linkId = `wp-block-button__inline-link-${instanceId}`;

		return (
			<div className={className}>
				<p>
					In reply to:{" "}
					<a href={attributes.value} className="u-in-reply-to">
						{attributes.value}
					</a>
				</p>
				{!!isSelected && (
					<BaseControl label={__("Link")} id={linkId}>
						<URLInput
							value={attributes.value}
							/* eslint-disable jsx-a11y/no-autofocus */
							// Disable Reason: The rule is meant to prevent enabling auto-focus, not disabling it.
							autoFocus={false}
							/* eslint-enable jsx-a11y/no-autofocus */
							onChange={value => setAttributes({ value })}
							disableSuggestions={!isSelected}
							id={linkId}
							isFullWidth
							hasBorder
						/>
					</BaseControl>
				)}
			</div>
		);
	},

	/**
	 * The save function defines the way in which the different attributes should be combined
	 * into the final markup, which is then serialized by Gutenberg into post_content.
	 *
	 * The "save" property must be specified and must be a valid function.
	 *
	 * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
	 *
	 * @param {Object} props Props.
	 * @returns {Mixed} JSX Frontend HTML.
	 */
	save: ({ className, attributes }) => {
		return (
			<div className={className}>
				<p>
					In reply to:{" "}
					<a href={attributes.value} className="u-in-reply-to">
						{attributes.value}
					</a>
				</p>
			</div>
		);
	}
});


// Template to combine a set of blocks
const el = wp.element.createElement;
const { registerBlockType } = wp.blocks;
const { InnerBlocks } = wp.blockEditor;

const BLOCKS_TEMPLATE = [
	["indieweb-blocks/in-reply-to", {}],
	["core/paragraph", { placeholder: "Reply content" }]
];

registerBlockType("indieweb-blocks/template-reply", {
	title: "Reply Post",
	category: "widgets",
	edit: props =>
		el(InnerBlocks, {
			template: BLOCKS_TEMPLATE,
			templateLock: true
		}),
	save: props => el(InnerBlocks.Content, {})
});