default content block that uses core inner blocks

resources/views/blocks/Content/Content.blade.php

@@ -0,0 +1,18 @@
+@if(@$data['section_anchor_id'])
+  <div id="{{ $data['section_anchor_id'] }}" class="section-anchor"></div>
+@endif
+
+<section
+  id="{{ $block['id'] }}"
+  class="badegg-block
+    @if(@$data['section_classes']) {{ implode(' ', $data['section_classes']) }} @endif
+    {{ @$block['className'] }}
+  ">
+
+  <div class="section-{{ $block['name'] }}-inner">
+    <div class="container{{ @$data['container_width'] ?  ' container-' . $data['container_width'] : '' }} block-content wysiwyg">
+      <InnerBlocks allowedBlocks="{!! esc_attr( wp_json_encode( $data['allowed_blocks'] ) ) !!}" />
+    </div>
+  </div>
+
+</section>

resources/views/blocks/Content/Content.php

@@ -0,0 +1,111 @@
+<?php
+
+namespace Blocks\Content;
+use App\Utilities;
+use App\ACF;
+
+class Content
+{
+    public function __construct()
+    {
+        add_action('acf/init', [$this, 'init']);
+    }
+
+    public function init()
+    {
+        acf_register_block_type([
+            'name'              => 'badegg/content',
+            'title'             => __('Content'),
+            'description'       => __('Wordpress blocks inside a wrapper'),
+            'render_callback'   => [ $this, 'render'],
+            'category'          => 'badegg',
+            'icon'              => 'columns',
+            'supports'          => [
+                'align' => false,
+                'jsx' => true,
+            ],
+            'example' => [
+                'attributes' => [
+                    'mode' => 'preview',
+                    'data' => [
+                      'inserter' => true,
+                    ],
+                ],
+            ],
+        ]);
+    }
+
+    public function render($block, $content = '', $is_preview = false)
+    {
+          $name = basename(__FILE__, '.php');
+          $themeURL = get_template_directory_uri();
+
+          if($is_preview && @$block['data']['inserter']):
+              echo '<img style="display: block; width: 100%" src="' . $themeURL . '/resources/views/blocks/' . $name . '/' . $name . '.jpg" />';
+              return;
+          endif;
+
+          $CssClasses = new Utilities\CssClasses;
+          $Colour     = new Utilities\Colour;
+          $CloneGroup = new ACF\CloneGroup;
+
+          $data = [];
+
+          $fields = [
+
+          ];
+
+          $fields = array_merge($fields, $CloneGroup->block_all());
+
+          foreach($fields as $field):
+              $data[$field] = get_field($field);
+          endforeach;
+
+          unset($block['data']);
+          $block['name'] = str_replace('acf/', '', $block['name']);
+
+          $data = array_merge($data, $block);
+          $data['section_classes'] = $CssClasses->section($data);
+          $data['allowed_blocks'] = $this->inner_blocks();
+          $data['block'] = $block;
+
+          echo \Roots\view("blocks.$name.$name", [
+              'data' => $data,
+              'block' => $block,
+          ])->render();
+      }
+
+      public function inner_blocks()
+      {
+        return [
+              // Design
+              'core/separator',
+              'core/spacer',
+
+              // Media
+              'core/cover',
+              'core/file',
+              'core/gallery',
+              'core/image',
+              'core/media-text',
+              'core/audio',
+              'core/video',
+
+              // Text
+              'core/footnotes',
+              'core/heading',
+              'core/list',
+              'core/code',
+              'core/details',
+              'core/freeform',
+              'core/list-item',
+              'core/missing',
+              'core/paragraph',
+              'core/preformatted',
+              'core/pullquote',
+              'core/quote',
+              'core/table',
+              'core/verse',
+        ];
+      }
+}

resources/views/components/button.blade.php

@@ -0,0 +1,5 @@
+@if(@$link)
+  <a href="{{ @$link['url'] }}" target="{{ @$link['target'] }}" class="btn {{ @$colour ?: 'primary' }} {{ $style ?: 'solid' }} {{ @$class }}">
+    <span>{{ @$link['title'] }}</span>
+  </a>
+@endif

resources/views/components/image.blade.php

@@ -1,15 +1,18 @@
-@php($image = wp_get_attachment_image_src(@$id, 'medium'))
+@php($image = wp_get_attachment_image_src(@$id, @$size))
 
-<img
-  @if(@$lazy)
-    src="{{ wp_get_attachment_image_src($id, 'lazy')[0] }}"
-    data-src="{{ $image[0] }}"
-    class="lazy"
-  @else
-    src="{{ $image[0] }}"
-  @endif
+@if($image)
+  <img
+    @if(@$lazy && !is_admin())
+      src="{{ wp_get_attachment_image_src($id, 'lazy')[0] }}"
+      data-src="{{ @$image[0] }}"
+      class="lazy {{ @$class }}"
+    @else
+      src="{{ $image[0] }}"
+      class="{{ @$class }}"
+    @endif
 
