Heading defaults

Hi @scargill
To set default heading to h3 and color to green there is not any setting at wp-admin side, you have to use custom code as per below which I have implemented in child theme.

Update it according to your requirement in parent or child theme.

// Please add below code in “functions.php” file of the theme, then create “editor.js” file and “editor-style.css” on theme root folder.

/***************************************************************************************/
/*************************************** functions.php **********************************/
/****************************************************************************************/
// Editor style code - set h3 element color to green (Create "editor-style.css" in theme root folder)
function mytheme_add_editor_styles() {
    add_theme_support('editor-styles'); // Enables editor-style
    add_editor_style('editor-style.css'); // Path of theme root
}
add_action('after_setup_theme', 'mytheme_add_editor_styles');

// Set default element to h3 (Create "editor.js" in theme root folder) (get_stylesheet_directory_uri() for child theme, use get_template_directory_uri() for parent or main theme)
function mytheme_editor_assets() {
    wp_enqueue_script(
        'mytheme-editor-js',
        get_stylesheet_directory_uri() . '/editor.js',
        array('wp-blocks', 'wp-dom-ready', 'wp-edit-post'),
        filemtime(get_stylesheet_directory_uri() . '/editor.js')
    );
}
add_action('enqueue_block_editor_assets', 'mytheme_editor_assets');

/*************************************************************************************/
/*************************************** editor.js ***********************************/
/*************************************************************************************/
wp.domReady(function () {
    const { getBlockType, unregisterBlockType, registerBlockType } = wp.blocks;

    const headingBlock = getBlockType('core/heading');

    if (headingBlock) {
        unregisterBlockType('core/heading');
        registerBlockType('core/heading', {
            ...headingBlock,
            attributes: {
                ...headingBlock.attributes,
                level: {
                    type: 'number',
                    default: 3, // 👈 Set default heading level to H3
                },
            },
        });
    }
});

/*************************************************************************************/
/************************************* editor-style.css *******************************/
/*************************************************************************************/
/* This targets headings inside the Gutenberg editor */
.editor-styles-wrapper h3 {
    color: #2e8b57; /* Green */
}

/* Optionally: frontend headings too */
h3 {
    color: #2e8b57;
}

Hi @scargill

First check activated theme by visiting “Appearance” tab on wp-admin side (http://yoursite.com/wp-admin/themes.php)

Then by using file manager at cPanel, you can create those files as per previous message in wp-content/themes/your_activated_theme directory.

No, foram not adding any special characters.

have any error message?

Hi @scargill

I have checked in blog-kit theme and made some changes, please create/update file and update/add below code in your theme’s file. Please check below image link,

https://ibb.co/zhn9dG4D

// editor.js

wp.domReady(function () {
    const { getBlockType, unregisterBlockType, registerBlockType } = wp.blocks;

    const headingBlock = getBlockType('core/heading');

    if (headingBlock) {
        unregisterBlockType('core/heading');
        registerBlockType('core/heading', {
            ...headingBlock,
            attributes: {
                ...headingBlock.attributes,
                level: {
                    type: 'number',
                    default: 3, // Set default heading level to H3
                },
                textColor: {
                    type: 'string',
                    default: 'green', // Set default color to green
                },
                style: {
                    type: 'object',
                    default: {
                        color: {
                            text: '#00d084' // Alternative way to set default color
                        }
                    }
                }
            },
        });
    }
});

// editor-style.css

/* This targets headings inside the Gutenberg editor */
.editor-styles-wrapper h3 {
    color: #00d084 /* Green */
}

/* Optionally: frontend headings too */
h3 {
    color: #00d084;
}

// theme.json

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        {
          "name": "Green",
          "slug": "green",
          "color": "#00d084"
        }
      ]
    }
  },
  "styles": {
    "blocks": {
      "core/heading": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--medium)"
        },
        "color": {
          "text": "var(--wp--preset--color--green)"
        }
      }
    }
  }
}

// functions.php

// Editor style code - set h3 element color to green (Create "editor-style.css" in theme root folder)
function mytheme_add_editor_styles() {
    add_theme_support('editor-styles'); // Enables editor-style
    add_editor_style('editor-style.css'); // Path of theme root
}
add_action('after_setup_theme', 'mytheme_add_editor_styles');

// Set default element to h3 (Create "editor.js" in theme root folder) (get_template_directory_uri() for child theme, use get_template_directory_uri() for parent or main theme)
function mytheme_editor_assets() {
    wp_enqueue_script(
        'mytheme-editor-js',
        get_template_directory_uri() . '/editor.js',
        array('wp-blocks', 'wp-dom-ready', 'wp-edit-post'),
        filemtime(get_template_directory_uri() . '/editor.js')
    );
}
add_action('enqueue_block_editor_assets', 'mytheme_editor_assets');

Hi @scargill

I got it that you’re getting warnings in cPanel’s file manager due to the spread operator (…) in the JavaScript code. This is likely because cPanel’s file manager might be using an older JavaScript parser that doesn’t support the spread operator syntax. Let me help you modify the code to be more compatible.

I’ve modified the code to replace the spread operator (…) with Object.assign(), which is a more widely supported method for object merging. The functionality remains exactly the same, but now it should work without warnings in cPanel’s file manager.

// editor.js

wp.domReady(function () {
    const { getBlockType, unregisterBlockType, registerBlockType } = wp.blocks;

    const headingBlock = getBlockType('core/heading');

    if (headingBlock) {
        unregisterBlockType('core/heading');
        registerBlockType('core/heading', Object.assign({}, headingBlock, {
            attributes: Object.assign({}, headingBlock.attributes, {
                level: {
                    type: 'number',
                    default: 3, // Set default heading level to H3
                },
                textColor: {
                    type: 'string',
                    default: 'green', // Set default color to green
                },
                style: {
                    type: 'object',
                    default: {
                        color: {
                            text: '#00d084' // Alternative way to set default color
                        }
                    }
                }
            })
        }));
    }
});

Replace above code in editor.js file.

Thanks