Gutenberg Block Styles Headstart

I plan to keep banging this drum — WordPress 5.0 is coming this year, a lot will change, and the big change will be the introduction of a new default editor codenamed “Gutenberg.”

Elsewhere I’ve (hastily) sketched out some things WordPress users should do to prepare for 5.0, here I’m addressing WordPress developers.

Blocks of content entered into a post (keep in mind that everything is a post) via Gutenberg get tagged with a block-specific CSS class, like .wp-block-button or .wp-block-cover-image. Default styles for core-blocks are loaded (for now, While we use a plugin) from, and are loaded before the theme stylesheets. The Gutenberg developers have written well-formed CSS so a theme’s stylesheet overrides the default styles without problems like over-specified selectors or !important declarations.

Much of my work is building custom WordPress themes and the custom themes I make almost always start from Automattic’s Underscores starter-theme. Underscores provides modularized CSS using SASS. Anticipating WordPress 5.0, and for the sites (like this one) that currently use the plugin, I’ve created a collection of SASS files copying the default styles for Gutenberg core blocks, organized according to where the block sits in the editor’s selection dropdown. The files are available on Github.

A developer can incorporate this collection to a theme’s SASS folder for quick availability of the necessary selectors for styling blocks, providing a head-start in matching block styles to the theme.

In addition to the theme styles, there is also a collection of editor-styles in the GitHub project. I don’t want to blab about it here, but with careful development of editor-styles, a theme can come very close to displaying the editor contents just as they will appear on the live site, approaching the What You See Is What You Get promise that no one has ever quite delivered.

Web Fonts Get Easier

“Much easier,” I could have said. A while back I reviewed Eric Meyer’s book CSS Fonts (actually a pre-released chapter of a forthcoming book) after putting some information in it to use immediately, applying a purchased font to a critical section a client’s website.

The ease of that small task encouraged me to work on a larger scale, so a couple of days ago I made the time to install a custom web font on a personal blog. You can see it at Frogs For Snakes. The font (as I write this) is “Delicious”, a free font from the exljbris Font Foundry. I like the font but not for this particular site, which I think needs something less spartan, so it may have changed by time you read this.

Below I list the ridiculously simple steps for using custom fonts on a website. You should take some care, if you decide to do this, to ensure that the fonts you select are licensed for your use, and you should contribute to the extent you can to the foundries and to the websites that make the fonts and the tools to use them available. Everybody deserves to be paid. There’s nothing wrong with buying a font, either.
(read more )

Posted in CSS

Review: “CSS Fonts” by Eric Meyer, O’Reilly Media

Everything a developer needs to know about fonts.

In this thin, focused volume (68 pages in the print edition), the author tours the CSS fonts specification, explaining what the spec. means and describing how it’s implemented. He provides many mark-up examples demonstrating how to control the appearance of fonts on a web page, examples that cover most, maybe all, of the actual situations a working developer will encounter. Most of the book expansively explicates the @font-face rule which enables reliable (more-or-less) use of imported fonts, which is increasingly freeing us from prior typographic constraints.

The book helped me immediately, providing a detailed solution to a troubling problem a few minutes after downloading a copy. Besides being handy, it’s exhaustive treatment has made it an often-used reference after that first moment of glory.

A little distracting, without affecting the value of the content, this appears to be a single chapter from a longer book — “Chapter 1: Fonts” shows up at the front but there’s no Chapter 2 (unless the separately published CSS: Text is Chapter 2).  Also, there’s no sign of the publisher’s standard, and welcome, “Who is this book for?” preface, making me wonder a little what the game is we’re playing.

Even with that distraction and the short length, I recommend the book. Meyer knows the subject matter, theoretically and practically, has a straightforward and subtle sense of humor, and comes across as a friendly, helpful guy who happens to know more about the subject than you.

Designer/Developers interested in expanding their typographic skills will find the book useful, as will developers in collaborative relationships with designers. Designers without technical skills would probably find this hard-going, but with some effort it could provide a sound summary of what’s typographically possible these days.

My copy of this book was provided by O’Reilly Media in exchange for this review.

“The Modern Web” by Peter Gasston; No Starch Press

As the pace of change in the Web domain keeps accelerating, working Web developers, all of us but especially freelancers, struggle with finding the time to: 1) work; and 2) not get too far behind the technology curve.

This book was written to help with that struggle:

[T]his book is a snapshot of current, new, and near-future features in HTML, CSS, JavaScript, and related technologies, with a bias toward those that are best for building sites in the multi-device world.

The book begins by describing stuff that’s in a fairly advanced state of deployment, for example, elements introduced in HTML5 and WAI-ARIA properties, then moves through the spectrum to things not quite loose in the wild yet, like Web Components and CSS Variables. The author assumes some proficiency with Web technologies, sparing the busy reader long introductory explanations.

You will get a lot out of this book — in fact, I think you will get the most out of it — by first reading it through without concerning yourself too much with the plentiful code samples and implementation details. You’re unlikely to encounter a more articulate and engaging mid-level overview of the future of the Web platform anywhere, and the opportunity to gain a sense of how it all meshes by a quick read-through should be seized. You can re-read what is most timely for your current project, and then follow the links to further reading for more detailed and up-to-date information.

There is a good bibliography and suggestions for further reading appended to each chapter, and the references are gathered together again near the end of the book.

I found a lot in this book that I knew about, and more that I had never heard of, and came away with some confidence that I know where the technology is heading. I highly recommend this book for working Web developers.

The Modern Web
Peter Gasston
ISBN: 9781593274887
Publisher: No Starch Press
Released: April 2013
Pages: 264

Using Character Entities In CSS content:

Browser differences have kept a lot of developers (I include myself) from using valuable css features. And, a lot of developers (also including myself) keep avoiding them even after browser evolution has made them perfectly mainstream. It’s true, though, that many people stick with obsolete browsers either because their OS forces them to or because they’re ignorant or stubborn. (More on that in a minute.)

Take CSS-generated content. Prior to version 8, Internet Explorer didn’t handle it well and I removed it from my repertoire, but that was several years ago, things have progressed, and now all major browsers support it, so that we can take full advantage of the :before and :after pseudo-classes to make a more usable page.

For instance, somewhere I saw a large, pale, quotation mark used to designate the beginning of a block-quote, maybe not something needed for usability, block-quotes can be styled to set themselves off from surrounding text easily enough, but the additional treatment looked good and, I think, shows a little respect for the person being quoted.  On my personal blog, FrogsForSnakes (you can look there for how it looks), then, I wrote a style rule that looks something like this:

blockquote:before {
  color: #CCC;
  content: "\201C"; /* U+201C */
  font-size: 3em;
  font-weight: bold;
  line-height: 0;
  margin: 0 5px 0 -20px;
  vertical-align: bottom;

Look at the “content” declaration. That’s an escaped hexadecimal unicode character — if you put an html character entity between the quotes it will display the code, not the character (“content: ‘>’;” prints “>” for instance, not “>”). That’s the way you have to use character entities in css. I refuse to admit how long it took me to figure that out — without help I’d still be scratching my head.

Posted in CSS