Gutenberg 101

Gutenberg is the new editor of WordPress.

I think Wordpress inspired by medium.com's success, and decide to mimick of its features.

But after inspected and learned how to custom block can made, I realized this is a complete new paradigm for Wordpress development.

I will try to summarize features.

• Gutenberg is a react application. All of its components are react components too. This is a huge positive for me. Because I am very delightful for react's "functional approach" and "purity"
• You can make a custom block via generate a new npm package (npm init or yarn init) and add development dependency for "@wordpress/scripts"
  • Note: I was started to learn gutenberg nearly one and half years ago and things are not as easy as now.
• Some inconsistiencies and bugs are happening even today. (For example, if you create a custom block with "a" element -link- gutenberg automatically added a rel="noopener" to element and this breaks block validation) But general approach is very successful and I am very satisfied.

Basic logic is simple as below:

1. We have a block.
2. Block have attributes.
3. Block have an edit method. This method can use wordpress standard elements for building admin interface for block.
4. Block have a save method. This method serializes attributes in an custom jsx template and build the block's markup for saving.
5. Block saved as html, there is nothing special. Note: Blocks name and some properties maybe serialized as special html comment syntax as <!-- wp:block/name -->
6. When you editing a block this html is de-serialized and gutenberg custom interface (your block's edit method) is re-initialized.