Skip to content

Christopher James Willcock

Enjoy Kaizen

Category: Web Design

sup, duck?

From the Making of Dads’ Breakfast

HTTPS://CJWILLCOCK.CA/DADS-BREAKFAST-MAKING-OF/

My tables in the Gutenberg editor have cells that are too full to fit the tableau.

I took the font size down two pixels (2px) from sixteen to fourteen (14).

.wp-block-table{
	font-size: 14px;
}

Duck, We Should Talk

When I copy text to my clipboard, and paste it into a table cell using the Gutenberg editor, a space is automatically added at the front of the text I paste.

What?

I hit paste. I carefully remove that leading space that WordPress seems to think is necessary.

Every. Time.

Nothing To See Here Duck

It would be swell if the page-break block in WordPress allowed me to specify a piece of content that would appear as page-footer & page-header on subsequent page-fulls.

The various page-break blocks should share their content, so that changing the content in one, changes content in all others to match at the same time.

At present, the page-break block has no configurable options at all.

Dads’ Breakfast: Commit 998df0135f

From the Making of Dads’ Breakfast

HTTPS://CJWILLCOCK.CA/DADS-BREAKFAST-MAKING-OF/

You are welcome to view this commit via github, sourcehut, or author’s original.

I use two (2) flatscreen LCD monitors at my writing desk. Both monitors are 1080p and leave me some room around the default block widths in the Gutenberg editor. These have a maximum width of 31.77% of my viewing area. I’m looking for nearer to half as a minimum return on my monitor-dollar.

I preserve some negative space around the tableau but impose a little bit more room for tables and various things, by applying the following CSS to the editor:

@media (min-width: 1280px){
	.wp-block{
		max-width: 800px;
	}
}

@media (min-width: 1600px){
	.wp-block{
		max-width: 960px;
	}
}

With this change, on any screen with two-thirds (2/3) the horizontal resolution of a monitor like one of mine the block widths increase from 47.66% to five-eights (5/8) of the viewport width. At screens five-sixths (5/6) mine the block widths increase from the 41.69% of the viewport width imposed by the previous media query -up from 38.125% at default WP size- to three-fifths (3/5) of the viewport width.

The ratio of viewport width to block width changes as the viewport width increases. I’m keeping the tableau on desktop to a comfortable one-half (1/2) of a 1920 pixels wide viewport. YMMV.

Verse, WordPress 5+

Test of verse type.
What's that about?
Enter key doesn't create a new block now.
This should be closer to the top of the visual queue.
Uh, guys? Guys? Shift+Enter doesn't create a new block. I'm stuck here.
Ah-ha! The down arrow is needed. 
But wait, there's WordPress! -_-
No HTML entities either?
 ,
 ,
`/

Quick Fix for Indentation Inconsistency in CSS, Using Chrome Web Browser DevTools

Does your CSS look like this?

@media only screen and (max-width: 720px) {
.planning .grid-wrapper{
  grid-template-columns: 10px 300px 10px;
    justify-content: center;
}
.planning .tuesday {
grid-column: 2;
grid-row: 1;
background-color: #eee;
    border: 5px solid #555;
padding: 70px;

}

Did you notice the media query is still open here? This can lead directly to the swamp of desperation, is time-consuming and ever more disheartening as the number of lines adds up and the mental effort to unwind it becomes greater and greater. More CSS, more problems.

Not to worry! There is a super-simple way to fix this up quickly.

  1. Pre-requisite: using Chrome web browser
  2. Right click anywhere on your website.
  3. Choose ‘inspect’ from the context menu.
  4. In DevTools, select the Sources tab.
  5. On the navigation pane, browse to your CSS source file and click to select.
  6. In the reading pane in the center, look for an icon: {} in the bottom left, just under the line numbers. Click it.

Boom! Your CSS source code has been auto-formatted with proper indentation.

  1. Select all the text of the shiny CSS here in the reading pane (Windows users: CTRL+A).
  2. Copy and paste this into your CSS source file.

With this little process, you can hopefully reduce the number of occasions that CSS causes you grief and stay on top of it!

Gallery Test

Pancakes!

Time to make a new theme for cjwillcock.ca.

I forked my Psymantic theme and made a new theme, Pancakes. I’ll install it here, then make it less ugly. It’s going to break things, but not for long I expect.

Pancakes is also free software, because software wants to be free! Enjoy.

Lastly, a screenshot of what once was, for posterity. Shout out and kudos to David Shanske, the provider of the twentysixteen-indieweb theme I have used until now.