Notices Showcase

A WordPress plugin that demonstrates how to use the @wordpress/notices store across all admin pages, not just the block editor. It provides a custom command to display sample notice messages anywhere in the WordPress admin.

Features

• 🎯 Universal Notice System: Display WordPress notices on any admin page (dashboard, settings, etc.)
• 💬 Command Integration: Uses WordPress's command palette to trigger notices
• 🔔 Snackbar Notifications: Shows elegant snackbar-style notifications
• 🎨 Block Editor Compatible: Automatically detects and adapts to the block editor environment

How It Works

This plugin solves a common challenge: the @wordpress/notices store works perfectly in the block editor, but doesn't render notifications on traditional admin pages. The plugin provides:

1. A custom <Notices /> component that renders snackbar notifications from the core/notices store
2. A command palette integration that triggers sample notices
3. Smart detection to avoid duplicate notices in the block editor

Installation

1. Clone or copy this plugin to your WordPress plugins directory:

   wp-content/plugins/notices-showcase/

2. Install dependencies:

   npm install

3. Build the plugin:

   npm run build

4. Activate the plugin in WordPress admin

Usage

Triggering the Sample Notice

1. Open the WordPress command palette (typically Cmd+K or Ctrl+K)
2. Search for "Show Sample Notice"
3. Press Enter to display the notification

The notice will appear as a snackbar at the bottom-left of the screen on any admin page.

Using Programmatically

You can dispatch notices from your own code anywhere in the WordPress admin:

import { dispatch } from '@wordpress/data';
import { store as noticesStore } from '@wordpress/notices';

const { createSuccessNotice } = dispatch(noticesStore);

createSuccessNotice('Your custom message here', {
  type: 'snackbar',
  isDismissible: true,
  explicitDismiss: true,
});

File Structure

• notices-showcase.php - Main plugin file, handles asset enqueueing
• src/index.js - Entry point, registers the command and renders components
• src/components/Notices.js - Core component that renders notices outside the block editor
• src/styles.css - Minimal styling for notice positioning
• package.json - Dependencies and build scripts

Development

Start the development server with hot reloading:

npm start

Build for production:

npm run build

Technical Details

• Uses @wordpress/scripts for build configuration
• Leverages @wordpress/commands for command palette integration
• Implements @wordpress/data stores for notice management
• Detects block editor context to prevent duplicate notices
• Fixed positioning at bottom-left with high z-index for visibility

Requirements

• WordPress 5.9+
• Node.js and npm for building

License

This is a demonstration/showcase plugin for educational purposes.