Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Popover.Slot breaks template editor #57142

Closed
Sidsector9 opened this issue Dec 17, 2023 · 8 comments
Closed

Popover.Slot breaks template editor #57142

Sidsector9 opened this issue Dec 17, 2023 · 8 comments
Labels
[Feature] UI Components Impacts or related to the UI component system [Type] Bug An existing feature does not function as intended

Comments

@Sidsector9
Copy link
Contributor

Sidsector9 commented Dec 17, 2023 •
edited
Loading

Description

As the title suggests, use of Popover.Slot breaks inside the template editor, however works when used in Page/Post editor.

Step-by-step reproduction instructions

  1. Run npx @wordpress/create-block@latest --wp-scripts --namespace popoveryolo to create a block
  2. Replace edit.js with the following:
/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
 */
import { __ } from '@wordpress/i18n';

/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
import { useBlockProps } from '@wordpress/block-editor';

/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * Those files can contain any CSS code that gets applied to the editor.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
import './editor.scss';
import { Popover } from '@wordpress/components';


/**
 * The edit function describes the structure of your block in the context of the
 * editor. This represents what the editor will render when the block is used.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
 *
 * @return {Element} Element to render.
 */
export default function Edit() {

	return (
		<div { ...useBlockProps() }>
			<div>Slot
				<Popover.Slot />
			</div>
			<>
				<div>Popover</div>
				<Popover

				>
					Popover example text
				</Popover>
			</>
		</div>
	);
}
  1. Activate a theme that supports FSE.
  2. Go to any page and open the template editor.
  3. Add the block and click on "More options".
  4. Observe the following error. (Watch the video below)
> react-dom.js?ver=18.2.0:22849 Uncaught TypeError: First argument must be a String, HTMLElement, HTMLCollection, or NodeList
    at listen (compose.js?ver=228e7d7fccaae67c220c:824:15)
    at Clipboard.listenClick (compose.js?ver=228e7d7fccaae67c220c:476:39)
    at new Clipboard (compose.js?ver=228e7d7fccaae67c220c:446:11)
    at compose.js?ver=228e7d7fccaae67c220c:3867:23
    at compose.js?ver=228e7d7fccaae67c220c:3646:25
    at commitAttachRef (react-dom.js?ver=18.2.0:23655:22)
    at commitLayoutEffectOnFiber (react-dom.js?ver=18.2.0:23513:11)
    at commitLayoutMountEffects_complete (react-dom.js?ver=18.2.0:24698:11)
    at commitLayoutEffects_begin (react-dom.js?ver=18.2.0:24684:9)
    at commitLayoutEffects (react-dom.js?ver=18.2.0:24622:5)
listen @ compose.js?ver=228e7d7fccaae67c220c:824
listenClick @ compose.js?ver=228e7d7fccaae67c220c:476
Clipboard @ compose.js?ver=228e7d7fccaae67c220c:446
(anonymous) @ compose.js?ver=228e7d7fccaae67c220c:3867
(anonymous) @ compose.js?ver=228e7d7fccaae67c220c:3646
commitAttachRef @ react-dom.js?ver=18.2.0:23655
commitLayoutEffectOnFiber @ react-dom.js?ver=18.2.0:23513
commitLayoutMountEffects_complete @ react-dom.js?ver=18.2.0:24698
commitLayoutEffects_begin @ react-dom.js?ver=18.2.0:24684
commitLayoutEffects @ react-dom.js?ver=18.2.0:24622
commitRootImpl @ react-dom.js?ver=18.2.0:26833
commitRoot @ react-dom.js?ver=18.2.0:26692
performSyncWorkOnRoot @ react-dom.js?ver=18.2.0:26127
flushSyncCallbacks @ react-dom.js?ver=18.2.0:12052
(anonymous) @ react-dom.js?ver=18.2.0:25661

