Get the FREE Ultimate OpenClaw Setup Guide →

building-block-templates

Scanned
npx machina-cli add skill MacareuxDigital/concretecms-skills/building-block-templates --openclaw
Files (1)
SKILL.md
3.5 KB

Building Block Templates

Custom templates allow you to override the default view of a block type. This is useful for styling blocks to match your theme or adding specific functionality.

Basic Workflow: Static Markup to Custom Template

  1. Identify the Block Type: Determine which block type you want to create a template for (e.g., autonav, content, image).
  2. Find the Default Template:
    • Locate the original view.php for the block. Usually in concrete/blocks/block_handle/view.php.
    • DO NOT modify this file.
  3. Create the Custom Template File:
    • Create a new file in your theme or package:
      • Theme: application/themes/your_theme/blocks/block_handle/templates/your_custom_template_name.php
      • Package: packages/your_package/blocks/block_handle/templates/your_custom_template_name.php
  4. Insert Static Markup: Paste your static HTML markup into the new file.
  5. Inject Dynamic Data:
    • Open the original view.php you found in step 2.
    • Identify the variables used (e.g., $controller, $bID, $content).
    • Replace the static parts of your markup with the PHP code from the default template to output the actual block data.
    • Ensure you include the mandatory header: defined('C5_EXECUTE') or die('Access Denied.');

Custom Template Naming Rules

  • Format: Use snake_case (e.g., feature_grid, hero_banner).
  • Descriptive: Choose a name that clearly describes the purpose or appearance (e.g., simple_list instead of template1).
  • Avoid Conflicts: Do not use view as a template name, as it is reserved for the default view.
  • Display Name: Concrete CMS will automatically convert the filename to a readable name in the UI (e.g., feature_grid.php becomes "Feature Grid").

Basic Checklist for Block Templates

  • Access Check: Does the file start with defined('C5_EXECUTE') or die('Access Denied.');?
  • XSS Prevention: Are you escaping data correctly? Use the shorthand <?= h($variable) ?> for ALL output that shouldn't contain trusted HTML. Even if you think the data is safe, it's a best practice to use h() to prevent potential XSS vulnerabilities.
  • Localization: Are strings wrapped in the translation function? Use <?= t('Your String') ?>.
  • Edit Mode Support: Does the block still look/work correctly when the page is in edit mode? Sometimes you need to wrap JS-heavy templates in a check: if (!$c->isEditMode()) { ... }.
  • Asset Loading: If the template requires specific CSS or JS, are they being required properly via the controller or by adding them to the template directory (Concrete will auto-load view.css and view.js if they are in the template folder)?
  • Empty State: Does the template handle empty data gracefully?

Commonly Used Data and Performance

  • User State: To check if a user is logged in, use the application container and the isRegistered() method for better performance and to avoid deprecated methods:
    use Concrete\Core\User\User;
    $u = app(User::class);
    if ($u->isRegistered()) {
        // User is logged in
    }
    
  • Page Object: Usually available as $c. If not, use Page::getCurrentPage().
  • URL Facade: Use Url::to('/path') for generating links.

Source

git clone https://github.com/MacareuxDigital/concretecms-skills/blob/main/building-block-templates/SKILL.mdView on GitHub

Overview

Building Block Templates lets you override a block type's default view by adding a custom PHP template in your theme or package. This approach lets you adjust the block markup to match your site's theme or add targeted functionality without touching Concrete CMS core files. It guides you through creating static markup, then injecting dynamic data from the default view.

How This Skill Works

Identify the block type and locate its default view.php (without editing it). Create a new template file under your theme or package in blocks/block_handle/templates/your_custom_template.php and paste your static markup. Open the original view.php to copy the variables (e.g., $controller, $bID, $content) and replace static parts with PHP outputs, ensuring the header defined('C5_EXECUTE') or die('Access Denied.') remains intact.

When to Use It

  • You need to change the markup of an existing block type without modifying core files.
  • You want a block's output to align with your theme's styling and markup conventions.
  • You aim to reuse a specific layout across pages by creating a descriptive template (e.g., feature_grid, hero_banner).
  • You are customizing common blocks such as autonav, content, or image with a tailored markup.
  • You require proper edit-mode support, safety checks, and optional CSS/JS loading for the custom template.

Quick Start

  1. Step 1: Identify the block type you want to templify and locate its default view.php.
  2. Step 2: Create a new template file under your_theme/blocks/block_handle/templates/your_custom_template.php and paste static markup.
  3. Step 3: Copy dynamic data from the default view (e.g., $controller, $bID, $content) and replace with PHP outputs; keep the header check.

Best Practices

  • Ensure the template starts with defined('C5_EXECUTE') or die('Access Denied.');
  • Escape all non-trusted output with h() to prevent XSS vulnerabilities.
  • Wrap strings in translations using t('Your String') for localization.
  • Test the template in edit mode and guard heavy JS with an isEditMode check when needed.
  • Place any required CSS/JS in the template directory so Concrete auto-loads view.css and view.js.

Example Use Cases

  • feature_grid.php: A grid-layout template for a block to match a portfolio theme.
  • hero_banner.php: A full-width hero section template with custom container classes.
  • autonav_custom.php: A tailored navigation block with bespoke markup for styling.
  • content_simple_list.php: A compact list layout for a content block with specific markup.
  • image_with_caption.php: An image block template that renders captions and responsive classes.

Frequently Asked Questions

Add this skill to your agents
Sponsor this space

Reach thousands of developers