Wide Alignment not showing as option for Blocks

I added

/**
     * Enable page wide blocks
     *
     * @link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#wide-alignment
     */

    add_theme_support('align-wide');

to app/setup.php
but I seem not to be able to set blocks page with. The option does not load for image blocks, slider blocks, covers. When I use Astra Theme it does. Any ideas what I am missing?

On Astra I see this for almost all blocks:

Reading Gutenberg | Sage Docs | Roots some more again. But when I updated Bug:

/**
 * Compiler configuration
 *
 * @see {@link https://roots.io/docs/sage sage documentation}
 * @see {@link https://bud.js.org/guides/configure bud.js configuration guide}
 *
 * @type {import('@roots/bud').Config}
 */
export default async (app) => {
  /**
   * Application assets & entrypoints
   *
   * @see {@link https://bud.js.org/docs/bud.entry}
   * @see {@link https://bud.js.org/docs/bud.assets}
   */
  app
    .entry('app', ['@scripts/app', '@styles/app'])
    .entry('editor', ['@scripts/editor', '@styles/editor'])
    .assets(['images']);

  /**
   * Set public path
   *
   * @see {@link https://bud.js.org/docs/bud.setPublicPath}
   */
  app.setPublicPath('/app/themes/moiraine/public/');

  /**
   * Development server settings
   *
   * @see {@link https://bud.js.org/docs/bud.setUrl}
   * @see {@link https://bud.js.org/docs/bud.setProxyUrl}
   * @see {@link https://bud.js.org/docs/bud.watch}
   */
  app
    .setUrl('http://localhost:3000')
    .setProxyUrl('https://imwzv2.test')
    .watch(['resources/views', 'app']);

  /**
   * Generate WordPress `theme.json`
   *
   * @note This overwrites `theme.json` on every build.
   *
   * @see {@link https://bud.js.org/extensions/sage/theme.json}
   * @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json}
   */
  app.wpjson
    .setSettings({
      color: {
        custom: false,
        customDuotone: false,
        customGradient: false,
        defaultDuotone: false,
        defaultGradients: false,
        defaultPalette: false,
        duotone: [],
      },
      custom: {
        spacing: {},
        layout: {
          "contentSize": "840px",
          "wideSize":" 1200px"
        },
        typography: {
          'font-size': {},
          'line-height': {},
        },
      },
      spacing: {
        padding: true,
        units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
      },
      typography: {
        customFontSize: false,
      },
    })
    .useTailwindColors()
    .useTailwindFontFamily()
    .useTailwindFontSize();
};

with

layout: {
          "contentSize": "840px",
          "wideSize":" 1200px"
        },

and ran yarn build no new align options were loaded in.

I needed this:

/**
 * Compiler configuration
 *
 * @see {@link https://roots.io/docs/sage sage documentation}
 * @see {@link https://bud.js.org/guides/configure bud.js configuration guide}
 *
 * @type {import('@roots/bud').Config}
 */
export default async (app) => {
  /**
   * Application assets & entrypoints
   *
   * @see {@link https://bud.js.org/docs/bud.entry}
   * @see {@link https://bud.js.org/docs/bud.assets}
   */
  app
    .entry('app', ['@scripts/app', '@styles/app'])
    .entry('editor', ['@scripts/editor', '@styles/editor'])
    .assets(['images']);

  /**
   * Set public path
   *
   * @see {@link https://bud.js.org/docs/bud.setPublicPath}
   */
  app.setPublicPath('/app/themes/moiraine/public/');

  /**
   * Development server settings
   *
   * @see {@link https://bud.js.org/docs/bud.setUrl}
   * @see {@link https://bud.js.org/docs/bud.setProxyUrl}
   * @see {@link https://bud.js.org/docs/bud.watch}
   */
  app
    .setUrl('http://localhost:3000')
    .setProxyUrl('https://imwzv2.test')
    .watch(['resources/views', 'app']);

  /**
   * Generate WordPress `theme.json`
   *
   * @note This overwrites `theme.json` on every build.
   *
   * @see {@link https://bud.js.org/extensions/sage/theme.json}
   * @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json}
   */
  app.wpjson
    .setSettings({
      color: {
        custom: false,
        customDuotone: false,
        customGradient: false,
        defaultDuotone: false,
        defaultGradients: false,
        defaultPalette: false,
        duotone: [],
      },
      custom: {
        spacing: {},
        typography: {
          'font-size': {},
          'line-height': {},
        },
      },
      spacing: {
        padding: true,
        units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
      },
      layout: {
        "contentSize": "840px",
        "wideSize":" 1200px"
      },
      typography: {
        customFontSize: false,
      },
    })
    .useTailwindColors()
    .useTailwindFontFamily()
    .useTailwindFontSize();
};

