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: