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.
Table of contents
What is PluginPreviewMenuItem?Social Card Preview examplePlugin setupRegistering the preview menu itemBuilding the social card modalThe Card Preview markupStyling the cardTesting with WordPress PlaygroundGoing furtherSort: