Query Block Test

Design system

*taken from twenty twenty four and ollie theme

https://www.gutenberg-devtools.com/generator/themejson-support

And articles by Richard Tabor

Colours

Brand: primary, secondary, tertiary, quaternary, quinary, senary, septenary, octonary, nonary, and denary

Variations: primary-accent, primary-contrast

Percentages: primary-10

Utility: success, error, warning, highlight

Base(eg: black to white ): base, base-10

Text default: primary-text, secondary-text…

Backgrounds: primary-background…

Dark or Light: primary-dark, primary-text-dark, primary-background-dark

CSS Custom Variables Example: var(–wp–preset–color–primary), var(–wp–preset–color–base)

"settings": {
  "appearanceTools": true,
  "color": {
	  "defaultDuotone": false,
		"defaultPalette": false,
		"defaultGradients": false,
		"palette": [
		  {
		  "name": "Primary",
			"slug": "primary",
			"color": "#4d34fa"
		  },
		  {
		  "name": "Primary",
			"slug": "primary-10",
			"color": "#edebff"
		  },
		  {
		  "name": "Base",
			"slug": "base",
			"color": "#000000"
		  },
		  {
		  "name": "Primary Background",
			"slug": "primary-background",
			"color": "#ffffff"
		  }
	  ]
  }
}

Duotone

primary-duotone, secondary-duotone, custom-duotone, grayscale….

CSS Custom Variables Example: var(–wp–preset–duotone–duotone-1), var(–wp–preset–duotone–duotone-2)

"duotone": [
	{
		"name": "Primary Duotone",
		"slug": "duotone-1",
		"colors": [
			"#4d34fa",
			"#edebff"
		]
	},
	{
		"name": "Sunset",
		"slug": "duotone-2",
		"colors": [
			"#FF3253",
			"#FFDC53"
		]
	},
	{
		"name": "Grayscale",
		"slug": "duotone-3",
		"colors": [
			"#000",
			"#fff"
		]
	}
]

Gradients

CSS Custom Variables Example: var(–wp–preset–gradient–gradient-1), var(–wp–preset–gradient—gradient-2)

"gradients": [
  {
  	"name": "Primary",
  	"slug": "gradient-1",
  	"gradient": "linear-gradient(135deg, #4d34fa, #edebff)"
  },
  {
  	"name": "Primary to Secondary",
  	"slug": "gradient-2",
  	"gradient": "linear-gradient(135deg, #4d34fa, #636381)"
  },
  {
  	"name": "Purple",
  	"slug": "gradient-3",
  	"gradient": "linear-gradient(135deg, #4D34FA, #ad34fa)"
  },
  {
  	"name": "Base",
  	"slug": "gradient-4",
  	"gradient": "linear-gradient(135deg, #000000, #ffffff)"
  },
]

Typography custom settings

CSS Custom Variables Example: var(–wp–preset–font-family–heading), var(–wp–preset–font-family–body)

Font sizes:

CSS Custom Variables Example: var(–wp–preset–font-size–x-small), var(–wp–preset–font-size–small)

!! An alternative to x-small, small etc could be h1, h2, h3, p etc, This would allow you to easily use a heading 2 and then size it with h1 or h3 font size !!

"typography": {
	"dropCap": false,
	"fluid": true,
	"fontFamilies": [
		{
			"fontFace": [
				{
					"fontFamily": "\"Playfair Display\"",
					"fontStyle": "normal",
					"fontWeight": "700",
					"src": "https://racerpacer.com/wp-content/uploads/fonts/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKeiukDVZNLo_U2r.woff2"
				},
				{
					"fontFamily": "\"Playfair Display\"",
					"fontStyle": "italic",
					"fontWeight": "700",
					"src": "https://racerpacer.com/wp-content/uploads/fonts/nuFRD-vYSZviVYUb_rj3ij__anPXDTnCjmHKM4nYO7KN_k-UbtPK-F2rA0s.woff2"
				}
			],
			"fontFamily": "\"Playfair Display\", serif",
			"name": "Playfair Display",
			"slug": "heading"
		}],
	"fontSizes": [
		{
			"fluid": {
				"min": ".9rem",
				"max": "1rem"
			},
			"size": "1rem",
			"slug": "x-small",
			"name": "Extra Small"
		},
		{
			"fluid": {
				"min": "1rem",
				"max": "1.2rem"
			},
			"size": "1.2rem",
			"slug": "small"
		}
	]
}

Font weights and line height:

CSS Custom Variables Example: var(–wp–custom–font-weight–bold), var(–wp–custom–line-height–heading)

Note: Slugs for line height could also be: xs, sm, md, lg OR xsmall, small, medium etc.

"settings": {
	"custom": {
		"fontWeight": {
			"thin": 100,
			"extra-light": 200,
			"light": 300,
			"regular": 400,
			"medium": 500,
			"semi-bold": 600,
			"bold": 700,
			"extra-bold": 800,
			"black": 900
		},
		"lineHeight": {
			"none": 1,
			"tight": 1.1,
			"snug": 1.2,
			"normal": 1.5,
			"relaxed": 1.625,
			"loose": 2,
			"body": "calc(1px + 2ex + 7px)",
			"heading": "1.1"
		}
	}
}

