wysiwyg block

web/app/themes/badegg/resources/views/blocks/WYSIWYG/WYSIWYG.blade.php

@@ -0,0 +1,13 @@
+@extends('layouts.block', [
+  'block' => $block,
+  'data' => $data,
+])
+
+@section('block-content')
+  @if(@$data['wysiwyg'])
+    <div class="main-wysiwyg wysiwyg">
+      {!! @$data['wysiwyg'] !!}
+    </div>
+  @endif
+@overwrite
+

web/app/themes/badegg/resources/views/blocks/WYSIWYG/WYSIWYG.php

@@ -0,0 +1,74 @@
+<?php
+
+namespace Blocks\WYSIWYG;
+use App\Utilities;
+use App\ACF;
+
+class WYSIWYG
+{
+  public function __construct()
+  {
+    add_action('acf/init', [$this, 'init']);
+  }
+
+  public function init()
+  {
+    acf_register_block_type([
+        'name'              => 'badegg/wysiwyg',
+        'title'             => __('Basic Content'),
+        'description'       => __('Basic text editor '),
+        'render_callback'   => [ $this, 'render'],
+        'category'          => 'badegg',
+        'icon'              => 'editor-paragraph',
+        'supports'          => [
+            'align' => false,
+        ],
+        '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 = [
+      'wysiwyg',
+    ];
+    $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['block'] = $block;
+
+    echo \Roots\view("blocks.$name.$name", [
+      'data' => $data,
+      'block' => $block,
+    ])->render();
+  }
+}

web/app/themes/badegg/resources/views/blocks/WYSIWYG/WYSIWYG.scss

@@ -0,0 +1,13 @@
+.section-badegg-wysiwyg {
+  container-name: WYSIWYG;
+  container-type: inline-size;
+
+  .main-wysiwyg {
+    @container WYSIWYG (min-width: #{$screen-lg}) {
+      font-size: 1.25em;
+    }
+  }
+
+  .section-intro { padding-bottom: $sectionSmall; }
+  .section-footer { padding-top: $sectionSmall; }
+}

web/app/themes/badegg/resources/views/layouts/block.blade.php

@@ -0,0 +1,73 @@
+@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 section-medium section-zero-top container container-large bg-watermarked-content {{ @$data['knockout'] }} align-{{ @$data['intro_alignment'] ?: 'centre' }} ">
+        <div class="section-intro-inner wysiwyg">
+          @if(@$data['overline']) <p class="overline secondary"><strong>{{ $data['overline'] }}</strong></p> @endif
+          <h2 class="section-title">{{ @$data['heading'] }}</h2>
+          <p>{{ @$data['blurb'] }}</p>
+        </div>
+      </div>
+    @endif
+
+    <div class="container container-{{ @$data['container_width'] ?: 'large' }} block-content bg-watermarked-content">
+      @yield('block-content')
+    </div>
+
+    @if(@$data['links'] || @$data['blurb_footer'])
+      <div class="section-footer section-medium section-zero-bottom container container-narrow align-{{ @$data['footer_alignment'] ?: 'centre' }} wysiwyg bg-watermarked-content {{ @$data['knockout'] }}">
+
+        <p>{{ @$data['blurb_footer'] }}</p>
+
+        @if(@$data['links'])
+          <div class="btn-wrap">
+            @foreach($data['links'] as $link)
+              @include('components.button', $link)
+            @endforeach
+          </div>
+        @endif
+      </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
+  </div>
+
+  @if(@$data['angle_status'])
+    @if(@$data['angle_position'] == 'both')
+      @foreach(['top', 'bottom'] as $position)
+        @include('partials.angle', [
+          'position' => $position,
+          'direction' => @$data['angle_direction'],
+          'tint' => @$data['angle_tint'],
+          'colour' => @$data['angle_colour'] ?: 'white',
+        ])
+      @endforeach
+    @else
+      @include('partials.angle', [
+        'position' => @$data['angle_position'],
+        'direction' => @$data['angle_direction'],
+        'tint' => @$data['angle_tint'],
+        'colour' => @$data['angle_colour'] ?: 'white',
+      ])
+    @endif
+  @endif
+
+</section>