Notes about WordPress Gutenberg themes development.
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
{
"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 :
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 utilisées exclusivement pour représenter des états et des statuts.
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 complémentaires de la charte.
from 0 (white) to 1000 (black)
–hover
–active
// 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 colorTo 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/
For e.g. on sub item of navigation blocks:
{
"styles": {
"blocks": {
"core/navigation": {
"css": "& a > .wp-block-navigation-item__label { opacity: .5 }"
}
}
}
}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"
}
}
}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/
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"
}
]
}
}
...
}assets/
- fonts/
templates/
- index.html
parts/
- header.html
styles/
- dark.json
functions.php
styles.css
screenshot.png
theme.json
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"
}
]
}
]
}
}
}