“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.
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.
As of now (Sep/2017), Gutenberg is released as Plugin. Installation steps are same with usual plugin.
To install Gutenberg Plugin:
To start Gutenberg for new post:
To start Gutenberg for existing post:
Gutenberg Demo is a good starting point to grab features. Open Gutenberg > Demo from Administration Screen, and follow the document and instruction.
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.
To change properties of 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
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.
To cange the document properties:
Gutenberg provides various blocks categorized into Blocks tab and Embed tab. Also, you can create your own block.
Each block has each view and customizable property. Click each block name for detail information (t.b.d.)
Common Blocks
Formatting
Layout Blocks
Widgets
Blocks in Embeds tab has common view and customization method. This is the example view of Twitter block.
To insert Embed Block
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
From Inspector of Embed block, you can specify Advanced option
In Embeds tab, following blocks are listed. Its contents will be subject to change depending on the version.
As of now (Sep/2017), Gutenberg is being developed on GitHub.
- https://github.com/WordPress/gutenberg/blob/master/docs/faq.md
t.b.d
t.b.d
