Gutenberg + HubSpot = Super-site on a Shoestring

You may have heard... in the midst of the Christmas rush 2018, Automattic (WordPress’s parent company) deployed Gutenberg, the new WordPress editor, freaked out millions of users, and frustrated developers as well.

The new editor changed the very nature of how publishing works in WordPress by introducing Blocks (modules) that replaced the familiar word-processor-like text-editing interface.

Side note: Blocks are eerily similar to HubSpot's Flex Columns which we tend to avoid in HubSpot website development because the modules live at the content level of a site, disconnecting key structural elements from templates and opening opportunity for content and UX surprises come update or redesign time – especially after an automated migration.


My Wordpress Auto-updated. What now?

  1. First, install the Classic Editor Plugin.
  2. Next, install our Flow theme.

Gutenberg was initially devoid of a migration path between the legacy editing environment and Blocks (fortunately, the Classic Editor Plugin was created by volunteers to patch that migration hole).


partial-blocks-list

Next, upgrade your theme

Many users found the Blocks model simultaneously frightening and exciting. The pace of progress can catch us all off guard at times. While extending functionality, being able to add a plethora of blocks means users can re-design layout elements at the page level (please resist the urge, you'll thank me for that later, and so will your users).

Having a large number of clients on WordPress, the move certainly caught our attention. Not because of the potential for new website redesign projects or possible migrations to other platforms (Gutenberg included), but for the inconvenience and cost we anticipated clients would be forced to endure.

Accepting that Gutenberg is here to stay, we opted to embrace the change as an opportunity to improve our deployment for clients on the WordPress CMS.

To that end, we focussed on:

  1. providing legacy WordPress sites with a reliable upgrade path, and
  2. super-charging our new WordPress sites with HubSpot to add advanced functionality while eliminate unnecessary and complex plugins, plus
  3. pre-installing (and pre-configuring where possible) best-in-class plugins and template structures aimed at lead-generation and website stability/security.

Introducing Flow, our core Premium WP Theme available exclusively at wpSites.site

Much more than a premium WordPress theme for Gutenberg, Flow themes come integrated with a lead-gen toolset right out of the box because Flow is powered by Hubspot Growth Suite.

Installed alongside HubSpot are best-in-class Yeost SEO, Social Warfare, WPRocket, MonsterInsights, UpdraftPlus, Disqus, AceIDE and much more. Plus, you can easily add Google analytics and other integrations without the need for coding.

editing-blocks


Key HubSpot Integration

Once connected to HubSpot, users can activate GDPR controls, turn on the chatbot and enjoy the full functionality of their HubSpot subscription (even at the HubSpot Free level, and GrowthSuite). Plus, we've built additional integrations.

hubspot-form-selector

K HubSpot Connector by KAYAK is an OAuth 2.0 connection that allows HubSpot to populate Contact records via a forms drop-down menu on Flow Landing Pages (yes, landing pages in Wordpress without a 3rd party LP tool)!

In a nutshell, K HubSpot Connector extends the functionality of HubSpot’s Contact Form Builder for WordPress and Conversion Tools by HubSpot, which is also pre-installed.

Finally, the connection allows form submissions to update your HubSpot portal’s Contact properties. You may still opt to embed forms in Gutenberg HTML modules manually if you prefer to keep it old-school.


So there you have it. Wordpress Gutenberg + HubSpot for a killer site on a shoestring.

An excellent starter or even levelling up site. It's not a replacement for a fully holistic consultative or content-driven HubSpot website deployment, but it'll help you bridge the gap for sure.

create your most powerful wordpress website