Block Editor Creates background color and border

[dskirk]

I have a web page at https://davidkirk.org/sandbox/sample-page/  where I am experimenting with the Block Editor, but whatever I enter always has a dark background to it and a border. Any tips on how to remove that will be appreciated. Thanks.

[User]

I know pretty much zero about WP-Blocks, but inspecting the two columns, they both have Weaver Style Sheet attributes attached.

That leads me to suggest that these features you want to change are probably default settings, which can be changed or removed site-wide in the Customizer.

I’d start looking in the “Content Area” and then “Post Specifics” sections and things like “Content Area BG Color” etc.

Regards!

[dskirk]

Thanks for the feedback. I’ve looked and found nothing specific, and I am not wanting to change sitewide settings. I could accomplish this with a pagebuilder plugin, but I try to avoid plugins where possible.

[Weaver]

The content of your examples is wrapped in <code>example</code> HTML. The borders and bg come from the CSS styling for <code> which I think might be Weaver’s styling. Has nothing to do with the block editor I think. Most themes style <code> blocks with monospaced font and some sort of grayish background, most often wrapped in a border.

[dskirk]

Thanks for the feedback, Weaver, but I cannot find a way around it. The sample code has a pre tag with class of ‘wp-block-code’ and the code tag.  and if I omit the pre or the code tags I get an error for attempted block recovery. I’ve tried to find the CSS to turn this off with Inspect with browser, but my CSS skills are not that great. Any tip on how to override that will be appreciated.

[scrambler]

This reply has been accepted as the best answer.

The CS rule styling the block code is below

.wp-block-code,.wp-block-preformatted pre {
background: rgba(128,128,128,0.1);
border: 1px solid #aaa;
border-bottom-color: #ccc;
border-radius: 2px;
color: inherit;
font-family: ‘Inconsolata’,monospace;
font-size: .8em;
height: auto;
margin: 0;
margin-bottom: 1.5em;
outline: 0;
overflow: auto;
padding: 6px 10px;
vertical-align: middle;
width: 100%;
word-wrap: break-word;
white-space: pre-wrap
}

There is also a code rule below

code {
background: rgba(128,128,128,0.1);
color: inherit;
}

And finally there is a pre rule

pre {
box-shadow: 0 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,0.2);
box-sizing: border-box;
background: rgba(128,128,128,0.1);
border: 1px solid #aaa;
border-bottom-color: #ccc;
border-radius: 2px;
font-family: ‘Inconsolata’,monospace;
font-size: .8em;
height: auto;
margin: 0;
margin-bottom: 1.5em;
outline: 0;
overflow: auto;
padding: 6px 10px;
vertical-align: middle;
width: 100%;
word-wrap: break-word;
white-space: pre-wrap;
}

So to remove the background and border you would need to add the following rule in the theme Custom CSS rule box

pre {box-shadow:none;}

.wp-block-code,.wp-block-preformatted pre , code {background:transparent;border:none;}

 

[User]

@dskirk

If you change to the Code Editor instead of Visual Editor, you will get something like this, which you can edit directly:

< !-- wp:columns -->
< div class="wp-block-columns">< !-- wp:column -->
< div class="wp-block-column">< !-- wp:paragraph {"align":"center","backgroundColor":"cyan-bluish-gray","textColor":"vivid-red"} -- >

Hope this helps.

Regards!

[dskirk]

Scrambler, a BIG THANKS to you. I had located those CSS statements, but was clueless how to negate them. I envy your CSS talent. Thanks so much.

[dskirk]

@user

Thank you for that tip. I sometimes forget about the code editor. Thank you.

[Weaver]

I don’t understand why you are using sample code or any code that is <pre> formatted unless you really need to display preformatted text in a block unless it is code. <pre> is really intended to display code such a a progrmming language or perhaps HTML example source code. There might be other reasons for using <pre>, but it would be pretty much outside of standard usage.

You might be trying to insert example code that is already wrapped with <pre>. You probably don’t want to do that as the <pre> is there just to show you it is example code, to to provide good HTML layout.

Finally, if you really mean to have <pre> code, then the theme’s layout with the box and gray background is fairly standard for how most themes will format <pre> code.

[dskirk]

Thanks for responding. I did not want pre coding. It is inserted automatically when I select an HTML block. When I attempt to remove the pre code, an error pops up with error ‘attempted block recovery’ .  I assumed that was done by the theme and that is why I posted here. I share your observation on use of the pre code.

[Author]

Posts