search

WordPress / gutenberg

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

DataViews: Split the components into composable components. #63646

Open youknowriad opened 2 months ago

youknowriad commented 2 months ago

Right now, when you render the DataViews component, it gets rendered all in one including:

This approach provides a straightforward way to use DataViews but lacks flexibility. For instance in https://github.com/WordPress/gutenberg/issues/55101 we want to add a "toggle" to show the dataviews sidebar at the right of the view config dropdown. That toggle doesn't have anything to do with DataViews so it shouldn't rendered within the dataviews component.

We have two options:

Short Term option

Just have some kind of slot prop to inject UI there. I'll probably use this approach initially.

Long Term option

Expose the underlying DataViews component and allow composition:

<DataViews>
    <HStack>
        <DataViews.Search />
        <DataViews.Filters />
        <DataViews.BulkActions />
        <DataViews.LayoutSwitcher />
        <DataViews.ViewConfig />
        <Button>My custom Button</Button>
     </HStack>
      <DataViews.Layout />
      <DataViews.Pagination />
      <DataViews.BulkActionToolbar />
</DataViews>

Any thoughts @ntsekouras @ellatrix @oandregal @jorgefilipecosta Also components team as they're exploring a similar pattern for the components package. @ciampo @mirka @DaniGuardiola

ciampo commented 2 months ago

Adopting compound components seems like a good idea to me, to offer an a-la-carte set of components that consumers of the package can pick and render as needed.

Other approaches that can be used (not necessarily as an alternative, but in conjunction) are render props, which allow components to identify "slots" where consumers can render custom react components.

Related, this recent article from @DaniGuardiola explores the topic in depth: https://dio.la/article/the-everything-bagel-of-components

ntsekouras commented 2 months ago

I think composable components are good and flexible. This actually was my approach at my very first experiment of this component.

youknowriad commented 2 months ago

Going to give this a try.