Adding Gutenberg Experience to Sydney Theme

Please note that this post is aimed for WordPress-development-savvy users. Do not implement it in your production site. Use this as an experimental purpose to test Sydney theme with Gutenberg editor.

Add a separate function file for Gutenberg in main functions:

 * Gutenberg compatibility functions
require get_template_directory() . '/inc/gutenberg.php';


Gutenberg-speficic functions (/inc/gutenberg.php) contains:

 * Gutenberg functions
 * @package Sydney

function sydney_gutenberg_setup() {

  // Adding support for core block visual styles.
  add_theme_support( 'wp-block-styles' );

  // Add support for full and wide align images.
  add_theme_support( 'align-wide' );

add_action( 'after_setup_theme', 'sydney_gutenberg_setup' );

function sydney_gutenberg_scripts() {
  wp_enqueue_style('sydney-butenberg-style', get_template_directory_uri() . '/css/sydney-gutenberg.css');
add_action( 'wp_enqueue_scripts', 'sydney_gutenberg_scripts' );

* Enqueue editor styles for Gutenberg
function sydney_editor_styles() {
  $sydney_fonts_url = '';
  wp_enqueue_style( 'sydney-fonts', $sydney_fonts_url, array(), null );
  wp_enqueue_style( 'sydney-editor-style', get_template_directory_uri() . '/css/editor-style.css' );
add_action( 'enqueue_block_editor_assets', 'sydney_editor_styles' );


Styling for default blocks:

@import "gutenberg/content-area-container";
@import "gutenberg/block-heading";
@import "gutenberg/block-cover-image";
@import "gutenberg/block-dropcap";
@import "gutenberg/block-image";
@import "gutenberg/block-separator";
@import "gutenberg/block-quote";
@import "gutenberg/block-gallery";
@import "gutenberg/block-button";


Gutenberg editor styles:

.gutenberg {

  @import "theme-content-frontend";
  @import "sydney-gutenberg";



Files hierarchy looks like this:


Browse complete code