Gutenberg 22.4: pattern overrides and the font library
Gutenberg 22.4 merged 402 pull requests. The ones worth your time: pattern overrides for any block attribute that supports block bindings, and font library access for classic and hybrid themes.
Tag: Block Styles
A responsive hexagon grid without the CSS hacks
A honeycomb layout that keeps its geometry without floats, magic numbers or a JavaScript grid calculator. corner-shape handles the bevel, cos(30deg) sets the aspect ratio, and sibling-index() works out which rows need the half-item shift.
A block theme development workflow with Playground and GitHub
Site Editor changes live in the database, not in your theme files. This is the setup I use to pull those visual edits back into version control: WordPress Playground, the Create Block Theme plugin and a GitHub repo as the source of truth.
Design intent: why pixel perfect layouts keep breaking
Matching a 1440px Figma file coordinate for coordinate produces CSS full of magic numbers that breaks on the first foldable phone or bumped font size. What to agree on with designers instead: tokens, fluid units, and rules about behavior.
Web Almanac 2025: better CSS, worse accessibility
The 2025 Web Almanac covers 17.2 million sites. Variable fonts and text-wrap are finally common, but median mobile page weight is up 202.8% since 2015 and two thirds of sites strip their focus outlines.
The WordPress code block finally highlights syntax natively
The code block was a glorified textarea until WordPress.com rebuilt it. Native highlighting for over 100 languages, copy buttons and line numbers in the sidebar, and syntax token colors you can set from theme.json instead of loading Prism.js on every page.
CSS scroll-driven animations instead of 50KB of JavaScript
Notes from the Web Directions Dev Summit in Sydney, where the argument was that CSS scroll-driven animations make most JS scroll libraries pointless. Includes the CSS, and why prefers-reduced-motion is not optional.
Anchor positioning and @scope just went Baseline
Chrome 144 and Firefox 147 moved anchor positioning and @scope to Baseline, so tooltips and style isolation no longer need a JS library. Also here: the Temporal API in Chrome, the dead HTML document outline, and using your OS as a CMS.
CSS relative colour and OKLCH for WordPress themes
Hand-calculated HEX palettes break the moment a base color changes. This walks through CSS Relative Colour and OKLCH in WordPress themes, and how @property lets you animate one channel at a time.
The CSS :drag pseudo-class and the JavaScript it replaces
Notes on the proposed CSS :drag pseudo-class and ::drag-image pseudo-element, and how they replace the dragstart and dragend listeners we currently use to style drag states in WordPress UIs.