functions.php - snippets to make the Block Editor a true WYSIWYG

functions.php

<?php
/**
 * 'THEME' functions and definitions
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @package 'YOUR NAMESPACE HERE'
 */



add_action( 'after_setup_theme', 'yournamespace_gutenberg_css' );
 
/* Adding Editor Styles
*  This first (commented out) method is the standard, but it prepends each declaration with .editor-styles-wrapper, presumably to avoid possibly styling anything outside of the editor (it's certainly possible, especially if you use !importants).
To be able to style based on post-type, which is higher up than editor-styles-wrapper, you must use the enqueue method.

Further note: See Bill Erickson's function below, which is assigning a class to page in admin based on page template
*/

// function yournamespace_gutenberg_css(){

// 	add_theme_support( 'editor-styles' ); // if you don't add this line, your stylesheet won't be added
// 	add_editor_style( 'style-editor.css' ); // include style-editor.css directly from your theme root folder
 
// Hook to Deregister or Dequeue editor-styles.css that's CSS is inlined in admin head #18595
// https://github.com/WordPress/gutenberg/issues/18595#issuecomment-599588153 
// this is very useful if you're going whole hog on making the Block Editor look like your front end

add_filter('block_editor_settings', function ($editor_settings) {
              unset($editor_settings['styles'][0]);

              return $editor_settings;
          }
);

// Doing it this way enables targeting post type in CSS so we can change content width based on post type
function admin_style() {
  wp_enqueue_style('admin-styles', get_template_directory_uri().'/style-editor.css');
}
add_action('admin_enqueue_scripts', 'admin_style');


/**
 * Register support for Gutenberg wide images in your theme
 */
function yournamespace_wide_setup() {
  add_theme_support( 'align-wide' );
}
add_action( 'after_setup_theme', 'yournamespace_wide_setup' );


function yournamespace_add_custom_gutenberg_color_palette() {
	add_theme_support(
		'editor-color-palette',
		[
			[
				'name'  => esc_html__( 'Dark Gray', 'yournamespace' ),
				'slug'  => 'dark-gray',
				'color' => 'rgba(0, 0, 0, 0.79)',
			],
			[
				'name'  => esc_html__( 'Teal', 'yournamespace' ),
				'slug'  => 'teal',
				'color' => 'rgba(106, 153, 149, 0.8)',
			],
			[
				'name'  => esc_html__( 'Yellow', 'yournamespace' ),
				'slug'  => 'yellow',
				'color' => '#F8E687',
			],
						[
				'name'  => esc_html__( 'White', 'yournamespace' ),
				'slug'  => 'white',
				'color' => '#ffffff',
			],
			[
				'name'  => esc_html__( 'Dusty Lavender', 'yournamespace' ),
				'slug'  => 'dustylavender',
				'color' => '#ECE4E4',
			],
			[
				'name'  => esc_html__( 'Rust', 'yournamespace' ),
				'slug'  => 'rust',
				'color' => '#460000',
			],		
		]
	);
}
add_action( 'after_setup_theme', 'yournamespace_add_custom_gutenberg_color_palette' );

add_theme_support(
    'editor-font-sizes', 
    array(
    	array(
            'name'      => __( 'Normal', 'yournamespace' ),
            'shortName' => __( 'N', 'yournamespace' ),
            'size'      => 18,
            'slug'      => 'normal'
        ),
        array(
            'name'      => __( 'Small', 'yournamespace' ),
            'shortName' => __( 'S', 'yournamespace' ),
            'size'      => 16,
            'slug'      => 'small'
        ),
        array(
            'name'      => __( 'Medium', 'yournamespace' ),
            'shortName' => __( 'M', 'yournamespace' ),
            'size'      => 20,
            'slug'      => 'medium'
        ),
        array(
            'name'      => __( 'Large', 'yournamespace' ),
            'shortName' => __( 'L', 'yournamespace' ),
            'size'      => 24,
            'slug'      => 'large'
        ),
    )
);




// Set Block Editor content width for post-type page, based on page template
// page-home.php and page-fullwidth.php are wide, page.php has sidebar so it is narrower.
// 1080 is the wide width, 770 is the narrow.  these are assigned in style-editor.css

/**
 * Gutenberg layout class
 * @link https://www.billerickson.net/change-gutenberg-content-width-to-match-genesis-layout/

 *
 * @param string $classes
 * @return string
 */
function yournamespace_gutenberg_layout_class( $classes ) {
	$screen = get_current_screen();
	if( ! $screen->is_block_editor() )
		return $classes;

	$layout = false;
	$post_id = isset( $_GET['post'] ) ? intval( $_GET['post'] ) : false;
  
	// Get page template slug if not default. Edit: no, can't style on "page-fullwidth.php" - would have to sanitize
	if( $post_id )
		$layout = get_page_template_slug( $post_id );
    
	// default template (page.php) gets this class
	if( empty( $layout ) && 'page' === get_post_type() )
		$layout = 'content-sidebar';
    

	$classes .= ' ' . $layout . ' ';
	return $classes;
}
add_filter( 'admin_body_class', 'yournamespace_gutenberg_layout_class' );