Getting started with Project Gutenberg? Here’s everything you need to know

If you are new to WordPress, first of all welcome, you might have heard talks about the “new editor”, “project Gutenberg”, the “old editor” etc. All these might sound confusing, so let’s clear things up a bit. The block editor is the set of content creation tools made widely available to users in WordPress v5.0. It is part of project Gutenberg and according to the project’s official page:

It’s a whole new way to use WordPress

In a bit more detail, according to project’s handbook:

“Gutenberg” is the name of the project to create a new editor experience for WordPress. The goal is to create a new post and page editing experience that makes it easy for anyone to create rich post layouts.

The block editor was the first phase of the project, it allows users to create content using units called blocks, instead of free-form text with inserted media, embeds and Shortcodes. The next phases include full page editing capabilities such as creating and managing navigation menus, sidebars, widgets and more.

Read More

How to use external React components in your Gutenberg blocks

Gutenberg itself already exposes a lot of components ready to be re-used in our custom blocks. Most of these are located in wp.components and wp.blocks, and they include helpful building blocks for every Gutenberg block: Text Controls, Toggles, Tooltips, Icon Buttons, Tabs, and many many others. Gutenberg’s native component library pretty much has us covered on all basic cases, on every kind of basic UI control we might need but still there are cases where we might need to take it a step further on some kind of more specialized custom block.

Read More

Things to consider when updating a WordPress theme for Gutenberg

With Gutenberg getting close to being ready for a beta release and ultimately being merged into core WP, its API and patterns are at a level mature enough that theme authors (and theme shops!) can start planning ahead for the inevitable adoption of the new block system.

In this post we’ll see what the average theme author should have in mind when updating a theme for Gutenberg compatibility and ponder about the future in theme and plugin editing.

Read More

Importing Gutenberg core WordPress libraries as ES modules with webpack

Gutenberg comes with a set of core libraries which are necessary for any kind of custom block development. Namely those libraries are:

  • @wordpress/components: Generic, reusable UI WordPress components
  • @wordpress/i18n: Internationalization utilities
  • @wordpress/element: Abstraction on top of React
  • @wordpress/date: Date formatting and manipulation utilities
  • @wordpress/blocks: Module providing utilities for registering and building blocks
  • @wordpress/data: Abstraction on top of Redux
  • @wordpress/editor: Module representing the WordPress Editor’s page
  • @wordpress/utils: Various generic utilities

To use them you need to include them as external script requirements to your final build by registering and enqueueing them, similarly to how you’d include any kind of script or style within WordPress.

Read More

Project Gutenberg – Technology decisions

Gutenberg, the new and modular editing experience for WordPress, has been in rapid development throughout the past year and will soon arrive to our WordPress installations. Gutenberg will be released along with WordPress 5.0 (which is the next major release), and although no official date has been set for that, it’s safe to assume that it’s not very far away especially judging by the remaining features for MVP completion.

Read More

Getting ready for the Gutenberg transition

Gutenberg is right around the corner with a speculated release in the second quarter of 2018, but what is Gutenberg? In short it’s the new editor experience for WordPress. The project aims to give you broader, better, and more consistent control on your content, and later, along the way your entire page layouts. The aim, at least at the beginning is to unify all content elements into what are called blocks. In the current editor experience, text, media items, shortcodes, links, offer quite different experiences when creating and customizing them. The introduction of Gutenberg blocks aims to make things more consistent for users that just want to create content without even knowing what a shortcode is.

Read More