Add block supports tutorial (#188)

08-block-supports-esnext/.eslintrc

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

08-block-supports-esnext/block.json

@@ -0,0 +1,31 @@
+{
+	"$schema": "https://json.schemastore.org/block.json",
+	"apiVersion": 2,
+	"name": "gutenberg-examples/example-08-block-supports-esnext",
+	"title": "Example: Block Supports (ESNext)",
+	"textdomain": "gutenberg-examples",
+	"icon": "universal-access-alt",
+	"category": "layout",
+	"attributes": {
+		"content": {
+			"type": "string",
+			"source": "html",
+			"selector": "p"
+		}
+	},
+	"example": {
+		"attributes": {
+			"content": "Hello world"
+		}
+	},
+	"editorScript": "file:./build/index.js",
+	"editorStyle": "file:./build/index.css",
+	"style": "file:./build/style-index.css",
+	"supports": {
+		"color": {
+			"text": true,
+			"link": true,
+			"background": true
+		}
+	}
+}

08-block-supports-esnext/build/index.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-element', 'wp-polyfill'), 'version' => '6bead7e7828c5d7511e210024abaefa0');

08-block-supports-esnext/build/index.css

@@ -0,0 +1 @@
+.wp-block-gutenberg-examples-example-08-block-supports-esnext{background:#cfc;border:2px solid #9c9;color:green;padding:20px}

08-block-supports-esnext/build/style-index.css

@@ -0,0 +1 @@
+.wp-block-gutenberg-examples-example-08-block-supports-esnext{background:#fcc;border:2px solid #c99;color:darkred;padding:20px}

08-block-supports-esnext/editor.css

@@ -0,0 +1,10 @@
+/**
+ * Note that these styles are loaded *after* common styles, so that
+ * editor-specific styles using the same selectors will take precedence.
+ */
+.wp-block-gutenberg-examples-example-08-block-supports-esnext {
+	color: green;
+	background: #cfc;
+	border: 2px solid #9c9;
+	padding: 20px;
+}

08-block-supports-esnext/index.php

@@ -0,0 +1,44 @@
+<?php
+
+/**
+ * Plugin Name: Gutenberg Examples Block Supports EsNext
+ * Plugin URI: https://github.com/WordPress/gutenberg-examples
+ * Description: This is a plugin demonstrating how to register new blocks for the Gutenberg editor.
+ * Version: 1.1.0
+ * Author: the Gutenberg Team
+ *
+ * @package gutenberg-examples
+ */
+
+defined( 'ABSPATH' ) || exit;
+
+/**
+ * Load all translations for our plugin from the MO file.
+ */
+add_action( 'init', 'gutenberg_examples_08_esnext_load_textdomain' );
+
+function gutenberg_examples_08_esnext_load_textdomain() {
+	load_plugin_textdomain( 'gutenberg-examples', false, basename( __DIR__ ) . '/languages' );
+}
+
+/**
+ * Registers all block assets so that they can be enqueued through Gutenberg in
+ * the corresponding context.
+ *
+ * Passes translations to JavaScript.
+ */
+function gutenberg_examples_08_esnext_register_block() {
+
+	// Register the block by passing the location of block.json to register_block_type.
+	register_block_type( __DIR__ );
+
+	if ( function_exists( 'wp_set_script_translations' ) ) {
+		/**
+		 * May be extended to wp_set_script_translations( 'my-handle', 'my-domain',
+		 * plugin_dir_path( MY_PLUGIN ) . 'languages' ) ). For details see
+		 * https://make.wordpress.org/core/2018/11/09/new-javascript-i18n-support-in-wordpress/
+		 */
+		wp_set_script_translations( 'gutenberg-examples-08-esnext', 'gutenberg-examples' );
+	}
+}
+add_action( 'init', 'gutenberg_examples_08_esnext_register_block' );

08-block-supports-esnext/package.json

@@ -0,0 +1,28 @@
+{
+	"name": "08-block-supports-esnext",
+	"version": "1.1.0",
+	"private": true,
+	"description": "Example: Block Supports (ESNext).",
+	"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-js",
+		"lint:js": "wp-scripts lint-js",
+		"packages-update": "wp-scripts packages-update",
+		"start": "wp-scripts start"
+	}
+}

08-block-supports-esnext/src/edit.js

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+
+import { useBlockProps, RichText } from '@wordpress/block-editor';
+
+const Edit = ( props ) => {
+	const {
+		attributes: { content },
+		setAttributes,
+	} = props;
+
+	const blockProps = useBlockProps();
+
+	const onChangeContent = ( newContent ) => {
+		setAttributes( { content: newContent } );
+	};
+	return (
+		<RichText
+			{ ...blockProps }
+			tagName="p"
+			onChange={ onChangeContent }
+			value={ content }
+		/>
+	);
+};
+export default Edit;

08-block-supports-esnext/src/index.js

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import json from '../block.json';
+import edit from './edit';
+import save from './save';
+
+import '../style.css';
+import '../editor.css';
+
+// Destructure the json file to get the name and settings for the block
+// For more information on how this works, see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
+const { name } = json;
+
+// Register the block
+registerBlockType( name, {
+	edit, // Object shorthand property - same as writing: edit: edit,
+	save, // Object shorthand property - same as writing: save: save,
+} );

08-block-supports-esnext/src/save.js

@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, RichText } from '@wordpress/block-editor';
+
+const Save = ( props ) => {
+	const {
+		attributes: { content },
+	} = props;
+	const blockProps = useBlockProps.save();
+
+	return <RichText.Content { ...blockProps } tagName="p" value={ content } />;
+};
+export default Save;

08-block-supports-esnext/style.css

@@ -0,0 +1,10 @@
+/**
+ * Note that these styles are loaded *before* editor styles, so that
+ * editor-specific styles using the same selectors will take precedence.
+ */
+.wp-block-gutenberg-examples-example-08-block-supports-esnext {
+	color: darkred;
+	background: #fcc;
+	border: 2px solid #c99;
+	padding: 20px;
+}

format-api/build/index.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('wp-block-editor', 'wp-element', 'wp-i18n', 'wp-polyfill', 'wp-rich-text'), 'version' => '2aef703643b92f05df28bebf7e043e74');