Revise instructions

WordPress · Dec 10, 2024 · 8e07f04 · 8e07f04
1 parent 39868a5
commit 8e07f04
Showing 1 changed file with 47 additions and 46 deletions.
diff --git a/platform-docs/docs/intro.md b/platform-docs/docs/intro.md
@@ -4,8 +4,7 @@ sidebar_position: 1
 
 # Getting Started
 
-Let's discover how to use the **Gutenberg Block Editor** to build your own block editor in less than 10 minutes**.
-
+Let's discover how to use the **Gutenberg Block Editor** to build your own block editor in less than 10 minutes.
 
 ## What you'll need
 
@@ -22,7 +21,6 @@ Once done, you can navigate to your application folder and run it locally using
 
 To build a block editor, you need to install the following dependencies:
 
- - `@wordpress/blocks`
  - `@wordpress/block-editor`
  - `@wordpress/block-library`
  - `@wordpress/components`
@@ -33,66 +31,69 @@ We're going to be using JSX to write our UI and components as the block editor i
 
 ## Bootstrap your block editor
 
-It's time to render our first block editor. Update your `src/App.jsx` file with the following code:
+It's time to render our first block editor. We’ll do this with changes to three files – `index.html`, `src/main.jsx`, and `src/App.jsx`.
+
+First, we’ll add the base styles are for the editor UI. In `index.html` add these styles in the `<head>`:
+```html
+<link href="node_modules/@wordpress/components/build-style/style.css" rel="stylesheet" vite-ignore/>
+<link href="node_modules/@wordpress/block-editor/build-style/style.css" rel="stylesheet" vite-ignore/>
+```
+:::note
+
+There are more styles needed but can’t be added here because they are for the editor’s content which is in a separate document within an `<iframe>`. We’ll add those styles via the `BlockCanvas` component in a later step.
+
+:::
+
+Next, we’ll add blocks for the editor to work with. In `src/main.jsx` import and call `registerCoreBlocks`:
+```js
+import { registerCoreBlocks } from '@wordpress/block-library'
+registerCoreBlocks();
+```
+
+Finally, we’ll put our editor together. In `src/App.jsx` replace the contents with the following code:
 
 ```jsx
 import { useState } from "react";
 import {
   BlockEditorProvider,
   BlockCanvas,
 } from "@wordpress/block-editor";
-import { registerCoreBlocks } from "@wordpress/block-library";
-import { getBlockTypes } from "@wordpress/blocks";
 
-// Default styles that are needed for the editor.
+// Base styles for the content within the block canvas iframe.
 import componentsStyles from "@wordpress/components/build-style/style.css?raw";
-import blockEditorStyles from "@wordpress/block-editor/build-style/style.css?raw";
 import blockEditorContentStyles from "@wordpress/block-editor/build-style/content.css?raw";
-
-// Default styles that are needed for the core blocks.
-import blocksCommonStyles from "@wordpress/block-library/build-style/common.css?raw";
 import blocksStyles from "@wordpress/block-library/build-style/style.css?raw";
 import blocksEditorStyles from "@wordpress/block-library/build-style/editor.css?raw";
 
-const styles = `
-  ${ componentsStyles }
-  ${ blockEditorStyles }
-  ${ blockEditorContentStyles }
-  ${ blocksCommonStyles }
-  ${ blocksStyles }
-  ${ blocksEditorStyles }
-`;
-
-const registeredBlockTypes = getBlockTypes();
-// Registers the default core block types, avoiding doing so again during HMR.
-if (
-  ! registeredBlockTypes.length ||
-  ! registeredBlockTypes.some((blockType) => blockType.name.startsWith('core/'))
-) registerCoreBlocks();
-
 export default function Editor() {
-  const [blocks, setBlocks] = useState([]);
+  const [ blocks, setBlocks ] = useState( [] );
   return (
-    <>
-      <style>{ styles }</style>
-      {/*
-        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 renders the block list within an iframe
-          and wires up all the necessary events to make the block editor work.
-        */}
-        <BlockCanvas height="500px" styles={ [ { css: styles } ] }/>
-      </BlockEditorProvider>
-    </>
+    /*
+      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 renders the block list within an iframe
+        and wires up all the necessary events to make the block editor work.
+      */ }
+      <BlockCanvas
+        height="500px"
+        styles={ [
+          { css: componentsStyles },
+          { css: blockEditorContentStyles },
+          { css: blocksStyles },
+          { css: blocksEditorStyles },
+        ] }
+      />
+    </BlockEditorProvider>
   );
 }
+
 ```
 
 That's it! You now have a very basic block editor with several block types included by default: paragraphs, headings, lists, quotes, images...