Welcome to Block Farm Editor for Umbraco
What is Block Farm Editor?
Block Farm Editor is a visual content editing platform (Think Drag and Drop). Using Block Farm Editor allows you to easily create and manage content blocks within Umbraco that can be visually added/edited using a frontend view of your website.
The most basic form of a Block Definition is an Element Type, a Partial View, and a Definition hooking the two together.
On the off chance, that you do need more power, a View Component can be used as a block allowing for generating block displays based off of more dynamic/structured content.
Technology used
Frontend
Block Farm Editor utilizes a frontend editing experience built using lit components in lightdom mode
This preserves the styling and functionality of your site across components while providing a stable and easy to maintain platform for the logic and functionality of fantastic visual editing experience.
Backend
The backend is built using a property editor which can be assigned to pages via a composition.
A composition is automatically created on startup if it does not exist. You can always add the Block Farm Editor Data type as well, but the composition is the recommended way to add it.
The connection
Using the provided Property Data Set and Property Validation, the backend Element Types are hooked up to the frontend components seamlessly.
The display of the actual blocks is handled via the IViewComponentHelper if a ViewComponent Definition is used, or the IHtmlHelper if a Partial View definition is utilized. The Element Types are passed in as the View/ViewComponent Modal.
Blocks
Blocks are the underlying content structure used in entering content.
Block Areas
block-area tag helpers define placeholders that you can fill with your content blocks.
They can be added to your page templates to generate a basic layout, which is the default way to use them. Alternatively, you can add them inside of a block to create a block with its own dynamic layout. For example, you can create a bootstrap row that dynamically sets up block areas based on the columns selected.
These layout blocks can be nested inside each other, allowing you to create complex layouts with ease.
Modular Content
Blocks provide a modular approach to content management, allowing editors to build pages by combining different types of content blocks.
Dragging and dropping content from one section to another allows for easy reorganization of content, creating a flexible and dynamic content editing experience.
Properties
Properties are the backbone of Block Farm Editor, allowing you to define the data structure for your blocks and block containers.
Defining Block Properties
Properties consist of an Element Document Type. Allowing developers to define the structure and data types for each block. These properties can include any data type supported by Umbraco, such as text, images, and media.
This makes it easy to manage and edit content, providing a user-friendly interface for content creators.
Creating Block Definition
The definition of a block is done
through the definition tab of the Block Element type.
The Definition tab allows you to Categorize your block as well as select the partial view that will be used to render the block.
If you need to use a View Component, you can select the ViewComponent option and then add an assembly attribute to your ViewComponent .cs file to wire it up.
[assembly:BlockFarmEditorDefinition("domains", ViewComponentType = typeof(DomainsViewComponent))]
Building Blocks
Each block can have its own properties, styles, and behaviors, making it a powerful tool allowing content creators to manage a page with a visual view of the content changes they are making.