diff --git a/Architecture-and-structure-of-the-page-components-%28blocks%29.md b/Architecture-and-structure-of-the-page-components-%28blocks%29.md index c47cc04..ebcff49 100644 --- a/Architecture-and-structure-of-the-page-components-%28blocks%29.md +++ b/Architecture-and-structure-of-the-page-components-%28blocks%29.md @@ -58,4 +58,31 @@ All vue files under `resources/js/components/Blocks//` are the a ### block.js - definition file -block.js (in `resources/js/Utils`) contains all the component block categories, component blocks, and field definitions for each component block in json format. Some field definitions are hardcoded with the system, and dictates their behaviour, other field definitions you are free to define yourself (as long as they don't conflict with the other built in field definitions. \ No newline at end of file +block.js (in `resources/js/Utils`) contains all the component block categories, component blocks, and field definitions for each component block in json format. Some field definitions are hardcoded with the system, and dictates their behaviour, other field definitions you are free to define yourself (as long as they don't conflict with the other built in field definitions. Let's go over one of the components defined in block.js and describe their field definitions: + +``` +{ + uuid: uuidv4(), + componentName: 'FrontPageNewsList', + optionsComponentName: 'FrontPageNewsListOptions', + renderComponentName: 'FrontPageNewsListRendered', + description: 'Nyhetsartikler', + thumbUrl: '/img/blocks/frontpagenews_oms_preview.jpg', + static: false, + title: 'Nyheter', + showtitle: true, + label: 'Hold deg oppdatert med hva som skjer i ØMS', + anchorName: 'intro', + showlabel: true, + image: '/img/pexels-andrew-neel-2859169.jpg', + buttontext: 'Vis flere nyheter', + needs: ['articles'] +} +``` + +* **uuid** *required* The uuid field is required for all block components, it contains an unique identifier for that block *instance* when it is dragged to the canvas +* **componentName** *required* The componentName field is required for all block components. It tells the pagebuilder what vue file to look for when rendering the block on the page builder canvas, after it is dragged from the block selection. +* **optionsComponentName** *required* The optionsComponentName field is required for all block components. It tells the pagebuilder what vue file to look for when rendering the input fields and forms when the user clicks the cogwheel to customize the block +* **renderComponentName** *required* The renderComponentName field is required for all block components. It tells the pagebuilder what vue file to look for when rendering the component on a page when it is finished. +* **description** *required* The description is the title of the block that appears in the block selector on the pagebuilder +* **thumbUrl** *required* The thumbUrl field is the relative path of the visual preview image in the block selector, giving the user a visual preview of the block \ No newline at end of file