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:

<?php
/**
 * 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

Leave a Reply

Your email address will not be published. Required fields are marked *