Whether you like it or not, WordPress page design and content creation now relies on Gutenberg by default. The new WordPress Block Editor has caused some confusion and inadvertently some push back. We now live in a “Block Editor World” so we must learn what a block is and how they work. The days of one giant WYSIWYG editor for a post are over. The new compartmentalized nature of Blocks are the cornerstone to building WordPress sites the right way. Using React, it keeps blocks decoupled from your other blocks/components.

In the examples, there is a Stock Ticker Block example we created that simply accesses the price from Yahoo! public finance data. First you need to create a plugin directory for your block to live in. In the plugin, you’ll want to create a plugin.php and a block.js file. In the plugin PHP file, put the following code.

Activate your plugin and your custom block will now be listed. Go create a post and look for a new block called “Stock Block” and put a stock ticker into the box. Save the post and view the page and you will see the stock ticket and the price!

Creating blocks is super easy once you get the hang of wiring everything up with WP & React. There are a few ways to make this block more resilient:

Cache API calls so remote web calls don’t execute every page load.

Return JSON instead of HTML from PHP.

Better CSS Styles (Green for gains and Red for losses)

Add a chart or other data from the API.

If you want to skip and just run the example, go checkout the example Readme for details on running the docker setup.