Font variable

Reduce http requests with one font file handling variations.

"fontFamilies": [
				{
					"fontFamily": "montserrat, sans-serif",
					"name": "Montserrat",
					"slug": "default",
					"fontFace": [
						{
							"fontFamily": "montserrat",
							"fontVariationSettings": "'wght' 400",
							"fontStyle": "normal",
							"fontWeight": "400",
							"src": ["file:./assets/fonts/Montserrat-VariableFont_wght.ttf"]
						},
						{
							"fontFamily": "montserrat",
							"fontVariationSettings": "'wght' 500",
							"fontStyle": "normal",
							"fontWeight": "500",
							"src": ["file:./assets/fonts/Montserrat-VariableFont_wght.ttf"]
						},
						{
							"fontFamily": "montserrat",
							"fontVariationSettings": "'wght' 600",
							"fontStyle": "normal",
							"fontWeight": "600",
							"src": ["file:./assets/fonts/Montserrat-VariableFont_wght.ttf"]
						},
						{
							"fontFamily": "montserrat",
							"fontVariationSettings": "'wght' 400",
							"fontStyle": "italic",
							"fontWeight": "400",
							"src": ["file:./assets/fonts/Montserrat-Italic-VariableFont_wght.ttf"]
						}
					]
				}
			]

metadata customTemplates

# theme.json

A way to add data to the custom templates placed in the /templates folder:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"customTemplates": [
		{
			"name": filename",
			"title": "Template Name",
			"postTypes": [
				"page"
			]
		}
	],
	"settings": ...
}

Source: https://developer.wordpress.org/block-editor/how-to-guides/themes/global-settings-and-styles/#customtemplates

Custom css variables

# css, theme.json

August 4, 2023

{
    "version": 2,
    "settings": {
        "custom": {
            "line-height": {
                "body": 1.7,
                "heading": 1.3
            }
        }
    }
}

will be accessible in css --wp--custom--line-height--body

Note: the custom property can be add into a block, thus enabling overriding.

Sources :

Colors conventions

# colors, conventions, theme.json

August 23, 2023

Couleurs primaires

Construites à partir des deux / trois grandes couleurs de la marque, elles sont utilisées pour marquer l’identité dans des composants qui véhiculent l’image de la marque ou sur lesquels il est nécessaire d’attirer l’attention de l’utilisateur, tels que les éléments cliquables ou les états actifs.

Couleurs système

Couleurs utilisées exclusivement pour représenter des états et des statuts.

Couleurs neutres

Couleurs de base utilisées dans les typographies, fonds, contours et séparateurs dans la majorité des composants. Elles sont notamment utilisées dans les éléments non cliquables et pour représenter les états inactifs.

Couleurs illustratives

Couleurs complémentaires de la charte.

–variations

lightness

from 0 (white) to 1000 (black)

state

–hover
–active

Examples:

// couleurs primaires
primary : primary--525
  primary--100
  primary--200
  ...
secondary
tertiary


// couleurs neutres
neutral
  neutral--100  : #fff
  ...
  neutral--1000 : #000


// couleurs système
info
success
warning
error

text           : neutral--100
text-inverted  : neutral--1000

background     : neutral--950

// already outdated
accent ? highlight ?
base     ? -> background
contrast ? -> main text color

Source :

Block styles variations

# block_style, functions.php, theme.json

April 8, 2024

To add a new block style :

<?php

function dsfr_register_block_styles(){

	register_block_style(
		'core/paragraph',
		array(
			'name' => 'highlight',
			'label' => 'Mise en avant',
		)
	);

}

add_action( 'init', 'dsfr_register_block_styles' );

The core styles are editable in the theme.json, but not the custom ones.

