Using the Page Blocks feature

1 | published by Aleksey Bobkov on Friday, September 17, 2010

In this post I'm going to clear up the recently added Head Declarations and Page Block features. These features allow you to simplify a template's structure by moving page-specific blocks from templates to pages and moving layout-specific markup from pages to templates.

We realized the necessity of page blocks during the pre-release update of the LemonStand website, and after implementing the feature on our own site we found that it's quite handy and universal. Although the community in general sees the true value of page blocks, it could confuse beginners.

The problem

Pages in LemonStand can consist of 2 elements - the page template and the page itself. The template is usually an HTML document which defines the common page elements like header, footer, sidebar, i.e. the page layout elements. On the other hand, page documents contain page-specific markup which is rendered inside the template. You can learn about the templating engine in this post.

Imagine that you have a common page structure which you are going to use among many pages: the main page block and the side bar. The side bar should have page-specific information. The page structure suggests that you should define the sidebar inside the layout. But before we introduced the page blocks feature, that wasn't possible, because there was no way to inject any page-specific information but the page itself into the layout. So, the only solution was defining the sidebar markup in the page, instead of the template. Thus, each page in my example should contain the main block markup and the sidebar markup:

<div class="main">
   ... main page content ...
</div>
<div class="sidebar">
   ... sidebar content ... 
</div>

This leads to repeating the layout-specific code in each page. In turn, this complicates a page's code and adds other issues. For example, if you decided to alter the page layout, you would need to update all your pages.

The solution

With page blocks you can define the layout-specific markup in the page template and output page-specific blocks by their names. Inside each page you can create page blocks in the Head & Blocks tab. Example of the template code:

<div class="main">
   <? $this->render_page() ?>
</div>
<div class="sidebar">
   <? $this->render_block('sidebar') ?>
</div>

As you can see, the layout-specific code is defined in the page template. All you should do now is add the "sidebar" block to each page which is going to use the template.

The benefits are obvious:

Easy to understand and modify page templates
Simpler page code
No layout-specific markup in page code

Head Declarations feature

The Head Declarations feature is similar to the page blocks. It allows you to inject page-specific HTML code to page HEAD element in the page template. For example, if your page requires specific CSS or JavaScript resources, and these resources are not needed on other pages, it is a good idea to define them in the Head Blocks field.

In the template you should call the $this->render_head() function to output page-specific HEAD declarations.

...
<head>
   <!-- Global resources -->
   <link rel="stylesheet" href="/resources/css/site.css" type="text/css"/>
   <script type="text/javascript" src="/resources/javascript/common.js">
   </script>
	
   <!-- Page-specific resources -->
   <? $this->render_head() ?>
</head>
...

Share this blog post! →