A List of all Default Gutenberg Blocks in WordPress 5.0

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

The blocks are organised by their category, and are accompanied by a screenshot of their icons in the block selector.

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

Common blocks

  • core/paragraph
  • core/image
  • core/heading
  • core/gallery
  • core/list
  • core/quote
  • core/audio
  • core/cover
  • core/file
  • 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

How To Fix the “this.activateMode is not a function” Error in Gutenberg

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 not yet familiar with developing custom Gutenberg blocks, consider reading this guide for learning Gutenberg development in 6 days.

Enabling React Development Mode in Gutenberg

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:

React DevTools icon on a website with production version of React.

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

React DevTools icon on a website with production version of React

You are now ready to start developing your own Gutenberg blocks. If you’re not yet familiar with developing custom Gutenberg blocks, consider reading this guide for learning Gutenberg development in 6 days.