Gutenberg Framework: Clarify and simplify how to load content styles

[aks30498]

Description

I just followed the steps to bootstrap a basic editor and copied your code in my react project

import { createRoot } from "react-dom/client";
import { BlockEditorProvider, BlockCanvas } from "@wordpress/block-editor";
import { registerCoreBlocks } from "@wordpress/block-library";

// Default styles that are needed for the editor.
import "@wordpress/components/build-style/style.css";
import "@wordpress/block-editor/build-style/style.css";

// Default styles that are needed for the core blocks.
import "@wordpress/block-library/build-style/common.css";
import "@wordpress/block-library/build-style/style.css";
import "@wordpress/block-library/build-style/editor.css";

// Register the default core block types.
registerCoreBlocks();

function Editor() {
  const [blocks, setBlocks] = useState([]);
  return (
    /*
      The BlockEditorProvider is the wrapper of the block editor's state.
      All the UI elements of the block editor need to be rendered within this provider.
    */
    <BlockEditorProvider
      value={blocks}
      onChange={setBlocks}
      onInput={setBlocks}
    >
      {/*
          The BlockCanvas component renders the block list within an iframe
          and wire up all the necessary events to make the block editor work.
        */}
      <BlockCanvas height="500px" />
    </BlockEditorProvider>
  );
}


createRoot(document.getElementById("root")!).render(<Editor />);

But the editor styles are off, it is missing a lot of styles and looks ugly, also, I tried using text align on paragraph and it does not work so I believe a css is not getting loaded, I tried to debug, the css file is being imported and the file has classes for alignment but when I inspect the pargraph element, I cannot see the classes in styles tab

Step-by-step reproduction instructions

create a new react project and siply paste the example in docs.

Screenshots, screen recording, code snippet

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[ramonjd]

Could you link to the example you're working from?

What I think is happening is that the CSS required to style blocks is there, but it's not available in the editor iframe.

<BlockCanvas /> has a styles prop that accepts the following value:

const styles = [ { css: 'body { ... } ... ' }, { css: '.test { ... } ... ' }  ];

Each item in the array will be rendered inside a style tag inside the iframe.

To get align styles to work I had to raw import the @wordpress/block-library/build-style/common.css module and pass it to <BlockCanvas /> .

Example:

import common from "!!raw-loader!@wordpress/block-library/build-style/common.css";
const styles = [
	{
		css: common,
	},
];

....

<BlockCanvas height="100%" styles={ styles } />

Here's what I also imported to get it working:

import "@wordpress/block-library/build-style/common.css";
import "@wordpress/block-library/build-style/style.css";
import '@wordpress/components/build-style/style.css';
import '@wordpress/block-editor/build-style/style.css';

2024-11-22.09.23.20.mp4

Also, add import '@wordpress/format-library'; if you want the formatting tools in the toolbar.

Having said all that, I don't know if that's the correct way of going about all this, and if the docs are wrong or need to be updated.

cc @WordPress/gutenberg-core for tips.

I also noticed there's a prop called shouldIframe, which is true by default, but it's not passed to the inner component, so it does nothing.

https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/block-canvas/index.js#L132

[youknowriad]

Good point, worth noting that we don't have a lot of feedback on the "Gutenberg Framework" use-case, so I'm very happy to see this bug report.

What @ramonjd is saying is correct, I think our documentation doesn't explain this properly, so we need to fix the documentation here.
But also, we need to make it easier to load the "required content styles" into the block editor without too much boilerplate, with the "required content styles" I'm referring to:

• content styles that come in block-editor package.
• content styles that come in components package potentially (placeholders).
• default block library content styles.

We should also document all of that properly in the "platform docs".

cc @ellatrix as she worked on content styles and also some third-party Gutenberg editors.

[aks30498]

@ramonjd I don't get it sorry, I tried the !!raw-loader line and it throws error, can you fix it in my code may be please ?

Example I used is from here
https://github.com/WordPress/gutenberg/blob/trunk/platform-docs/docs/intro.md

[ramonjd]

I tried the !!raw-loader line and it throws error

Sorry if that was a bit confusing, @aks30498- it was just meant to be example code.

In my local development environment, I'm using webpack to build assets and raw loader will import the contents of the styles file as they are:

https://www.npmjs.com/package/raw-loader

To get your example working you'll need the contents of @wordpress/block-library/build-style/common.css loaded into the block editor iframe.

I think we should update that example.

[aks30498]

I tried the !!raw-loader line and it throws error

Sorry if that was a bit confusing, @aks30498- it was just meant to be example code.

In my local development environment, I'm using webpack to build assets and raw loader will import the contents of the styles file as they are:

https://www.npmjs.com/package/raw-loader

To get your example working you'll need the contents of @wordpress/block-library/build-style/common.css loaded into the block editor iframe.

I think we should update that example.

@ramonjd Can you help me with this in vite ? I tried using ?inline and ?raw to import common.css in a variable but it keeps throwing common.css has no default export

[ramonjd]

Can you help me with this in vite ? I tried using ?inline and ?raw to import common.css in a variable but it keeps throwing common.css has no default export

Apparently you can specify a file extension in the vite.config.js es loader option. Theoretically, ?raw should work according to the docs. I don't know if that helps you.

Without knowing anything else about your app, I don't think I can be of much help unfortunately. You might like to look at how @ellatrix imports editor CSS dependencies using vite: https://github.com/blocknotes-org/blocknotes/blob/0857170afd81a144d746dce9d3964538766d4b02/src/editor.jsx#L16

I know it's not all exactly straight forward. 🙃

When I said above that the example should be updated, I agree with you and think that the public example in the Gutenberg docs needs to reflect a working example.

[aks30498]

@ramonjd Thanks for the help! The ?raw should work, but I might be missing something in setup I guess, I am new to vite as well, I just wnat the gutenberg to work in my setup, building something on top of it and if I can use the system already build by wordpress it will save a lot of effort.

@ellatrix Can you help with the import plz ? I tried importing css as string and passing to the BlockCanvas styles prop just like @ramonjd did using ?raw and ?inline but it just breaks saying common.css has no default export, I saw your working code which was linked in above comment has similar ?raw suffix for light.css for example, what might I be missing ?

[stokesman]

@aks30498, importing @wordpress/block-library/build-style/common.css is not necessary because that file is already built into @wordpress/block-library/build-style/style.css.

This was closed since #61341 which now includes passing the styles prop to BlockCanvas. If you try the latest instructions and are still having issues then leave a reply and I’ll try to help. Please note the whole intro was overhauled and it’s now recommended to use the React starter/variant from npm create vite@latest. So it would be a good idea to start fresh from that.

[ramonjd]

Thank you @stokesman !!

[aks30498]

@stokesman Thanks, it works with new docs, I have a few questions though, having used the latest version of all libs, there are loads of TS errors in the docs example that shows how to use history (undo-redo) but leaving that aside the most irritating one is that it says BlockCanvas is not exported from @wordpress/block-editor while it surely is coz it is working.

Also, while I can apply height to BlockCanvas , there is no width prop available, I wish to create a Canva like canvas for my users where they can design things using block builder, but I can't specify width am I missing something ?