Add a button to the "Editor Toolbar"

[josephfusco]

Acceptance Criteria

• registerDocumentEditorToolbarButton() exists and is callable by 3rd party plugins
• Function handles edge cases & invalid input
• Existing toolbar buttons are using registerDocumentEditorToolbarButton()
• Create e2e tests:
  • assert that private data is returned when toggle authentication button is enabled (color)
  • assert that private data is not returned when toggle authentication button disabled (grayscale)
  • assert that clipboard contains query when copy button is clicked
  • assert that malformatted query is formatted as expected when prettify button is clicked
  • assert that a valid share URL is copied to clipboard when share query button is clicked
  • assert that fragments are merged into the query as expected when the merge fragments button is clicked

Technical Details

const { registerDocumentEditorToolbarButton } = WPGRAPHQL_IDE;

registerDocumentEditorToolbarButton( 'my-editor-toolbar-button', {
  title: 'My Editor Toolbar Button',
  label: () => {},
  icon: () => {}, // name of icon from supported icon library or custom Icon component
  onClick: () => {} // callback for the button click event
} );

If we were to use this API for the auth button, it might look like this:

const { registerDocumentEditorToolbarButton } = WPGRAPHQL_IDE;

registerDocumentEditorToolbarButton( 'toggle-auth-button', {
  title: 'Toggle Authentication',
  label: () => {
    const isAuthenticated = useSelect( ( select ) => select( 'whatever-store-maintains-auth-state' ).isAuthenticated() );

    return isAuthenticated
	? 'Switch to execute as a public user'
	: 'Switch to execute as the logged-in user';
  },
  icon: () => <DynamicAvatar />,
  onClick: () => {
    useSelect( ( select ) => select( 'whatever-store-maintains-auth-state' ).toggleAuthentication() );
  }
} );

The list of editor toolbar buttons should be maintained in the Redux store, so registering an editor toolbar button should modify the list of editor toolbar buttons in the Redux store. Similar when you call registerBlockType in Gutenberg.

Reference

Related

[josephfusco]

Closed by https://github.com/wp-graphql/wpgraphql-ide/releases/tag/v2.0.0