@eightshift/frontend-libs/blocks/init/src/Blocks/custom/column/manifest.json

A collection of useful frontend utility modules. powered by Eightshift

{
	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs/develop/schemas/block.json",
	"blockName": "column",
	"title": "Column",
	"description": "A single column.",
	"category": "eightshift",
	"icon": {
		"src": "es-column"
	},
	"keywords": [
		"column"
	],
	"parent": [
		"eightshift-boilerplate/columns"
	],
	"example": {
		"attributes": {
			"wrapperNoControls": true,
			"columnWidthLarge": 4
		},
		"innerBlocks": [
			{
				"name": "eightshift-boilerplate/card",
				"attributes": {
					"cardCardImageUrl": "https://loremflickr.com/800/800",
					"cardCardIntroContent": "Intro",
					"cardCardIntroSize": "small",
					"cardCardIntroColor": "light",
					"cardCardHeadingContent": "Heading",
					"cardCardParagraphContent": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam est id semper aliquet.",
					"cardCardButtonUse": false
				}
			}
		]
	},
	"hasInnerBlocks": true,
	"attributes": {
		"wrapperNoControls": {
			"type": "boolean",
			"default": true
		},
		"wrapperUse": {
			"type": "boolean",
			"default": false
		},

		"columnWidthLarge": {
			"type": "string",
			"default": "4"
		},
		"columnWidthDesktop": {
			"type": "string"
		},
		"columnWidthTablet": {
			"type": "string"
		},
		"columnWidthMobile": {
			"type": "string"
		},

		"columnOffsetLarge": {
			"type": "string",
			"default": "auto"
		},
		"columnOffsetDesktop": {
			"type": "string"
		},
		"columnOffsetTablet": {
			"type": "string"
		},
		"columnOffsetMobile": {
			"type": "string"
		},

		"columnHideLarge": {
			"type": "string",
			"default": "false"
		},
		"columnHideDesktop": {
			"type": "string"
		},
		"columnHideTablet": {
			"type": "string"
		},
		"columnHideMobile": {
			"type": "string"
		},

		"columnOrderLarge": {
			"type": "integer"
		},
		"columnOrderDesktop": {
			"type": "integer"
		},
		"columnOrderTablet": {
			"type": "integer"
		},
		"columnOrderMobile": {
			"type": "integer"
		},

		"columnVerticalAlignLarge": {
			"type": "string",
			"default": "stretch"
		},
		"columnVerticalAlignDesktop": {
			"type": "string"
		},
		"columnVerticalAlignTablet": {
			"type": "string"
		},
		"columnVerticalAlignMobile": {
			"type": "string"
		},

		"columnHorizontalAlignLarge": {
			"type": "string",
			"default": "stretch"
		},
		"columnHorizontalAlignDesktop": {
			"type": "string"
		},
		"columnHorizontalAlignTablet": {
			"type": "string"
		},
		"columnHorizontalAlignMobile": {
			"type": "string"
		}
	},
	"responsiveAttributes": {
		"columnWidth": {
			"large": "columnWidthLarge",
			"desktop": "columnWidthDesktop",
			"tablet": "columnWidthTablet",
			"mobile": "columnWidthMobile"
		},
		"columnOffset": {
			"large": "columnOffsetLarge",
			"desktop": "columnOffsetDesktop",
			"tablet": "columnOffsetTablet",
			"mobile": "columnOffsetMobile"
		},
		"columnHide": {
			"large": "columnHideLarge",
			"desktop": "columnHideDesktop",
			"tablet": "columnHideTablet",
			"mobile": "columnHideMobile"
		},
		"columnOrder": {
			"large": "columnOrderLarge",
			"desktop": "columnOrderDesktop",
			"tablet": "columnOrderTablet",
			"mobile": "columnOrderMobile"
		},
		"columnVerticalAlign": {
			"large": "columnVerticalAlignLarge",
			"desktop": "columnVerticalAlignDesktop",
			"tablet": "columnVerticalAlignTablet",
			"mobile": "columnVerticalAlignMobile"
		},
		"columnHorizontalAlign": {
			"large": "columnHorizontalAlignLarge",
			"desktop": "columnHorizontalAlignDesktop",
			"tablet": "columnHorizontalAlignTablet",
			"mobile": "columnHorizontalAlignMobile"
		}
	},
	"options": {
		"columnWidth": {
			"min": 1,
			"max": 12,
			"step": 1
		},
		"columnOffset": {
			"min": 0,
			"max": 12,
			"step": 1
		},
		"columnOrder": {
			"min": 1,
			"max": 100,
			"step": 1
		},
		"columnVerticalAlign": [
			{
				"label": "Stretch",
				"value": "stretch",
				"icon": "verticalAlignStretch"
			},
			{
				"label": "Top",
				"value": "start",
				"icon": "verticalAlignTop"
			},
			{
				"label": "Center",
				"value": "center",
				"icon": "verticalAlignCenter"
			},
			{
				"label": "Bottom",
				"value": "end",
				"icon": "verticalAlignBottom"
			}
		],
		"columnHorizontalAlign": [
			{
				"label": "Stretch",
				"value": "stretch",
				"icon": "horizontalAlignStretch"
			},
			{
				"label": "Left",
				"value": "start",
				"icon": "horizontalAlignLeft"
			},
			{
				"label": "Center",
				"value": "center",
				"icon": "horizontalAlignCenter"
			},
			{
				"label": "Right",
				"value": "end",
				"icon": "horizontalAlignRight"
			}
		]
	},
	"variables": {
		"columnWidth": [
			{
				"inverse": true,
				"variable": {
					"column-width": "%value%"
				}
			}
		],
		"columnOffset": [
			{
				"inverse": true,
				"variable": {
					"column-offset": "%value%"
				}
			}
		],
		"columnHide": {
			"false": [
				{
					"inverse": true,
					"variable": {
						"column-display": "flex"
					}
				}
			],
			"true": [
				{
					"inverse": true,
					"variable": {
						"column-display": "none"
					}
				}
			]
		},
		"columnOrder": [
			{
				"inverse": true,
				"variable": {
					"column-order": "%value%"
				}
			}
		],
		"columnVerticalAlign": {
			"stretch": [
				{
					"inverse": true,
					"variable": {
						"column-vertical-align": "%value%",
						"column-item-height": "100%"
					}
				}
			],
			"start": [
				{
					"inverse": true,
					"variable": {
						"column-vertical-align": "flex-start"
					}
				}
			],
			"center": [
				{
					"inverse": true,
					"variable": {
						"column-vertical-align": "%value%"
					}
				}
			],
			"end": [
				{
					"inverse": true,
					"variable": {
						"column-vertical-align": "flex-end"
					}
				}
			]
		},
		"columnHorizontalAlign": {
			"stretch": [
				{
					"inverse": true,
					"variable": {
						"column-horizontal-align": "%value%",
						"column-item-width": "100%"
					}
				}
			],
			"start": [
				{
					"inverse": true,
					"variable": {
						"column-horizontal-align": "flex-start"
					}
				}
			],
			"center": [
				{
					"inverse": true,
					"variable": {
						"column-horizontal-align": "%value%"
					}
				}
			],
			"end": [
				{
					"inverse": true,
					"variable": {
						"column-horizontal-align": "flex-end"
					}
				}
			]
		}
	},
	"variablesEditor": {
		"columnHide": {
			"true": [
				{
					"inverse": true,
					"variable": {
						"column-display": "flex",
						"column-opacity": "0.4",
						"column-transform": "translateY(0.15rem) scale(0.99)"
					}
				}
			],
			"false": [
				{
					"inverse": true,
					"variable": {
						"column-opacity": "1"
					}
				}
			]
		}
	},
	"variablesCustom": [
		"--wrapper-bg-color-project: initial;",
		"--wrapper-bg-color-gradient: initial;",
		"--wrapper-bg-blend-mode: initial;",
		"--wrapper-bg-repeat: initial;",
		"--wrapper-bg-position: initial;",
		"--wrapper-bg-size: initial;",
		"--wrapper-divider-color: initial;",
		"--wrapper-width: initial;",
		"--wrapper-offset: initial;",
		"--wrapper-spacing-top: initial;",
		"--wrapper-spacing-bottom: initial;",
		"--wrapper-spacing-top-in: initial;",
		"--wrapper-spacing-bottom-in: initial;",
		"--wrapper-divider-top: initial;",
		"--wrapper-divider-bottom: initial;",
		"--wrapper-divider-left: initial;",
		"--wrapper-divider-right: initial;",
		"--wrapper-display: initial;",
		"--wrapper-is-full-width: initial;",
		"--wrapper-grid-template-columns: initial;",
		"--wrapper-display-type: initial;",
		"--wrapper-rounded-corners: initial;"
	]
}