Add the colophon block

block/block.json

@@ -0,0 +1,29 @@
+{
+    "$schema": "https://schemas.wp.org/trunk/block.json",
+    "apiVersion": 3,
+    "name": "team51/colophon",
+    "version": "0.1.0",
+    "title": "Colophon",
+    "category": "theme",
+    "icon": "editor-textcolor",
+    "description": "A block for displaying a colophon.",
+    "supports": {
+        "html": false,
+        "align": true,
+        "typography": {
+            "fontSize": true,
+            "lineHeight": true,
+            "__experimentalFontFamily": true,
+            "__experimentalFontStyle": true,
+            "__experimentalFontWeight": true,
+            "__experimentalLetterSpacing": true,
+            "__experimentalTextTransform": true,
+            "__experimentalDefaultControls": {
+                "fontSize": true
+            }
+        }
+    },
+    "textdomain": "team51-blocks",
+    "editorScript": "file:./index.js",
+    "render": "file:./render.php"
+}

block/edit.js

@@ -0,0 +1,39 @@
+/**
+ * Import the ServerSideRender component from the @wordpress/server-side-render package.
+ * This component is used to render the block on the server side.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-server-side-render/
+ */
+import ServerSideRender from "@wordpress/server-side-render";
+
+/**
+ * React hook that is used to mark the block wrapper element.
+ * It provides all the necessary props like the class name.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
+ */
+import { useBlockProps } from "@wordpress/block-editor";
+
+/**
+ * Import the block.json to get the block meta.
+ */
+import blockMeta from "./block.json";
+
+/**
+ * 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.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
+ *
+ * @return {WPElement} Element to render.
+ */
+export default function Edit(props) {
+    return (
+        <div {...useBlockProps()}>
+            <ServerSideRender
+                block={blockMeta.name}
+                attributes={props.attributes}
+            />
+        </div>
+    );
+}

block/index.js

@@ -0,0 +1,29 @@
+/**
+ * Registers a new block provided a unique name and an object defining its behavior.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+import { registerBlockType } from "@wordpress/blocks";
+
+/**
+ * Internal dependencies
+ */
+import Edit from "./edit";
+import metadata from "./block.json";
+
+/**
+ * Every block starts by registering a new block type definition.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+registerBlockType(metadata.name, {
+    /**
+     * @see ./edit.js
+     */
+    edit: Edit,
+
+    /**
+     * @see ./save.js
+     */
+    save: () => null,
+});

block/render.php

@@ -0,0 +1,3 @@
+<div <?php echo wp_kses_data( get_block_wrapper_attributes() ); ?>>
+	<?php do_action( 'team51_credits' ); // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound ?>
+</div>

build/block.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "team51/colophon",
+  "version": "0.1.0",
+  "title": "Colophon",
+  "category": "theme",
+  "icon": "editor-textcolor",
+  "description": "A block for displaying a colophon.",
+  "supports": {
+    "html": false,
+    "align": true,
+    "typography": {
+      "fontSize": true,
+      "lineHeight": true,
+      "__experimentalFontFamily": true,
+      "__experimentalFontStyle": true,
+      "__experimentalFontWeight": true,
+      "__experimentalLetterSpacing": true,
+      "__experimentalTextTransform": true,
+      "__experimentalDefaultControls": {
+        "fontSize": true
+      }
+    }
+  },
+  "textdomain": "team51-blocks",
+  "editorScript": "file:./index.js",
+  "render": "file:./render.php"
+}

build/index.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-server-side-render'), 'version' => '3eead5c1aa4c3d8aaba2');

build/render.php

@@ -0,0 +1,3 @@
+<div <?php echo wp_kses_data( get_block_wrapper_attributes() ); ?>>
+	<?php do_action( 'team51_credits' ); // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound ?>
+</div>

colophon.php

@@ -160,3 +160,16 @@ function () {
 		}
 	);
 endif;
+
+if ( ! function_exists( 'team51_colophon_register_block' ) ) {
+
+	/**
+	 * Registers the Colophon block.
+	 *
+	 * @return void
+	 */
+	function team51_colophon_register_block() {
+		register_block_type_from_metadata( __DIR__ . DIRECTORY_SEPARATOR . 'build' );
+	}
+	add_action( 'init', 'team51_colophon_register_block' );
+}