From: Stephen Cameron <stephen@cubedesigners.com>
Date: Tue, 14 May 2019 17:39:23 +0000 (+0200)
Subject: WIP #2724 @3
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=7b8f4599a16e43df4a0e3bfca4ab354c5c89d0d1;p=c6-wordpress.git

WIP #2724 @3
---

diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeroBlock.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeroBlock.php
index c2d83a3..1ce65c8 100644
--- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeroBlock.php
+++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeroBlock.php
@@ -58,6 +58,17 @@ class HeroBlock extends Widget_Base {
             ]
         );
 
+        $this->add_control(
+            'image',
+            [
+                'label' => __( 'Background Image', 'elementor' ),
+                'type' => Controls_Manager::MEDIA,
+                'default' => [
+                    'url' => Utils::get_placeholder_image_src(),
+                ],
+            ]
+        );
+
         $this->add_control(
             'title',
             [
@@ -78,9 +89,9 @@ class HeroBlock extends Widget_Base {
         );
         
         $this->add_control(
-			'image',
+			'body_image',
 			[
-				'label' => __( 'Background Image', 'elementor' ),
+				'label' => __( 'Content Image', 'cube' ),
 				'type' => Controls_Manager::MEDIA,
 				'default' => [
 					'url' => Utils::get_placeholder_image_src(),
@@ -89,12 +100,24 @@ class HeroBlock extends Widget_Base {
 		);
 
         $this->add_control(
-            'arrow_link',
+            'cta_text',
             [
-                'label' => __( 'Arrow link', 'cube' ),
+                'label' => __('Call to Action text', 'cube'),
                 'type' => Controls_Manager::TEXT,
-                'placeholder' => __( 'URL / anchor link', 'cube' ),
-                'default' => '#content',
+                'default' => ''
+            ]
+        );
+
+        $this->add_control(
+            'cta_link',
+            [
+                'label' => __('Call to Action link', 'cube'),
+                'type' => Controls_Manager::URL,
+                'default' => [
+                    'url' => '',
+                    'is_external' => false,
+                ],
+                'show_external' => true
             ]
         );
         
@@ -113,7 +136,23 @@ class HeroBlock extends Widget_Base {
         $title = $this->get_settings('title');
         $body = $this->parse_text_editor($this->get_settings('body'));
         $image = $this->get_settings('image');
-        $arrow_link = $this->get_settings('arrow_link');
+        $body_image = $this->get_settings('body_image');
+        $cta_text = $this->get_settings('cta_text');
+        $cta_link = $this->get_settings('cta_link');
+
+        if ( ! empty( $cta_link['url'] ) ) {
+            $this->add_render_attribute( 'cta_text', 'href', $cta_link['url'] );
+
+            if ( $cta_link['is_external'] ) {
+                $this->add_render_attribute( 'cta_text', 'target', '_blank' );
+            }
+
+            if ( $cta_link['nofollow'] ) {
+                $this->add_render_attribute( 'cta_text', 'rel', 'nofollow' );
+            }
+        }
+
+        $this->add_render_attribute('cta_text', 'class', ['hero-block-cta arrow-link']);
 
         // When this element is present, add a class to the body so the header can be styled differently (inverted colours)
         add_filter('body_class', function($classes) {
@@ -139,8 +178,20 @@ class HeroBlock extends Widget_Base {
 
                 <div class="hero-block-content-inner">
                     <h1 class="hero-block-title"><?= $title ?><div class="hero-block-body"><?= \App\prevent_orphans($body) ?></div></h1>
+
+                    <?php if (!empty($cta_text)): ?>
+                        <a <?= $this->get_render_attribute_string('cta_text') ?>>
+                            <?= \App\svg_image('arrow', 'svg first-arrow')->toHtml(); ?>
+                            <span class="arrow-link-label"><?= $cta_text ?></span>
+                            <span class="second-arrow-mask"><?= \App\svg_image('arrow', 'svg second-arrow')->toHtml() ?></span>
+                        </a>
+                    <?php endif; ?>
                 </div>
 
+                <?php if ($body_image['id']): ?>
+                    <?= wp_get_attachment_image($body_image['id'], 'full', false, ['class' => 'hero-block-body-image']); ?>
+                <?php endif; ?>
+
             </div>
 
 
@@ -155,20 +206,6 @@ class HeroBlock extends Widget_Base {
                 background-image: url(<?= wp_get_attachment_image_url($image['id'], 'large') ?>);
             }
 
-            <?php
-
-            // ToDo: generate some other image sizes / crops for vertical oriented devices
-
-            ?>
-
-            /*
-            @media (min-width: 600px) {
-                #<?= $id ?> .hero-block-background {
-                    background-image: url(<?= wp_get_attachment_image_url($image['id'], 'large') ?>);
-                }
-            }
-            */
-
             @media (min-width: 768px) {
                 #<?= $id ?> .hero-block-background {
                     background-image: url(<?= wp_get_attachment_image_url($image['id'], 'full') ?>);
diff --git a/wp-content/themes/c6/app/setup.php b/wp-content/themes/c6/app/setup.php
index 4f3c8cf..a6e2e98 100644
--- a/wp-content/themes/c6/app/setup.php
+++ b/wp-content/themes/c6/app/setup.php
@@ -45,9 +45,10 @@ add_action('wp_print_styles', function() {
  * Theme assets
  */
 add_action('wp_enqueue_scripts', function () {
-    // NOTE: 'elementor-frontend' is added as a dependency for the main stylesheet to ensure that our stylesheet
-    // is always loaded afterwards, allowing us to override the default styles. On 404 pages, this wasn't happening.
-    wp_enqueue_style('sage/main.css', asset_path('styles/main.css'), ['elementor-frontend'], null);
+    // NOTE: 'elementor-frontend' and 'elementor-animations' are added as dependencies for the main stylesheet to
+    // ensure that our stylesheet is always loaded afterwards, allowing us to override the default styles.
+    // On 404 pages, this wasn't happening.
+    wp_enqueue_style('sage/main.css', asset_path('styles/main.css'), ['elementor-frontend', 'elementor-animations'], null);
     wp_enqueue_script('sage/main.js', asset_path('scripts/main.js'), ['jquery'], null, true);
 
     if (is_single() && comments_open() && get_option('thread_comments')) {
diff --git a/wp-content/themes/c6/resources/assets/styles/widgets/hero-block.styl b/wp-content/themes/c6/resources/assets/styles/widgets/hero-block.styl
index cad9308..ee53253 100644
--- a/wp-content/themes/c6/resources/assets/styles/widgets/hero-block.styl
+++ b/wp-content/themes/c6/resources/assets/styles/widgets/hero-block.styl
@@ -1,15 +1,20 @@
 $breakpoint-hero = 1024px
 
 .hero-block
-  min-height: 100vh
+  display: flex
+  justify-content: center
   position: relative
   padding-top: 95px // Space for header so contents never overlap it
   constrain(padding-left, 5vw)
   constrain(padding-right, 5vw)
 
-  +below($breakpoint-hero)
-    display: flex
-    margin-bottom: 5vw
+  // On really huge screens, it's a bit ridiculous having this section full height
+  +below(2561px)
+    min-height: 100vh
+
+  //+below($breakpoint-hero)
+  //  display: flex
+  //  margin-bottom: 5vw
 
   &-background-container
     position: absolute
@@ -26,33 +31,37 @@ $breakpoint-hero = 1024px
     background-position: center
     background-size: cover
 
-    +below(680px)
-      &:before
-        content: ''
-        position: absolute
-        top: 0
-        right: 0
-        bottom: 0
-        left: 0
-        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7) 40%, transparent)
+    // Dark overlay on smaller devices
+    //+below(680px)
+    //  &:before
+    //    content: ''
+    //    position: absolute
+    //    top: 0
+    //    right: 0
+    //    bottom: 0
+    //    left: 0
+    //    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7) 40%, transparent)
 
 
   &-content
-    font-smoothing()
-    max-width: r(880px)
-    constrain(top, 5vw)
-    constrain(padding-bottom, 10vw) // Ensure main section bottom angle doesn't overlap content box
     position: relative
     z-index: 2
-    margin: 0 auto
+    display: flex
+    flex-direction: column
+    justify-content: center
+    vertical-spacing(5vw)
 
     // We are manually using Elementor's entrance animations on this block so it is hidden by those classes
     // For some reason the animation doesn't trigger in the editor so the content remains hidden. Until I
     // figure out why that is, make it display in the editor...
-    .elementor-editor-active &
+    .elementor-editor-active &, .elementor-editor-preview &
       visibility: visible
 
     &-inner
+      constrain(padding-bottom, 2.5vw)
+      font-smoothing()
+      max-width: r(880px)
+      margin: 0 auto
       color: #fff
 
       +below(400px)
@@ -86,3 +95,11 @@ $breakpoint-hero = 1024px
       white-space: normal
     +below(450px)
       font-size: 20px
+
+    &-image
+      display: block
+      margin: 0 auto
+
+  &-cta
+    justify-content: center
+    margin-top: 2em