On CSS and Codeblocks

Code blocks. They’re great, but also a bit annoying.

I’ve been working on a new WordPress site, using the Blockbase theme by Automattic. So far I’m impressed with Blockbase, it’s a quality theme and easy to update without code.

But there’s an issue with the theme. An issue with (you guessed it) the code blocks.

Code blocks in the Blockbase theme, by default, don’t preserve whitespace when you copy/paste code into Obsidian. They act like this (try copy/pasting it into Obsidian):

// If you copy/paste this block, it won't preserve the whitespace
var someCode = 'try copying me';
console.log(someCode);

It looks perfect. But as soon as you try to copy code out of them, disaster. You get this mess:

// If you copy/paste this block, it won't preserve the whitespacevar someCode = 'try copying me'; console.log(someCode);

I’ve been aware of this issue for the last year, but it hasn’t been painful enough to try to fix it.

But this morning it became painful. So I tried.

I don't think this is Obsidian's fault, because I've copied code from other sites and it has worked fine. So it must be an issue with my site, which means it's possible for me to fix.

So let's fix it!

My next hour of Brave Search history looks like this:

• wordpress code block preserve white space on copy
• wordpress block copy whitespace
• wp code block copy whitespace
• how to not copy whitespace wp
• how early is too early to start drinking
• gutenberg code block whitespace
• html code block copy paste
• blockbase code block copy issue
• arg why are search engines so terrible

I even asked ChatGPT:

ChatGPT had no idea. Take that AI overlords! I tried rephrasing the question several times, but even AI didn’t know.

So I did what any self-respecting programmer with 10+ years of experience would do.

After talking it out with a duck, I realized a few things:

• It has to be a theme issue, because standard HTML code blocks behave properly
• If it’s a theme issue, it’s probably CSS related.
• If it’s CSS related, then it’s fixable.

I opened the web inspector and started turning off random bits of styling.

Fortunately Blockbase has very barebones styling for code embeds. In fact, I can recreate the entirety of it right here:

/* code block styling from the Blockbase theme */
pre.wp-block-code {
  background: #2b2b2b;
  padding: 1em;
  margin: 0.5em auto;
  overflow: auto;
  border-radius: 0.3em;
}
pre.wp-block-code code {
  color: #f8f8f2;
  padding-left: 0;
  border: none;
  overflow-x: initial;
  display: block;
  font-family: inherit;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

Do you see the problem? Do you?

Neither did I.

Logically it seems like it should be either the overflow-wrap or white-space properties. But I disabled them both, and copying still doesn’t work.

After turning all of these styles off, I confirmed that the issue was fixed. But now my code blocks looked terrible.

So I turned them back on one-by-one until I found the issue. And wouldn’t you know it? It was the all-too-humble display property. For those using the Blockbase theme, here is the solution (add this to the “Additional CSS” section of the Block Editor):

.wp-block-code code {
  display: inline;
}

The beauty of this solution is that it doesn’t visually change the theme at all. It just works™.

All of that headache for a single line of code.

The question is: why is this broken in Blockbase?

I don’t know. I’ve never seen this issue anywhere else, and I don’t see any good reason for <code> elements to display: block. My guess: they probably just aren’t aware that it causes an issue.

In any case, if you too have problems with copy/pasting from code blocks on your site, hopefully it will be easier for you to fix than it was for me.

← Home