Hi all,
We are creating custom blocks in our Sage theme with bud. Since this morning the images and fonts are no longer being loaded in the Gutenberg editor.
For example the image with src: app/themes/erikdekker/public/images/diensten-analist-shape-top.1561ee5461596beb.png doesn’t load in the Gutenberg editor, but when we go to the URL directly we see the image.
Also the fonts are no longer loading in Gutenberg? We didn’t change anything big.
This is our bud.config.js:
/**
* Compiler configuration
*
* @see {@link https://roots.io/sage/docs sage documentation}
* @see {@link https://bud.js.org/learn/config bud.js configuration guide}
*
* @type {import('@roots/bud').Config}
*/
export default async(app) => {
/**
* Application assets & entrypoints
*
* @see {@link https://bud.js.org/reference/bud.entry}
* @see {@link https://bud.js.org/reference/bud.assets}
*/
app
.entry('app', ['@scripts/app', '@styles/app'])
.entry('editor', ['@scripts/editor', '@styles/editor'])
.entry('blocks/services-slider', ['@scripts/blocks/services-slider/public.js'])
.entry('blocks/scrolling-text', ['@scripts/blocks/scrolling-text/scrolling-text.js'])
.assets(['images']);
app.provide({
jquery: ['jQuery', '$'],
});
/**
* Set public path
*
* @see {@link https://bud.js.org/reference/bud.setPublicPath}
*/
app.setPublicPath('/app/themes/erikdekker/public/');
/**
* Development server settings
*
* @see {@link https://bud.js.org/reference/bud.setUrl}
* @see {@link https://bud.js.org/reference/bud.setProxyUrl}
* @see {@link https://bud.js.org/reference/bud.watch}
*/
app
.setUrl('http://localhost:3000')
.setProxyUrl('https://erikdekker.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
.setOption('styles', {
typography: {
fontFamily: 'var(--wp--preset--font-family--montserrat)',
},
})
.setSettings({
background: {
backgroundImage: true,
},
color: {
custom: false,
customDuotone: false,
customGradient: false,
defaultDuotone: false,
defaultGradients: false,
defaultPalette: false,
duotone: [],
palette: [
{
name: 'Rood',
slug: 'primary',
color: '#5D5DFF',
},
{
name: 'Blauw',
slug: 'secondary',
color: '#FF5050',
},
{
name: 'Donker grijs',
slug: 'dark_gray',
color: '#1A1818',
},
{
name: 'Licht grijs',
slug: 'light_gray',
color: '#F1F1F1',
},
],
},
custom: {
spacing: {},
typography: {
'font-size': {},
'line-height': {},
},
},
spacing: {
padding: true,
units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
},
layout: {
contentSize: '1500px',
wideSize: '2000px',
},
typography: {
customFontSize: false,
fontFamilies: [
{
slug: 'montserrat',
name: 'Montserrat',
fallbacks: ['sans-serif'],
}
],
},
})
.useTailwindFontFamily()
.useTailwindFontSize();
};
Does anybody have any idea?
Thanks!