Block background doesn’t work on Site Editor section

[ad_1]

In the project’s \`themes\` folder, there is a banner block

[Screenshot – Theme Folder](https://ibb.co/7tyjfZC)

`banner.js` file

import { InnerBlocks } from “@wordpress/block-editor”

wp.blocks.registerBlockType(“ourblocktheme/banner”, {
title: “Banner”,
edit: EditComponent,
save: SaveComponent
});

function EditComponent() {
const useMeLater = (
<>
<h1 className=”headline headline–large”>Welcome!</h1>
<h2 className=”headline headline–medium”>We think you&rsquo;ll like it
here.</h2>
<h3 className=”headline headline–small”>Why don&rsquo;t you check out
the <strong>major</strong> you&rsquo;re interested in?</h3>
<a href=”#” className=”btn btn–large btn–blue”>Find Your Major</a>
</>
)

return (
<div className=”page-banner”>
<div className=”page-banner__bg-image”
style={{backgroundImage: “url(‘/wp-content/themes/fictional-block-theme/images/library-hero.jpg’)”}}></div>
<div className=”page-banner__content container t-center c-white”>
<InnerBlocks />
</div>
</div>
)
}

function SaveComponent() {
return (
<div className=”page-banner”>
<div className=”page-banner__bg-image”
style={{backgroundImage: “url(‘/wp-content/themes/fictional-block-theme/images/library-hero.jpg’)”}}></div>
<div className=”page-banner__content container t-center c-white”>
<InnerBlocks.Content />
</div>
</div>
)
}

Added theme CSS files for the editor pages in the \`functions.php\` file

function university_features() {
add_theme_support(‘editor-styles’);
add_editor_style(array(‘https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,300,400,400i,700,700i’, ‘build/style-index.css’, ‘build/index.css’));
}

add_action(“after_setup_theme”, “university_features”);

On style attribute as a temporary background is used this path \`background-image: “url(‘/wp-content/themes/fictional-block-theme/images/library-hero.jpg’)”\`

`banner.js -> EditComponent`

<div className=”page-banner”>
<div
className=”page-banner__bg-image”
style={{
backgroundImage:
“url(‘/wp-content/themes/fictional-block-theme/images/library-hero.jpg’)”,
}}
></div>
<div className=”page-banner__content container t-center c-white”>
<InnerBlocks />
</div>
</div>;

If it’s edited any blog post (or another post type), the background appears but on the Site Editor page the image isn’t rendered

**Post Editing**

Screenshots

[Edit Post](https://ibb.co/jHHTkJz)

[Choosing Banner Block](https://ibb.co/QNFRszf)

[Banner Block](https://ibb.co/fdt8RGv)

[Rendered Image on Network](https://ibb.co/n1dphpQ)

**Site Editor** section

Screenshots

[Choosing Site Editor](https://ibb.co/ZMnrLhv)

[Choosing Templates](https://ibb.co/Z6vKMrZ)

[Choosing Index](https://ibb.co/KxwwMrW)

[Choosing Banner Block](https://ibb.co/2qYgdZj)

[Banner Block](https://ibb.co/n8CCkV7)

[Network Tab](https://ibb.co/n0zyMvX)

**What is the problem here?**

[ad_2]