Learn how plugin developers can extend the editor's Preview dropdown with custom menu items using the PluginPreviewMenuItem component.

WordPress Dev's resource offers insights, tutorials, and resources for WordPress developers and website administrators. Readers can learn about WordPress development techniques, plugin development, and theme customization. With articles, tutorials, and troubleshooting guides, WordPress Dev provides  guidance and expertise for building and maintaining WordPress-powered websites.

WordPress Developer

Since WordPress 6.7, plugin developers can extend the editor's Preview dropdown using the PluginPreviewMenuItem component from @wordpress/editor. This walkthrough builds a 'Social Card Preview' plugin that adds a custom dropdown entry, opens a modal, and reads post title, excerpt, and featured image from the editor store in real time using useSelect. The guide covers the full plugin setup: PHP asset enqueueing via enqueue_block_editor_assets, build tooling with @wordpress/scripts, registering the plugin with registerPlugin, building the modal component, BEM-based CSS styling, and local testing with WordPress Playground CLI. Additional use cases like accessibility checkers, reading level previews, and email newsletter previews are also suggested.

How to add custom entries to the editor Preview dropdown