Add more pages

platform-docs/docs/advanced/create-format.md

@@ -1 +1,5 @@
+---
+sidebar_position: 1
+---
+
 # Create a RichText format

platform-docs/docs/advanced/dynamic.md

@@ -0,0 +1,5 @@
+---
+sidebar_position: 3
+---
+
+# Augmenting blocks

platform-docs/docs/advanced/interactivity.md

@@ -0,0 +1,5 @@
+---
+sidebar_position: 2
+---
+
+# Interactivity API

platform-docs/docs/advanced/wordpress.md

@@ -0,0 +1,5 @@
+---
+sidebar_position: 4
+---
+
+# Gutenberg and WordPress

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

@@ -2,9 +2,7 @@
 sidebar_position: 2
 ---
 
-# Data
-
-## Data Format
+# Data Format
 
 A block editor document is a collection of semantically consistent descriptions of what each block is and what its essential data is.
 

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

@@ -0,0 +1,5 @@
+---
+sidebar_position: 6
+---
+
+# Rendering blocks

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

@@ -17,12 +17,13 @@ The Gutenberg platform allows you to render these pieces separately and lay them
 
 ## The Block Toolbar
 
-Wrapping your `BlockList` component within the `BlockTools` wrapper allows the editor to render a block toolbar adjacent to the selected block.
+Wrapping your `BlockCanvas` component within the `BlockTools` wrapper allows the editor to render a block toolbar adjacent to the selected block.
 
 ## The Block Inspector
 
-Render `BlockInspector`.
+You can use the `BlockInspector` to render what is called the block inspector. It's a set of tools that are specific to the selected block.
+While the block toolbar contains what is considered the "main tools" to manipuate each block, the block inspector is meant to render advanced tools and customization options. It is generally rendered as a sidebar or a modal.
 
 ## The Block Inserter
 
-`Inserter`
+By default the block editor renders a block inserter at the end of the canvas if there's no block selected. It also renders an inserter if you hover the area between two consecutive blocks. That said, you can also decide to render a permanent inserter for instance in a header of your editor. You can do so by using the `Inserter` component.

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

@@ -0,0 +1,5 @@
+---
+sidebar_position: 4
+---
+
+# Block attributes

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

@@ -0,0 +1,3 @@
+---
+sidebar_position: 3
+---

platform-docs/docs/create-block/first-block-type.md

@@ -1 +1,5 @@
+---
+sidebar_position: 1
+---
+
 # Your first block type

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

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

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

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

platform-docs/docs/create-block/using-styles.md

@@ -0,0 +1,5 @@
+---
+sidebar_position: 2
+---
+
+# Using styles and stylesheets

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

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

platform-docs/docs/intro.md

@@ -26,7 +26,6 @@ To build a block editor, you need to install the following dependencies
  - `@wordpress/element`
  - `@wordpress/block-library`
  - `@wordpress/components`
- - `@wordpress/keyboard-shortcuts`
 
 ## Setup vite to use JSX and @wordpress/element as a pragma
 
@@ -77,14 +76,9 @@ It's time to render our first block editor.
 import { createRoot, createElement, useState } from "@wordpress/element";
 import {
   BlockEditorProvider,
-  BlockList,
-  BlockEditorKeyboardShortcuts,
-  WritingFlow,
-  ObserveTyping,
+  BlockCanvas,
 } from "@wordpress/block-editor";
 import { registerCoreBlocks } from "@wordpress/block-library";
-import { Popover, SlotFillProvider } from "@wordpress/components";
-import { ShortcutProvider } from "@wordpress/keyboard-shortcuts";
 
 // Default styles that are needed for the editor.
 import "@wordpress/components/build-style/style.css";
@@ -101,36 +95,21 @@ registerCoreBlocks();
 function Editor() {
   const [blocks, setBlocks] = useState([]);
   return (
-    // The Shortcut Provider enables the keyboard shortcuts of the editor.
-    <ShortcutProvider>
-      {/* The Slot Fill Provider is necessary to allow popovers and dropdowns to render properly */}
-      <SlotFillProvider>
-        {/* 
-            The BlockEditorProvider is the wrapper of the block editor's state.
-            All the UI elements of the block editor need to be rendered within this provider.
-          */}
-        <BlockEditorProvider
-          value={blocks}
-          onChange={setBlocks}
-          onInput={setBlocks}
-        >
-          <BlockEditorKeyboardShortcuts.Register />
-
-          {/*
-             The WritingFlow component enables arrow navigation accross the blocks 
-             and a few other keyboard interactions within the block editor
-            */}
-          <WritingFlow>
-            {/* The ObserveTyping component allows the editor to automatically show or hide the block toolbar while typing. */}
-            <ObserveTyping>
-              <BlockList />
-            </ObserveTyping>
-          </WritingFlow>
-        </BlockEditorProvider>
-        {/* Wrapper that renders popovers and dropdowns */}
-        <Popover.Slot />¨
-      </SlotFillProvider>
-    </ShortcutProvider>
+    {/* 
+        The BlockEditorProvider is the wrapper of the block editor's state.
+        All the UI elements of the block editor need to be rendered within this provider.
+      */}
+    <BlockEditorProvider
+      value={blocks}
+      onChange={setBlocks}
+      onInput={setBlocks}
+    >
+      {/*
+          The BlockCanvas component render the block list within an iframe
+          and wire up all the necessary events to make the block editor work.
+        */}
+      <BlockCanvas height="500px" />
+    </BlockEditorProvider>
   );
 }