Documentation: Add third block supports page to the create block tutorial of the framework docs.

platform-docs/docs/basic-concepts/settings.md

@@ -6,14 +6,43 @@ sidebar_position: 3
 
 You can customize the block editor by providing a `settings` prop to the `BlockEditorProvider` component. This prop accepts an object with the following properties:
 
+## __experimentalFeatures
+
+The experimental features setting is an object that allows you to enable/disable common block editor features. For instance, the following settings enables support for text, background colors and allow users to pick a custom color or one of the defined theme palette colors. Core block types and third-party block types using the block supports feature will automatically take these settings into account.
+
+```js
+import { BlockEditorProvider, BlockCanvas } from '@wordpress/block-editor';
+
+const features = {
+	color: {
+		custom: true,
+		text: true,
+		background: true,
+		palette: {
+			theme: [
+				{ name: 'red', color: '#f00', slug: 'red' },
+				{ name: 'white', color: '#fff', slug: 'white' },
+				{ name: 'blue', color: '#00f', slug: 'blue' },
+			],
+		},
+	},
+};
+
+export default function App() {
+	return (
+		<BlockEditorProvider settings={ { __experimentalFeatures: features } }>
+			<BlockCanvas />
+		</BlockEditorProvider>
+	);
+}
+```
+
 ## styles
 
 The styles setting is an array of editor styles to enqueue in the iframe/canvas of the block editor. Each style is an object with a `css` property. Example:
 
 ```jsx
-import { BlockEditorProvider, BlockCanvas } from '@wordpress/block-editor';
-
-export const editorStyles = [
+const styles = [
 	{
 		css: `
 			body {
@@ -36,14 +65,6 @@ export const editorStyles = [
 		`,
 	},
 ];
-
-export default function App() {
-	return (
-		<BlockEditorProvider settings={ { styles: editorStyles } }>
-			<BlockCanvas />
-		</BlockEditorProvider>
-	);
-}
 ```
 
 ## mediaUpload
@@ -91,7 +112,7 @@ Providing a `mediaUpload` function also enables drag and dropping files into the
 The inserter media categories setting is an array of media categories to display in the inserter. Each category is an object with `name` and `labels` values, a `fetch` function and a few extra keys. Example:
 
 ```jsx
-{
+const inserterMediaCategories = {
     name: 'openverse',
     labels: {
         name: 'Openverse',

platform-docs/docs/create-block/attributes.md

@@ -46,29 +46,29 @@ registerBlockType( 'gutenpride/gutenpride-block', {
 } );
 ```
 
-## TextControl Component
+## PlainText Component
 
-For our example block, the component we are going to use is the **TextControl** component, which is similar to an HTML text input field. You can see [the documentation for the `TextControl` component](https://developer.wordpress.org/block-editor/reference-guides/components/text-control/). You can browse an [interactive set of components in this Storybook](https://wordpress.github.io/gutenberg/).
+For our example block, the component we are going to use is the **PlainText** component, which allows the user to type some unformatted text. The **PlainText** component is imported from the `@wordpress/block-editor` package.
 
-The component is added similar to an HTML tag, setting a label, the `value` is set to the `attributes.message` and the `onChange` function uses the `setAttributes` to update the message attribute value.
+The component is added similar to an HTML tag, the `value` is set to the `attributes.message` and the `onChange` function uses the `setAttributes` to update the message attribute value.
 
 The save function will simply write the `attributes.message` as a `div` tag since that is how we defined it to be parsed. Update the `edit.js` and `save.js` files to the following, replacing the existing functions.
 
 **edit.js** file:
 
 ```js
-import { useBlockProps } from '@wordpress/block-editor';
-import { TextControl } from '@wordpress/components';
+import { useBlockProps, PlainText } from '@wordpress/block-editor';
 
 function Edit( { attributes, setAttributes } ) {
+	const blockProps = useBlockProps();
 	return (
-		<div { ...useBlockProps() }>
-			<TextControl
-				label="Message"
-				value={ attributes.message }
-				onChange={ ( val ) => setAttributes( { message: val } ) }
-			/>
-		</div>
+		<PlainText
+			{ ...blockProps }
+			tagName="div"
+			value={ attributes.message }
+			onChange={ ( val ) => setAttributes( { message: val } ) }
+			__experimentalVersion={ 2 }
+		/>
 	);
 }
 ```

platform-docs/docs/create-block/block-supports.md

@@ -1,3 +1,33 @@
 ---
-sidebar_position: 4
+sidebar_position: 3
 ---
+
+# Block Supports
+
+A lot of blocks, including core blocks, offer similar customization options. Whether that is to change the background color, text color, or to add padding, margin customization options.
+
+To avoid duplicating the same logic over and over in your blocks and to align the behavior of your block with core blocks, Gutenberg provides a list of reusable block supports.
+
+Let's augment our Gutenberg pride block with some of these supports. To do so, we just update the `registerBlockType` call with an additional `supports` key like so:
+
+```jsx
+registerBlockType( 'gutenpride/gutenpride-block', {
+	// ...
+	supports: {
+		color: {
+			text: true,
+			background: true,
+		},
+	},
+} );
+```
+
+If your block editor allows text and background colors, the block inspector will now show a panel that allows users to customize these colors for the selected block.
+
+In addition to colors, the block editor provides by default a number of built-in block supports that any block type can use to quickly add customization options. These block supports include:
+
+ - colors
+ - typography
+ - borders
+ - dimensions and spacing
+ - and more...

platform-docs/docs/create-block/nested-blocks.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 5
+sidebar_position: 4
 ---
 
 # Nested blocks

platform-docs/docs/create-block/transforms.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 6
+sidebar_position: 4
 ---
 
 # Block Transforms

platform-docs/docs/create-block/writing-flow.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 7
+sidebar_position: 6
 ---
 
 # Writing Flow and Pasting