Skip to content

Enjoy Kaizen

Tag: WordPress

Dads’ Breakfast: Commit c6ac2d562b

From the Making of Dads’ Breakfast

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

I added microformats to Dads’ Breakfast, my active WordPress theme and ongoing bit of coding in the open.

Dads’ Breakfast: Commit c6ac2d562b,

It is early days in D. B. but my Psymantic theme is longer in the tooth (practice) and in it I wrote some code to mute WordPress’ microformatting with h-entry and hentry wherever post_class() is used. WordPress applies the h-entry context to all of my owned content, sans-theme. A dirty press is, the working press. I think I may have leveled-up on the distraction-free writing mode with this one.

With that out of the way and on adding the h-entry back I was left with a divot to fix when the post_class('h-entry') no longer worked as the WordPress documentation of this library function describes it to do and thus I discovered the platform is left compromised by my D. B. theme architecture. First, I had this planned and second, they-all started it.

Using the conventional post_class() template tag, to now allow a theme author to use discretion on the location of an h-entry via post_class() is a must-do in order to obviate the shoe-horning I need to accomplish to make this theme. h-entry is therefore written wp-entry in the post_class() library function call using a Psymantic-based theme in WordPress.

This is the simplest I can figure to satisfy the requirements of semantic interoperability given modern definitions of both WordPress & Microformats. There is much more done in the Psymantic theme to mute microformatting. Aside: I should write about that maybe.

Trial balloon now steady on a string, adding the h-entry back via wp-entry is done:

/**
 * Filter the post_class tag to convert wp encoded microformats.
 *
 * @since 0.1.0
 *
 * @param  array $classes The list of classes.
 * @param  array $class   The class provided to the function at call-time.
 * @param  int   $post_id The ID of the post for which the classes are given.
 * @return array The filtered classes.
 */
function dadsbreakfast_post_class_convert_wp_microformats( $classes, $class, $post_id ) {
	return str_replace(
		array(
			'wp-entry'
		),
		array(
			'h-entry'
		),
		$classes
	);
}
add_filter( 'post_class', 'dadsbreakfast_post_class_convert_wp_microformats', 10, 3 );

The rest of the commit is there for those with additional time and interest.

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.