Skip to content

Christopher James Willcock

Enjoy Kaizen

Tag: WordPress

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?
 ,
 ,
`/

Progress on WordPress Theme: Pancakes

I’m still working away on my WordPress Theme, Pancakes. I’m doing some work now in a different part of the stack than the WordPress theme (still pancakes 😛 ). More on this soon.

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.

an abstract expression in sepia on white

Psymantic – Open Source Theme Precursor for WordPress – First Release

I authored a WordPress theme for my blog. It’s not in use here because it isn’t meant for direct use. It’s over on my wp-theme-dev sub-domain with the WordPress theme test data in there (plus some random junk).

Wait – that looks gross!

— basically everyone

Weird huh? The precursor theme, Psymantic, is concentrated on producing plain old semantic HTML, POSH, and nothing else.

a screen-capture of a brutally simple WordPress blog
It’s brutally simple. Almost no styling at all. WP required stuff and a couple of clearing fixes.

I’m working through a resilient web design approach with this new-theme-for-me. Note the screen-reader-text, which is typically hidden, is used for headings of various sections. Many sections don’t need need a label like that, unless you consider, for example, how you interpret this web page with your eyes closed for the entire duration of your visit. These headings are normally presented only to those who use assistive technologies  while browsing the web. I can hide them all in one shot with the WordPress recommended screen-reader-text CSS rules.

It’s going to be difficult to understand why I have something worth sharing here, if you aren’t directly involved with your own website coding, nor in the business of online publishing in a technical role.

If we were making pancakes instead of WordPress themes, Psymantic would be a box of pancake mix. I still need to make the pancakes to actually eat them (ie: need to mix and cook a theme for my blog). I have a few more goals to cover before I get there, but this is a nice start.

More things to include (maybe in μF Psymantic and Indie Psymantic):

Early testers and constructive dialog/criticism is welcome! Please use GitHub for issues, #indieweb-wordpress on irc.freenode.net for chat.

HTML5 Support in WordPress

WordPress has a feature to enable HTML5 support which doesn’t cover all the places where HTML5 support is needed.

add_theme_support('html5', array(
  'search-form',
  'comment-form',
  'comment-list',
  'gallery',
  'caption',
));

This is everything available ^^^. When adding inline styles to the HTML, which WordPress does automatically, there is no filter hook available to remove the type attribute from the style tags. We end up with this incorrect output:

<style type="text/css">…</style>

Allowing this to stay there won’t break anything, it’s very insignificant overall. However, my practice includes the method of no broken windows. Allowing this to stay, though it’s really out of my hands unless I abandon WordPress entirely, is anathema to me.

It’s important to experience the pain of a program done wrong, before we can appreciate the well-made version of the same. There isn’t time to fix everything and still get the job done. Eventually it’s time to directly address the cause, but not today.