Only the container still limits things so need to look into that some.

So layout

   layout: {
        "contentSize": "60vw",
        "wideSize":" 80vw"
      }

in bud.config.js

/**
 * Compiler configuration
 *
 * @see {@link https://roots.io/docs/sage sage documentation}
 * @see {@link https://bud.js.org/guides/configure bud.js configuration guide}
 *
 * @type {import('@roots/bud').Config}
 */
export default async (app) => {
  /**
   * Application assets & entrypoints
   *
   * @see {@link https://bud.js.org/docs/bud.entry}
   * @see {@link https://bud.js.org/docs/bud.assets}
   */
  app
    .entry('app', ['@scripts/app', '@styles/app'])
    .entry('editor', ['@scripts/editor', '@styles/editor'])
    .assets(['images']);

  /**
   * Set public path
   *
   * @see {@link https://bud.js.org/docs/bud.setPublicPath}
   */
  app.setPublicPath('/app/themes/moiraine/public/');

  /**
   * Development server settings
   *
   * @see {@link https://bud.js.org/docs/bud.setUrl}
   * @see {@link https://bud.js.org/docs/bud.setProxyUrl}
   * @see {@link https://bud.js.org/docs/bud.watch}
   */
  app
    .setUrl('http://localhost:3000')
    .setProxyUrl('https://imwzv2.test')
    .watch(['resources/views', 'app']);

  /**
   * Generate WordPress `theme.json`
   *
   * @note This overwrites `theme.json` on every build.
   *
   * @see {@link https://bud.js.org/extensions/sage/theme.json}
   * @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json}
   */
  app.wpjson
    .setSettings({
      color: {
        custom: false,
        customDuotone: false,
        customGradient: false,
        defaultDuotone: false,
        defaultGradients: false,
        defaultPalette: false,
        duotone: [],
      },
      custom: {
        spacing: {},
        typography: {
          'font-size': {},
          'line-height': {},
        },
      },
      spacing: {
        padding: true,
        units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
      },
      layout: {
        "contentSize": "60vw",
        "wideSize":" 80vw"
      },
      typography: {
        customFontSize: false,
      },
    })
    .useTailwindColors()
    .useTailwindFontFamily()
    .useTailwindFontSize();
};

does not work on app.blade.php

  <a class="sr-only focus:not-sr-only" href="#main">
    {{ __('Skip to content') }}
  </a>

  @include('sections.header')

  @if(is_front_page())
  {{--@include('sections.hero')--}}
  @endif

    <div class="container min-h-screen">
      
       
          @yield('content')
      

      @hasSection('sidebar')
        <aside class="sidebar bg-white p-8 rounded-lg shadow-md">
          @yield('sidebar')
        </aside>
      @endif
    </div>
    
  @include('sections.footer')

with tailwind config

/** @type {import('tailwindcss').Config} config */
// import flowbite from 'flowbite/plugin.js';
const config = {
  content: ['./index.php', './app/**/*.php', './resources/**/*.{php,vue,js}'],
  theme: {
    container: {
      center: true,
      padding: {
        DEFAULT: '.625rem',
        sm: '1.25rem'
      }
    },
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1300px',
      'xl': '1280x',
      '2xl': '1536px'
    },
    fontFamily: {
      'body': ['"Inconsolata"', 'Serif'],
      'heading': ['"Poppins"', "Inconsolata"],
    },
    extend: {
      colors: {
        'black-100': '#0c1c2e',
        'black-200': '#000',
        'grey': '#414141',
        'off-white': '#e6ecef',
        'blue': '#2d80e2',
        'red': '#e95941',
        'yellow': '#fed15a',
        'cyan': '#71e2df',
      },
      spacing: {
        '16': '4.375rem'
      },
      fontSize: {
        'xs':'.9375rem',
        '2xl':'1.5625rem',
        '4xl':'2.5rem',
        '6vw': '6vw',
        '9vw': '9vw',
        '12vw': '12vw'
      }
    },
  },
  plugins: [
    // flowbite,
  ],
};

export default config;

But why? Why all good in editor but not frontend?

I seems editor does see this style loaded:

editor-styles-wrapper .block-editor-block-list__layout.is-root-container > .alignwide {
max-width: 80vw;
}

but frontend it is not added for the same block.

When I added all blocks to a group block It seems the layouts started being applied . This with inner width turned on by default. Read this at Layout – Theme Handbook | Developer.WordPress.org