With much anticipation, the whole WordPress community is abuzz with its preparation for the coming of the new WordPress Post Editor experience. Codenamed Gutenberg as a callback to the 15th-century invention of the printing press, which heralded easier propagation of knowledge contained in the written text, the new Editor signals a commensurate leap on the path towards democratizing publishing.

The reimagining of the editor is centered around the concept of a block and is powered by a new force in WordPress, namely React.js, a technology pioneered by Facebook and embraced by many other web giants looking to improve the user experience. Using React in the editor allows for a richer development of elements and a better representation of what their combination will look like upon rendering in the frontend browser.

The fundamental shift that React represents is its departure from a PHP approach which requires a page reload triggered by saving settings or updating a post to see the changes in the dashboard. While we’ve long had the ability to invoke javascript via AJAX to make changes without page refresh, these calls are typically limited to a single focus. React allows all of the elements in the HTML structure to react to each other based on changes made to each.

And it can do all of this with great speed and efficiency because it does not need to interact with the database, like with PHP, and each block only uses the minimal set of React tools needed for its proper functioning. Upon publishing or updating a post, React packages each block from the javascript object to an HTML element complete with CSS and saves it as a comment to the post. In this way, a user can toggle between the classic editor and the new editor without losing any information.
In this talk, we’ll review in more depth how to create a block using the tools from the WordPress Block API and elsewhere, what the code constituents of a block are, and explore how to reshape existing code to render in this new Editor environment.

Presentation Slides »