This page lists all default Gutenberg blocks that ship with WordPress 5.0.

The blocks are organised by their category:

• Common blocks
• Formatting
• Layout
• Widgets
• Embeds

The block slug is listed for each block. Gutenberg uses this slug as a unique identifier for each block.

If you’re looking to learn Gutenberg development, check out my posts on learning Gutenberg development in 6 days, or the in-depth Gutenberg development learning guide.

Common blocks

Paragraph

• 

• 

Slug: core/paragraph

Image

• 

• 

Slug: core/image

Heading

• 

• 

Slug:core/heading

Gallery

• 

• 

Slug: core/gallery

List

Slug:core/list

Quote

Slug:core/quote

Audio

Slug:core/audio

Cover

Slug: core/cover

File

Slug:core/file

Video

Slug:core/video

Formatting

• core/preformatted
• core/code
• core/freeform: Classic Edit
• core/html: Custom HTML
• core/pullquote
• core/table
• core/verse
  

Layout

• core/button
  
• core/columns
• core/media-text
• core/more
• core/nextpage: Page break
• core/separator
• core/spacer
  

Widgets

• core/shortcode
• core/archives
• core/categories
• core/latest-comments
• core/latest-posts

Embeds

• core/embed
• core-embed/twitter
• core-embed/youtube
• core-embed/facebook
• core-embed/instagram
• core-embed/wordpress
• core-embed/soundcloud
• core-embed/spotify
• core-embed/flickr
• core-embed/vimeo
• core-embed/animoto
• core-embed/cloudup
• core-embed/collegehumor
• core-embed/dailymotion
• core-embed/funnyordie
• core-embed/hulu
• core-embed/imgur
• core-embed/issuu
• core-embed/kickstarter
• core-embed/meetup-com
• core-embed/mixcloud
• core-embed/photobucket
• core-embed/polldaddy
• core-embed/reddit
• core-embed/reverbnation
• core-embed/screencast
• core-embed/scribd
• core-embed/slideshare
• core-embed/smugmug
• core-embed/speaker
• core-embed/ted
• core-embed/tumblr
• core-embed/videopress
• core-embed/wordpress-tv

Imagine you are busy developing a Gutenberg block. You reload the page, and suddenly the editor will break, displaying an The editor has encountered an unexpected error. message. You look into the JavaScript console of your browser, and see a this.activateMode is not a function error. 

What is the error cause?

On the screenshot above, you can see that the stack trace includes references to /wp-includes/js/media-views.min.js. Searching for the this.activeMode string inside of WordPress’ media code, we find this occurrence:

_createModes: function() {
   // Store active "modes" that the frame is in. Unrelated to region modes.
this.activeModes = new Backbone.Collection();
   this.activeModes.on( 'add remove reset', _.bind( this.triggerModeEvents, this ) );

   _.each( this.options.mode, function( mode ) {
      this.activateMode( mode );
   }, this );
},

The _ in this snippet is the entry point of Underscore.js, a helper library that ships with WordPress.

However looking further into the error message above, it contains two functions names: forEach and arrayEach.

Searching through the codebase, we find that these functions are part of Lodash, a helper library used by Gutenberg.

function forEach(collection, iteratee) {
  var func = isArray(collection) ? arrayEach : baseEach;
  return func(collection, getIteratee(iteratee, 3));
}

function arrayEach(array, iteratee) {
  var index = -1,
      length = array == null ? 0 : array.length;
  while (++index < length) {
    if (iteratee(array[index], index, array) === false) {
        break;
    }
  }
  return array;
}

Both Underscores and Lodash use _ to expose their API. When Gutenberg is loaded, Lodash overwrites the _ global variable used by Underscore. 

The two libraries include a _.each() function. But the signature is different, as Lodash’s implementation does not support the content argument:

• Underscore: _.each(obj, iteratee, context)
• Lodash: _.each(collection, iteratee)

This means that in this snippet from WordPress media code, the this variable is not passed along, which leads to a fatal error:

_.each( this.options.mode, function( mode ) {
      this.activateMode( mode );
   }, this );

How to fix the error?

When you are using Webpack and Babel to build the JavaScript in your Gutenberg blocks you need to  add babel-plugin-lodash as an NPM dependency. Then add an entry to your project’s  .babelrc as described in the plugin’s documentation.

This will modify the way that Lodash dependencies are included. _.each() would be transformed to _each(), therefore avoiding overwriting any of WordPress’ JavaScript globals.

If you are not using a build pipeline, and are writing your blocks in plain JavaScript, make sure to enable the no conflict mode of Lodash when enqueuing the script:

wp_enqueue_script( 'lodash', '...' );
wp_add_inline_script( 'lodash', 'window.lodash = _.noConflict();', 'after' );

Alternatively, you can also use the version packaged with Gutenberg itself, as it is enqueued in no conflict mode.

Conclusion

This guide should have helped you resolve the issue of Gutenberg breaking.

If you’re looking to learn Gutenberg development, check out my posts on learning Gutenberg development in 6 days, or the in-depth Gutenberg development learning guide.

The React development mode provides useful warnings and errors. It’s therefore useful when developing Gutenberg blocks.

However Gutenberg loads the minified production build of React by default, as it it offers better performance.

WordPress 5.0 Update

WordPress 5.0 contains a regression that does not allow React to be loaded in development mode, as described in this article, see Trac Ticket #45535. As a work around, you can download this code snippet, and enable it as a MU Plugin, or place it somewhere else in your custom code.

Enabling Script Debug

To use the React development mode in Gutenberg, you need to set the SCRIPT_DEBUG constant in your wp-config.php file to true.

define( 'SCRIPT_DEBUG', true );

As a result, Gutenberg will load the development version of React, and all other third party script dependencies.

Verifying the React Build

To verify which version of React is running, you can use the React Developer Tools for Chrome. It adds an icon to the browser that changes depending on which React version is running.

If you are on a website using the React production build, the icon will have dark background:

However of the development build of React is loaded, the icon will have an orange background:

You are now ready to start developing your own Gutenberg blocks.

If you’re looking to learn Gutenberg development, check out my posts on learning Gutenberg development in 6 days, or the in-depth Gutenberg development learning guide.