https://idea-hack.com/blog/34892/
9 instant codes to help you customize the WordPress Gutenberg editor

9 instant codes to help you customize the WordPress Gutenberg editor

In this article, we summarize the code that is useful for customizing the Gutenberg editor.

Add a background color, text color to the color specification tab

There are several background colors and text colors available by default, but you can add others as well.

Adding the following code will overwrite the default 11 colors, and only the colors added to the code will be applied.

php
function mytheme_setup_theme_supported_features()
{
    add_theme_support('editor-color-palette', array(
        array(
            'name' => __('black', 'themeLangDomain'),
            'slug' => 'black',
            'color' => '#000',
        ),
        array(
            'name' => __('white', 'themeLangDomain'),
            'slug' => 'white',
            'color' => '#fff',
        ),
    ));
}

To apply the same style to published articles, add has- [string added to slug] -background-color and has- [string added to slug] -color to CSS.

css
.has-black-background-color {
    background-color: #000;
}

.has-black-color {
    color: #000;
}

Disable free designation of color

By default, there is a color palette that can be customized by the user, but this can be disabled with the code below.

php
add_theme_support( 'disable-custom-colors' );

Create a set of font sizes

You can create a set of font sizes (small, normal, large, oversized, etc.).
Adding the following code will overwrite the default settings and will add the specified set.

php
add_theme_support( 'editor-font-sizes', array(
    array(
        'name' => __( 'regular', 'themeLangDomain' ),
        'shortName' => __( 'M', 'themeLangDomain' ),
        'size' => 16,
        'slug' => 'regular'
    )
) );

Add has- [string added to slug] -font-size to CSS to apply the same style to published articles.

css
.has-regular-font-size {
    font-size: 16px;
}

Disable free specification of font size

By default, the user is free to specify the font size, but this can be overridden with the code below.
This will allow you to specify only the default or set of font sizes you added in customization.

php
add_theme_support('disable-custom-font-sizes');

Enable wide and full-width display of an image

If you want to display the image width at 100%, enable it with the following code.

php
add_theme_support( 'align-wide' );

Then, when specifying an image block, options of “wide” and “full width” are displayed at the top of the editor.

At present, the default CSS only adds width: 100%, and the display in the published article remains unchanged.

Since “.wide” is added to the wrapper element (figure element) of “img” and “.w.wide” is added to the .alignfull class, the style may be added to this class to customize it. is

Make iframe responsive (16: 9)

Embedding from Gutenberg’s embedded block is not responsive, but by displaying the following code, it is presented with an aspect ratio of 16: 9.

php
add_theme_support( 'responsive-embeds' );

Apply your CSS

Apply CSS with add_editor_style.

The CSS specified here applies only to the editor, so it does not interfere with other parts of the management screen.

php
function custom_editor_css()
{
    add_theme_support('editor-styles');
    add_editor_style('style-editor.css');
}

add_action('after_setup_theme', 'custom_editor_css');

Enable dark editor mode

When applying your CSS, sometimes the background of the entire editor changes to black.
At that time, you can change the color of the button, etc. in the editor.

php
function editor_dark_mode()
{
    add_theme_support('editor-styles');
    add_theme_support('dark-editor-style');
}

add_action('after_setup_theme', 'editor_dark_mode');

Apply the same style as the editor to published articles

Some blocks, such as tables, quotes, and separators, are assigned Gutenberg’s style.
By default, these custom styles are applied to the editor, but not in published articles.
By writing the following code, styles that apply only to the editor can be used to published articles.

php
function editor_block_styles()
{
    add_theme_support('editor-styles');
    add_theme_support('wp-block-styles');
}

add_action('after_setup_theme', 'editor_block_styles');