Lark - Flexible Content Blocks


  1. Intoduction
  2. Configuration
  3. Adding new blocks
  4. Block variable defaults
  5. Master container file

Introduction

Built with flexibility-in-mind, the Lark theme uses Advanced Custom Fields or 'ACF' for short to construct all of it's pages. Each page uses Flexible Content, whereby layouts can be created to dynamically create and manage content.

Configuration

Adding new blocks

A few steps are required when adding a new block.

  1. Each newly added block must have a blade view, add a new file within this directory: web/app/themes/lark-child/resources/views/flexible/blocks

  2. The filename must be constructed with hyphens if it is descriptive, also any 'block' mention is stripped. See example below:

Blockname: Text and Image Block

Filepath: web/app/themes/lark-child/resources/views/flexible/blocks/text-and-image.blade.php

Filebase:

@component('components.blocks.container')

  <!-- HTML goes here... -->

@endcomponent

Block variables

Default Padding:

Generally all blocks have consist padding, this is achieved by a flexible configuration variable. Default padding prints the default classes used by each block which should be reviewed from the beginning of each project.

The below example demonstrates that the default padding on every single block is 70 pixels top and bottom however, for mobile the padding changes to 50 pixels on the top and bottom.

return [

    // ...

    'defaultPadding' => 'py-50 md:py-70',

];

Master container file

This file should not be changed unless extensive testing has been made to ensure consistency is kept across all blocks. By default, a block will being with the below layout, however some blocks have specific variations, the below can be used as examples:

Regular block:

@component('components.blocks.container')

  <!-- HTML goes here... -->

@endcomponent

No container:

@component('components.blocks.container', [
  'noContainer' => true,
])

  <x-slot name="beforeContainer">
    <!-- HTML goes here... -->
  </x-slot>

@endcomponent

Adding HTML before and after the container:

@component('components.blocks.container')

  <x-slot name="beforeContainer">
    <!-- HTML goes here... -->
  </x-slot>

  <!-- container HTML goes here... -->

  <x-slot name="afterContainer">
    <!-- HTML goes here... -->
  </x-slot>

@endcomponent

Please continue to the next step - helper methods