Spacing settings

CSS Custom Variables Example: var(–wp–preset–spacing–medium)

"settings": {
  "spacing": {
  	"spacingSizes": [
  	{
  		"name": "Small",
  		"size": "clamp(.5rem, 2.5vw, 1rem)",
  		"slug": "10"
  	},
  	{
  		"name": "Medium",
  		"size": "clamp(1.5rem, 4vw, 2rem)",
  		"slug": "20"
  	},
  	{
  		"name": "Large",
  		"size": "clamp(2rem, 5vw, 3rem)",
  		"slug": "30"
  	},
  	{
  		"name": "Extra Large",
  		"size": "clamp(3rem, 7vw, 5rem)",
  		"slug": "40"
  	},
  	{
  		"name": "2xl",
  		"size": "clamp(4rem, 9vw, 7rem)",
  		"slug": "50"
  	},
  	{
  		"name": "3xl",
  		"size": "clamp(5rem, 12vw, 9rem)",
  		"slug": "60"
  	},
  	{
  		"name": "4xl",
  		"size": "clamp(6rem, 14vw, 13rem)",
  		"slug": "70"
  	}
  	]
  }
}

Shadows

CSS Custom Variables Example: var(–wp–preset–shadow–small)

		"shadow": {
			"presets": [
				{
					"name": "Default",
					"shadow": "6px 6px 6px rgba(0, 0, 0, 1)",
					"slug": "default"
				},
				{
					"name": "Small",
					"shadow": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
					"slug": "small"
				},
				{
					"name": "Medium",
					"shadow": "0 4px  10px 0 rgba( 0, 0, 0, 0.3 )",
					"slug": "medium"
				},
				{
					"name": "Large",
					"shadow": "0 8px  15px 0 rgba( 0, 0, 0, 0.3 )",
					"slug": "large"
				}
			]
		},

adding a block with all the possible slick slider settings is a bit of a chore so the following is a way to simplify it by using data-slide attributes.

$data_slick = get_field('data_slick');
$responsive = get_field('responsive');
if ($responsive) {
	$responsive = ', "responsive": [' . $responsive . ']';
} else {
	$responsive = '';
}
data-slick='{<?php if ($data_slick) { echo $data_slick . $responsive; } ?>}'

Example field settings for data_slick text area ACF field:

“slidesToShow”: 2, “dots”: false, “slidesToScroll”: 1, “autoplay”: true, “infinite”: true, “speed”: 200, “fade”: true

Example field settings for responsive options using a text area ACF field:

{“breakpoint”:600, “settings”:{“slidesToShow”: 1, “dots”: true}}

{“breakpoint”:600, “settings”:{“slidesToShow”: 1, “dots”: true}}, {“breakpoint”:1000, “settings”:{“slidesToShow”: 2, “dots”: true}}

Important

don’t having trailing commas where they are not needed!

use double quotes for all properties

check that each of your settings at each of the breakpoints are being applied!

More details: https://kenwheeler.github.io/slick/

PHP:

File Names:
- Use lowercase letters.
- Separate words with underscores (_).
- Example: my_custom_template.php
Function Names:
- Use lowercase letters.
- Use underscores to separate words.
- Be descriptive and use verbs for functions.
- Example: get_post_title()
Variable Names:
- Use lowercase letters.
- Use underscores to separate words.
- Be descriptive and use nouns for variables.
- Example: $user_id
Class Names:
- Use uppercase letters for the first letter of each word (PascalCase).
- Be descriptive and use nouns.
- Example: My_Custom_Class
Constants:
- Use uppercase letters.
- Separate words with underscores.
- Example: MY_CONSTANT_VALUE
Hooks (Actions and Filters):
- Use lowercase letters.
- Use underscores to separate words.
- Be descriptive and use verbs for actions.
- Example: add_action('init', 'my_custom_function');
Prefixes:
- Add a unique prefix to your functions, variables, classes, etc., to avoid naming conflicts.
- Example: myplugin_custom_function()
Database Tables:
- Use lowercase letters.
- Separate words with underscores.
- Be descriptive and use nouns.
- Example: wp_my_plugin_settings

CSS/SCSS:

Selectors (Classes and IDs):
- Use lowercase letters.
- Separate words with hyphens (-).
- Be descriptive.
- Example: .my-custom-container or #my-custom-element
Naming for Styles:
- Use lowercase letters.
- Be descriptive and use hyphens to separate words.
- Example: font-size, background-color
File Names:
- Use lowercase letters.
- Separate words with hyphens (-).
- Example: styles.css or main-styles.scss

JavaScript:

Variable Names:
- Use camelCase for variables.
- Be descriptive and use nouns.
- Example: myVariableName
Function Names:
- Use camelCase for functions.
- Be descriptive and use verbs.
- Example: getUserData()
Object Names:
- Use camelCase.
- Be descriptive and use nouns.
- Example: myObject
Constants:
- Use uppercase letters.
- Separate words with underscores.
- Example: MAX_VALUE
Event Handlers:
- Use camelCase.
- Be descriptive.
- Example: onClickHandler
File Names:
- Use lowercase letters.
- Separate words with hyphens (-).
- Example: main-script.js