Paul Barthmaier: Creating WordPress Blocks to Reshape Plugin Functionality for the New WordPress Editor

Continue the discussion

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Published

March 1, 2019

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 »

Rate this:

Event

WordCamp Lehigh Valley 2018 11

Speakers

Paul Barthmaier 2

Tags

WordPress Blocks 1

Language

English 7362

Download
MP4: Low, Med, High
OGG: Low
Subtitles
Subtitle this video →
%d bloggers like this: