What it does…

This code snippet adds a little bit of CSS to the admin notice in the Code Snippets Pro ❤️ plugin for WordPress. If you’re on the Add New Snippet or Edit Snippet page, it makes the admin notice float at the top of your window on top of the code snippet editor so that when you save the page doesn’t scroll away. This ensures that the notice is always visible and you don’t lose your place, even when working on a large block of code and scrolled far down the page.

Here’s What You Can Customize

Basic Customization

Look for these constants at the top of the class definition:

• DEFAULT_DISMISS_DELAY – How long notices stay visible (default: 5000 milliseconds)
• DEFAULT_NOTICE_OFFSET – Distance from top of viewport (default: 40 pixels)

Advanced Customization

Advanced users can modify these values using the WordPress options API with the option name floating_notice_settings. Add this code to another snippet or your theme’s functions.php:

// Example: Change settings via WordPress options API
$options = get_option('floating_notice_settings', []);
$options['dismiss_delay'] = 3000;  // 3 seconds
$options['notice_offset'] = 60;    // 60px from top
update_option('floating_notice_settings', $options);

Using the options API allows settings to persist across snippet updates.

Why it does it…

By default, the admin notice in Code Snippets Pro ❤️ appears at the top of the page when a snippet is saved or when there is an error. And to make sure you see it, the page scrolls to the notice anytime a notice appears. If you are working on a large block of code and scrolled far down the page, it can get a little distracting every time the page scrolls up to the notice when you save. This modification addresses this issue by making the notice float above the editor, ensuring it is always visible and preventing the page from scrolling.

How it does it…

How It Does It

This code snippet creates floating, auto-dismissing admin notices in the Code Snippets Pro ❤️ editor. Here’s how it works:

• The code implements a class WP_Floating_Admin_Notice_With_AutoDismiss with configurable settings for dismiss delay and notice offset.
• Class constants define default values (5 second dismiss delay, 40px top offset).
• A WordPress options API integration allows persistent storage of custom settings.
• The styling uses CSS position: sticky and z-index: 999 to float notices above the editor.
• JavaScript implements the auto-dismiss functionality:
  • A main event listener waits for page load
  • An IIFE creates a private scope to avoid conflicts
  • The autoDismissNotice() function adds a fade-out class after the configured delay
  • A MutationObserver watches for new notices and applies the auto-dismiss behavior
• The code checks for specific admin pages to only load on snippet edit screens
• Security measures include input sanitization, output escaping, and proper WordPress coding standards
• Error handling ensures graceful degradation if settings are missing
• CSS transitions provide smooth fade-out animations when notices are dismissed