This site is now out of date, and currently exists here as an archive only.

Mentor Web Blocks is still under development.

Please click here to view the latest version.

Examples

Adding a new block type

A block type is essentially an Umbraco document type that defines the content structure and elements of a block.

In this example we will be creating and making use of a feature block type.

  1. Head to the umbraco backoffice > settings > document types - expand, right click and create a new document type named Feature Block and uncheck the create matching template option.
  2. Add the following three properties to the document type (format of name, alias, type, tab):
    • Title, title, Textstring, Content
    • Description, description, Textbox Multiple, Content
    • Image, image, Media Picker, Content
  3. Select the Blocks Folder document type and in the structure tab allow for your new Feature Block.
  4. Go to developers section and create a new macro script named Feature Block. It's important to always name this macro/script the same as your document type. Use the following snippet for this script (basic example not error proof):
    • <h1>@Model.title</h1>
      <p>@Model.description <img src="@Model.MediaById(Model.image).umbracoFile" alt="" /></p>
      
  5. Go to content and in your blocks folder create a sub blocks folder named Feature Blocks and within that create a new feature block named test.
  6. Add your new block to a content page and enjoy! ;)

Working with Templates

Web Blocks comes with two user controls for use within templates, one for defining your containers and one for defining existing blocks to be used. The format for these is <wb:block...> and <wb:container...>. 

The following shows an example of a left column with a right content body area. The block and container are outputted as valid divisions.

<body>
    <div id="content">
          <wb:container ID="leftContainer" runat="server" class="contentBlock_3">
             <wb:block ID="subNavBlock" runat="server" BlockID="1234" />
          </wb:container>
          <wb:container ID="rightContainer" runat="server" class="contentBlock_9">
          </wb:container>
    </div>
</body>

Note the BlockID attribute here represents the content node id related to the block to load.

Web Blocks Backend Script Includes

Web Blocks comes bundles with a pre-defined macro script named WebBlocksBackendScriptIncludes.cshtml that can be used to add your own CSS and Javascript references and other logic that will get loaded within the backend layout builder.

This is especially useful and required for you to match up the rendering of your front-end to the backend. For any daredevils it also gives you an opportunity to dig around and extend some of the default web blocks functionality but please note that at this moment in time there is no official support or documentation for this.

Share this page:
Subscribe: