Creating Blocks

To create a custom block, you have to define a Vue component for the admin area, and a Blade template for the frontend.

Block Editor (Admin Area)

Create a Vue file in resources/nexus-cms/vue/EditBlock/ using the following as a template:

<script>
    import {stringField} from '@alberon/nexus-cms/js/ensure';
    import EditBlockBase from '@alberon/nexus-cms/vue/EditBlockBase';

    export default {
        $_nexus_componentName: 'Example Block',
        extends: EditBlockBase,
        methods: {
            ensureBlockHasDefaultValues(block) {
                // e.g.
                stringField(block, 'content');
            }
        },
    }
</script>

<template>
    <div class="kv">

        <div class="kv-key-for-input">
            <label :for="$id('content')">
                Content
            </label>
        </div>
        <div class="kv-value">
            <input
                class="form-control"
                :id="`$id('content')`"
                type="text"
                v-model="block.content"
            />
        </div>

    </div>
</template>

block is an object containing the block data. It should be initialised in ensureBlockHasDefaultValues(), to make sure it is reactive. There are several helpers in @alberon/nexus-cms/js/ensure:

• arrayField(block, field, minLength = 0, maxLength = null)
• booleanField(block, field, defaultValue = false)
• numberField(block, field, defaultValue = 0)
• objectField(block, field, defaultValue = {})
• stringField(block, field, defaultValue = '')

The component can be arbitrarily complex - e.g. you can create repeater fields. We don't currently have any helper components for this, but see here for some examples.

You can use Nexus WYSIWYG to allow HTML formatting in fields.

$id() is a helper that generates a unique ID for this component, so multiple instances of the component won't clash.

Block Renderer (Frontend)

By default, the block will be rendered using resources/nexus-cms/views/blocks/<block-name>.blade.php (with the block name in kebab-case). It will receive the block data as variables - i.e. in the above example, the variable $content would be defined.

Security Warning: If you are using Nexus WYSIWYG, remember to call sanitise_html(). For all other fields, use {{ }} (or e()) to escape the input.

Custom Class

If you need to do something more advanced, e.g. loading additional data, create a new class in app/NexusCms/Blocks/ with the same name as the Vue file and extend Alberon\NexusCms\Blocks\Block:

<?php

namespace App\NexusCms\Blocks;

use Alberon\NexusCms\Blocks\Block;

class ExampleBlock extends Block
{
    protected function data()
    {
        // Return an array of variables to be passed to view()
        // The default is:
        return $this->block['data'];
    }

    protected function view()
    {
        // Return the template name
        return 'nexus-cms::blocks.example-block';
    }
}

Both methods are optional - you can override one but not the other if you prefer. Alternatively, override render() to customise it completely.