cyber-duck/silverstripe-block-page

A modular approach to building pages in SilverStripe

Monday, March 12, 2018
by cyber-duck
Repository
3 Watchers
13 Stars
1,876 Installations

PHP
0 Dependents
0 Suggesters
1 Forks
0 Open issues
22 Versions
18 % Grown

The README.md

SilverStripe 4 Block Page

, _(*1)

Features

A modular approach to building pages in SilverStripe which allows model based page components. - Custom model based blocks - No limit to number of blocks - Easily block selection and editing - Use drag and drop GridField functionality to change and re-order blocks easily - Apply complex logic like forms to blocks - Versioning across blocks, _(*3)

Screen Shots

Block Selection

Installation

Add the following to your composer.json file and run /dev/buid?flush=all, _(*4)

{  
    "require": {  
        "cyber-duck/silverstripe-block-page": "4.0.*"
    }
}

Setup

Add Extension and Template Loop

The first step to adding block functionality is to apply the block page extension to your DataObject. This can be a normal DataObject or a Page., _(*5)

Page:
  extensions:
    - BlockPageExtension

This will add a new tab to the CMS called content blocks. The second step is to apply the loop within your template for the blocks:, _(*6)

<% loop ContentBlocks %>
$Template
<% end_loop %>

Add Block Model and Template

The next step is to create a block. A block consists of 2 parts; a DataObject and a .ss template. Both these should have the same name., _(*7)

EditorBlock.php
EditorBlock.ss

The model file can reside anywhere inside your code folder and should extend ContentBlock The base template for a block DataObject is as follows:, _(*8)

use CyberDuck\BlockPage\Model\ContentBlock;
use SilverStripe\Forms\HeaderField;
use SilverStripe\Forms\HTMLEditor\HTMLEditorField;

class EditorBlock extends ContentBlock
{
    private static $singular_name = 'Editor';

    private static $description = 'Simple WYSIWYG editor block';

    private static $preview = '/themes/{YourTheme}/img/block/EditorBlock.png';

    private static $db = [
        'Content' => 'HTMLText'
    ];

    public function getCMSFields()
    {
        $fields = parent::getCMSFields();

        # HEADER - THIS FIELD IS REQUIRED
        $fields->insertBefore(HeaderField::create('BlockHeader', self::i18n_singular_name()), 'Title')

        # FIELDS - YOUR FIELDS HERE
        $fields->addFieldToTab('Root.Main', HTMLEditorField::create('Content')); // example field

        return $fields;
    }
}

In the example above 1 custom block field is created called Content. You can replace this / add any other fields you want. There are 3 config properties used for a block used in the block selection screen:, _(*9)

$singular_name - Block title
$description - Block description
$preview - Preview image for the block. You can point this to an image folder in your theme or similar. 360w x 150h.

Next in your theme folder create a folder at themes/{YourTheme}/templates/Block/ and add the EditorBlock.ss template within with the following content:, _(*10)

<div>
    $Content
</div>

Add Block YML Config

The final step to configuring your blocks is to set up the block YML config:, _(*11)

---
Name: block config
---
CyberDuck\BlockPage\Model\ContentBlock:
  blocks:
    - EditorBlock
  restrict:

Visit /dev/build?flush=all, _(*12)

Add Blocks in the CMS

Go the the CMS and visit your Page / Object editing screen and you will see a new tab called Content Blocks. Here you can create new blocks, edit blocks, and re-order blocks., _(*13)

Extra Config

Restricting Blocks

You can restrict certain block selections to a particular page type by passing a restrict option, _(*14)

CyberDuck\BlockPage\Model\ContentBlock:
  blocks:
    - EditorBlock
    - HomeFeaturedBlock
  restrict:
    HomePage:
      - HomeFeaturedBlock

Creating a Block Holder Template

If you wish to wrap all blocks within a certain template you can create a ContentBlock_holder.ss template within the /Block/ folder., _(*15)

<div id="block-$ID">
    $Template
</div>

The loop within your page needs to change slightly and call $TemplateHolder instead of template., _(*16)

<% loop ContentBlocks %>
$TemplateHolder
<% end_loop %>

Todo

The Versions

12/03 2018

dev-master

9999999-dev http://github.com/cyber-duck/silverstripe-block-page

A modular approach to building pages in SilverStripe

silverstripe-vendormodule silverstripe-block-page

A modular approach to building pages in SilverStripe

cyber-duck/silverstripe-block-page

The README.md

SilverStripe 4 Block Page

Features

Screen Shots

Installation

Setup

Add Extension and Template Loop

Add Block Model and Template

Add Block YML Config

Add Blocks in the CMS

Extra Config

Restricting Blocks

Creating a Block Holder Template

Todo

The Versions

dev-master

The Requires

by Andrew Mc Cormack

dev-develop

The Requires

by Andrew Mc Cormack

4.1.1

The Requires

by Andrew Mc Cormack

4.1.0

The Requires

by Andrew Mc Cormack

4.0.2

The Requires

by Andrew Mc Cormack

4.0.x-dev

The Requires

by Andrew Mc Cormack

4.0.1

The Requires

by Andrew Mc Cormack

4.0.0

The Requires

by Andrew Mc Cormack

1.1.3

The Requires

by Andrew Mc Cormack

3.x-dev

The Requires

by Andrew Mc Cormack

1.1.2

The Requires

by Andrew Mc Cormack

dev-duplicate-method

The Requires

by Andrew Mc Cormack

1.1.1

The Requires

by Andrew Mc Cormack

1.1.0

The Requires

by Andrew Mc Cormack

1.0.7

The Requires

by Andrew Mc Cormack

1.0.6

The Requires

by Andrew Mc Cormack

1.0.5

The Requires

by Andrew Mc Cormack

1.0.4

The Requires

by Andrew Mc Cormack

1.0.3

by Andrew Mc Cormack

1.0.2

by Andrew Mc Cormack

1.0.1

by Andrew Mc Cormack

1.0.0

by Andrew Mc Cormack