Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update platform docs intro #61341

Merged
merged 4 commits into from
Dec 11, 2024
Merged

Update platform docs intro #61341

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d19f572
Update platform docs intro so following it actually works
stokesman May 3, 2024
39868a5
Remove outdated part about IS_GUTENBERG_PLUGIN env variable
stokesman Dec 10, 2024
8e07f04
Revise instructions
stokesman Dec 10, 2024
c354415
Make styles array stable
stokesman Dec 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 47 additions & 46 deletions platform-docs/docs/intro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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`
Expand All @@ -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";
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I realized this one was extra, it is @import‘d in the block library’s style (the one on the next line).

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={ [
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you think there's any performance value in putting a stable array here (maybe define this array outside the component)

{ 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...
Loading