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