The Publishing Project

:is() CSS pseudo-class

There are times when we want the same element across the page to do the same. The following block styles the h2 elements inside the header, footer and main elements. header h2, main h2, footer h2 { color: red; } It works but it’s error-prone, repetitive and may cause all rules to be ignored if there is a mistake. Published in Selectors Level 4, the :is() pseudo-classtakes a selector list and selects any element that matches any of the selectors in that list. Using :is() e can write the previous example like this :is(header, main, footer) h2 { color: red;

Revisiting Gutenberg blocks (part 3): other thoughts about Gutenberg

This post about Gutenberg is a mix of different thoughts, ideas and code snippets I’ve worked on while researching how to build blocks for a project I’m working on. Making Custom Post Types work in Gutenberg I’ve created several custom post types that worked in the classic editor. When I brought them to my Gutenberg playground they would not work or they would not work as I expected them to. It took me a while to realize that you must be really picky on how you configure the Custom Post Type (CPT) to work as Gutenberg is far less forgiving

Revisiting Gutenberg blocks part 2: More ways to customize blocks

The previous post (Revisiting Gutenberg blocks part 1: Building and Styling the blocks) discussed how to build a block and reviewed both old and new techniques for creating Gutenberg blocks. This post will revisit related areas of block development in more detail. Block variations Some times it may be easier to create additional styles for an existing core element than create your own. Gutenberg calls this block variations. Authors can also choose whether they want to incorporate core blocks. It is highly likely that you will need to customize the block styles to match the core blocks with the theme

Revisiting Gutenberg blocks part 1: Building and Styling the blocks

My dislike of Gutenberg has softened since it was first introduced, mostly because they provided ways to keep the classic editor and they’ve guaranteed support for it through 2022. I’ve written about building Gutenberg blocks: Building Gutenberg Blocks (Part 1), part 2, part 3 and part4, and another series on using Gutenberg as a design system: Gutenberg as a design system (part 1), part 2, and part 3 but I want to revisit block design both in light of new developments in Gutenberg and as a way to build more complex blocks using block patterns and, possibly, full-page designs. Build

Font synthesis in CSS

One of my biggest peeves in the typography side of web development is that browsers try to be too helpful when there is no bold or italics version of a font. The font-synthesis descriptor allows authors to control whether supporting browsers will synthesize boldface, italics, or both when there are no fonts available. The possible values for the descriptor are: none Neither bold nor italic typeface may be synthesized. weight A bold typeface may be synthesized. style An italic typeface may be synthesized. The default value for the descriptor is style weight meaning that both boldface and italics will be