Experiment with experimental-theme.json

bobbingwide commented 4 years ago

In parallel with #1 and #4 it makes sense to play with the experimental theme JSON file called experimental-theme.json.

https://developer.wordpress.org/block-editor/developers/themes/theme-json/

Requirements

Try to use experimental-theme.json to define the colours and font sizes for blocks such as paragraph, h1-h6 to match the current settings in genesis-a2z
Improve styling of blocks where I'd noticed problems while populating the block catalog.

Solution

Notes

genesis-a2z's style.css was 1800 lines, with very little, if any, custom styling for blocks.
I wondered how much styling I'd have to put into style.css and how much could go in the JSON file

bobbingwide commented 3 years ago

Font sizes

Not understanding much of the documentation about custom units I tried two ways of setting fontSizes. In global: settings: color: typography: I put

"fontSizes": [
          {"name":"Small","size":12,"slug":"small"},
          {"name":"Normal","size":18,"slug":"normal"},
          {"name":"Large","size":"20px","slug":"large"},
          {"name":"Larger","size":"36px","slug":"larger"}
        ]

These become custom CSS properties declared in :root with names like --wp-preset-font-size-small and values taken from size. Two of them, Large and Larger have the px unit specified. The other two, Small and Normal don't.

Since Larger has a px unit size then to use this to specify the default fontSize for "core/heading/h1" I can use core/heading/h1: typography: fontSize: with the value set to "var( --wp--preset--font--size--larger )".

Small doesn't have a unit size. For this to work I needed "calc( 1px * var( --wp--preset--font-size--small ))". The unit is provided in the first part of the expression.

It's not immediately obvious how the JSON key names equate to the variable names

key	name
fontSizes	font-size
fontSize	font-size
lineHeight	line-height

Nor how the hierarchy maps to the variable names.

References: https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/

In case you are not sure what :root matches, in HTML it’s the same as html but with a higher specificity.

It's also not immediately obvious if I can use these custom CSS properties in my style.css or if I even need to. For links I have

a {
    color: var(--wp--preset--color--greeny, #6a6a2a );
}

This will use the custom property if it's defined or the hex code if not.

bobbingwide commented 3 years ago

Having updated experimental-theme.json in the theme I was keen to test the changes. In s.b/cwiccer I first discovered that I needed to use the Reset to defaults link in the Site Editor (beta) > Global Styles settings.

I then discovered that my styles weren't working due to a syntax error in the experimental-theme.json file. I'd added an extra comma to a line. This had invalidated the whole file. PhpStorm quickly helped my find the problem. WordPress, on the other hand, had hindered problem determination.

I had to read the code to see that it had logged a message in the PHP error log.

[04-Nov-2020 14:52:24 UTC] Error when decoding file schema: Syntax error

No hint of the file name that's in error! Anyway, I know now.

bobbingwide commented 3 years ago

It's not immediately obvious how the JSON key names equate to the variable names

For some clues see gutenberg_experimental_global_styles_get_css_property() and gutenberg_experimental_global_styles_get_presets_structure() in lib/global-styles.php

bobbingwide commented 3 years ago

Having implemented fontSize typography for core/heading/h2 in the experimental-theme.json file I noted that the post-title block had the wrong font size.

To fix this I found I needed to use style.css, since I couldn't find how to define the typography for the core/post-title block.

 "core/post-title": {
+      "typography": {
+        "fontSize": "calc( 1px * var( --wp--preset--font-size--normal ) )",
+        "lineHeight": 1.2
+      }
   }

h2.wp-block-post-title {
    font-size: calc( 1px * var( --wp--preset--font-size--normal ) );
}

Is this the only way I could do this?
Does the logic to create the required CSS need to be this complicated?
Is there a real benefit over the existing logic?
How long does it take to generate the CSS from the experimental-theme.json file?

bobbingwide commented 3 years ago

The structure of the experimental theme JSON file has changed since I started. I need to update it. See https://developer.wordpress.org/block-editor/developers/themes/theme-json/

bobbingwide commented 3 years ago

I don't know if this is related to the changes to experimental-theme.json but I've got problems with colours and font sizes on the front end. The background colour and font size I applied to the core/post-comment-count block doesn't have any effect. This appears to be a problem with the generated HTML which has too many quotes.

Copied from View source.

<div class="class="has-text-align-center has-text-color has-background-color has-background has-luminous-vivid-orange-background-color wp-block-post-comments-count has-large-font-size"">3</div>

Copied from Chrome inspector.

<div class="class=" has-text-align-center="" has-text-color="" has-background-color="" has-background="" has-luminous-vivid-orange-background-color="" wp-block-post-comments-count="" has-large-font-size""="">3</div>

I've raised an issue on Gutenberg. https://github.com/WordPress/gutenberg/issues/29209

bobbingwide commented 3 years ago

As of Gutenberg 10.6.0 theme.json is no longer experimental. It's time to change to use this file.

bobbingwide commented 3 years ago

It appears that I've had the following incorrect settings for a while now.

Element	Incorrect value	Should be
styles.typography.fontFamily	"var(--wp--preset--font-family--opensans)"	"var(--wp--preset--font-family--helvetica-arial)"
styles.elements.link.color.text	"var( --wp--preset--color--link)"	"var( --wp--preset--color--greeny)"

Note: I'll use different values in Wizzie.

bobbingwide commented 2 years ago

Fizzie v0.7.0 ( 2021/08/03 ) used theme.json. The next version (1.0.0) uses apiVersion:2.

bobbingwide / fizzie