> react-dom.js?ver=18.2.0:18697 The above error occurred in the <button> component:

    at button
    at UnforwardedButton (https://wcblocks.mylocal/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:33400:7)
    at UnforwardedMenuItem (https://wcblocks.mylocal/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:66695:5)
    at CopyMenuItem (https://wcblocks.mylocal/wp-includes/js/dist/block-editor.js?ver=0000f8196d02ac71dbf1:45301:3)
    at div
    at div
    at MenuGroup (https://wcblocks.mylocal/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:66648:5)
    at div
    at NavigableContainer (https://wcblocks.mylocal/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:49579:5)
    at NavigableContainer
    at UnforwardedNavigableMenu (https://wcblocks.mylocal/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:49736:3)
    at div
    at div
    at MotionComponent (https://wcblocks.mylocal/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:18531:46)
    at StyleProvider (https://wcblocks.mylocal/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:36164:5)
    at fill_Fill (https://wcblocks.mylocal/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:36206:3)
    at slot_fill_Fill
    at UnforwardedPopover (https://wcblocks.mylocal/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:36674:5)
    at div
    at UnconnectedDropdown (https://wcblocks.mylocal/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:38059:7)
    at UnconnectedDropdownMenu (https://wcblocks.mylocal/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:49855:7)
    at BlockActions (https://wcblocks.mylocal/wp-includes/js/dist/block-editor.js?ver=0000f8196d02ac71dbf1:44945:3)
    at BlockSettingsDropdown (https://wcblocks.mylocal/wp-includes/js/dist/block-editor.js?ver=0000f8196d02ac71dbf1:45313:3)
    at Role (https://wcblocks.mylocal/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:6533:32)
    at toolbar_item_ToolbarItem (https://wcblocks.mylocal/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:73595:3)
    at div
    at ToolbarGroupContainer (https://wcblocks.mylocal/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:73745:3)
    at ToolbarGroup (https://wcblocks.mylocal/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:73846:3)
    at BlockSettingsMenu (https://wcblocks.mylocal/wp-includes/js/dist/block-editor.js?ver=0000f8196d02ac71dbf1:53635:3)
    at div
    at BlockToolbar (https://wcblocks.mylocal/wp-includes/js/dist/block-editor.js?ver=0000f8196d02ac71dbf1:54786:3)
    at div
    at Role (https://wcblocks.mylocal/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:6533:32)
    at UnforwardedToolbarContainer (https://wcblocks.mylocal/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:74004:3)
    at BaseContextSystemProvider (https://wcblocks.mylocal/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:12122:3)
    at UnforwardedToolbar (https://wcblocks.mylocal/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:74053:3)
    at NavigableToolbar (https://wcblocks.mylocal/wp-includes/js/dist/block-editor.js?ver=0000f8196d02ac71dbf1:49912:3)
    at BlockContextualToolbar (https://wcblocks.mylocal/wp-includes/js/dist/block-editor.js?ver=0000f8196d02ac71dbf1:55206:3)
    at div
    at div
    at MotionComponent (https://wcblocks.mylocal/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:18531:46)
    at UnforwardedPopover (https://wcblocks.mylocal/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:36674:5)
    at BlockPopover (https://wcblocks.mylocal/wp-includes/js/dist/block-editor.js?ver=0000f8196d02ac71dbf1:26609:3)
    at SelectedBlockPopover (https://wcblocks.mylocal/wp-includes/js/dist/block-editor.js?ver=0000f8196d02ac71dbf1:55585:3)
    at WrappedBlockPopover (https://wcblocks.mylocal/wp-includes/js/dist/block-editor.js?ver=0000f8196d02ac71dbf1:55732:3)
    at div
    at BlockTools (https://wcblocks.mylocal/wp-includes/js/dist/block-editor.js?ver=0000f8196d02ac71dbf1:55856:3)
    at SlotComponent (https://wcblocks.mylocal/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:35965:5)
    at Slot
    at https://wcblocks.mylocal/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:36517:3
    at EditSiteEditorCanvasContainerSlotSlot
    at SiteEditorCanvas (https://wcblocks.mylocal/wp-includes/js/dist/edit-site.js?ver=2d84293fe492e4b616f3:30985:55)
    at BlockRefsProvider (https://wcblocks.mylocal/wp-includes/js/dist/block-editor.js?ver=0000f8196d02ac71dbf1:17775:3)
    at Provider (https://wcblocks.mylocal/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:36531:3)
    at https://wcblocks.mylocal/wp-includes/js/dist/block-editor.js?ver=0000f8196d02ac71dbf1:19221:5
    at https://wcblocks.mylocal/wp-includes/js/dist/block-editor.js?ver=0000f8196d02ac71dbf1:18774:5
    at WithRegistryProvider(Component)
    at DefaultBlockEditorProvider (https://wcblocks.mylocal/wp-includes/js/dist/edit-site.js?ver=2d84293fe492e4b616f3:31166:3)
    at BlockEditorProvider (https://wcblocks.mylocal/wp-includes/js/dist/edit-site.js?ver=2d84293fe492e4b616f3:31315:3)
    at BlockEditor
    at div
    at NavigableRegion (https://wcblocks.mylocal/wp-includes/js/dist/edit-site.js?ver=2d84293fe492e4b616f3:9404:3)
    at div
    at div
    at div
    at InterfaceSkeleton (https://wcblocks.mylocal/wp-includes/js/dist/edit-site.js?ver=2d84293fe492e4b616f3:9470:3)
    at BlockContextProvider (https://wcblocks.mylocal/wp-includes/js/dist/block-editor.js?ver=0000f8196d02ac71dbf1:16485:3)
    at EntityProvider (https://wcblocks.mylocal/wp-includes/js/dist/core-data.js?ver=77370c9a15a7db2ae084:6359:3)
    at EntityProvider (https://wcblocks.mylocal/wp-includes/js/dist/core-data.js?ver=77370c9a15a7db2ae084:6359:3)
    at Editor (https://wcblocks.mylocal/wp-includes/js/dist/edit-site.js?ver=2d84293fe492e4b616f3:32407:3)
    at div
    at MotionComponent (https://wcblocks.mylocal/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:18531:46)
    at div
    at MotionComponent (https://wcblocks.mylocal/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:18531:46)
    at Resizable (https://wcblocks.mylocal/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:70835:28)
    at UnforwardedResizableBox (https://wcblocks.mylocal/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:71862:3)
    at ResizableFrame (https://wcblocks.mylocal/wp-includes/js/dist/edit-site.js?ver=2d84293fe492e4b616f3:34196:3)
    at ErrorBoundary (https://wcblocks.mylocal/wp-includes/js/dist/edit-site.js?ver=2d84293fe492e4b616f3:32596:5)
    at div
    at MotionComponent (https://wcblocks.mylocal/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:18531:46)
    at div
    at div
    at div
    at Layout (https://wcblocks.mylocal/wp-includes/js/dist/edit-site.js?ver=2d84293fe492e4b616f3:36905:3)
    at RouterProvider (https://wcblocks.mylocal/wp-includes/js/dist/router.js?ver=3b1ce9f5a7a3f2533c5a:910:3)
    at GlobalStylesProvider (https://wcblocks.mylocal/wp-includes/js/dist/edit-site.js?ver=2d84293fe492e4b616f3:12854:3)
    at SlotFillProvider (https://wcblocks.mylocal/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:36374:3)
    at provider_SlotFillProvider (https://wcblocks.mylocal/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:36396:5)
    at Provider (https://wcblocks.mylocal/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:36531:3)
    at App (https://wcblocks.mylocal/wp-includes/js/dist/edit-site.js?ver=2d84293fe492e4b616f3:37170:55)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
overrideMethod @ console.js:213
logCapturedError @ react-dom.js?ver=18.2.0:18697
callback @ react-dom.js?ver=18.2.0:18765
callCallback @ react-dom.js?ver=18.2.0:13933
commitUpdateQueue @ react-dom.js?ver=18.2.0:13954
commitLayoutEffectOnFiber @ react-dom.js?ver=18.2.0:23374
commitLayoutMountEffects_complete @ react-dom.js?ver=18.2.0:24698
commitLayoutEffects_begin @ react-dom.js?ver=18.2.0:24684
commitLayoutEffects @ react-dom.js?ver=18.2.0:24622
commitRootImpl @ react-dom.js?ver=18.2.0:26833
commitRoot @ react-dom.js?ver=18.2.0:26692
performSyncWorkOnRoot @ react-dom.js?ver=18.2.0:26127
flushSyncCallbacks @ react-dom.js?ver=18.2.0:12052
(anonymous) @ react-dom.js?ver=18.2.0:25661

Screenshots, screen recording, code snippet

Screen-2023-12-17-234803.mp4

Environment info

No response

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
@Sidsector9 Sidsector9 added the [Type] Bug An existing feature does not function as intended label Dec 17, 2023
@jordesign jordesign added the [Feature] Block API API that allows to express the block paradigm. label Dec 17, 2023
@talldan
Copy link
Contributor

talldan commented Dec 18, 2023

@Sidsector9 Could you share the error message?

@talldan talldan added the [Status] Needs More Info Follow-up required in order to be actionable. label Dec 18, 2023
@Sidsector9
Copy link
Contributor Author

@talldan , I've updated the issue with the error message.

@talldan
Copy link
Contributor

talldan commented Dec 18, 2023 •
edited
Loading

@Sidsector9 It's a weird error, for sure!

I think the reason it happens is that the 'more options' menu expects to render in the default editor Popover.Slot, but the slot you're rendering is affecting it. I think the main issue is that your slot is within the editor canvas iframe, while block UI is expected to be outside the editor canvas iframe, and so the clipboard utility has trouble setting up event handlers for the Copy button that appears in that menu.

I'm not sure if there's a way we can fix it internally, but there are some options for you that should resolve the issue.

You can either remove <Popover.Slot /> from your block. The editor provides one already, so you don't technically need it. The caveat is your popover will appear outside of the editor iframe, so your styles may not work as expected. Alternatively you can give your popover and slot a name:

<Popover.Slot name="my-popover-slot" />

<Popover __unstableSlotName="my-popover-slot">
    Popover example text
</Popover>

That effectively differentiates your popover from the one the block editor uses for it's UI. Unfortunately the prop on Popover is called __unstableSlotName, and should really just be called name. cc @WordPress/gutenberg-components.

@ellatrix may also be interested in this one.

@talldan talldan added [Feature] UI Components Impacts or related to the UI component system and removed [Feature] Block API API that allows to express the block paradigm. [Status] Needs More Info Follow-up required in order to be actionable. labels Dec 18, 2023
@ciampo
Copy link
Contributor

ciampo commented Dec 18, 2023

Agree with @talldan 's reply.

Also flagging this related conversation:

@Sidsector9
Copy link
Contributor Author

Thanks for responding @talldan.

You can either remove <Popover.Slot /> from your block

Unfortunately this is not an option in the plugin I'm working on, as <Popover.Slot /> is itself used as a workaround by the devs who previously worked on it.

As you suggested, I tried making use of the __unstableSlotName prop but that did not resolve the error 😓

@talldan
Copy link
Contributor

talldan commented Dec 19, 2023

As you suggested, I tried making use of the __unstableSlotName prop but that did not resolve the error 😓

So you definitely set name on the Popover.Slot and __unstableSlotName on the Popover? That resolved the issue for me.

@Sidsector9
Copy link
Contributor Author

You're correct, I set __unstableSlotName at both places. It's working now, thank you very much!

@ciampo
Copy link
Contributor

ciampo commented Dec 21, 2023

Closing as the issue seems resolved. Feel free to re-open if necessary

@ciampo ciampo closed this as completed Dec 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
[Feature] UI Components Impacts or related to the UI component system [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@talldan @ciampo @jordesign @Sidsector9