-  alt="{{ get_post_meta( $id, '_wp_attachment_image_alt', true ) }}"
-  width="{{ $image[1] }}"
-  height="{{ $image[2] }}"
-/>
+    alt="{{ get_post_meta( $id, '_wp_attachment_image_alt', true ) }}"
+    width="{{ $image[1] }}"
+    height="{{ $image[2] }}"
+  />
+@endif

resources/views/layouts/app.blade.php

@@ -17,19 +17,24 @@
         {{ __('Skip to content', 'sage') }}
       </a>
 
-      @include('sections.header')
+      @include('sections.header.header')
 
-      <main id="main" class="main">
-        @yield('content')
-      </main>
+      <div class="wrapper">
+        <main id="main" class="main">
+          @yield('content')
+        </main>
 
-      @hasSection('sidebar')
-        <aside class="sidebar">
-          @yield('sidebar')
-        </aside>
-      @endif
+        @hasSection('sidebar')
+          <aside class="sidebar">
+            @yield('sidebar')
+          </aside>
+        @endif
+
+        @include('sections.footer.footer')
+      </div>
+
+      @include('partials.menu-off-canvas')
 
-      @include('sections.footer')
     </div>
 
     @php(do_action('get_footer'))

resources/views/layouts/block.blade.php

@@ -1,34 +1,50 @@
-<section id="{{ $block['id'] }}" class="{{ implode(' ', $data['section_classes']) }} {{ @$block['className'] }}">
-  @if(@$data['heading'] || @$data['blurb'])
-    <div class="section-intro container container-narrow align-centre wysiwyg bg-watermarked-content {{ @$data['knockout'] }}">
-      <h2>{{ @$data['heading'] }}</h2>
-      @include('components.divider')
-      <p>{{ @$data['blurb'] }}</p>
-    </div>
-  @endif
+@if(@$data['section_anchor_id'])
+  <div id="{{ $data['section_anchor_id'] }}" class="section-anchor"></div>
+@endif
+
+<section
+  id="{{ $block['id'] }}"
+  class="badegg-block
+    @if(@$data['section_classes']) {{ implode(' ', $data['section_classes']) }} @endif
+    {{ @$block['className'] }}
+  ">
+
+  <div class="section-{{ $block['name'] }}-inner">
+    @if(@$data['heading'] || @$data['blurb'])
+      <div class="section-intro inner inner-bottom @if($data['bg_colour'] != 'white') knockout @endif">
+        <div class="container">
+          <div class="section-intro-inner wysiwyg">
+            <h2>{{ @$data['heading'] }}</h2>
+            <p>{{ @$data['blurb'] }}</p>
+          </div>
+
+          @if(@$data['links'])
+            <div class="btn-wrap">
+              @foreach($data['links'] as $link)
+                @include('components.button', $link)
+              @endforeach
+            </div>
+          @endif
+        </div>
+      </div>
+    @endif
+
+    <div class="container{{ @$data['container_width'] ?  ' container-' . $data['container_width'] : '' }} block-content">
+      @yield('block-content')
+    </div>
+
+    @if(@$data['links'])
+      <div class="section-footer inner-top">
+        <div class="container">
+          <div class="btn-wrap">
+            @foreach($data['links'] as $link)
+              @include('components.button', $link)
+            @endforeach
+          </div>
+        </div>
+      </div>
+    @endif
 
-  <div class="section container container-large block-content bg-watermarked-content">
-    @yield('block-content')
   </div>
 
-  @if(@$data['links'])
-    <div class="section-footer container container-narrow align-centre wysiwyg bg-watermarked-content {{ @$data['knockout'] }}">
-      <div class="button-wrap">
-        @foreach($data['links'] as $link)
-          @include('components.button', $link)
-        @endforeach
-      </div>
-    </div>
-  @endif
-
-  @if(@$data['bg_image'])
-    <div class="bg-watermarked-image" style="opacity: {!! (@$data['bg_opacity'] ?: 30) * 0.01 !!}">
-      {!! $ImageSrcset->render([
-        'image' => $data['bg_image'],
-        'name' => 'hero',
-        'lazy' => true,
-      ]) !!}
-    </div>
-  @endif
-
 </section>

resources/views/partials/menu-off-canvas.blade.php

@@ -0,0 +1,28 @@
+<div class="menu-off-canvas bg-white">
+  <div class="inner">
+    <div class="menu-off-canvas-logo">
+      <a class="brand" href="{{ home_url('/') }}">
+        Site Logo
+      </a>
+
+      <button
+        class="block menu-toggle menu-close js-menu-close"
+        type="button"
+        command="toggle-popover"
+        commandfor="menu-side"
+        aria-expanded="false"
+        aria-controls="menu-side"
+      >
+        <i></i>
+        <i></i>
+        <i></i>
+        <span class="visually-hidden">Close Mobile Menu</span>
+      </button>
+    </div>
+
+    @if (has_nav_menu('primary_navigation'))
+      {!! wp_nav_menu(['theme_location' => 'primary_navigation', 'menu_class' => 'caret-links nolist']) !!}
+    @endif
+  </div>
+
+</div>