Customize message after a WP post is published

code-to-add-to-functions.php

<?php // don't add this again to the end of functions.php :-)
function javi_enqueue_custom_gutenberg_script() {
    $script_path = get_template_directory() . '/custom-gutenberg.js'; // this is the path into the theme
    $script_url = get_template_directory_uri() . '/custom-gutenberg.js'; // same path as above
    
    if (file_exists($script_path)) {
        wp_enqueue_script(
            'custom-gutenberg',
            $script_url,
            array('wp-data', 'wp-dom-ready', 'wp-edit-post'),
            filemtime($script_path),
            true
        );
    } else {
        error_log('custom-gutenberg.js not found ...');
    }
}
add_action('enqueue_block_editor_assets', 'javi_enqueue_custom_gutenberg_script');

custom-gutenberg.js

// save it in the theme's folder, you decide where... then set them properly in lines 3 & 4 of the .php
wp.domReady(() => {
    const { subscribe, select } = wp.data;

    subscribe(() => {
        const post = select('core/editor').getCurrentPost();
        const postStatus = post ? post.status : '';

        if (postStatus === 'publish') {
            const publishPanel = document.querySelector('.post-publish-panel__postpublish-header');

            if (publishPanel && !document.querySelector('.my-custom-message')) {
                const customMessage = document.createElement('div');
                customMessage.className = 'my-custom-message';
                customMessage.style.marginTop = '10px'; // Margin
                customMessage.textContent = 'My custom message.';
                publishPanel.appendChild(customMessage);
            }
        }
    });
});