Add Format API example (#181)

* Add Format API example

* Use destructuring, proper linting

format-api/.eslintrc

@@ -0,0 +1,3 @@
+{
+    "extends":  [ "plugin:@wordpress/eslint-plugin/recommended" ]
+}

format-api/index.php

@@ -0,0 +1,36 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Examples Format API
+ * Plugin URI: https://github.com/WordPress/gutenberg-examples
+ * Description: This is a plugin demonstrating how to use Format API in the Gutenberg editor.
+ * Version: 1.0.0
+ * Author: the Gutenberg Team
+ *
+ * @package gutenberg-examples
+ */
+
+defined( 'ABSPATH' ) || exit;
+
+/**
+ * Registers all block assets so that they can be enqueued through Gutenberg in
+ * the corresponding context.
+ */
+add_action( 'init', function() {
+	// Automatically load dependencies and version.
+	$asset_file = include plugin_dir_path( __FILE__ ) . 'build/index.asset.php';
+
+	wp_register_script(
+		'gutenberg-examples-format-api',
+		plugins_url( 'build/index.js', __FILE__ ),
+		$asset_file['dependencies'],
+		$asset_file['version'],
+		true
+	);
+} );
+
+/**
+ * Enqueue block editor assets for this example.
+ */
+add_action( 'enqueue_block_editor_assets', function() {
+	wp_enqueue_script( 'gutenberg-examples-format-api' );
+} );

format-api/package.json

@@ -0,0 +1,27 @@
+{
+ "name": "format-api",
+ "version": "1.0.0",
+ "description": "Example: Format API",
+ "author": "The WordPress Contributors",
+ "license": "GPL-2.0-or-later",
+ "keywords": [
+  "WordPress",
+  "block"
+ ],
+ "homepage": "https://github.com/WordPress/gutenberg-examples/",
+ "repository": "git+https://github.com/WordPress/gutenberg-examples.git",
+ "bugs": {
+  "url": "https://github.com/WordPress/gutenberg-examples/issues"
+ },
+ "main": "build/index.js",
+ "devDependencies": {
+  "@wordpress/scripts": "^18.0.1"
+ },
+ "scripts": {
+  "build": "wp-scripts build",
+  "format:js": "wp-scripts format",
+  "lint:js": "wp-scripts lint-js",
+  "packages-update": "wp-scripts packages-update",
+  "start": "wp-scripts start"
+ }
+}

format-api/src/index.js

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies.
+ */
+import { __ } from '@wordpress/i18n';
+import { registerFormatType, toggleFormat } from "@wordpress/rich-text";
+import { RichTextToolbarButton } from "@wordpress/block-editor";
+
+const MyCustomButton = ({ isActive, onChange, value }) => {
+    return (
+        <RichTextToolbarButton
+            icon="editor-code"
+            title={ __( "Sample output" ) }
+            onClick={ () => {
+                onChange(
+                    toggleFormat(value, {
+                        type: "my-custom-format/sample-output",
+                    })
+                );
+            } }
+            isActive={ isActive }
+        />
+    );
+};
+
+registerFormatType( "my-custom-format/sample-output", {
+    title: __( "Sample output" ),
+    tagName: "samp",
+    className: null,
+    edit: MyCustomButton,
+} );

index.php

@@ -24,3 +24,4 @@
 include '06-inner-blocks/index.php';
 include '06-inner-blocks-esnext/index.php';
 include '07-slotfills-esnext/index.php';
+include 'format-api/index.php';