Coming soon: GutenPoP, the integration of WP Gutenberg with PoP

WordPress Gutenberg is looking incredibly impressive, as it can be appreciated in the demo provided during WordCamp US 2017. Gutenberg will change drastically how WordPress sites are built with its intuitive, yet extremely powerful, user interface. While currently Gutenberg allows to only create content (replacing the content editor), in the future it is expected to be able to construct the whole site. In this post, Morten Rand-Hendriksen explains the new approach quite clearly: “Today we think of creating posts and pages. In the WordPress of Tomorrow, we will be making blocks and placing them in views.” This is how the WordPress of tomorrow will look like:

gutenberg-blocks

Blocks. Inside the views. Remarkably, that is what PoP is all about! Now, look how blocks are already filling the view in the PoP of today:

blocks

Also remarkably, these components have also been called blocks in PoP, putting in evidence that the Gutenberg concept is the same PoP uses. Whereas the WordPress community has been working on adding the block-concept to WordPress since 11 months ago, PoP has been based on this concept since its inception, already 4.5 years ago!

PoP, however, takes the block concept deeper down: the smallest units of components in a PoP view are not blocks, but modules, which are either an atomic representation of a functionality (eg: something as basic as a link), or a composition of other modules. It looks like this:

modules

In PoP, everything is a module. Blocks are also modules, with the particularity that they have their own state, and they know from what URL to fetch their data. A block can be as simple as containing 1 inner module, or extremely complex. Moreover, blocks can be nested, wrapping other blocks, creating incredibly powerful components, yet made-up of re-using independent, autonomous ones. It looks like this:

blockgroups

In this image above, the block with text “Welcome to PoP Demo!” is wrapping another block, which adds the gray background styling, and which itself is wrapping 2 other blocks: a log-in menu, and a newsletter form. These 2 blocks are completely autonomous, and they live in the website in different other views too. When nesting, blocks can alter the attributes of the inner blocks, thanks to PoP’s top-down approach for setting properties.

What’s coming next

Given all the similarities between Gutenberg and PoP, including how they are both based on block populating the view, it is extremely compelling to provide an integration between PoP and Gutenberg. PoP could perfectly augment the capabilities of a Gutenberg-based website by providing its own blocks as Gutenberg blocks.

In the following months, we will work on these features:

  • Site-builder integration: use Gutenberg to insert PoP blocks into the view of a GutenPoP website
  • Front-end integration: add Gutenberg to the front-end of a PoP website, for users to be able to create content (posts, comments) using the Gutenberg interface

We are extremely excited with this development, we can see how the combination of Gutenberg and PoP will enable the creation of highly-dynamic websites, yet in a purely drag-and-drop, users-can-do-it-from-the-frontend manner.


Sign up to our newsletter:

Welcome to the PoP framework!
Break the information monopoly

the PoP framework is open source software which aims to decentralize the content flow and break the information monopoly from large internet corporations. Read more.