Block Editor Core CSS

[nicholasio]

Is your enhancement related to a problem? Please describe.

The WordPress Core Blocks depends on CSS that is shipped in multiple ways:

1. Some CSS is globally loaded by WordPress (block-library.css)
2. Some CSS is conditionally loaded if the block is in the page.
3. Some CSS is dynamically generated based on the blocks on the page.

In order to get full support for core blocks styles in Headless we need a strategy to load these styles. Otherwise each app would need to reimplement these core styles in Next.js

For Global CSS (i.e block-library.css)

A first approach is one where the project could manually copy as paste the block-library.css from WordPress (e.g https://js1.10up.com/wp-includes/css/dist/block-library/style.min.css) but this has the downside of manually needing to keep it up to date. The benefit of this approach is that the css becomes bundled with the app's css.

A second approach would be to load the stylesheet as external css, for Next.js App's router this requires React 19. This approach is not ideal from a perfomance standpoint since it would load an external stylesheet and it would not be part of the main's css bundle.

A third approach is to leverage Server Components and fetch block-library.css from WordPress and load it inline. E.g:

export const BlockLibraryStyles: React.FC<BlockLibraryStylesProps> = async ({ params = {} }) => {
	const css = await fetchBlockLibraryStyles({ params });

	if (!css) {
		return null;
	}

	return <style dangerouslySetInnerHTML={{ __html: css }} />;
};

This approach kind of solves the issues with the two previous ones, while it does not include the CSS in the main app's bundle, it loads the style inline in the markup and reduces the need of an external CSS request. The fetch to get the styles can also be cached and a re-deploy would force a cache flush (depending on how the build's cache is handled).

For dynamic/conditional CSS

We could extend the HeadstartWP plugin to include a a property in post.content. e.g: post.content.block_styles which would process all of the required css for the current post/page and adds to the REST API response.

Then we could extend BlocksRenderer to accept a blockStyles property.

<BlocksRenderer
	forwardBlockAttributes
	html={html}
	settings={settings}
	blockContext={{ themeJSON: data['theme.json'].settings }}
	blockStyles={styles}
>

We can add the post.content.block_styles behind a filter in the HeadstartWP plugin.

Designs

No response

Describe alternatives you've considered

No response

Code of Conduct

• I agree to follow this project's Code of Conduct