search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.53k stars 4.21k forks source link

RichText Component used inside InspectorControls makes Popover component to have wrong position. #54246

Open nkyimas-epignosis opened 1 year ago

nkyimas-epignosis commented 1 year ago

Description

When <RichText> is used inside <InspectorControls> then the of highlight or link settings are getting the wrong position and are partially hidden below <InspectorControls> sidebar. It seems that it is getting the position from the RichText instead of the block toolbar.

Step-by-step reproduction instructions

  1. Create a custom block with <RichText /> inside <InspectorControls />
  2. Try to add a link or highlight part of the text using the block toolbar.

Screenshots, screen recording, code snippet

https://github.com/WordPress/gutenberg/assets/117932205/fc312174-cd47-4212-9672-0cbc7478a02f

Environment info

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

dmitrijCraq commented 1 year ago

I came across the same issue. I'm using a RichText in a Modal that is launched from a Gutenberg plugin. Basically the toolbar is always rendered in the block editor. It would be nice that it follows the container in which the RichText is rendered.

Btw have you tried adding the inlineToolbar prop?

nkyimas-epignosis commented 1 year ago

@dmitrijCraq Adding the inlineToolbar prop hides the text formatting options so I couldn't test if there is any difference regarding the Popover position.

dmitrijCraq commented 1 year ago

@nkyimas-epignosis take a look a this issue https://github.com/WordPress/gutenberg/issues/46906. I think that the issue I've mentioned is related to your same problem. This affects all the popovers coming from the Toolbar. The guy said he resolved by using the components SlotFillProvider, Slot, Fill however I've have no idea on how to use them.

The RickText for what I've read is not meant to be used in the InspectorControls, howver In my personal opinion it would be nice to use it everywhere we need.

mirka commented 11 months ago

The SlotFillProvider solution is likely to work in this case as well. Can someone confirm that it works so we can close this issue?

nkyimas-epignosis commented 10 months ago

Thanks, @mirka for the heads up! I tried the solution you mentioned but when is wrapped inside <InspectorControls> the controls keep rendering outside the settings sidebar... I think <InspectorControls> is already wrapped with <SlotFillProvider> is there any connection with this?

dmitrijCraq commented 5 months ago

Hi guys any news about this?