Help on adding my first Elemental Block

Questions
1

Hi. Being new to SilverStrip I have the latest version and the latest elemental installed. Unfortunately many of the examples are for an older version of elemental (I assume) and I get an error trying to install them. The lesson on building a new block is a broken link. There is other info around but I’m a bit confused which is for V3 and which is V4.

I want to create a pair of block types that will render content on the left and the right of a page that is structured so:

[full width block]
[left] [right]
[full width block]

So far I have created a skeleton “left block” class under app\src called ElementLeftBlock.php:

<?php

namespace SilverStripe\GVM\Blocks;

use DNADesign\Elemental\Models\BaseElement;

class ElementLeftBlock extends BaseElement {
    private static $singular_name = 'Left Block';

    private static $plural_name = 'Left Blocks';

    private static $description = 'A block of content rendered on the LHS of a page';


    public function getType() {
        return 'Left Block';
    }

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

        return $fields;
    }

}

and a template in SilverStripe\GVM\Blocks

<% if $ShowTitle %>
    <h2 class="left-element__title">$Title</h2>
<% end_if %>
<div class="left-element__container">
<h2>This is the left hand block</h2>
$HTML
</div>

so far, so good and I can see adiv is being injected into my page source.

	   <div class="element silverstripe__gvm__blocks__elementleftblock" id="e2">
<div class="left-element__container">
<h2>This is the left hand block</h2>
</div>
</div>

However my new block does not have a content editor in the CMS to add HTML. That’s strange as I read that the framework adds an editor by default unless you turn it off.

2

It’s okay - I have fixed this for myself :slight_smile:

3

What was the issue? (It could help out someone who finds this thread in the future)

1 Like
4

You simply need to create db entries for HTMLText. My file (ElementSideBySideBlock.php) is here:

<?php
/*
 * Author: Peter Hawkins phawkins@gvmedia.com.au
 */
namespace GVM\Elements;

use DNADesign\Elemental\Models\BaseElement;
use SilverStripe\Forms\TextareaField; 
use SilverStripe\Forms\FieldList;
use SilverStripe\ORM\FieldType\DBField;

class ElementSideBySide extends BaseElement {
    private static $icon = 'font-icon-columns';
    private static $singular_name = 'Side By Side Block';
    private static $plural_name = 'Side By Side Blocks';
    private static $description = 'A side by side pair of blocks';

    private static $table_name = 'ElementSideBySide';
    private static $db = [ 'Left'=>'HTMLText', 'Right'=>'HTMLText' ];

    public function getSummary() {
	    return "Summary not yet implemented";
    }

    public function getType() {
        return  'Side By Side Block';
        return _t(__CLASS__ . '.BlockType', 'Side By Side Block');
    }

    public function getCMSFields() {

	    /*
	    $this->beforeUpdateCMSFields(function (FieldList $fields) {
		    $fields->dataFieldByName('Left')->setRows(6);
		    $fields->dataFieldByName('Right')->setRows(6);
	    	});
	     */
        return parent::getCMSFields();
    }

}

and the template is app/templates/GVM/Elements/ElementSideBySide.ss

<% if $Title && $ShowTitle %><h2 class="element__title">$Title</h2><% end_if %>

<div style="position:absolute;left:10%;width:40%;z-index:20;">$Left</div>
<div style="position:absolute;right:5%;width:40%;z-index:20;">$Right</div>
1 Like