Components: Refactor SlotFill

[diegohaz]

Description

This PR is part of #18619.

The problem

There are several problems with the current slot-fill implementation. For example, the context value never changes because it's a class property whose value is never updated during the SlotFillProvider lifecycle:

gutenberg/packages/components/src/slot-fill/context.js

Lines 38 to 47 in 56cd1df

	this.contextValue = {
	registerSlot: this.registerSlot,
	unregisterSlot: this.unregisterSlot,
	registerFill: this.registerFill,
	unregisterFill: this.unregisterFill,
	getSlot: this.getSlot,
	getFills: this.getFills,
	hasFills: this.hasFills,
	subscribe: this.subscribe,
	};

Because of that, both the Slot and the Fill components will never re-render when some action is done in the context (for example, when calling registerSlot or registerFill). Workarounds like forceUpdate() have been introduced to the code to overcome this:

gutenberg/packages/components/src/slot-fill/context.js

Lines 55 to 65 in 56cd1df

	// Sometimes the fills are registered after the initial render of slot
	// But before the registerSlot call, we need to rerender the slot
	this.forceUpdateSlot( name );
	// If a new instance of a slot is being mounted while another with the
	// same name exists, force its update _after_ the new slot has been
	// assigned into the instance, such that its own rendering of children
	// will be empty (the new Slot will subsume all fills for this name).
	if ( previousSlot ) {
	previousSlot.forceUpdate();
	}

Also, the Fill component won't re-render when new fillProps are passed to the Slot component (probably, a new forceUpdate call should be placed here to work around this issue):

gutenberg/packages/components/src/slot-fill/fill.js

Lines 56 to 59 in 56cd1df

	// If a function is passed as a child, provide it with the fillProps.
	if ( isFunction( children ) ) {
	children = children( slot.props.fillProps );
	}

This solution

This is a rewrite of the slot-fill module using React Hooks and exposing only the Portal API (activated by using the bubblesVirtually prop today). This greatly simplifies the code without workarounds.

The component should behave exactly the same as when using the bubblesVirtually prop today, except that it will properly re-render when fillProps are updated.

The idea is to gradually migrate the codebase to use this while this is experimental and then replace the current slot-fill with this one if the experiment succeeds. This would also validate whether the current usage of slots without bubblesVirtually could use it or not.

How has this been tested?

This was tested using Storybook and unit tests.

Types of changes

New feature

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR. .

[diegohaz]

Follow-up PR with improved tests: #20428

[gziolo]

I can confirm it fixes the issue I raised yesterday. Awesome work on fixing it. I believe it closes more existing issues. I will try to identify them :)

Let's ship it 🚢

[aduth]

This looks really cool! I'd like to circle back and dive into the specific changes, but at least on a cursory glance, the implementation looks solid.

Would you happen to have a sense whether this will help unblock #14845 / #17355 ? I noticed some earlier comments at #17355 (comment) , but those were prior to some additional changes that came later in this pull request.

[draganescu]

Advised by @aduth I tried reverting this PR and now this #18560 new editor crash is fixed. So this PR apparently did something that crashes the editor with the console message:

TypeError: "slot is undefined"

when doing this:

[aduth]

Should it be safe to assume slot is defined here?

In debugging the issue mentioned by @draganescu at #18560 (comment) , the exact error occurs at this line of code:

It's not yet clear to me if the bug is in how the slot came to be undefined in the first place, or if we should be guarded in how we expect slot to be available at this line of code.