{
    "styles": {
        "blocks": {
	    "core/image": {
	        "variations": {
		    "rounded" : {
		        "border": {
			    "radius": ".5rem"
		        }
		    }
		}
	}
}

https://fullsiteediting.com/lessons/modifying-block-style-variations-via-theme-json/

css in theme.json

# css, theme.json

For e.g. on sub item of navigation blocks:

{
	"styles": {
		"blocks": {
			"core/navigation": {
				"css": "& a > .wp-block-navigation-item__label { opacity: .5 }"
			}
		}
	}
}

Layout

# layout, theme.json

July 3, 2023

To set the –wp–style–root–padding

{
	"settings": {
		"useRootPaddingAwareAlignments": true
	},
	"styles": {
		"spacing": {
			"padding": {
				"top": "1rem",
				"right": "1rem",
				"bottom": "1rem",
				"left": "1rem"
			}
		}
	}
}

To set the layout :

{
	"settings": {
		"layout": {
			"contentSize": "840px",
			"wideSize": "1100px"
		}
	}
}

filter theme.json

# hook, theme.json

March 15, 2024

There is a way to intervene on the generation of the css based on the theme.json file.

function update_with_dark_theme( $theme_json ){

        $dark_theme = json_decode( file_get_contents( get_template_directory() . '/styles/dark.json' ), true );
        return $theme_json->update_with( $dark_theme );

}

add_filter( 'wp_theme_json_data_user', 'dsfr_update_with_dark_theme' );

It can be used to switch the theme scheme for e.g.

function dsfr_reload_styles(){

	if ( isset( $_GET['scheme'] ) && $_GET['scheme'] == 'dark' ){

		add_filter( 'wp_theme_json_data_user', 'dsfr_update_with_dark_theme' );

	}

	wp_enqueue_global_styles();
	remove_action( 'wp_print_styles', 'print_emoji_styles' );

	header( 'Content-type: text/css' );
	wp_print_styles();

	exit();

}

add_action( 'wp_ajax_dsfr_reload_styles', 'dsfr_reload_styles' );
add_action( 'wp_ajax_nopriv_dsfr_reload_styles', 'dsfr_reload_styles' );

Source : https://fullsiteediting.com/lessons/how-to-filter-theme-json-with-php/

Set color palette

# colors, theme.json

August 1, 2023

In theme.json, hide default color pickers and set a controled ranged colors.

{
	...
	"settings": {
		"color": {
			"custom": false,
			"defaultPalette": false,
			"customDuotone": false,
			"customGradient": false,
			"palette": [
				{
					"slug": "dark",
					"name": "Dark",
					"color": "#19191A"
				},
				{
					"slug": "bright",
					"name": "Bright",
					"color": "#FFFFFF"
				}
			]
		}
	}
	...
}

Minimal start up

# theme.json

March 13, 2024

Hierarchy

assets/
 - fonts/
templates/
 - index.html  
parts/
 - header.html
styles/
 - dark.json
functions.php
styles.css
screenshot.png
theme.json

Font weights

# theme.json, typo

October 31, 2024

To set the font weights :

{
	"settings": {
		"typography": {
			"fontFamilies": [
				{
					"fontFamily": "\"Barlow\", sans-serif",
					"name": "Barlow",
					"slug": "barlow",
					"fontFace" : [
						{
							"fontFamily": "Barlow",
							"fontWeight": "400",
							"src": "file:./assets/fonts/Barlow-Regular-webfont.woff"
						},
						{
							"fontFamily": "Barlow",
							"fontWeight": "500",
							"fontStyle": "normal",
							"src": "file:./assets/fonts/Barlow-Medium-webfont.woff"
						},
						{
							"fontFamily": "Barlow",
							"fontWeight": "700",
							"fontStyle": "normal",
							"src": "file:./assets/fonts/Barlow-Bold-webfont.woff"
						}
					]
				}
			]
		}
	}
}

Note : reduce a variable font to the required variations: fonttools varLib.instancer ./MyAwesomeVariableFont.ttf wdth=drop opsz=drop wght=300:700

https://morgan.cugerone.com/blog/how-to-disable-variable-fonts-variation-features-with-open-source-solution