Articles by

Ganesh Dahal

fonts google fonts WordPress

Managing Fonts in WordPress Block Themes

Fonts are a defining characteristic of the design of any site. That includes WordPress themes, where it’s common for theme developers to integrate a service like Google Fonts into the WordPress Customizer settings for a “classic” PHP-based theme. That hasn’t …

Mar 6, 2023

WordPress WordPress blocks wordpress themes

How the Style Engine Generates Classes

The WordPress Style Engine generates the CSS for a block theme. Why would you want to know how an invisible process like that works? Well, just like writing CSS, you will want to ensure your code is organized and structured so that your styles properly use the CSS Cascade.

Feb 27, 2023 (Updated on Mar 1, 2023)

json WordPress WordPress blocks wordpress themes

WordPress Global Styles Reference Tables

We’ve covered a lot of ground in this series. So much so that I thought it would be helpful to condense all the various block theme settings and styles from theme.json into a single page right here.

Jan 31, 2023 (Updated on Mar 1, 2023)

WordPress WordPress blocks wordpress themes

Defining Global Styles

Let’s move to the other top-level section of theme.json where we can configure the CSS of a block theme: styles. We’ll learn what it is exactly and how we can use it to override and apply the preset settings values we covered in Part 2.

Jan 31, 2023 (Updated on Mar 1, 2023)

WordPress WordPress blocks wordpress themes

Defining Global Settings

Let's take what we learned about the theme.json structure in WordPress block themes and apply it to two main sections of the file: settings and styles. These arrays are the “top level” for configuring WordPress features and the theme’s CSS output.

Jan 31, 2023 (Updated on Mar 1, 2023)

json WordPress WordPress blocks wordpress themes

Glossary of Terms for theme.json

To kick things off, let’s begin by reviewing a few glossary terms that are important for understanding what the theme.json file is, how it is structured, and how to configure it. We’ll cover examples as we go, but the main goal here is to get familiar with terms that we’ll be seeing throughout this series.

Jan 31, 2023 (Updated on Mar 1, 2023)

WordPress WordPress blocks wordpress themes

WordPress Block Themes CSS and Style Settings Guide

Managing CSS in WordPress has dramatically changed since full-site editing features were introduced to block themes. This guide is geared toward block themes and how to configure them, from enabling editor features and controls to defining theme-wide CSS and customizaing the appearance of specific blocks.

Jan 31, 2023 (Updated on Mar 1, 2023)

WordPress WordPress blocks wordpress themes

Adding Box Shadows to WordPress Blocks and Elements

The CSS box-shadow and outline properties gained theme.json support in WordPress 6.1. Let's look at a few examples of how it works in real themes, and what options we have to apply these styles to WordPress blocks and elements.

Dec 7, 2022

WordPress wordpress themes

Using The New Constrained Layout In WordPress Block Themes

One of the main goals of the WordPress Site Editor (and, yes, that is now the “official” name) is to move basic block styling from CSS to structured JSON. JSON files are machine-readable, which makes it consumable by …

Nov 30, 2022

WordPress wordpress themes

Managing CSS Styles in a WordPress Block Theme

The way we write CSS for WordPress themes is in the midst of sweeping changes. I recently shared a technique for adding fluid type support in WordPress by way of theme.json, a new file that WordPress has been pushing …

Nov 7, 2022 (Updated on Dec 13, 2022)

clamp fluid type WordPress WordPress blocks wordpress themes

Adding Fluid Typography Support to WordPress Block Themes

Fluid typography is a fancy way of “describing font properties, such as size or line height, that scale fluidly according to the size of the viewport”. It’s also known by other names, like responsive typography, flexible type, fluid type, …

Oct 7, 2022