Gutenberg: RichText don't work properly in InspectorControls because BlockEditContextProvider is not providing the right context.

[hos-shams]

I want to display a RichText component in a block's panel. The RichText displays just fine, but there's not any toolbar to add a link to text or make it bold. Could you please take a look at this bug or provide a solution to overcome this issue?

const { Fragment } = wp.element;
const { PanelBody, Modal, ColorPalette } = wp.components;
const { InspectorControls, RichText } = wp.editor;
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;

registerBlockType( 'shamsoft/issues', {
  title: __( 'Issues' ),
  icon: 'universal-access-alt',
  category: 'layout',
  attributes: {
    content: {
      type: 'array',
      default: [],
    }
  },

  edit( props ) {

    return [
      <Fragment>
        <InspectorControls>
          <PanelBody title={ __( 'Panel' ) }>
            <RichText
              tagName="p"
              value={ props.attributes.content }
              onChange={ (v) => props.setAttributes( { content: v } ) }
              placeholder={ __( 'Add text or type / to add content' ) }
            />
          </PanelBody>
        </InspectorControls>

        <div>None</div>
      </Fragment>
    ];
  },

  save() {
    return <div>None</div>;
  },
} );

[DannyCooper]

You need to use the Block Controls component:

https://wordpress.org/gutenberg/handbook/blocks/block-controls-toolbars-and-inspector/

[youknowriad]

Does the toolbar show up in the block's toolbar instead?

The RichText component was never meant to be used this way (in the Inspector) but I assume you can use inlineToolbar={ true } prop to show the toolbar above the RichText component.

[youknowriad]

I'm closing, let me know if it works for you. Thanks.

[hos-shams]

@youknowriad No, the toolbar doesn't even show up in the block's toolbar. Also, inlineToolbar={ true } doesn't display the toolbar.

While you didn't meant to support RichText in the Inspector, but it would be nice to have this functionality. Sometimes we need to create content for a hidden container, such as a modal. For example, there's a button in the block which triggers a modal onClick. We, as a theme developer, should provide a RichText in the Inspector for the user, so it can write his modal's content.

[youknowriad]

Ok, So I took a look at this and indeed it's not working and it's more "complex" than I though. The issue is that the RichText component always received isSelected=false even if the block is selected. And it happens probably because the Inspector controls is rendered in a Slot that is not wrapped in the correct BlockEditProvider. Not sure how to fix this at the moment. I'm reopening the issue so we can track it.

[aduth]

One possibility is to use the bubblesVirtually variant of Slot/Fill, which uses React's createPortal API and would respect context automatically (vs. the default implementation, which will lose context).

https://github.com/WordPress/gutenberg/tree/master/packages/components/src/slot-fill
https://reactjs.org/docs/portals.html

Last time this was tried, there was some unintended consequences around how events bubble in bubblesVirtually which the application is not yet prepared to handle (#3082, #3083).