How to use Layout feature in gutenberg playground ?

[kohheepeace]

Hi, I would like to use layout align-wide, align-full feature in "gutenberg playground" but it is not working.

Appling

__experimentalFeatures: {
  layout: {
    contentSize: "650px",
    wideSize: "1000px"
  }
}

is not enough to use layout align-wide feature ?

ScreenShot

Align toolbar does not appear in gutenberg playground.

TT2 theme	Playground

And this is my settings file

editor-settings.js

import { SETTINGS_DEFAULTS } from "@wordpress/block-editor";

const EDITOR_SETTINGS = {
  ...SETTINGS_DEFAULTS,
  // 👇 extend default settings with layout feature
  __experimentalFeatures: {
    layout: {
      contentSize: "650px",
      wideSize: "1000px"
    }
  }
};

export default EDITOR_SETTINGS;

Then, import it in App.js

/**
 * Internal deps
 */
import EDITOR_SETTINGS from "./editor-settings"; // 👈 import settings here

export default function App() {
...

  return (
    <div className="playground">
          <BlockEditorProvider
            value={blocks}
            onInput={updateBlocks}
            onChange={updateBlocks}
            settings={EDITOR_SETTINGS} // 👈 apply settings here
          >
         ....
          </BlockEditorProvider>
    </div>
  );
}

Full source code in Codesandbox

https://codesandbox.io/s/gutenberg-playground-ridjmd

[kohheepeace]

I need to pass __experimentalLayout to BlockList.

const layout = useSetting("layout");
// console.log(layout) => { contentSize: "650px", wideSize: "1000px" }

<BlockList
  __experimentalLayout={ layout }
 />

Ref:

gutenberg/packages/edit-post/src/components/visual-editor/index.js

Line 259 in c80eb71

<BlockList