Extending the Preview Dropdown Menu in WordPress 6.7

WordPress 6.7 introduces a new APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. that allows developers to extend the Preview dropdown menu in the post/page editor. This enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. provides flexibility for pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party developers to integrate custom preview options seamlessly into the editor.

Background

Previously, the Preview dropdown was limited to default options. Plugins that wanted to add custom preview functionality had to implement complex workarounds or create separate UIUI User interface elements, leading to a fragmented user experience.

New API: PluginPreviewMenuItem

WordPress 6.7 introduces a new component, PluginPreviewMenuItem, which allows plugins to add custom items to the Preview dropdown menu.

How to Use

1. Import the component:

import { PluginPreviewMenuItem } from '@wordpress/editor';

2. Implement a custom menu item:

const CustomPreviewMenuItem = () => (
  <PluginPreviewMenuItem
    onClick={ () => {
      // Your custom preview logic
    } }
  >
    Custom Preview
  </PluginPreviewMenuItem>
);

3. Register your plugin with the custom menu item:

import { registerPlugin } from '@wordpress/plugins';

registerPlugin( 'my-custom-preview', {
    render: CustomPreviewMenuItem,
} );

Key Features

• Allows plugins to add menu items with custom titles and click handlers
• Maintains the existing Preview dropdown structure while allowing for extensibility
• Utilizes the existing ActionItem component from wordpress/interface
• Implements a slot/fill pattern to inject custom menu items into the Preview dropdown

Use Cases

This API enables various publishing flows and tools, such as:

• Custom format previews (e.g., AMP, social media shares)
• Previewing content with different access restrictions or user roles
• Specialized preview modes (e.g., dark mode, email format)

Considerations for Developers

• The PluginPreviewMenuItem component is available in post, page, and site editors.
• Custom preview items should be relevant to the content being edited.
• Ensure that custom preview actions are performant and do not negatively impact the editor experience.

Future Enhancements

While this API provides immediate value, future enhancements may include:

• Grouping of custom preview options
• Support for custom preview canvas or sizes
• Add support for item selection within custom groups

Take a look at this issue #65005 where these ideas are being discussed.

Feedback

We welcome your feedback on this new API. Please report any issues or suggestions in the Gutenberg repository. For more information, refer to the original pull request #64644.

Props @gziolo @youknowriad @simison, @fabiankaegy and @faguni22 for review and proofreading.

#6-7, #dev-notes, #dev-notes-6-7