CKEditor 4 - How to add H2, H3, etc to toolbar

Looking at these docs: https://ckeditor.com/docs/ckeditor4/latest/features/styles.html

So adding a style set should go something like this, but I can't get the H2 or H3 items to appear in my toolbar:

CKEDITOR.stylesSet.add( 'my_styles', [
    // Block-level styles
    { name: 'Blue Title', element: 'h2', styles: { 'color': 'Blue' } },
    { name: 'Red Title' , element: 'h3', styles: { 'color': 'Red' } },

    // Inline styles
    { name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } },
    { name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow' } }
] );


CKEDITOR.editorConfig = function( config ) {
    
    config.extraPlugins = 'firstname,MediaEmbed,justify,image';
    
    //config.forcePasteAsPlainText = true;
    
    config.extraAllowedContent = 'iframe[*]';
    
    config.toolbar = 'Normal';
    
    config.toolbar_Normal = [
        { name: 'basicstyles', items: [ 'Bold', 'Italic','Underline','Strike' ] },
        { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', 'JustifyLeft', 'JustifyCenter', 'JustifyRight' ] }        
    ];
    
    config.toolbar_Emails = [
        { name: 'basicstyles', items: [ 'Bold', 'Italic','Underline','Strike' ] },
        { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', 'JustifyLeft', 'JustifyCenter', 'JustifyRight' ] }

    ];
    
    config.removeDialogTabs = 'link:advanced;link:target';
    
    config.stylesSet = 'my_styles';

};

As mentioned in the docs

Open the config.js file available in your ckeditor directory, and edit the config.format_tags entry in the following way to display the text formatting toolbar.

// Enable all default text formats:
config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div';

// Enable a limited set of text formats:
config.format_tags = 'p;h1;h2;pre;div';