# Custom Gutenberg Block - Styling and images no longer being imported correctly

**URL:** https://discourse.roots.io/t/custom-gutenberg-block-styling-and-images-no-longer-being-imported-correctly/26957
**Category:** sage
**Tags:** bud, sage10
**Created:** 2024-04-08T10:12:06Z
**Posts:** 2

## Post 1 by @jarirengeling — 2024-04-08T10:12:06Z

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!

---

## Post 2 by @strarsis — 2024-04-08T13:38:39Z

This appears to be an issue with stylesheet-relative URLs or relative URLs in markup within the new iframe-based Gutenberg editor:

> <https://github.com/WordPress/gutenberg/issues/54262>
>
> ### Description
> 
> In WordPress 6.3 and the current version of the Gutenberg plugi…n, 16.6.0, images with relative schemes are not displayed correctly in the block editor. On the front end they render as expected.
> 
> In the editor, the images are shown as a broken image and -- browser dependent -- the alt text shown in it's place.
> 
> ### Step-by-step reproduction instructions
> 
> 1. Install WordPress 6.3 locally
> 2. In the wp-config file, define a relative content URL constant: `define( 'WP_CONTENT_URL', '//example.local/wp-content' );`
> 3. Create a post in the block editor
> 4. Insert an image block
> 5. Upload an image to the image block/library
> 6. The image fails to load
> 7. Preview the post in a new tab: the image does display
> 8. Switch to the code editor
> 9. Modify the image URL to include the scheme
> 10. Exit the code editor
> 11. The image now displays
> 
> ### Screenshots, screen recording, code snippet
> 
> **WordPress 6.3** (with and without the latest version of Gutenberg active)
> 
> <img width="912" alt="Screen Shot 2023-09-08 at 10 48 42 am" src="https://github.com/WordPress/gutenberg/assets/519727/232b510b-1355-43a8-9e14-80db46bc8374">
> 
> **WordPress 6.2** (without Gutenberg active)
> 
> <img width="917" alt="Screen Shot 2023-09-08 at 10 50 34 am" src="https://github.com/WordPress/gutenberg/assets/519727/e693b604-5cdd-4e96-baa3-9b01be629041">
> 
> 
> ### Environment info
> 
> - WordPress 6.3
> - Browsers: Reproduced in Firefox, Safari and Chrome (all latest versions)
> - OS: macOS
> - Virtual machine: https://github.com/chassis/chassis on VirtualBox
> - Home URL: example.local
> - Site (WP) URL: example.local/wp (ie WordPress is running in [its own sub-directory](https://wordpress.org/documentation/article/giving-wordpress-its-own-directory/))
> 
> ### 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

[https://github.com/WordPress/gutenberg/issues/31815](https://github.com/WordPress/gutenberg/issues/31815)