Making WordPress.org

Opened 14 months ago

Closed 3 months ago

Last modified 3 months ago

#3510 closed enhancement (fixed)

Code Block Styling

Reported by: Howdy_McGee Owned by:
Milestone: Priority: normal
Component: Handbooks Keywords:


I think The Handbook <code> block could use a bit of styling. Let's take the Pre-defined replies as an example since it has many code blocks. The padding isn't getting applied all around. I think a change for the better would be something like this:

code {
    display: block;
    overflow-y: scroll

This would both apply the padding all around the code block and ensure that long links have the proper space to grow.

Change History (14)

#1 follow-up: @joyously
14 months ago

I think that code can be used for short, inline things as well as large blocks, so it is not good to make it display:block.
Also, would it be better if the overflow is used on pre, and let code wrap around?

pre {
	max-width: 100%;
	overflow: auto;
	padding: 0.5em;

#2 in reply to: ↑ 1 @Howdy_McGee
13 months ago

@joyously That's a good idea and I would be fine with that. In Google Chrome at least I think we should unset whitespace

pre {
    white-space: unset;

So it actually blocks the code.

I'm not entirely sure what The Handbook runs on but I'm assuming it uses the same Wikiformatting. I think code blocks, which wouldn't be used for inline items should use <code> tags and anything inline should use the keyboard back-tick so it looks like the code tag above. It gets the code background and monospace font but is easy and inline. It specifically uses the <tt> tag and not the <code> tag.

Last edited 13 months ago by Howdy_McGee (previous) (diff)

#3 @joyously
13 months ago

Well, I would not advocate changing how white space is handled, especially in pre tags, until you know what exactly is used in the Handbook. Unsetting it seems extreme.
Usually, the code tag is used for short and long code references, and the long ones are inside a pre tag so that the indentation is handled correctly. If it needs changing (which I doubt), try white-space: pre-wrap.

#4 @coffee2code
3 months ago

I've looked into styling the <code> tag in such a way as to improve its appearance as used on the page referenced in the ticket, but ultimately I don't think this can be safely done across the entire handbook.

As alluded to above, <code> can be (and is) used inline on some handbook pages, so any attempt to display it as a block will result in trouble elsewhere.

An example of a handbook page that has <code> being used in a variety of ways: https://make.wordpress.org/core/handbook/php-coding-standards-draft-proposal/

Something that works on the page in question but is problematic elsewhere:

p > code:only-child {
    display: block;
    line-height: 1.75em;
    padding: 1em;

It seems to me the page in question is actually misusing the <code> tag as the text isn't code. Wouldn't the response templates be more semantic as <blockquote>? Or at the very least <pre>? I'm inclined to make that change for this page unless there are objections.

#5 @coffee2code
3 months ago

  • Resolution set to fixed
  • Status changed from new to closed

I've fixed the page in question to use the more appropriate <blockquote> instead of <code> for encapsulating template text snippets.

Changing the appearance of <code> requires more examples of its currently use (when used properly) that look less than ideal.

Thanks for the report and feedback!

#6 @joyously
3 months ago

@coffee2code You broke that page! It is for copying and pasting, and now when I copy from there, I don't get all the correct marks pasted for a forum reply.

Plus, why are blockquotes italic?

Last edited 3 months ago by joyously (previous) (diff)

#7 @coffee2code
3 months ago

@joyously: Could you provide an example of the workflow that is broken? I don't understand what you mean by "correct marks".

#8 @joyously
3 months ago

It used to be that a predefined reply could be copied from that page, and pasted directly into a forum reply. All of the markup was correct for forum replies, like back ticks and links and emphasis.

#9 @joyously
3 months ago

@coffee2code It looks like you changed the Predefined Replies page some more, but it is still a lot worse than it used to be. There are a few links showing &gt; instead of > and all the quotes are fancy quotes, so when you copy it and paste into a forum reply, it has the wrong quotes.
Can you just revert it back to how it was before, using <code>, please? It was so much better. Surely there is a revision to restore?

#10 @coffee2code
3 months ago

@joyously: It's a work in progress, hence my lack of a follow-up reply indicating any forward motion on any resolution. I'm trying out a few things and will reply back once it's ready.

#11 @coffee2code
3 months ago

In 8091:

Breathe: Improve styling for code blocks.

Props Howdy_McGee, joyously, coffee2code.
See #3510.

#12 @coffee2code
3 months ago

@joyously: How's it looking now? Since the page had to be converted to blocks, there was an in-between state where I was trying things out as blockquotes (as you saw). They're now code blocks with some additional styling added to the class.

#13 @joyously
3 months ago

Yes! So much better. It seems like there used to be more markup, but I could be wrong. There is just one place where .htaccess is in back ticks in one line, but not the next. (the paragraph just above "Hacked?")

#14 @coffee2code
3 months ago

Thanks for verifying the page functions better now. I just now did a revision comparison between the current version and the version from Dec from before I made any changes. There doesn't appear to be any markup that didn't get migrated. The backticks on a ".htaccess" you mentioned I just fixed, but it was that way previously. The last paragraph had rendered <em> tags that I escaped.

Let me know if you spot anything as you refer back to the page more. Cheers!

Note: See TracTickets for help on using tickets.