Explore a slot/fill approach for the Header component

[tofumatt]

Feature Description

It's possible that, in the future, we'll want a way for other content to insert itself into the area between the header and the pill links (created in #4050), see:

This issue was created out of the original approach in #4050 which was a slot/fill approach that would allow more content to be added into the header. We didn't need that at the time, but we're keeping this issue around in the "Stalled" section in case it's useful.

If it turns out we don't want/need this, feel free to close the issue. Much of the text below is copied from #4050's slot/fill implementation, with the IB created by @kuasha420.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• There should be a way to render React components into the header area highlighted in the screenshot.
• Content should appear sorted by priority level (where 1 is the "highest" priority—eg. at the top, and then higher numbers appear below it), then in the order added to the header
• We should use something like WordPress's Slot/Fill approach, eg. it should be declarative and not imperative
• Removing content will happen when other components stop rendering content for the Header Slot/Fill—content will not be removed imperatively

Implementation Brief

In assets/js/components/Root/index.js:

• Wrap the { children } with SlotFillProvider from @wordpress/component.

Create assets/js/components/HeaderFill.js component and do the following in it.

• in the newly created HeaderFill component, take priority and children as props. set the default priority to 1.
• return Fill component with the name header-content-area.
• Inside the Fill, render a wrapper div element with priority as a prop and pass the children as its children.
• Everything put together, it should be something like this:

<Fill name="header-content-area">
	<div priority={ priority }>{ children }</div>
</Fill>

In assets/js/components/Header.js:

• Render a Slot component from @wordpress/components with the name header-content-area inside the header & below the <section className="mdc-layout-grid">...</section> tag.
• Use the render pattern to sort the fills with the priority. ie.

<Slot name="header-content-area">
	{ ( fills ) =>
		fills.sort(
			( a, b ) =>
				a[ 0 ].props.priority - b[ 0 ].props.priority
		)
	}
</Slot>

In the future, we will be able to use the newly created HeaderFill component to render react elements to the header section. ie.

<HeaderFill priority={ 2 }>
	<p>Hello Slot/Fill Dashboard P2</p>
</HeaderFill>
<HeaderFill priority={ 4 }>
	<p>Hello Slot/Fill Dashboard P4</p>
</HeaderFill>
<HeaderFill priority={ 3 }>
	<p>Hello Slot/Fill Dashboard P3</p>
</HeaderFill>
<HeaderFill>
	<p>Hello Slot/Fill Dashboard P1</p>
</HeaderFill>

Test Coverage

• n/a

QA Brief

Changelog entry