In WordPress 5.0 the new WordPress editor went live. Check out this really fun Gutenberg sandbox to try it yourself. Instead of all of the page content being stored in one big pool of text, it can now be rearranged, styled, configured, and customized at a block level. Ultimately, the block data is all stored in the same post_meta field.
Here’s a very simple example of a styled paragraph:
<!-- wp:paragraph {"dropCap":true,"backgroundColor":"subtle-background","fontSize":"large"} -->
<p class="has-background has-drop-cap has-large-font-size has-subtle-background-background-color">Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>
<!-- /wp:paragraph -->
I don’t expect you to pay much attention to that code, and WordPress doesn’t provide a way for content editors to directly manipulate the block code, but you can still edit the HTML code of applicable blocks within the Block Editor.
What’s great about the new Block Editor?
The new editor provides content writers and editors a lot of awesome built-in functionality and styling options. You can still do paragraphs, bold text, links, images, videos, galleries, blockquotes, and all the formatting that was available in what is now called the “Classic Editor”, but a whole new world of flexibility is added by layout elements like columns or dynamic widgets.
The true awesomeness of Gutenberg is its extensibility. Plugin and theme developers can create new types of blocks for things like forms, custom layout pieces, dynamic content display, and fancy styling. The Block Editor is built using React, so new blocks are built within the React framework. It is possible to create blocks without React, by using a framework like ACF Blocks, but the block’s user interface would be severely limited.
Unique blocks can be added to the theme, so content editors have a consistent user interface to highlight featured content and do fun things like cross-reference other content. The Gutenberg editor can show previews of each block, showing you exactly what the content will look like to site visitors. Some blocks have the content generated by PHP functionality, with none of the content stored in the WordPress database, only the configuration of the block.
Another great advantage to the new Block Editor is custom formatting. Existing styles like paragraphs or block quotes could be enhanced with additional layout options, to match your sites ideal design styling. New formatting types can be added to the formatting toolbar, allowing content editors to do things like select some text, click a button, and have the text instantly wrapped in a specific tag and with a custom CSS class.
Where to go from here
To give block development a shot on your own, check out the handbook and the Gutenberg GitHub. I strongly suggest looking at how the core WordPress blocks and formatting options are set up, they provide a lot of examples of how blocks are pieced together by different React components.
Or if you need a helping hand, we offer custom block development and have worked on more than a half dozen complex blocks. Check out our Block Editor services page for more info if you are looking for custom block development.