Website Block

• Types of Blocks
• Block Names
  • Custom Name
  • Template Name
  • Example of Blocks
• How to work with blocks
  • Inserting a block into the page
  • SASS Styles
  • Filling block content with code

Blocks are the fundamental building block of websites and allow pages to be composed of blocks using a template

Types of Blocks

Blocks are of several types:

1. Blocks inserted into the page header – contain instructions for the browser and additional information about the page. Typically, blocks in the page determine which libraries should be loaded for the page. They may also contain scripts for the page.
2. Blocks for the page body – Part of the page body. The content is described directly by the block or generated programmatically.
3. CSS / SASS styles

Block Names

A block has two names:
Custom name and Template name

Custom Name

You use the custom name to identify the block in the overview of all blocks. The name should be unique for the portal so that you can easily navigate through the blocks.

Template Name

The template name is the designation for the field name in the template where the block is to be inserted. It refers to the name of the field in the template to which the block belongs.
The template name is only relevant for blocks inserted into the page body. CSS styles and header blocks are always all applied.

Examples of names in the template are topmenu, leftmenu, footer, etc.

Do not use body and pageBody for blocks, as they would be confused with the actual page content.

Example of Blocks

Websites use a menu in the top bar. The menu is the same on all pages, but has language versions (e.g., cz, en, de). You insert the menu into blocks:

The block for each language is named after the language, but they share the same template name. The template can then be the same for all languages, but the page layout will always insert the block with the correct language mutation.

How to work with blocks

Inserting a block into the page

Blocks are inserted into the page:

1. Directly (in the page detail, blocks tab)
2. Indirectly via the page template
3. Based on their assignment to the section in which the page is categorized

The template decides the block assignment – directly in the page or in the template. The blocks required by the template are used; others are ignored.

If a block with the same Template Name is assigned to both the section and the page, the block at the
page level is used (it takes precedence over the section block).

SASS Styles

CSS styles can be described using SASS. The system automatically compiles them into CSS styles.
SASS styles support cascading definitions. A SASS style can have a definition stating that it includes a CSS/SASS style described in another block. When compiling the SASS style, the parent style is inserted.

Recommendation: For SASS variables and @mixin definitions, use separate SASS styles that you will include in others. This allows you to use uniform SASS
definitions across all styles and easily use them in new portals (as part of a web template).

Filling block content with code

Blocks allow you to define a script that fills their content. For most scripts, the block content then represents a template used in the htmlGenerátoru as a template.
Binding to scripts in the code should only be done by personnel with the developer role. Without this role, the field connecting the page block to the script is unavailable.

Example: A web search window can call a page that displays search results. The page, or a block on that page, calls a script that performs full-text search for pages matching the query. The page itself contains a template for formatting the result.

Script call: server.webFEPages.getUserSearch

Block or page content:

<!-- Block used to show results -->
<searchResult>
  <h3><a href="@pagePath" target="_blank">@metaTitle</a></h3>
  <p>@metaDescription</p>
  <br>
</searchResult>
<!-- Block with list of all results -->
<searchList></searchList>
<!-- Block used if nothing foung -->
<searchNoRes>
  <h3>Sorry, nothing matches your search</h3>
</searchNoRes>
<body>
  <h1>Search results</h1>
  {@searchResult}
</body>