Free Gutenberg How-To Videos

In our last Gutenberg update, we shared our high level recommendations to help enterprise WordPress users fully embrace the block while planning for WordPress 5.0 and the new Gutenberg editor. That included an initial set of Gutenberg educational videos we’ve developed exclusively for VIP clients and their teams.

Today we’re releasing a second set of videos that are available for anyone to use. These are aimed at helping you convert current customizations including things like ACF codes and shortcodes, and build block templates to get your sites running Gutenberg well before WordPress 5.0 ships.

Register for free and watch them at: https://vipgutenberg.com

Here are the topics covered in the new videos:

Converting Custom Content to Gutenberg

  • Shortcodes to Blocks
  • ACF Fields to Blocks
  • CMB2 to Blocks

Access Control & User Permissions

  • Controlling access to blocks
  • Controlling access to blocks based on user roles
  • Creating Block Templates
  • Applying User Roles to Block Templates

These videos are the culmination of weeks of research with our clients. VIP went to some of the biggest enterprise users of WordPress and asked “What are your questions about Gutenberg? What do you loath to explore about the new editor?” Their answers drove a curriculum exploring how to convert custom content to Gutenberg and access control with user permissions.

As we mentioned in our previous update, we’re also developing a plugin to help make it easy to test and implement Gutenberg at the Page and Post level. We’ll have updates on that soon.

In the meantime, if you’re a VIP client and you have questions about rolling Gutenberg out on your sites, get in touch with our Support team.

If you’re not currently on VIP and are feeling less than ready to embrace block-based life, drop us a note.

March VIP Roundup

If you aren’t yet a part of the wave of activity around Gutenberg development, experimentation, and planning across the WordPress community, now is a great time to join in. We have a slew of March updates and tools to share on that front in this roundup, along with news from across the community, and a run-down of Spring and early Summer events including our own VIP Workshop!

Read on for all this, plus a spotlight on TechCrunch‘s redesign, rebuild, and relaunch on VIP.

From Enterprise Happiness Engineer Shannon Smith’s talk at the Montreal WordPress meetup

Gutenberg News and Notes
The latest tools, demos, and updates around the block-based editor coming to WordPress 5.0

  • Have teammates who haven’t yet played around with the Gutenberg editor? No problem! They can use our TestGutenberg.com site to try out the latest version on a standard WordPress site.
  • For VIP clients, we’ve partnered with well-known WordPress educators Zac Gordon and Joe Casabona to develop our own videos on the Gutenberg project. Get all the details on how to access these videos on the related Lobby post.
  • We are committed to helping all of our clients integrate the new editor into their workflow smoothly. We’re working on a tool that will help you incorporate Gutenberg in to your production environments by Page and Post. The Gutenberg Ramp plugin will allow you to make granular choices about where Gutenberg appears so that you can get teams working with it sooner on live sites, test all of your customizations, and get everything squared away ahead of WordPress 5.0 deployment. Once we have this tested and in place on our platform, we’ll release a public version as well that anyone can use. More on that soon!
  • Automattic Product Designer Mel Choyce presented at LoopConf on the future of Customization in the post-Gutenberg world. And Enterprise Happiness Engineer Shannon Smith gave a talk on Gutenberg and the future of WordPress, including a demo of our new TestGutenberg tool, for the Montreal WordPress community.
  • Jay Hoffman at Reaktiv posted a helpful step-by-step guide to getting started with Gutenberg block attributes.
  • In the month of April, rtCamp is offering complimentary 30 minute technical introductions to Gutenberg.
  • Keep up with everything having to do with Gutenberg at VIP and a list of helpful resources in this regularly updated doc.

News and Releases
Updates from around VIP, our clients, and our agency and technical partners.

  • Our new, streamlined Data Sync process for VIP Go allows you to easily and quickly replicate all of your production data to non-production environments. A self-service option is on the way soon!
  • We have an amazing group of speakers lined for VIP Workshop May 14-17th in Napa, California. Ticket sales end next Friday – more details below in Upcoming Events.
  • AMP version 0.6.2 rolled out across WordPress.com, including VIP sites hosted there (Lobby post).
  • Ads.txt manager, developed and maintained by featured partner 10up, is now available on VIP Go. This helpful tool allows you to manage and validate the contents of your ads.txt file through your admin interface (Lobby post).
  • Jetpack 5.9 General Maintenance rolled out this month (Lobby post, Announcement).
  • The PHP 7.2 upgrade has rolled out to all WordPress.com servers (Lobby post). It’s scheduled to deploy this week (#) on VIP Go.
  • Technical integration Ooyala version 3.0 is now available (Lobby post).
  • Trew Knowledge shared a look back at the work they did in collaboration with us at VIP in optimizing Olympic.ca and Olympique.ca for the heavy traffic expectations of the 2018 Games. The site’s visitors enjoyed gold medal performance throughout, despite it’s “exceeding projections by more than 200% and doubling what was generated in Rio 2016 with more than 17 million page views.”
  • Human Made released a trio of tools: React-wp-scripts for development tooling, Repress for smart Redux stores, and react-oembed-container to simplify oEmbed rendering. And Peter Wilson presented on a major media company replatforming at LoopConf.
  • 10up’s Helen Hou-Sandí was featured in NY Magazine’s “Ask A Tech Person” highlighting her favorite gadgets. And Adam Silverstein wrote up his experiences contributing MathML support to the AMP project. 10up has also made accessibility standard WCAG 2.0 Level A a baseline requirement for all projects, and updated their Engineering Best Practices to include specific standards.
  • Alley Interactive launched the 2018 State Science and Engineering Indicators data visualization project for the National Science Foundation.
  • rtCamp celebrated the company’s 9th anniversary at their annual team gathering in Goa.
  • Weston Ruter, CTO of XWP, and Alberto Medina, Developer Advocate with the Web Content Ecosystems team at Google, were featured in an episode of WPWeekly this month on the AMP Project.

Media and Marketing Notes
Research and perspectives on the business of media and the practice of marketing.

“One of the biggest challenges facing newsroom innovators is transferring one-off prototypes to product teams. This can be exacerbated when there are simply too many new experiments for any one team to take ownership of.”

-Allie Schultes, Social media and outreach producer at BBC Labs, in notes from the team’s first Media Innovation Unconference.

“We spent a lot of time literally watching them use it on their phone. When does their face light up because they love it, or their eyebrows scrunch up because they’re stuck?”

-Arizona Daily Star product manager Becky Pallack as quoted by Meg Heckman in the Columbia Journalism Review, on the research they did in developing and evolving chatbots.

Client Spotlight: TechCrunch


Big congratulations are in order for Nicole Wilke and the entire TechCrunch team, along with Human Made, for launching a brand new TechCrunch on VIP in March. It was a complete rebuild from the ground up, including design, user experience, and architecture. Nicole’s introductory post traces the project from first principles all the way through to launch, and explores the rationale behind the TechCrunch team’s choice of a decoupled setup.

Upcoming Events

Tickets sales for our favorite event of the year, VIP Workshop (May 14-17th in Napa California), will end April 13th. In addition to kickoff talks by Kinsey Wilson, Howard RheingoldMiguel Fonseca, and Tammie Lister, session leaders include VIP clients like TechCrunchNielsen, and FiveThirtyEight, agency partners DekodeAlley Interactive10uprtCamp, and XWP, and Automatticians Simon Wheatley and Matt Perry. We keep the event deliberately small to make sure there are lots of opportunities for chance conversations and informal breakout discussions. Book soon!

  • BigWP NYC is coming up on Wednesday, April 11th! If you’ll be in the area and want to attend, RSVP soon via the meetup group to hear talks by Paul Schreiber from FiveThirtyEight, Andrew Fleming from Dow Jones, Tom Harrigan from Alley Interactive, and Kevin Langley from Human Made. It will take place at USA Today’s new offices in Midtown. Doors will open at 6:30pm. Space is extremely limited.
  • SRCCON 2018 will be June 28-29 in Minneapolis and the call for participation of all kinds is open! It’s the fifth anniversary for the event that gathers over 300 journalism-technologists, newsroom leaders, and others working to change journalism for the better. VIP typically sends as many folks as we can to this event and it comes highly recommended.
  • VIP Happiness Engineer Shannon Smith will be giving a talk on code review April 11 at Web a Québec, the largest French-speaking digital event in North America.
  • rtCamp is sponsoring FOSSMeet at College of Engineering Pune (COEP), one of oldest and top engineering institutes in India, April 7-8. Rahul Bansal, rtCamp’s CEO, will be speaking there about the WordPress ecosystem.
  • We will be sponsoring ONA Insights: Revenue and Engagement in Toronto, May 11th at the Globe and Mail Headquarters.
  • The awesome WordCamp for Publishers returns August 8-10 in Chicago and ticket sales are now open. Follow the Twitter handle @WCPublishers for updates. Check out our post from last year’s inaugural event to get a sense of what to expect.

Getting Ready for Gutenberg

WordPress 5.0 will bring the biggest and most exciting change to the WordPress editor experience, ever, and we want you to be ready. Much of this post will be useful for anyone running enterprise WordPress applications, anywhere, but it also mentions some things we’re doing specifically on the VIP platform or for our customers. Wherever possible we’re taking the tools we’ve developed for our own systems, and making them available for the community to take advantage of as well.

  • Try out the Gutenberg editor as a front-end experience. At our TestGutenberg.com site, you can easily try out the latest version of the Gutenberg editor on a standard WordPress site to get a feel for what it’s like to compose and edit with blocks. If you don’t already have a test environment with Gutenberg set up, this is an easy way to introduce your whole team and everyone who touches the WordPress admin to the new interface. This site is free and available for anyone to use.
  • Prepare your teams.There are a wealth of learning materials across the community thanks to the work of countless creators, including both free resources and videos and courses offered for a fee. Our documentation page points to a number of community resources and write-ups, and Gutenberg.news tracks just about everything that comes out across the community.

    For VIP clients, we’ve partnered with well-known WordPress educators Zac Gordon and Joe Casabona to develop our own videos on the Gutenberg project. VIP clients can get all the details on how to access these videos on the related Lobby post.

  • Test your customizations. No matter where your projects are hosted, you’ll want to start testing and planning now. We recommend developers to set up a local testing environment in which you can test all customizations and integrations to see how they work with Gutenberg prior to exposing it to users. To assist with that effort, we are working on compiling Gutenberg readiness information from partners and will share it when available. There is also a recently released Gutenberg compatibility library that may be helpful: https://github.com/danielbachhuber/gutenberg-plugin-compatibility#gutenberg-plugin-compatibility
  • Plan for a smooth transition. Based on testing and conversations with your teams, determine how and when you want to implement the new interface in your workflows. As mentioned previously, installing the Classic Editor Plugin will allow you to maintain the legacy editing experience after you install WordPress 5.0.

    For VIP clients, we’re developing a tool that will give our clients fine control over how Gutenberg surfaces at the Post and Page type level, both before and after 5.0 is deployed. This will give teams the ability to test more granularly ahead of time and phase the new editor in as needed based on team needs. It will also allow them to easily set a state that will persist after 5.0 launches, and we will have it set it to keep the legacy editor on by default.

    We are working on a public version of this plugin as well and will aim to release it shortly after we have it squared away for use on our own systems. More on this soon!

We’ll keep this documentation page updated with all of the latest information about Gutenberg at VIP.

The New WordPress Editor: What You Need to Know about Gutenberg

In 2018, WordPress will modernize, streamline, and simplify the content creation experience with Gutenberg. It represents the biggest change to the WordPress user experience in several years. In fact, in the State Of The Word 2017 Matt Mullenweg described its enduring importance as “the editor for the next twelve years.” In this post, we hope to help VIP clients and all enterprise WordPress users understand these exciting changes, and how to best prepare your teams.

Gutenberg technical lead Matías Ventura’s live demo at WordCamp US last week (photo via @photomatt)

What is Gutenberg?

Gutenberg is the codename for the new WordPress publishing experience. It optimizes for direct manipulation of the visual presentation of the content, instead of through indirect means, like metaboxes. The building blocks of a Gutenberg post are, well, blocks. Blocks help simplify the many ways we build a page (shortcodes, widgets, custom HTML, media, text formatting, and embeds) into a single, searchable flow and UI umbrella. The name comes from Johannes Gutenberg, the founder of the printing press.

The new streamlined, modular editor

To get a sense of how the new editor works for yourself, there’s no substitute for downloading the current plugin in a test environment and giving it a spin. However, for a quick overview take a peek at this live demo (video) presented at last weekend’s State Of The Word:

  • The way the block “handles” intuitively appear when they’re needed
  • Simple ways to manipulate assets in a gallery
  • Preview custom HTML blocks inline
  • Cleverly using blocks to temporarily store code and content snippets
  • Bulk editing blocks, for lengthy posts
  • “Unified undo” so you never lose work.

What’s important for enterprise WordPress teams to think about?

Every time the VIP team helps a publisher replatform, we receive an overwhelmingly positive response from their editorial team. The feedback is almost always: “WordPress is so easy to use.” We believe the Gutenberg editor will be no different. The new editor offers content creators a straightforward way to find, insert, and work with elements on the page. We think this experience is so compelling that editorial teams will quickly want to adopt it into their workflow.

For teams who have extensive customizations in place, upfront planning will be required for a smooth transition to Gutenberg. Fear not – VIP plans on helping clients opt-in to the new editor gradually over time. As many of you know, backwards compatibility is a core principle of WordPress, and it is no different with Gutenberg. Any content created in Gutenberg will be editable in the classic editor, and vice versa.

And beyond the modernized editorial experience itself, Gutenberg opens up lots of new possibilities. Let’s explore some that already exist, along with some that could come into play as the project rolls on:

1. Placeholders and Templates

With Gutenberg, editors can build complex story packages with various content blocks: headline, deck, pull quote, video, embed, and gallery. Placeholder blocks can easily indicate exactly what should go where and keep the editorial process moving forward.

As of Gutenberg’s 1.8 release, the project has introduced initial support for templates. This allows a developer to define a specific template for, say, an Event Post. When a user creates an Event Post, they will see a page pre-populated with blocks for Title, Image, Date, Location, Description, and other details.

Blocks can function as placeholders, and elements for easy templating

2. Collaborative Editing

Today, if someone is working in a post in WordPress, the post locking feature prevents writers from overwriting each other. With Gutenberg, it’s possible to imagine locking at the block level, allowing multiple people to work on sections of a draft without interrupting each other.

The flexibility of content blocks means that there could be a block for internal notes, which could allow editors to leave comments throughout a story while editing. The notion of surfacing editorial feedback inline can be useful in other ways as well. Here’s a possibility that the Yoast team has presented, on inline SEO feedback.

3. Block and Embed Discovery

We’ve heard editors complain about the difficulty of finding shortcodes. Gutenberg allows editors to easily search for content blocks, be it a Twitter embed, a Vimeo embed, or a custom template. Not only does this make embed discovery easier, but we could imagine a future with a content block marketplace.

Developers or agencies could create content blocks for unique needs, for media like galleries, or content types like recipes. This could also facilitate better code reuse across teams within an organization.

4. A Standardized Approach to Page Building

In the coming year, Gutenberg’s project focus will shift away from the editor to site creation itself. With that transition, it will bring a standardized approach to page building to native WordPress. Over the years we’ve seen clients create page builders for section fronts or marketing pages using Field Manager, Advanced Custom Fields, or a custom-built solution. Having a well-defined approach within core could provide a framework to support a wide variety of commercial and custom solutions. This common standard could in turn make content and data more readily portable across the various page building approaches.

5. A Foundation for Personalization

With page content all composed of blocks, it’s easy to imagine how that could facilitate conditional delivery of content based on user attributes. For example, on a media site, subscribers could be served a block with a related content recommendation, whereas new visitors would see a “subscribe” call to action. On the backend, the editor interface could offer a toggle so that a site editor could preview a post as various user segments like subscribing member, new visitor, and returning visitor.

So, what’s the timeline and what will rollout look like?

Gutenberg is already available as a plugin, and is set to be integrated into WordPress 5.0 which is planned for April 2018. The Gutenberg team is currently focused on the post-editing experience, but will then expand their approach to template creation, site creation, and more.

In order to preserve publishing continuity, there is a plugin called Classic Editor that will allow teams to use the current editor as they work on transition plans. We will manage the release of WordPress 5.0 to make the process smooth and opt-in for VIP clients. However, we expect that many editorial teams will want to start experimenting and creating content in Gutenberg right away.

The Classic Editor plugin

The VIP team is working closely with the Gutenberg team as they test and roll out the new editor. We know very well that our clients have extensive integrations with the current WordPress editor and will want a gradual transition. We are here to help answer any questions on preparing development and editorial teams for the transition.

What happens to existing content?

The current WordPress editor is not going away. Data storage will still be stored as HTML in post_content, which means nothing will change for existing content. Within Gutenberg, there will be a Classic Text block to handle any legacy content within a block of its own. Essentially, it’s the Classic Editor embedded as a block, and will aid in a smooth and carefully planned upgrade path.

Help test Gutenberg

How can I share feedback?

The Gutenberg Team is especially interested in feedback from VIP clients, who usually have large editorial teams and complex workflows. They would love for you to help them stress test the new builder. At WordCamp US last weekend, the team set up a special booth for in-person user testing, and will be sharing out findings from those tests. Here are three ways for you to test Gutenberg and share feedback:

  • Coming up tomorrow, December 7, at the BigWP meetup in London, Tammie Lister, design lead on Gutenberg, will be presenting on the project and taking questions.
  • Get involved on Github by installing the plugin and sharing feedback.
  • This week the VIP team, along with Matías and Tammie, traveled to New York City to spend time with VIP client editorial teams. On this research trip, we gathered information about different editorial workflows, and ran usability tests with web producers. We plan on doing more of these with VIP clients, both virtually and in-person, in the next few months.

We will be communicating updates in the VIP Lobby as relates to the Gutenberg rollout as the project continues. Meanwhile, as you test the plugin and begin to assess plans for the rollout in April, feel free to reach out to your VIP support team. We’d be glad to help.

More reading:

A huge thank you to Dave Coustan who contributed to the research and drafting of this post.

 

Ready to get started?

Drop us a note.

No matter where you are in the planning process, we’re happy to help, and we’re actual humans here on the other side of the form. 👋 We’re here to discuss your challenges and plans, evaluate your existing resources or a potential partner, or even make some initial recommendations. And, of course, we’re here to help any time you’re in the market for some robust WordPress awesomeness.