Add a tab to the "Editor tools"

[josephfusco]

Acceptance Criteria

• registerEditorToolsTab() exists and is callable by 3rd party plugins
• Function handles edge cases & invalid input

Technical Details

const { registerEditorToolsTab } = WPGRAPHQL_IDE;

registerEditorToolsTab( 'my-editor-tools-tab', {
  title: 'My Tab',
  label: 'My tab does x, y and z',
  icon: () => {}, // name of icon from supported icon library or custom Icon component
  content: () => {} // callback for the content panel that opens when this tab is active
} );

If we were to use this API for document settings, it might look like this:

const { registerEditorToolsTab } = WPGRAPHQL_IDE;

registerEditorToolsTab( 'document-settings', {
  title: 'Document Settings',
  label: 'Edit settings related to this query document',
  icon: () => <SettingsIcon />,
  content: () => <DocumentSettingsFormOrWhatever />
});

The list of tabs should be maintained in the Redux store, so registering a editor utility tab should modify the list of editor utility tabs in the Redux store. Similar when you call registerBlockType in Gutenberg.

Reference

• feat: phase-2 p.o.c: break the app into packages #81

Related

• Dedicated page for editor #45
• feat: use *.asset.php for enqueued asset version and dependencies #55
• Implement phpcs #56