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.

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

Platform docs: Add a page to explain how to render HTML from a list of blocks #55140

Merged
merged 2 commits into from
Oct 9, 2023
Merged
Changes from all commits
Commits
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
35 changes: 35 additions & 0 deletions platform-docs/docs/basic-concepts/rendering.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,38 @@ sidebar_position: 8
---

# Rendering blocks

## HTML Serialization and Parsing

After editing your blocks, you may choose to persist them as JSON or serialize them to HTML.

Given a block list object, you can retrieve an initial HTML version like so:

```js
import { serialize } from '@wordpress/blocks';

const blockList = [
{
name: 'core/paragraph',
attributes: {
content: 'Hello world!',
},
},
];

const html = serialize( blockList );
```

If needed, it is also possible to parse back the HTML into a block list object:

```js
import { parse } from '@wordpress/blocks';

const blockList = parse( html );
```

## Going further

Some of the customizations that the core blocks offer, like layout styles, do not output the necessary CSS using the `serialize` function. Instead in the editor, an additional style element is appended to the document head. This is done to avoid bloating the HTML output with unnecessary CSS.

We're currently working on providing a utility that allows you to render blocks with all the necessary CSS.