Editor Tabs

MediaPress Editor Tabs enables a tabbed view of the block editor interface, by allowing other packages or code to render custom tabs in a central location within the top toolbar of the block editor.

Whilst this package handles the rendering of the tab selection UI, this is essentially just a group of buttons. It is up to external code to handle how content is rendered when each button is clicked, and the conditions under which the tab/button is deemed to be ‘active’.

Tip

For a fully-featured tabbed interface, it is recommended to register a new full-screen block editor sidebar using Panel from our components package. This method will also ensure that you have a way to access your panel if the Editor Tabs are not enabled, rather than introducing a dependency on this package.

Additional Configuration

Editor Tabs must be activated via the “MediaPress” settings page. Initially, it will render a single tab for the “Editor” view, but other packages or code may filter this to introduce additional tabs.

Filters/Actions

PHP

Filters

mediapress_editor_tabs_supported_post_types

Defines the post types on which the editor tabs functionality will be enabled.

Default Value

[ 'post', 'page' ]

Parameters

Name	Type	Description
post_types	array	Array of post type slugs

Usage

add_filter( 'mediapress_editor_tabs_supported_post_types', 'my_plugin_add_editor_tabs_support' );
function my_plugin_add_editor_tabs_support( array $post_types ): array {
  $post_types[] = 'my_custom_post_type';
  return $post_types;
}

JavaScript

Filters

mediaPress.editorTabs.tabs

Allows filtering of the tab buttons shown in the block editor toolbar when this package is enabled.

Each tab is a button which can be provided with a click handler, as well state to determine whether that tab is ‘active’ or not.

Parameters

Name	Type	Description
tabs	Object	Object containing individual tab objects, keyed by the tab name
tabs.key	Object	Individual tab object
tabs.key.label	args.type	The user-facing label to show within the tab button
tabs.key.onClick	Function	Callback to run when the tab is clicked by a user
tabs.key.isActive	boolean	Expected to contain conditions to determine whether the tab is currently active or not
tabs.key.order	number	The priority order in which this tab should appear in the list

Usage

addFilter('mediaPress.editorTabs.tabs', 'my-plugin/add-media-tab', (tabs) => {
  return {
    ...tabs,
    meta: {
      label: __('Media', 'default'),
      onClick: () =>
        dispatch(editPostStore).openGeneralSidebar(MEDIA_SIDEBAR_NAME),
      isActive:
        select(editPostStore).getActiveGeneralSidebarName() ===
        MEDIA_SIDEBAR_NAME,
      order: 2,
    },
  };
});