Block Styles

Block styles allow for alternate styling of block elements. For example, a paragraph could have a lead paragraph style, or an h1 could have a lead header style with a different font.

Block styles are setup in the theme.json file as an object with the key blockStyles. Keys within this object are the block element type names, each one containing an array of block styles.

{
	... ,
	"blockStyles": {
		"block_type": [
			// styles for this blocktype
			{ ... }
		]
	}
}

The block types that are available by default in Pagedip are:

• paragraph

• header1

• header2

• header3

• header4

• blockquote

• ordered-list

• unordered-list

• embed

Other block types might be added by the user with Pagedip Extras (i.e. code), but will only be available if the user has activated the extra.

Individual Blockstyle:

Individual block styles are represented as objects with the keys title, class, and conflict.

title

Display name for the block style.

class

CSS classname to apply to the block element.

conflict

An array of conflicting block style class names. Pagedip will prevent conflicting block styles from being simultaneously applied to an element.

For example:

// theme.json 
{ 
  ... ,
  "blockStyles": {
    "paragraph": [ // key name is the block element to apply the styles to
      {
        "title": "Lead Paragraph", // display name for the style 
        "class": "lead-paragraph", // CSS class name 
        "conflict": ["other-style"] // conflicting block styles
      },
      {
        "title": "Other Style",
        "class": "other-style",
        "conflict": ["lead-paragraph"]
      }
    ],
    "header1": [
      {
        "title": "Lead Header",
        "class": "lead-header" 
        }
    ],
    "embed": [ ... ]
  }
}