Are a thing. Quite a big thing. I like to keep an eye on ideas about good practice for presenting information on the web. I still haven’t got my head round the alt tag for images – where and how to use the alternative text and image title attributes for instance. And is opening an image in a separate tab good or bad? And how much do I care?
At the moment I’m using the twentysixteen theme. I quite like it. Nice and simple. Recently I wanted to paste a bit of code so I selected Code Block in the Gutenberg editor. It looked terrible. A sort of unwrapped inverse video that I found not very clear to read.
So I tried it with the preformatted block option. I think it looks better. Cleaner, and with a border. But the code I pasted was wrapped, and I find that difficult to read.
But is it just me? I started searching for how to add a horizontal scrollbar to the code or preformatted block and found it a muddy field. First discovery I made was that this behaviour seemed to be particular to the twenty sixteen theme; the other themes I tried defaulted to horizontal scrolling.
And I seemed to be in a minority in liking horizontal scrolling. All the search results were for people trying to work out how to disable horizontal scrolling, whereas I seemed alone in wishing to find out how to enable it. I’m intrigued to find that on the whole it seems people don’t like horizontal scrollbars in code windows.
But I like it so I tried to work out how to enable it. I think I’ve sorta managed it but whether it’s right I’m not sure. Seems to work. I used the Inspect facility of Firefox to prod and poke and try a few things, then I added:
.wp-block-preformatted {
white-space: pre;
overflow-wrap: normal;
}
and
.wp-block-code {
white-space: pre;
overflow-wrap: normal;
}
to the Additional CSS section of my theme customisation.
That seemed to work so I went hunting for the settings. I’m using a child-theme and I quite like to know where things live. I looked for recently changed files but there were no likely culprits. I was a bit puzzled so back to the internet, and I discover that these customisations are saved in the database itself. I’m not sure why, but I wasn’t keen on this. I’d prefer it if they were there, in green and black in a text file that I could see.
So I’ve removed the code from my Additional CSS bit, and put it in style.css in my child-theme directory, and it still seems to work.
I do like the way other themes do it though. I think the styling is nicer in twentytwenty but I don’t like the way it displays categories and tags in block capitals. Maybe I’ll tinker in that direction somewhere down the line.