WordPress.org

“Gutenberg” is the codename for the 2017 WordPress editor focus. The goal of this focus is to create a new post and page editing experience that makes it easy for anyone to create rich post layouts. Gutenberg is planned to merge into WordPress core, but as of now (Sep/2017), it is being developed on GitHub, and you can try an Plugin version.

Note: Keep in mind it's not fully functional, feature complete, or production ready.

Overview

Gutenberg is newly developed, block-oriented editor. <<gutenberg_typing.gif> WordPress already supports a large amount of “blocks”, but doesn’t surface them very well, nor does it give them much in the way of layout options. By embracing the blocky nature of rich post content, we will surface the blocks that already exist, as well as provide more advanced layout options for each of them.

Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage. The idea combines concepts of what in WordPress today we achieve with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.

Installation

As of now (Sep/2017), Gutenberg is released as Plugin. Installation steps are same with usual plugin.

To install Gutenberg Plugin:

1. On Administration Screen, Click Plugins > Add New.
2. Type 'Gutenberg' in Search box and find Gutenberg Plugin.
3. Click Install Now and Activate

How to start Gutenberg

To start Gutenberg for new post:

1. On Administration Screen, click Gutenberg > New Post

To start Gutenberg for existing post:

1. On Administration Screen, click Posts > All Posts
2. Move cursor on title, and click Gutenberg from popup menu

Basic Usage

Gutenberg Demo

Gutenberg Demo is a good starting point to grab features. Open Gutenberg > Demo from Administration Screen, and follow the document and instruction.

Writing Post

To write a post in Gutenberg:

1. Enter the post title in the upper field.

2. Enter the post body content in the next field. This is called Paragraph block. From popup tool bar, you can customize the Paragraph Block, or change its type to other blocks such as Heading, Quote, List, Preformatted or Verse.

3. To add the new block, Click Plus("+") at the bottom of blocks, and select a type of block. Or, you can click Paragraph or Image to add them direct.

Tips: Type the name of Block in the Search box. It will incrementally search block from not only Bloks tab but also Embeds tab.

4. When you are ready, click Publish.

Setting Block property

To change properties of block,

1. Select basic properties from floating tool bar at the upper left of block.
2. For more detail settings, click toggle button, the three vertical dot icon at the right hand of block, to open Settings Menu and click "Show Inspector" icon. Or, Click "Setting" in tool bar at the upper right and click Block tab
3. In the Insepector, set each properties in the Inspector window

Moving Block

You can move each block by mouse or keyboard

By Mouse - Click Down icon or Up icon at the left of block

By Keyboard - Hit Down Arrow Key or Up Arrow Key

Deleting Block

To delete the block, click toggle button, the three vertical dot icon at the right hand of block, to open Settings Menu and click Trash icon.

Note: This action removes the block without any prompt. If you want to revert it, click Undo in the toolbar.

Setting Document property

To cange the document properties:

1. Click Settings in Toolbar at the upper right.
2. Click Document Tab
3. Set each settings

More Blocks

Gutenberg provides various blocks categorized into Blocks tab and Embed tab. Also, you can create your own block.

Blocks in Blocks

Each block has each view and customizable property. Click each block name for detail information (t.b.d.)

Common Blocks

• Paragraph
• Image
• Gallery
• Heading
• Quote
• List
• Cover Image
• Video
• Audio

Formatting

• Pullquote
• Table
• Preformatted
• Code
• Custom HTML
• Classic Text
• Verse

Layout Blocks

• Separator
• More
• Button
• Text Columns

Widgets

• Latest Posts
• Catagories
• Shortcode

Blocks in Embeds tab

Blocks in Embeds tab has common view and customization method. This is the example view of Twitter block.

To insert Embed Block

1. Select Embed Blocks from Embed tab
2. Enter URL to embed in the text box
3. Click Embed

From floating toolbar at the upper left, You can align the block left, center or right.

Click toggle button, the three vertical dot icon at the right hand of block, to open Settings Menu. From this menu, you can

• Show Inspector
• Delete the Block
• Switch between the visual/text mode

From Inspector of Embed block, you can specify Advanced option

• Additional CSS

In Embeds tab, following blocks are listed. Its contents will be subject to change depending on the version.

• Embed
• Twitter
• YouTube
• Facebook
• Instagram
• WordPress
• SoundCloud
• Spotify
• Flickr
• Vimeo
• Animoto
• Cloudup
• CollegeHumor
• Dailymotion
• Funny or Die
• Hulu
• Imgur
• Issuu
• Kickstarter
• Meetup.com
• Mixcloud
• Photobucket
• Polldaddy
• Reddit
• ReverbNation
• Screencast
• Scribd
• Slidshare
• SmugMug
• Speaker
• TED
• Tumblr
• VideoPress
• Vine
• WordPress.tv

Additional Information

GitHub Repository

As of now (Sep/2017), Gutenberg is being developed on GitHub.

Gutenberg FAQ

- https://github.com/WordPress/gutenberg/blob/master/docs/faq.md

Document Settings

t.b.d

Customization

t.b.d

Other documentaion

https://github.com/WordPress/gutenberg/tree/master/docs