DataViews styling is broken outside of the edit-site context

[paulwilde]

Description

I've looked at converting an existing table list to work with the new DataViews which is shipping with 6.5, however it appears that the styling for it only works within the edit-site context as the styling for the component is stored within edit-site/style.css.

Step-by-step reproduction instructions

1. Add a <DataViews /> onto a post edit content.
2. See that the styling is broken.

Screenshots, screen recording, code snippet

How <DataViews /> looks without styling:

How <DataViews /> should look when the styling is duplicated across:

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

[annezazu]

@oandregal could you perhaps give some guidance and feedback here? I imagine this has to do with the extensibility not yet being in place outside of the edit-site context but would love confirmation.

[oandregal]

Hey Paul: yes, this has to do with the @wordpress/dataviews package being "experimental".

Most of the packages expose a style handle you'd be able to declare in your plugin as a dependency, as well as a global variable. For example, the @wordpress/components packages exposes a wp-components style handle and a wp.components global variable. When we do that, we are bound by backward-compatibility and we won't do breaking changes.

With dataviews, we're still refining the proper APIs, so we don't expose its styles or global variable — we call this a "bundled package". At some point, I presume we'll expose dataviews styles/APIs the same way we do for components. But it's not there yet.

In the interim, what you can do is to bundle the dataviews styles in your plugin.

[annezazu]

Closing this out with the answer above :) Thank you.