@eightshift/frontend-libs

{ "$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs/develop/schemas/block.json", "blockName": "columns", "title": "Columns", "description" : "Display content across multiple columns with flexible sizing and alignment options.", "category": "eightshift", "icon": { "src": "es-columns" }, "keywords": [ "columns" ], "example": { "attributes": { "columnsColumnGapLarge": 30, "columnsRowGapLarge": 30 }, "innerBlocks": [ { "name": "eightshift-boilerplate/column", "attributes": { "columnWidthLarge": 4 }, "innerBlocks": [ { "name": "eightshift-boilerplate/card", "attributes": { "cardCardImageUrl": "https://picsum.photos/400/400", "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 } } ] }, { "name": "eightshift-boilerplate/column", "attributes": { "columnWidthLarge": 4 }, "innerBlocks": [ { "name": "eightshift-boilerplate/card", "attributes": { "cardCardImageUrl": "https://picsum.photos/400/400", "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 } } ] }, { "name": "eightshift-boilerplate/column", "attributes": { "columnWidthLarge": 4 }, "innerBlocks": [ { "name": "eightshift-boilerplate/card", "attributes": { "cardCardImageUrl": "https://picsum.photos/400/400", "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": { "columnsAllowedBlocks": { "type": "array", "items": { "type": "string" }, "default": [ "eightshift-boilerplate/column" ] }, "columnsColumnGapLarge": { "type": "number", "default": 20 }, "columnsColumnGapDesktop": { "type": "number" }, "columnsColumnGapTablet": { "type": "number" }, "columnsColumnGapMobile": { "type": "number", "default": 0 }, "columnsRowGapLarge": { "type": "number", "default": 20 }, "columnsRowGapDesktop": { "type": "number" }, "columnsRowGapTablet": { "type": "number" }, "columnsRowGapMobile": { "type": "number" }, "wrapperSimple": { "type": "boolean", "default": true }, "wrapperUseInner": { "type": "boolean", "default": false }, "wrapperWidthMobile": { "type": "integer" }, "wrapperIsFullWidthLarge": { "type": "boolean", "default": true }, "showWrapperWidth": { "type": "boolean", "default": false }, "showWrapperOffset": { "type": "boolean", "default": false }, "showWrapperNoControls": { "type": "boolean", "default": false }, "showWrapperIsFullWidth": { "type": "boolean", "default": false }, "wrapperUseShowControl": { "type": "boolean", "default": false }, "wrapperSimpleShowControl": { "type": "boolean", "default": true } }, "responsiveAttributes": { "columnsColumnGap": { "large": "columnsColumnGapLarge", "desktop": "columnsColumnGapDesktop", "tablet": "columnsColumnGapTablet", "mobile": "columnsColumnGapMobile" }, "columnsRowGap": { "large": "columnsRowGapLarge", "desktop": "columnsRowGapDesktop", "tablet": "columnsRowGapTablet", "mobile": "columnsRowGapMobile" } }, "options": { "columnsColumnGap": { "min": 0, "max": 100, "step": 1 }, "columnsRowGap": { "min": 0, "max": 100, "step": 1 } }, "variables": { "columnsRowGap": [ { "inverse": true, "variable": { "columns-row-gap": "%value%" } } ], "columnsColumnGap": [ { "inverse": true, "variable": { "columns-column-gap": "%value%" } } ] }, "innerBlocksDependency": [ "column" ], "layoutPresets": [ { "name": "1 column", "icon" : "solidRect", "blocks": [ { "name": "eightshift-boilerplate/column", "attributes": { "columnWidthLarge": "12", "columnOffsetLarge": "2" } } ] }, { "name": "2 columns", "icon" : "twoColumns", "blocks": [ { "name": "eightshift-boilerplate/column", "attributes": { "columnWidthLarge": "6", "columnOffsetLarge": "2" } }, { "name": "eightshift-boilerplate/column", "attributes": { "columnWidthLarge": "6" } } ] }, { "name": "3 columns", "icon" : "columns", "blocks": [ { "name": "eightshift-boilerplate/column", "attributes": { "columnWidthLarge": "4", "columnOffsetLarge": "2" } }, { "name": "eightshift-boilerplate/column", "attributes": { "columnWidthLarge": "4" } }, { "name": "eightshift-boilerplate/column", "attributes": { "columnWidthLarge": "4" } } ] }, { "name": "4 columns", "icon" : "fourColumns", "blocks": [ { "name": "eightshift-boilerplate/column", "attributes": { "columnWidthLarge": "3", "columnOffsetLarge": "2" } }, { "name": "eightshift-boilerplate/column", "attributes": { "columnWidthLarge": "3" } }, { "name": "eightshift-boilerplate/column", "attributes": { "columnWidthLarge": "3" } }, { "name": "eightshift-boilerplate/column", "attributes": { "columnWidthLarge": "3" } } ] }, { "name": "1/3 - 2/3", "icon" : "columns3366", "blocks": [ { "name": "eightshift-boilerplate/column", "attributes": { "columnWidthLarge": "3", "columnOffsetLarge": "2" } }, { "name": "eightshift-boilerplate/column", "attributes": { "columnWidthLarge": "9" } } ] }, { "name": "2/3 - 1/3", "icon" : "columns6633", "blocks": [ { "name": "eightshift-boilerplate/column", "attributes": { "columnWidthLarge": "9", "columnOffsetLarge": "2" } }, { "name": "eightshift-boilerplate/column", "attributes": { "columnWidthLarge": "3" } } ] }, { "name": "Full-width column", "icon" : "width", "blocks": [ { "name": "eightshift-boilerplate/column", "attributes": { "columnWidthLarge": "14", "columnOffsetLarge": "1" } } ] } ] }