The document discusses theme.json, a configuration file for WordPress themes that allows defining styles and block settings. It introduces the main sections of theme.json - settings and styles - and provides examples of how they can be used to configure colors, spacing, typography and other theme aspects. It also covers the $schema and version sections, explaining their purposes, and provides additional resources for working with theme.json.

1. Mastering in
theme.json

4. Tanvirul Haque
WordPress Enthusiast
www.tanvirulhaque.com

5. theme.json
A Configuration JSON File for
Theme Styles and Block Settings.

6. theme.json
File is located in the Theme’s Root Folder

7. theme.json
Yep! It Can be Added to Any Theme.

8. theme.json
The Require WordPress Version is 5.8
Until Activated the Gutenberg Plugin.

9. JSON stands for
JavaScript Object Notation
Basic of JSON
Basic of JSON

10. Objects are name-value pairs.
Basic of JSON
Basic of JSON

11. , { } [ ]
Data separate
by Comma
Curly Braces
hold objects
Square Brackets
hold arrays list
Basic of JSON
Basic of JSON

12. theme.json
Example theme.json file:

13. Theme.json Contains 7 Sections
1 2 3
$schema
version
settings
styles
customTemplates
templateParts
patterns
theme.json

14. Let’s Explore Main Two Sections
settings styles
Basic of JSON
theme.json

15. ➔ Enables or disables features like custom font sizes, custom padding,
and colors.
➔ Defines preset values such as color palettes that generates CSS
custom properties.
Basic of JSON
"settings": { }
Contains Editor configuration.

16. "settings": { }
Example settings in theme.json file:

17. ➔ An organized way to set CSS properties.
➔ Reduce the amount of CSS enqueued.
➔ Styles in the top-level will be added in the `body` selector.
Basic of JSON
"styles": { }
Applies styling to the website or the blocks.

18. "styles": { }
Example styles in theme.json file:

19. Settings and Styles
Settings - Styles -

20. Color

21. settings.color
Output:
Input:

22. settings.color
Output:
Input:

23. styles.color
Output:
Input:

24. Top Level vs Block Level

25. settings.appearanceTools: true
Enable the following UI tools:
1. Border: color, radius, style, width
2. Color: link
3. Spacing: blockGap, margin, padding
4. Typography: lineHeight

26. Spacing

27. Default Spacing
Spacing in Site Editor:
Default Spacing Preset:

28. styles.spacing

29. settings.spacing
Output:
Input:

30. settings.spacing
Output:
Input:

31. Typography

32. settings.fontFamilies
Output:
Input:

33. settings.fontFamilies
Output:
Input:

34. settings.fontSizes
Output:
Input:

35. settings.fontSizes
Output:
Input:

36. styles.typography
Output:
Input:

37. Let’s Explore Group No. One
$schema version
Basic of JSON
theme.json

38. Basic of JSON
"version": ?
The Current Version is v2

39. Basic of JSON
"version": 2
If Any Theme Used v1,
It’s Recommended to Upgrade v1 to v2

40. ➔ Validation
➔ Inline Documentation
➔ Suggestion and Auto complete
Basic of JSON
What Does JSON Schema Help With?

41. How schema helps you
to write in theme.json

42. Why does it take so long to update the
styles in the browser?
Set WP_DEBUG or SCRIPT_DEBUG to ‘true’
in your wp-config.php

43. Are You Ready to Build Your Block Theme?
Let’s make it happen…

44. Resources might help you:
https://make.wordpress.org/core/2021/06/25/introducing-theme-json-in-wordpress-5-8/
https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/
https://developer.wordpress.org/themes/advanced-topics/theme-json/
https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/
https://developer.wordpress.org/block-editor/reference-guides/core-blocks/
https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-migrations/